import { Head, router } from '@inertiajs/react';
import { Download } from 'lucide-react';
import Heading from '@/components/heading';
import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { formatCurrency } from '@/lib/utils';
import { dashboard } from '@/routes';
import { exportMethod, index } from '@/routes/admin/tax-reports';

type VatSummary = {
    period: { from: string; to: string; fiscal_year: number };
    vat_collected: string;
    vat_deductible: string;
    vat_net: string;
    sales_base_ht: string;
    purchases_base_ht: string;
    lines: Array<{
        code: string;
        label: string;
        debit: string;
        credit: string;
        balance: string;
    }>;
};

export default function TaxReportsIndex({
    summary,
    fiscalYear,
    can,
}: {
    summary: VatSummary;
    fiscalYear: number;
    can: { export: boolean };
}) {
    function changeYear(year: number) {
        router.get(index.url(), { fiscal_year: year }, { preserveState: true });
    }

    return (
        <>
            <Head title="Rapports fiscaux" />
            <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">
                    <Heading
                        title="Rapports fiscaux"
                        description="Récapitulatif TVA et export FEC strict (format DGFiP)"
                    />
                    {can.export && (
                        <Button asChild>
                            <a
                                href={exportMethod.url({
                                    query: { fiscal_year: fiscalYear },
                                })}
                            >
                                <Download />
                                Exporter le FEC
                            </a>
                        </Button>
                    )}
                </div>

                <div className="flex items-end gap-4">
                    <div className="grid gap-2">
                        <Label htmlFor="fiscal-year">Exercice</Label>
                        <Input
                            id="fiscal-year"
                            type="number"
                            className="w-32"
                            value={fiscalYear}
                            onChange={(e) => changeYear(Number(e.target.value))}
                        />
                    </div>
                </div>

                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    <Card>
                        <CardHeader className="pb-2">
                            <CardDescription>TVA collectée</CardDescription>
                            <CardTitle>{formatCurrency(summary.vat_collected)}</CardTitle>
                        </CardHeader>
                    </Card>
                    <Card>
                        <CardHeader className="pb-2">
                            <CardDescription>TVA déductible</CardDescription>
                            <CardTitle>{formatCurrency(summary.vat_deductible)}</CardTitle>
                        </CardHeader>
                    </Card>
                    <Card>
                        <CardHeader className="pb-2">
                            <CardDescription>TVA nette due</CardDescription>
                            <CardTitle>{formatCurrency(summary.vat_net)}</CardTitle>
                        </CardHeader>
                    </Card>
                    <Card>
                        <CardHeader className="pb-2">
                            <CardDescription>Base HT ventes</CardDescription>
                            <CardTitle>{formatCurrency(summary.sales_base_ht)}</CardTitle>
                        </CardHeader>
                    </Card>
                    <Card>
                        <CardHeader className="pb-2">
                            <CardDescription>Base HT achats</CardDescription>
                            <CardTitle>{formatCurrency(summary.purchases_base_ht)}</CardTitle>
                        </CardHeader>
                    </Card>
                </div>

                <Card>
                    <CardHeader>
                        <CardTitle>Détail des comptes fiscaux</CardTitle>
                        <CardDescription>
                            Écritures comptabilisées du {summary.period.from} au{' '}
                            {summary.period.to}
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        <Table>
                            <TableHeader>
                                <TableRow>
                                    <TableHead>Compte</TableHead>
                                    <TableHead className="text-right">Débit</TableHead>
                                    <TableHead className="text-right">Crédit</TableHead>
                                    <TableHead className="text-right">Solde</TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {summary.lines.map((line) => (
                                    <TableRow key={line.code}>
                                        <TableCell>
                                            <span className="font-mono">{line.code}</span> —{' '}
                                            {line.label}
                                        </TableCell>
                                        <TableCell className="text-right tabular-nums">
                                            {formatCurrency(line.debit)}
                                        </TableCell>
                                        <TableCell className="text-right tabular-nums">
                                            {formatCurrency(line.credit)}
                                        </TableCell>
                                        <TableCell className="text-right tabular-nums font-medium">
                                            {formatCurrency(line.balance)}
                                        </TableCell>
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </CardContent>
                </Card>
            </div>
        </>
    );
}

TaxReportsIndex.layout = {
    breadcrumbs: [
        { title: 'Tableau de bord', href: dashboard() },
        { title: 'Rapports fiscaux', href: index() },
    ],
};
