import { Head, Link, router } from '@inertiajs/react';
import { ArrowLeft, Pencil, Trash2 } from 'lucide-react';
import FixedAssetController from '@/actions/App/Http/Controllers/Admin/FixedAssetController';
import { ConfirmDialog } from '@/components/confirm-dialog';
import Heading from '@/components/heading';
import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { formatCurrency, formatDate } from '@/lib/utils';
import { dashboard } from '@/routes';
import { edit, index } from '@/routes/admin/fixed-assets';
import { FixedAssetStatusBadge } from './status-badge';

type Asset = {
    id: number;
    code: string;
    label: string;
    acquisition_date: string | null;
    acquisition_cost: string | number;
    residual_value: string | number;
    useful_life_months: number;
    depreciation_method_label: string;
    accumulated_depreciation: string | number;
    book_value: string;
    status: string;
    asset_account: { code: string; label: string } | null;
    depreciation_account: { code: string; label: string } | null;
    expense_account: { code: string; label: string } | null;
    supplier_invoice: {
        id: number;
        code: string;
        reference: string;
        amount: string | number;
    } | null;
    depreciations: Array<{
        id: number;
        period_year: number;
        period_month: number;
        amount: string | number;
        journal_entry: { reference: string } | null;
    }>;
};

export default function FixedAssetsShow({
    asset,
    can,
}: {
    asset: Asset;
    can: {
        update: boolean;
        delete: boolean;
        dispose: boolean;
    };
}) {
    return (
        <>
            <Head title={asset.code} />
            <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={asset.code} description={asset.label} />
                        <FixedAssetStatusBadge status={asset.status} />
                    </div>
                    <div className="flex flex-wrap gap-2">
                        {can.update && (
                            <Button variant="outline" asChild>
                                <Link href={edit.url(asset.id)}>
                                    <Pencil />
                                    Modifier
                                </Link>
                            </Button>
                        )}
                        {can.dispose && (
                            <ConfirmDialog
                                trigger={<Button variant="secondary">Céder</Button>}
                                title="Céder cette immobilisation ?"
                                confirmLabel="Confirmer"
                                onConfirm={() =>
                                    router.post(
                                        FixedAssetController.dispose.url(asset.id),
                                        {},
                                        { preserveScroll: true },
                                    )
                                }
                            />
                        )}
                        {can.delete && (
                            <ConfirmDialog
                                trigger={
                                    <Button variant="destructive">
                                        <Trash2 />
                                        Supprimer
                                    </Button>
                                }
                                title="Supprimer cette immobilisation ?"
                                confirmLabel="Supprimer"
                                onConfirm={() =>
                                    router.delete(
                                        FixedAssetController.destroy.url(asset.id),
                                    )
                                }
                            />
                        )}
                    </div>
                </div>

                <div className="grid gap-4 sm:grid-cols-3">
                    <Card>
                        <CardHeader className="pb-2">
                            <CardTitle className="text-sm font-normal text-muted-foreground">
                                Valeur d'acquisition
                            </CardTitle>
                        </CardHeader>
                        <CardContent className="text-2xl font-semibold">
                            {formatCurrency(asset.acquisition_cost)}
                        </CardContent>
                    </Card>
                    <Card>
                        <CardHeader className="pb-2">
                            <CardTitle className="text-sm font-normal text-muted-foreground">
                                Amortissements cumulés
                            </CardTitle>
                        </CardHeader>
                        <CardContent className="text-2xl font-semibold">
                            {formatCurrency(asset.accumulated_depreciation)}
                        </CardContent>
                    </Card>
                    <Card>
                        <CardHeader className="pb-2">
                            <CardTitle className="text-sm font-normal text-muted-foreground">
                                Valeur nette comptable
                            </CardTitle>
                        </CardHeader>
                        <CardContent className="text-2xl font-semibold">
                            {formatCurrency(asset.book_value)}
                        </CardContent>
                    </Card>
                </div>

                <Card>
                    <CardHeader>
                        <CardTitle>Informations</CardTitle>
                    </CardHeader>
                    <CardContent className="grid gap-2 text-sm sm:grid-cols-2">
                        <p>
                            <span className="text-muted-foreground">Acquisition :</span>{' '}
                            {formatDate(asset.acquisition_date)}
                        </p>
                        <p>
                            <span className="text-muted-foreground">Méthode :</span>{' '}
                            {asset.depreciation_method_label}
                        </p>
                        <p>
                            <span className="text-muted-foreground">Durée :</span>{' '}
                            {asset.useful_life_months} mois
                        </p>
                        <p>
                            <span className="text-muted-foreground">Compte immo. :</span>{' '}
                            {asset.asset_account?.code} — {asset.asset_account?.label}
                        </p>
                        {asset.supplier_invoice && (
                            <p className="sm:col-span-2">
                                <span className="text-muted-foreground">
                                    Facture fournisseur :
                                </span>{' '}
                                {asset.supplier_invoice.code} —{' '}
                                {asset.supplier_invoice.reference} (
                                {formatCurrency(asset.supplier_invoice.amount)})
                            </p>
                        )}
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader>
                        <CardTitle>Historique des amortissements</CardTitle>
                    </CardHeader>
                    <CardContent>
                        {asset.depreciations.length === 0 ? (
                            <p className="text-sm text-muted-foreground">
                                Aucun amortissement enregistré.
                            </p>
                        ) : (
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>Période</TableHead>
                                        <TableHead>Écriture</TableHead>
                                        <TableHead className="text-right">Montant</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {asset.depreciations.map((row) => (
                                        <TableRow key={row.id}>
                                            <TableCell>
                                                {String(row.period_month).padStart(2, '0')}/
                                                {row.period_year}
                                            </TableCell>
                                            <TableCell className="font-mono text-sm">
                                                {row.journal_entry?.reference ?? '—'}
                                            </TableCell>
                                            <TableCell className="text-right tabular-nums">
                                                {formatCurrency(row.amount)}
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        )}
                    </CardContent>
                </Card>
            </div>
        </>
    );
}

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