import { Head, Link, router } from '@inertiajs/react';
import { ArrowLeft } from 'lucide-react';
import Heading from '@/components/heading';
import { Button } from '@/components/ui/button';
import { dashboard } from '@/routes';
import { index as receiptsIndex } from '@/routes/admin/warehouses/receipts';
import {
    StockReceiptForm,
    type ProductOption,
} from '../stock-receipt-form';

export default function WarehouseReceiptCreate({
    warehouse,
    products,
}: {
    warehouse: { id: number; code: string; name: string };
    products: ProductOption[];
}) {
    const backHref = receiptsIndex.url(warehouse.id);

    return (
        <>
            <Head title="Nouvelle réception" />

            <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">
                    <Heading
                        title="Nouvelle réception"
                        description={`${warehouse.code} — ${warehouse.name}`}
                    />
                    <Button variant="outline" asChild>
                        <Link href={backHref}>
                            <ArrowLeft />
                            Retour aux réceptions
                        </Link>
                    </Button>
                </div>

                <StockReceiptForm
                    warehouseId={warehouse.id}
                    products={products}
                    onCancel={() => router.get(backHref)}
                />
            </div>
        </>
    );
}

WarehouseReceiptCreate.layout = {
    breadcrumbs: [
        { title: 'Tableau de bord', href: dashboard() },
        { title: 'Nouvelle réception', href: '#' },
    ],
};
