import { Head, Link } from '@inertiajs/react';
import { ArrowRightCircle, Landmark, Layers, PieChart, Users } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

type Metrics = {
    investors_registered: number;
    admins_registered: number;
    kyc_pending_review: number;
    kyc_requires_submission: number;
    investments_pending_confirm: number;
    active_investments: number;
    capital_usd_active_total: number;
    withdrawals_pending_approval: number;
};

type Props = {
    metrics: Metrics;
};

function StatCard({
    title,
    value,
    subtitle,
}: {
    title: string;
    value: React.ReactNode;
    subtitle?: string;
}) {
    return (
        <Card>
            <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium text-muted-foreground">
                    {title}
                </CardTitle>
            </CardHeader>
            <CardContent className="space-y-1">
                <p className="text-3xl font-semibold tracking-tight tabular-nums">
                    {value}
                </p>
                {subtitle ? (
                    <p className="text-muted-foreground text-xs">{subtitle}</p>
                ) : null}
            </CardContent>
        </Card>
    );
}

export default function AdminDashboard({ metrics }: Props) {
    const capitalIntl = metrics.capital_usd_active_total.toLocaleString('es-ES', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
    });

    return (
        <>
            <Head title="Panel administrativo" />

            <div className="space-y-8">
                <div>
                    <h1 className="text-3xl font-bold tracking-tight">
                        Panel administrativo
                    </h1>
                    <p className="text-muted-foreground mt-1 text-sm">
                        Resumen operativo — usuarios, KYC y actividad de inversiones para priorizar trabajo.
                    </p>
                </div>

                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    <StatCard
                        title="Inversionistas"
                        subtitle="Cuentas no administrativas registradas."
                        value={metrics.investors_registered}
                    />
                    <StatCard
                        title="KYC pendiente de revisión"
                        subtitle="Expedientes listos para el equipo."
                        value={
                            <span className="flex flex-wrap items-baseline gap-2">
                                {metrics.kyc_pending_review}
                                {metrics.kyc_pending_review > 0 ? (
                                    <Badge variant="secondary" className="font-normal">
                                        Atención requerida
                                    </Badge>
                                ) : null}
                            </span>
                        }
                    />
                    <StatCard
                        title="KYC sin enviar"
                        subtitle="Han verificado correo pero aún sin formulario enviado."
                        value={metrics.kyc_requires_submission}
                    />
                    <StatCard
                        title="Capital activo estimado"
                        subtitle="Suma ponderada USD (capital en curso según libro activo)."
                        value={`$ ${capitalIntl}`}
                    />
                </div>

                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    <StatCard
                        title="Administradores del sistema"
                        value={metrics.admins_registered}
                    />
                    <StatCard
                        title="Inversiones pendientes de confirmación"
                        value={metrics.investments_pending_confirm}
                        subtitle="Depósitos esperando alta operadora."
                    />
                    <StatCard
                        title="Inversiones activas"
                        value={metrics.active_investments}
                    />
                    <StatCard
                        title="Retiros por aprobar"
                        value={
                            <span className="flex flex-wrap items-baseline gap-2">
                                {metrics.withdrawals_pending_approval}
                                {metrics.withdrawals_pending_approval > 0 ? (
                                    <Badge variant="secondary" className="font-normal">
                                        Cola solicitudes
                                    </Badge>
                                ) : null}
                            </span>
                        }
                        subtitle="Solicitudes de retiro al balance del inversionista."
                    />
                </div>

                <Card>
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2 text-base">
                            <Layers className="size-5 text-muted-foreground" />
                            Accesos rápidos
                        </CardTitle>
                    </CardHeader>
                    <CardContent className="flex flex-wrap gap-2">
                        <Button variant="outline" size="sm" asChild>
                            <Link
                                href="/admin/verificacion-kyc"
                                prefetch
                                className="gap-2"
                            >
                                <Users className="size-4" />
                                Identidad pendiente de revisión
                                <ArrowRightCircle className="size-4" />
                            </Link>
                        </Button>
                        <Button variant="outline" size="sm" asChild>
                            <Link
                                href="/admin/inversiones"
                                prefetch
                                className="gap-2"
                            >
                                <PieChart className="size-4" />
                                Inversiones
                                <ArrowRightCircle className="size-4" />
                            </Link>
                        </Button>
                        <Button variant="outline" size="sm" asChild>
                            <Link
                                href="/admin/retiros/solicitudes"
                                prefetch
                                className="gap-2"
                            >
                                <Landmark className="size-4" />
                                Retiros
                                <ArrowRightCircle className="size-4" />
                            </Link>
                        </Button>
                    </CardContent>
                </Card>
            </div>
        </>
    );
}
