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

type PendingRow = {
    user_id: number;
    name: string;
    email: string;
    submitted_at: string | null;
};

type Props = {
    pending: PendingRow[];
};

export default function AdminKycReview({ pending }: Props) {
    return (
        <>
            <Head title="Verificación de identidad" />

            <div className="space-y-6">
                <div className="flex flex-wrap items-end justify-between gap-4">
                    <div className="flex items-start gap-3">
                        <ClipboardList aria-hidden className="mt-1 size-7 text-muted-foreground" />
                        <div>
                            <h1 className="text-3xl font-bold tracking-tight">
                                Verificación de identidad
                            </h1>
                            <p className="mt-2 text-muted-foreground text-sm">
                                Solicitudes pendientes de revisión. Abra cada expediente para revisar datos
                                y evidencias antes de aprobar o rechazar.
                            </p>
                        </div>
                    </div>
                </div>

                <Card>
                    <CardHeader>
                        <CardTitle>
                            Solicitudes pendientes{' '}
                            <span className="text-muted-foreground">({pending.length})</span>
                        </CardTitle>
                        <CardDescription>
                            Sólo se listan inversionistas con estado «en revisión» y sin privilegios de
                            administración.
                        </CardDescription>
                    </CardHeader>
                    <CardContent className="p-0">
                        {pending.length === 0 ? (
                            <p className="p-8 text-center text-muted-foreground text-sm">
                                No hay verificaciones en cola por ahora.
                            </p>
                        ) : (
                            <div className="overflow-x-auto">
                                <table className="w-full text-left text-sm">
                                    <thead>
                                        <tr className="border-b bg-muted/40 text-muted-foreground">
                                            <th className="px-4 py-3 font-medium">Inversionista</th>
                                            <th className="px-4 py-3 font-medium whitespace-nowrap">Enviado</th>
                                            <th className="px-4 py-3 font-medium">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody className="divide-y">
                                        {pending.map((row) => (
                                            <tr key={row.user_id} className="align-top">
                                                <td className="px-4 py-3">
                                                    <div className="font-medium">{row.name}</div>
                                                    <div className="text-muted-foreground text-xs">{row.email}</div>
                                                </td>
                                                <td className="whitespace-nowrap px-4 py-3 text-muted-foreground text-xs">
                                                    {row.submitted_at
                                                        ? new Date(row.submitted_at).toLocaleString('es', {
                                                              dateStyle: 'short',
                                                              timeStyle: 'short',
                                                          })
                                                        : '—'}
                                                </td>
                                                <td className="px-4 py-3">
                                                    <Link
                                                        className="font-medium text-primary underline-offset-4 hover:underline"
                                                        href={`/admin/verificacion-kyc/usuarios/${row.user_id}`}
                                                        prefetch
                                                        preserveScroll
                                                    >
                                                        Revisar expediente
                                                    </Link>
                                                </td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        )}
                    </CardContent>
                </Card>
            </div>
        </>
    );
}

AdminKycReview.layout = {
    breadcrumbs: [
        { title: 'Administración', href: '/admin' },
        { title: 'Verificación de identidad', href: '/admin/verificacion-kyc' },
    ],
};
