import { Head, Link } from '@inertiajs/react';
import { ArrowLeft, History, Package } from 'lucide-react';
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 { formatDate } from '@/lib/utils';
import { dashboard } from '@/routes';
import { index as stockReturnsIndex } from '@/routes/admin/stock-returns';
import { index as stockMovementsIndex } from '@/routes/admin/stock-movements';

type ReturnLine = {
    id: number;
    product: { id: number; code: string; name: string } | null;
    quantity: number;
};

type StockReturn = {
    id: number;
    code: string;
    type: string;
    type_label: string;
    returned_at: string | null;
    motif: string;
    notes: string | null;
    created_at: string | null;
    warehouse: { id: number; code: string; name: string };
    creator: { id: number; name: string } | null;
    lines: ReturnLine[];
    lines_count: number;
    lines_quantity: number;
};

export default function StockReturnsShow({
    return: stockReturn,
}: {
    return: StockReturn;
}) {
    return (
        <>
            <Head title={stockReturn.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-start sm:justify-between">
                    <div className="space-y-2">
                        <div className="flex flex-wrap items-center gap-2">
                            <h1 className="font-mono text-xl font-semibold tracking-tight">
                                {stockReturn.code}
                            </h1>
                            <Badge variant="secondary">
                                {stockReturn.type_label}
                            </Badge>
                        </div>
                        <p className="text-muted-foreground text-sm">
                            {formatDate(stockReturn.returned_at)}
                            <span className="mx-1.5">·</span>
                            {stockReturn.warehouse.name}
                        </p>
                    </div>
                    <div className="flex flex-wrap gap-2">
                        <Button variant="outline" asChild>
                            <Link href={stockMovementsIndex.url()}>
                                <History />
                                Historique des mouvements
                            </Link>
                        </Button>
                        <Button variant="outline" asChild>
                            <Link href={stockReturnsIndex.url()}>
                                <ArrowLeft />
                                Retour
                            </Link>
                        </Button>
                    </div>
                </div>

                <div className="grid gap-4 sm:grid-cols-3">
                    <Card>
                        <CardHeader className="pb-2">
                            <CardDescription>Produits</CardDescription>
                            <CardTitle className="text-2xl tabular-nums">
                                {stockReturn.lines_count}
                            </CardTitle>
                        </CardHeader>
                    </Card>
                    <Card>
                        <CardHeader className="pb-2">
                            <CardDescription>
                                Unités retournées
                            </CardDescription>
                            <CardTitle className="flex items-center gap-2 text-2xl tabular-nums">
                                <Package className="size-5 text-muted-foreground" />
                                {stockReturn.lines_quantity}
                            </CardTitle>
                        </CardHeader>
                    </Card>
                    <Card>
                        <CardHeader className="pb-2">
                            <CardDescription>Type</CardDescription>
                            <CardTitle className="text-lg">
                                {stockReturn.type_label}
                            </CardTitle>
                        </CardHeader>
                    </Card>
                </div>

                <Card>
                    <CardHeader>
                        <CardTitle>Informations</CardTitle>
                    </CardHeader>
                    <CardContent className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                        <div>
                            <p className="text-muted-foreground text-xs uppercase tracking-wide">
                                Entrepôt
                            </p>
                            <p className="mt-1 text-sm font-medium">
                                {stockReturn.warehouse.code} —{' '}
                                {stockReturn.warehouse.name}
                            </p>
                        </div>
                        <div>
                            <p className="text-muted-foreground text-xs uppercase tracking-wide">
                                Créé par
                            </p>
                            <p className="mt-1 text-sm font-medium">
                                {stockReturn.creator?.name ?? '—'}
                            </p>
                        </div>
                        <div>
                            <p className="text-muted-foreground text-xs uppercase tracking-wide">
                                Créé le
                            </p>
                            <p className="mt-1 text-sm font-medium">
                                {stockReturn.created_at
                                    ? formatDate(stockReturn.created_at)
                                    : '—'}
                            </p>
                        </div>
                        <div className="sm:col-span-2 lg:col-span-4">
                            <p className="text-muted-foreground text-xs uppercase tracking-wide">
                                Motif
                            </p>
                            <p className="mt-1 text-sm">
                                {stockReturn.motif}
                            </p>
                        </div>
                        {stockReturn.notes ? (
                            <div className="sm:col-span-2 lg:col-span-4">
                                <p className="text-muted-foreground text-xs uppercase tracking-wide">
                                    Notes
                                </p>
                                <p className="mt-1 text-sm">
                                    {stockReturn.notes}
                                </p>
                            </div>
                        ) : null}
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader>
                        <CardTitle>Lignes</CardTitle>
                        <CardDescription>
                            Produits retournés.
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        <Table>
                            <TableHeader>
                                <TableRow>
                                    <TableHead>Produit</TableHead>
                                    <TableHead className="text-right">
                                        Quantité
                                    </TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {stockReturn.lines.map((line) => (
                                    <TableRow key={line.id}>
                                        <TableCell>
                                            <div className="flex flex-col gap-0.5">
                                                <span className="font-medium">
                                                    {line.product?.name ?? '—'}
                                                </span>
                                                <span className="text-muted-foreground font-mono text-xs">
                                                    {line.product?.code ?? '—'}
                                                </span>
                                            </div>
                                        </TableCell>
                                        <TableCell className="text-right tabular-nums font-medium">
                                            {line.quantity}
                                        </TableCell>
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </CardContent>
                </Card>
            </div>
        </>
    );
}

StockReturnsShow.layout = {
    breadcrumbs: [
        { title: 'Tableau de bord', href: dashboard() },
        { title: 'Retours de stock', href: stockReturnsIndex.url() },
        { title: 'Détail', href: '#' },
    ],
};
