import { Head, Link } from '@inertiajs/react';
import { Plus, Wallet } from 'lucide-react';
import { useMemo } from 'react';
import {
    AppPage,
    AppPageActions,
    AppPageHeader,
    AppPageTitleBlock,
    appCardAccentClass,
} from '@/components/app-page';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { MyInvestmentsTable } from '@/pages/investments/components/my-investments-table';
import type { UserPortfolioInvestment } from '@/pages/investments/types-user-portfolio';
import { formatCurrency } from '@/pages/investments/utils';
import { dashboard } from '@/routes';

type Props = {
    investments: UserPortfolioInvestment[];
    balance_total: string;
    invested_active_total: string;
    withdrawable_total: string;
    invested_pending_total: string;
    invested_any: boolean;
};

export default function MyInvestmentsPage({
    investments,
    balance_total,
    invested_active_total,
    withdrawable_total,
    invested_pending_total,
    invested_any,
}: Props) {
    const formattedBalanceTotal = useMemo(
        () => formatCurrency(Number(balance_total)),
        [balance_total],
    );
    const formattedActive = useMemo(
        () => formatCurrency(Number(invested_active_total)),
        [invested_active_total],
    );
    const formattedWithdrawable = useMemo(
        () => formatCurrency(Number(withdrawable_total)),
        [withdrawable_total],
    );
    const formattedPending = useMemo(
        () => formatCurrency(Number(invested_pending_total)),
        [invested_pending_total],
    );

    return (
        <>
            <Head title="Mis inversiones" />

            <AppPage>
                <AppPageHeader>
                <AppPageTitleBlock
                    title="Mis inversiones"
                    description="Las ganancias se acreditan cada día sobre tu principal pactado; el principal permanece bloqueado hasta el vencimiento."
                />
                    <AppPageActions>
                        <Button asChild>
                            <Link href="/invertir">
                                <Plus />
                                Nueva inversión
                            </Link>
                        </Button>
                    </AppPageActions>
                </AppPageHeader>

                <Card className={appCardAccentClass}>
                    <CardContent className="space-y-4 p-6">
                        <h2 className="flex items-center gap-2 text-xl font-bold">
                            <Wallet className="size-5" />
                            Resumen rápido
                        </h2>
                        <div className="grid gap-4 sm:grid-cols-3">
                            <div className="rounded-xl bg-background p-4 text-center">
                                <p className="text-sm text-muted-foreground">Balance total</p>
                                <p className="mt-1 text-lg font-semibold tabular-nums text-foreground">
                                    ${formattedBalanceTotal}
                                </p>
                                <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
                                    Inversiones: ${formattedActive} | disponible para retiro: $
                                    {formattedWithdrawable}
                                </p>
                            </div>
                            <PortfolioMetric
                                highlight="warning"
                                label="Pendientes de confirmación"
                                value={formattedPending}
                            />
                            <PortfolioMetric
                                label="Registros"
                                value={String(investments.length)}
                            />
                        </div>
                    </CardContent>
                </Card>

                <Card>
                    <CardContent className="space-y-6 p-6">
                        <h2 className="sr-only">Listado detallado</h2>

                        {!invested_any || investments.length === 0 ? (
                            <div className="flex flex-col items-center justify-center gap-4 py-10 text-center">
                                <p className="text-muted-foreground">
                                    Aún no tienes inversiones registradas.
                                </p>
                                <Button asChild>
                                    <Link href="/invertir">
                                        <Plus />
                                        Crear tu primera inversión
                                    </Link>
                                </Button>
                            </div>
                        ) : (
                            <MyInvestmentsTable investments={investments} />
                        )}
                    </CardContent>
                </Card>
            </AppPage>
        </>
    );
}

function PortfolioMetric({
    label,
    value,
    highlight,
}: {
    label: string;
    value: string;
    highlight?: 'warning';
}) {
    const valueClass =
        highlight === 'warning' ? 'text-primary' : 'text-foreground';

    return (
        <div className="rounded-xl bg-background p-4 text-center">
            <p className="text-sm text-muted-foreground">{label}</p>
            <p className={`mt-1 text-lg font-semibold tabular-nums ${valueClass}`}>{value}</p>
        </div>
    );
}

MyInvestmentsPage.layout = {
    breadcrumbs: [
        { title: 'Inicio', href: dashboard() },
        { title: 'Mis inversiones', href: '/mis-inversiones' },
    ],
};
