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 stockReturnsIndex } from '@/routes/admin/stock-returns';
import {
    StockReturnForm,
    type ProductOption,
    type TypeOption,
    type WarehouseOption,
} from './stock-return-form';

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

            <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="Nouveau retour"
                        description="Enregistrer un retour client ou fournisseur"
                    />
                    <Button variant="outline" asChild>
                        <Link href={stockReturnsIndex.url()}>
                            <ArrowLeft />
                            Retour aux retours
                        </Link>
                    </Button>
                </div>

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

StockReturnsCreate.layout = {
    breadcrumbs: [
        { title: 'Tableau de bord', href: dashboard() },
        { title: 'Nouveau retour', href: '#' },
    ],
};
