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

type Row = {
    id: number;
    txid: string;
    principal_usd: string;
    capital_usd: string;
    months_progress: string;
    plan_percent: string;
    investor_email: string | null | undefined;
    investor_name: string;
    investor_id: number;
};

type Props = {
    summary: {
        active_count: number;
        total_capital_usd: string;
    };
    rows: Row[];
};

export default function InvestmentBalances({ summary, rows }: Props) {
    return (
        <>
            <Head title="Balances de inversiones" />

            <div className="mx-auto max-w-6xl space-y-8">
                <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
                    <div>
                        <h1 className="text-3xl font-bold tracking-tight">
                            Balances
                        </h1>
                        <p className="text-muted-foreground">
                            Capital vigente por inversión activa confirmada en la red.
                        </p>
                    </div>
                    <Link
                        className="text-sm text-muted-foreground underline underline-offset-4 hover:text-primary"
                        href="/admin/inversiones"
                    >
                        ← Gestión de inversiones
                    </Link>
                </div>

                <div className="grid gap-4 sm:grid-cols-2">
                    <Card>
                        <CardHeader className="pb-2">
                            <CardDescription>Inversiones activas</CardDescription>
                            <CardTitle className="text-3xl tabular-nums">
                                {summary.active_count}
                            </CardTitle>
                        </CardHeader>
                    </Card>
                    <Card className="border-primary/35 bg-primary/10">
                        <CardHeader className="pb-2">
                            <CardDescription>Capital total vigente (US$)</CardDescription>
                            <CardTitle className="text-3xl tabular-nums text-primary">
                                {summary.total_capital_usd}
                            </CardTitle>
                        </CardHeader>
                    </Card>
                </div>

                <Card>
                    <CardHeader>
                        <CardTitle>Detalle por TXID</CardTitle>
                        <CardDescription>
                            Usa estos saldos antes de aplicar retiros administrativos o al
                            aprobar solicitudes.
                        </CardDescription>
                    </CardHeader>
                    <CardContent className="overflow-x-auto p-0">
                        {rows.length === 0 ? (
                            <p className="p-10 text-center text-sm text-muted-foreground">
                                No hay inversiones activas registradas.
                            </p>
                        ) : (
                            <table className="w-full min-w-[760px] 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">TXID</th>
                                        <th className="px-4 py-3 font-medium tabular-nums">
                                            Principal
                                        </th>
                                        <th className="px-4 py-3 font-medium tabular-nums text-primary">
                                            Capital vigente
                                        </th>
                                        <th className="px-4 py-3 font-medium">Cupos</th>
                                        <th className="px-4 py-3 font-medium tabular-nums">
                                            Plan %
                                        </th>
                                    </tr>
                                </thead>
                                <tbody className="divide-y">
                                    {rows.map((row) => (
                                        <tr key={row.id}>
                                            <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 wrap-break-word max-w-[9rem]">
                                                {row.txid}
                                            </td>
                                            <td className="px-4 py-3 tabular-nums">
                                                {row.principal_usd}
                                            </td>
                                            <td className="px-4 py-3 tabular-nums font-semibold text-primary">
                                                {row.capital_usd}
                                            </td>
                                            <td className="px-4 py-3 tabular-nums text-muted-foreground">
                                                {row.months_progress}
                                            </td>
                                            <td className="px-4 py-3 tabular-nums">
                                                {row.plan_percent}%
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        )}
                    </CardContent>
                </Card>
            </div>
        </>
    );
}

InvestmentBalances.layout = {
    breadcrumbs: [
        { title: 'Administración', href: '/admin' },
        { title: 'Balances', href: '/admin/balances' },
    ],
};
