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 stockExitsIndex } from '@/routes/admin/stock-exits';
import {
    StockExitForm,
    type ProductOption,
    type TypeOption,
    type WarehouseOption,
} from './stock-exit-form';

export default function StockExitsCreate({
    warehouses,
    products,
    types,
    stocksByWarehouse,
}: {
    warehouses: WarehouseOption[];
    products: ProductOption[];
    types: TypeOption[];
    stocksByWarehouse: Record<string, Record<string, number>>;
}) {
    return (
        <>
            <Head title="Nouvelle sortie" />

            <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 sortie"
                        description="Enregistrer une vente, un transfert ou une consommation"
                    />
                    <Button variant="outline" asChild>
                        <Link href={stockExitsIndex.url()}>
                            <ArrowLeft />
                            Retour aux sorties
                        </Link>
                    </Button>
                </div>

                <StockExitForm
                    warehouses={warehouses}
                    products={products}
                    types={types}
                    stocksByWarehouse={stocksByWarehouse}
                    onCancel={() => router.get(stockExitsIndex.url())}
                />
            </div>
        </>
    );
}

StockExitsCreate.layout = {
    breadcrumbs: [
        { title: 'Tableau de bord', href: dashboard() },
        { title: 'Nouvelle sortie', href: '#' },
    ],
};
