import { Head, Link, router } from '@inertiajs/react';
import { AlertTriangle, ArrowLeft, Pencil, Trash2 } from 'lucide-react';
import BudgetController from '@/actions/App/Http/Controllers/Admin/BudgetController';
import { ConfirmDialog } from '@/components/confirm-dialog';
import Heading from '@/components/heading';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { formatCurrency } from '@/lib/utils';
import { dashboard } from '@/routes';
import { edit, index } from '@/routes/admin/budgets';
import { BudgetStatusBadge } from './status-badge';

type VarianceLine = {
    id: number;
    account: { id: number; code: string; label: string };
    planned_amount: string;
    actual_amount: string;
    variance: string;
    usage_percent: number | null;
    is_over_budget: boolean;
};

type Variance = {
    budget: {
        id: number;
        fiscal_year: number;
        label: string;
        status: string;
        department: { id: number; code: string; name: string };
    };
    totals: {
        planned: string;
        actual: string;
        variance: string;
        usage_percent: number | null;
    };
    lines: VarianceLine[];
    alerts: Array<{
        account_code: string;
        account_label: string;
        planned: string;
        actual: string;
        overrun: string;
    }>;
};

export default function BudgetsShow({
    variance,
    can,
}: {
    variance: Variance;
    can: {
        update: boolean;
        delete: boolean;
        activate: boolean;
        close: boolean;
    };
}) {
    const { budget, totals, lines, alerts } = variance;

    return (
        <>
            <Head title={budget.label} />
            <div className="flex h-full flex-1 flex-col gap-6 p-4 md:p-6">
                <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                    <div className="space-y-2">
                        <Button variant="ghost" size="sm" asChild className="-ml-2 w-fit">
                            <Link href={index.url()}>
                                <ArrowLeft />
                                Retour
                            </Link>
                        </Button>
                        <Heading
                            title={budget.label}
                            description={`${budget.department.name} · Exercice ${budget.fiscal_year}`}
                        />
                        <BudgetStatusBadge status={budget.status} />
                    </div>
                    <div className="flex flex-wrap gap-2">
                        {can.update && (
                            <Button variant="outline" asChild>
                                <Link href={edit.url(budget.id)}>
                                    <Pencil />
                                    Modifier
                                </Link>
                            </Button>
                        )}
                        {can.activate && (
                            <Button
                                onClick={() =>
                                    router.post(
                                        BudgetController.activate.url(budget.id),
                                        {},
                                        { preserveScroll: true },
                                    )
                                }
                            >
                                Activer
                            </Button>
                        )}
                        {can.close && (
                            <Button
                                variant="secondary"
                                onClick={() =>
                                    router.post(
                                        BudgetController.close.url(budget.id),
                                        {},
                                        { preserveScroll: true },
                                    )
                                }
                            >
                                Clôturer
                            </Button>
                        )}
                        {can.delete && (
                            <ConfirmDialog
                                trigger={
                                    <Button variant="destructive">
                                        <Trash2 />
                                        Supprimer
                                    </Button>
                                }
                                title="Supprimer ce budget ?"
                                confirmLabel="Supprimer"
                                onConfirm={() =>
                                    router.delete(
                                        BudgetController.destroy.url(budget.id),
                                    )
                                }
                            />
                        )}
                    </div>
                </div>

                {alerts.length > 0 && (
                    <Alert variant="destructive">
                        <AlertTriangle />
                        <AlertTitle>Dépassements budgétaires</AlertTitle>
                        <AlertDescription>
                            {alerts.length} compte(s) dépassent le montant prévu.
                        </AlertDescription>
                    </Alert>
                )}

                <div className="grid gap-4 sm:grid-cols-3">
                    <Card>
                        <CardHeader className="pb-2">
                            <CardDescription>Prévu</CardDescription>
                            <CardTitle className="text-2xl">
                                {formatCurrency(totals.planned)}
                            </CardTitle>
                        </CardHeader>
                    </Card>
                    <Card>
                        <CardHeader className="pb-2">
                            <CardDescription>Réalisé</CardDescription>
                            <CardTitle className="text-2xl">
                                {formatCurrency(totals.actual)}
                            </CardTitle>
                        </CardHeader>
                    </Card>
                    <Card>
                        <CardHeader className="pb-2">
                            <CardDescription>Écart / Consommation</CardDescription>
                            <CardTitle className="text-2xl">
                                {formatCurrency(totals.variance)}
                                {totals.usage_percent !== null && (
                                    <span className="ml-2 text-base font-normal text-muted-foreground">
                                        ({totals.usage_percent} %)
                                    </span>
                                )}
                            </CardTitle>
                        </CardHeader>
                    </Card>
                </div>

                <Card>
                    <CardHeader>
                        <CardTitle>Suivi par compte</CardTitle>
                        <CardDescription>
                            Réalisé calculé depuis les écritures comptabilisées
                            ventilées par centre de coût du service.
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        <Table>
                            <TableHeader>
                                <TableRow>
                                    <TableHead>Compte</TableHead>
                                    <TableHead className="text-right">Prévu</TableHead>
                                    <TableHead className="text-right">Réalisé</TableHead>
                                    <TableHead className="text-right">Écart</TableHead>
                                    <TableHead className="text-right">%</TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {lines.map((line) => (
                                    <TableRow key={line.id}>
                                        <TableCell>
                                            <span className="font-mono text-sm">
                                                {line.account.code}
                                            </span>{' '}
                                            — {line.account.label}
                                            {line.is_over_budget && (
                                                <Badge
                                                    variant="destructive"
                                                    className="ml-2"
                                                >
                                                    Dépassement
                                                </Badge>
                                            )}
                                        </TableCell>
                                        <TableCell className="text-right tabular-nums">
                                            {formatCurrency(line.planned_amount)}
                                        </TableCell>
                                        <TableCell className="text-right tabular-nums">
                                            {formatCurrency(line.actual_amount)}
                                        </TableCell>
                                        <TableCell className="text-right tabular-nums">
                                            {formatCurrency(line.variance)}
                                        </TableCell>
                                        <TableCell className="text-right tabular-nums">
                                            {line.usage_percent !== null
                                                ? `${line.usage_percent} %`
                                                : '—'}
                                        </TableCell>
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </CardContent>
                </Card>
            </div>
        </>
    );
}

BudgetsShow.layout = {
    breadcrumbs: [
        { title: 'Tableau de bord', href: dashboard() },
        { title: 'Budgets', href: index() },
        { title: 'Détail', href: '#' },
    ],
};