import { Head, Link } from '@inertiajs/react';
import { ChevronLeft } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import AdminLayout from '@/layouts/admin-layout';
import { type Customer } from '@/types';

export default function AdminCustomerShow({ customer }: { customer: Customer }) {
    return (
        <AdminLayout title={customer.name}>
            <Head title={customer.name} />
            <div className="mb-4">
                <Button variant="ghost" size="sm" onClick={() => history.back()}><ChevronLeft size={16} /> Back</Button>
            </div>

            <div className="grid gap-4 lg:grid-cols-3">
                <div className="space-y-4">
                    <Card>
                        <CardHeader><CardTitle className="text-base">Customer Info</CardTitle></CardHeader>
                        <CardContent className="space-y-2 text-sm">
                            {[
                                ['Name', customer.name],
                                ['Phone', customer.phone],
                                ['Alt Phone', customer.alt_phone ?? '—'],
                                ['Email', customer.email ?? '—'],
                                ['Total Orders', customer.total_orders],
                                ['Total Spent', `৳${Number(customer.total_spent).toLocaleString()}`],
                                ['Status', customer.is_blocked ? '🚫 Blocked' : '✅ Active'],
                            ].map(([label, val]) => (
                                <div key={String(label)} className="flex justify-between border-b pb-1 last:border-0">
                                    <span className="text-slate-500">{label}</span>
                                    <span className="font-medium">{val}</span>
                                </div>
                            ))}
                        </CardContent>
                    </Card>
                </div>

                <div className="lg:col-span-2">
                    <Card>
                        <CardHeader><CardTitle className="text-base">Recent Orders</CardTitle></CardHeader>
                        <CardContent className="p-0">
                            <table className="w-full text-sm">
                                <thead className="border-b bg-slate-50 text-xs uppercase text-slate-500">
                                    <tr>
                                        <th className="px-4 py-2 text-left">Invoice</th>
                                        <th className="px-4 py-2 text-right">Amount</th>
                                        <th className="px-4 py-2 text-center">Status</th>
                                        <th className="px-4 py-2 text-left">Date</th>
                                    </tr>
                                </thead>
                                <tbody className="divide-y">
                                    {customer.orders?.map((order) => (
                                        <tr key={order.id}>
                                            <td className="px-4 py-2">
                                                <Link href={`/admin/orders/${order.id}`} className="font-mono text-xs text-indigo-600 hover:underline">{order.invoice_no}</Link>
                                            </td>
                                            <td className="px-4 py-2 text-right font-medium">৳{Number(order.total_amount).toLocaleString()}</td>
                                            <td className="px-4 py-2 text-center">
                                                <span className="rounded-full bg-slate-100 px-2 py-0.5 text-xs capitalize">{order.order_status}</span>
                                            </td>
                                            <td className="px-4 py-2 text-xs text-slate-500">{new Date(order.created_at).toLocaleDateString('en-BD')}</td>
                                        </tr>
                                    ))}
                                    {!customer.orders?.length && <tr><td colSpan={4} className="px-4 py-6 text-center text-slate-400">No orders</td></tr>}
                                </tbody>
                            </table>
                        </CardContent>
                    </Card>
                </div>
            </div>
        </AdminLayout>
    );
}
