import { Head, Link } from '@inertiajs/react';
import { History } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';

type Row = {
    id: number;
    created_at: string | null;
    amount_usd: string;
    balance_after_usd: string;
    txid: string;
    investor_email: string | null | undefined;
    investor_name: string;
    via_request_id: number | null;
    via_request_status: string | null;
};

type Props = {
    rows: Row[];
};

export default function WithdrawalHistory({ rows }: Props) {
    return (
        <>
            <Head title="Historial de retiros" />

            <div className="mx-auto max-w-6xl space-y-8">
                <div className="flex flex-wrap items-end justify-between gap-4">
                    <div>
                        <h1 className="text-3xl font-bold tracking-tight">
                            Historial de retiros
                        </h1>
                        <p className="mt-2 text-muted-foreground">
                            Retiros ya registrados en el ledger (capital descontado).
                        </p>
                    </div>
                    <div className="flex flex-wrap gap-2">
                        <Link
                            className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium hover:bg-muted"
                            href="/admin/retiros/solicitudes"
                        >
                            <History className="size-4" />
                            Solicitudes
                        </Link>
                        <Link
                            className="inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium hover:bg-muted"
                            href="/admin/balances"
                        >
                            Balances
                        </Link>
                    </div>
                </div>

                <Card>
                    <CardHeader>
                        <CardTitle>Ejecutados</CardTitle>
                        <CardDescription>
                            Incluye retiros directos desde administración y los tramitados vía solicitud del inversor.
                        </CardDescription>
                    </CardHeader>
                    <CardContent className="overflow-x-auto p-0">
                        {rows.length === 0 ? (
                            <p className="p-10 text-center text-sm text-muted-foreground">
                                Aún no hay retiros ejecutados registrados en el libro.
                            </p>
                        ) : (
                            <table className="w-full min-w-[820px] text-left text-sm">
                                <thead>
                                    <tr className="border-b bg-muted/40 text-muted-foreground">
                                        <th className="px-4 py-3 font-medium">Fecha</th>
                                        <th className="px-4 py-3 font-medium">Origen solicitud</th>
                                        <th className="px-4 py-3 font-medium">Inversionista</th>
                                        <th className="px-4 py-3 font-medium">TXID</th>
                                        <th className="px-4 py-3 font-medium tabular-nums">
                                            Monto US$
                                        </th>
                                        <th className="px-4 py-3 font-medium tabular-nums">
                                            Capital tras mov.
                                        </th>
                                    </tr>
                                </thead>
                                <tbody className="divide-y">
                                    {rows.map((row) => (
                                        <tr key={row.id}>
                                            <td className="whitespace-nowrap px-4 py-3 text-xs text-muted-foreground">
                                                {row.created_at
                                                    ? new Date(row.created_at).toLocaleString('es', {
                                                          dateStyle: 'short',
                                                          timeStyle: 'short',
                                                      })
                                                    : '—'}
                                            </td>
                                            <td className="px-4 py-3">
                                                {row.via_request_id ? (
                                                    <Badge className="text-xs" variant="outline">
                                                        Solicitud #{row.via_request_id}
                                                        {row.via_request_status
                                                            ? ` · ${row.via_request_status}`
                                                            : ''}
                                                    </Badge>
                                                ) : (
                                                    <Badge className="text-xs" variant="secondary">
                                                        Manual
                                                    </Badge>
                                                )}
                                            </td>
                                            <td className="px-4 py-3">
                                                <div className="font-medium">{row.investor_name}</div>
                                                <div className="text-xs text-muted-foreground">
                                                    {row.investor_email}
                                                </div>
                                            </td>
                                            <td className="px-4 py-3 font-mono text-xs">{row.txid}</td>
                                            <td className="px-4 py-3 tabular-nums font-medium text-primary">
                                                {row.amount_usd}
                                            </td>
                                            <td className="px-4 py-3 tabular-nums">
                                                {row.balance_after_usd}
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        )}
                    </CardContent>
                </Card>
            </div>
        </>
    );
}

WithdrawalHistory.layout = {
    breadcrumbs: [
        { title: 'Administración', href: '/admin' },
        { title: 'Historial de retiros', href: '/admin/retiros/historial' },
    ],
};
