/**
 * 建立生產工單頁面
 * 動態 BOM 表單：選擇倉庫 → 選擇原物料 → 選擇批號 → 輸入用量
 */

import { useState, useEffect } from "react";
import { Factory, Plus, Trash2, ArrowLeft, Save, AlertTriangle, Calendar } from 'lucide-react';
import { Button } from "@/Components/ui/button";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, router, useForm } from "@inertiajs/react";
import { getBreadcrumbs } from "@/utils/breadcrumb";
import { SearchableSelect } from "@/Components/ui/searchable-select";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Textarea } from "@/Components/ui/textarea";

interface Product {
    id: number;
    name: string;
    code: string;
    base_unit?: { id: number; name: string } | null;
}

interface Warehouse {
    id: number;
    name: string;
}

interface Unit {
    id: number;
    name: string;
}

interface InventoryOption {
    id: number;
    product_id: number;
    product_name: string;
    product_code: string;
    batch_number: string;
    box_number: string | null;
    quantity: number;
    arrival_date: string | null;
    expiry_date: string | null;
    unit_name: string | null;
}

interface BomItem {
    inventory_id: string;
    quantity_used: string;
    unit_id: string;
    // 顯示用
    product_name?: string;
    batch_number?: string;
    available_qty?: number;
}

interface Props {
    products: Product[];
    warehouses: Warehouse[];
    units: Unit[];
}

export default function ProductionCreate({ products, warehouses, units }: Props) {
    const [selectedWarehouse, setSelectedWarehouse] = useState<string>("");
    const [inventoryOptions, setInventoryOptions] = useState<InventoryOption[]>([]);
    const [isLoadingInventory, setIsLoadingInventory] = useState(false);
    const [bomItems, setBomItems] = useState<BomItem[]>([]);

    const { data, setData, processing, errors } = useForm({
        product_id: "",
        warehouse_id: "",
        output_quantity: "",
        output_batch_number: "",
        output_box_count: "",
        production_date: new Date().toISOString().split('T')[0],
        expiry_date: "",
        remark: "",
        items: [] as { inventory_id: number; quantity_used: number; unit_id: number | null }[],
    });

    // 當選擇倉庫時，載入該倉庫的可用庫存
    useEffect(() => {
        if (selectedWarehouse) {
            setIsLoadingInventory(true);
            fetch(route('api.production.warehouses.inventories', selectedWarehouse))
                .then(res => res.json())
                .then((inventories: InventoryOption[]) => {
                    setInventoryOptions(inventories);
                    setIsLoadingInventory(false);
                })
                .catch(() => setIsLoadingInventory(false));
        } else {
            setInventoryOptions([]);
        }
    }, [selectedWarehouse]);

    // 同步 warehouse_id 到 form data
    useEffect(() => {
        setData('warehouse_id', selectedWarehouse);
    }, [selectedWarehouse]);

    // 新增 BOM 項目
    const addBomItem = () => {
        setBomItems([...bomItems, {
            inventory_id: "",
            quantity_used: "",
            unit_id: "",
        }]);
    };

    // 移除 BOM 項目
    const removeBomItem = (index: number) => {
        setBomItems(bomItems.filter((_, i) => i !== index));
    };

    // 更新 BOM 項目
    const updateBomItem = (index: number, field: keyof BomItem, value: string) => {
        const updated = [...bomItems];
        updated[index] = { ...updated[index], [field]: value };

        // 如果選擇了庫存，自動填入顯示資訊
        if (field === 'inventory_id' && value) {
            const inv = inventoryOptions.find(i => String(i.id) === value);
            if (inv) {
                updated[index].product_name = inv.product_name;
                updated[index].batch_number = inv.batch_number;
                updated[index].available_qty = inv.quantity;
            }
        }

        setBomItems(updated);
    };

    // 產生成品批號建議
    const generateBatchNumber = () => {
        if (!data.product_id) return;
        const product = products.find(p => String(p.id) === data.product_id);
        if (!product) return;

        const date = data.production_date.replace(/-/g, '');
        const suggested = `${product.code}-TW-${date}-01`;
        setData('output_batch_number', suggested);
    };

    // 提交表單
    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();

        // 轉換 BOM items 格式
        const formattedItems = bomItems
            .filter(item => item.inventory_id && item.quantity_used)
            .map(item => ({
                inventory_id: parseInt(item.inventory_id),
                quantity_used: parseFloat(item.quantity_used),
                unit_id: item.unit_id ? parseInt(item.unit_id) : null,
            }));

        // 使用 router.post 提交完整資料
        router.post(route('production-orders.store'), {
            ...data,
            items: formattedItems,
        });
    };

    return (
        <AuthenticatedLayout breadcrumbs={getBreadcrumbs("productionOrdersCreate")}>
            <Head title="建立生產單" />
            <div className="container mx-auto p-6 max-w-4xl">
                <div className="flex items-center gap-4 mb-6">
                    <Button
                        variant="ghost"
                        onClick={() => router.get(route('production-orders.index'))}
                        className="p-2"
                    >
                        <ArrowLeft className="h-5 w-5" />
                    </Button>
                    <div>
                        <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
                            <Factory className="h-6 w-6 text-primary-main" />
                            建立生產單
                        </h1>
                        <p className="text-gray-500 mt-1">
                            記錄生產使用的原物料與產出成品
                        </p>
                    </div>
                </div>

                <form onSubmit={handleSubmit}>
                    {/* 成品資訊 */}
                    <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6">
                        <h2 className="text-lg font-semibold mb-4">成品資訊</h2>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div className="space-y-1">
                                <Label className="text-xs font-medium text-grey-2">成品商品 *</Label>
                                <SearchableSelect
                                    value={data.product_id}
                                    onValueChange={(v) => setData('product_id', v)}
                                    options={products.map(p => ({
                                        label: `${p.name} (${p.code})`,
                                        value: String(p.id),
                                    }))}
                                    placeholder="選擇成品"
                                    className="w-full h-9"
                                />
                                {errors.product_id && <p className="text-red-500 text-xs mt-1">{errors.product_id}</p>}
                            </div>

                            <div className="space-y-1">
                                <Label className="text-xs font-medium text-grey-2">生產數量 *</Label>
                                <Input
                                    type="number"
                                    step="0.01"
                                    value={data.output_quantity}
                                    onChange={(e) => setData('output_quantity', e.target.value)}
                                    placeholder="例如: 50"
                                    className="h-9"
                                />
                                {errors.output_quantity && <p className="text-red-500 text-xs mt-1">{errors.output_quantity}</p>}
                            </div>

                            <div className="space-y-1">
                                <Label className="text-xs font-medium text-grey-2">成品批號 *</Label>
                                <div className="flex gap-2">
                                    <Input
                                        value={data.output_batch_number}
                                        onChange={(e) => setData('output_batch_number', e.target.value)}
                                        placeholder="例如: AB-TW-20260121-01"
                                        className="h-9 font-mono"
                                    />
                                    <Button
                                        type="button"
                                        variant="outline"
                                        onClick={generateBatchNumber}
                                        disabled={!data.product_id}
                                        className="h-9 button-outlined-primary shrink-0"
                                    >
                                        自動產生
                                    </Button>
                                </div>
                                {errors.output_batch_number && <p className="text-red-500 text-xs mt-1">{errors.output_batch_number}</p>}
                            </div>

                            <div className="space-y-1">
                                <Label className="text-xs font-medium text-grey-2">箱數（選填）</Label>
                                <Input
                                    value={data.output_box_count}
                                    onChange={(e) => setData('output_box_count', e.target.value)}
                                    placeholder="例如: 10"
                                    className="h-9"
                                />
                            </div>

                            <div className="space-y-1">
                                <Label className="text-xs font-medium text-grey-2">生產日期 *</Label>
                                <div className="relative">
                                    <Calendar className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
                                    <Input
                                        type="date"
                                        value={data.production_date}
                                        onChange={(e) => setData('production_date', e.target.value)}
                                        className="h-9 pl-9"
                                    />
                                </div>
                                {errors.production_date && <p className="text-red-500 text-xs mt-1">{errors.production_date}</p>}
                            </div>

                            <div className="space-y-1">
                                <Label className="text-xs font-medium text-grey-2">成品效期（選填）</Label>
                                <div className="relative">
                                    <Calendar className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
                                    <Input
                                        type="date"
                                        value={data.expiry_date}
                                        onChange={(e) => setData('expiry_date', e.target.value)}
                                        className="h-9 pl-9"
                                    />
                                </div>
                            </div>

                            <div className="space-y-1">
                                <Label className="text-xs font-medium text-grey-2">入庫倉庫 *</Label>
                                <SearchableSelect
                                    value={selectedWarehouse}
                                    onValueChange={setSelectedWarehouse}
                                    options={warehouses.map(w => ({
                                        label: w.name,
                                        value: String(w.id),
                                    }))}
                                    placeholder="選擇倉庫"
                                    className="w-full h-9"
                                />
                                {errors.warehouse_id && <p className="text-red-500 text-xs mt-1">{errors.warehouse_id}</p>}
                            </div>
                        </div>

                        <div className="mt-4 space-y-1">
                            <Label className="text-xs font-medium text-grey-2">備註</Label>
                            <Textarea
                                value={data.remark}
                                onChange={(e) => setData('remark', e.target.value)}
                                placeholder="生產備註..."
                                rows={2}
                                className="resize-none"
                            />
                        </div>
                    </div>

                    {/* BOM 原物料明細 */}
                    <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6">
                        <div className="flex items-center justify-between mb-4">
                            <h2 className="text-lg font-semibold">原物料使用明細 (BOM)</h2>
                            <Button
                                type="button"
                                variant="outline"
                                onClick={addBomItem}
                                disabled={!selectedWarehouse}
                                className="gap-2 button-filled-primary text-white"
                            >
                                <Plus className="h-4 w-4" />
                                新增原物料
                            </Button>
                        </div>

                        {!selectedWarehouse && (
                            <div className="text-center py-8 text-gray-500">
                                <AlertTriangle className="h-8 w-8 mx-auto mb-2 text-yellow-500" />
                                請先選擇「入庫倉庫」以取得可用原物料清單
                            </div>
                        )}

                        {selectedWarehouse && isLoadingInventory && (
                            <div className="text-center py-8 text-gray-500">
                                載入中...
                            </div>
                        )}

                        {selectedWarehouse && !isLoadingInventory && bomItems.length === 0 && (
                            <div className="text-center py-8 text-gray-500">
                                <Factory className="h-8 w-8 mx-auto mb-2 text-gray-300" />
                                點擊「新增原物料」開始建立 BOM
                            </div>
                        )}

                        {bomItems.length > 0 && (
                            <div className="space-y-4">
                                {bomItems.map((item, index) => (
                                    <div
                                        key={index}
                                        className="grid grid-cols-1 md:grid-cols-12 gap-3 items-end p-4 bg-gray-50/50 border border-gray-100 rounded-lg relative group"
                                    >
                                        <div className="md:col-span-5 space-y-1">
                                            <Label className="text-xs font-medium text-grey-2">原物料 (批號)</Label>
                                            <SearchableSelect
                                                value={item.inventory_id}
                                                onValueChange={(v) => updateBomItem(index, 'inventory_id', v)}
                                                options={inventoryOptions.map(inv => ({
                                                    label: `${inv.product_name} - ${inv.batch_number} (庫存: ${inv.quantity})`,
                                                    value: String(inv.id),
                                                }))}
                                                placeholder="選擇原物料與批號"
                                                className="w-full h-9"
                                            />
                                        </div>

                                        <div className="md:col-span-3 space-y-1">
                                            <Label className="text-xs font-medium text-grey-2">使用量</Label>
                                            <div className="relative">
                                                <Input
                                                    type="number"
                                                    step="0.0001"
                                                    value={item.quantity_used}
                                                    onChange={(e) => updateBomItem(index, 'quantity_used', e.target.value)}
                                                    placeholder="0.00"
                                                    className="h-9 pr-12"
                                                />
                                                <div className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-gray-400 pointer-events-none">
                                                    單位
                                                </div>
                                            </div>
                                            {item.available_qty && (
                                                <p className="text-xs text-gray-400 mt-1">可用庫存: {item.available_qty.toLocaleString()}</p>
                                            )}
                                        </div>

                                        <div className="md:col-span-3 space-y-1">
                                            <Label className="text-xs font-medium text-grey-2">備註/單位</Label>
                                            <SearchableSelect
                                                value={item.unit_id}
                                                onValueChange={(v) => updateBomItem(index, 'unit_id', v)}
                                                options={units.map(u => ({
                                                    label: u.name,
                                                    value: String(u.id),
                                                }))}
                                                placeholder="選擇單位"
                                                className="w-full h-9"
                                            />
                                        </div>

                                        <div className="md:col-span-1">
                                            <Button
                                                type="button"
                                                variant="outline"
                                                size="sm"
                                                onClick={() => removeBomItem(index)}
                                                className="button-outlined-error h-9 w-full md:w-9 p-0"
                                                title="移除此項目"
                                            >
                                                <Trash2 className="h-4 w-4" />
                                            </Button>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        )}

                        {errors.items && <p className="text-red-500 text-sm mt-2">{errors.items}</p>}
                    </div>

                    {/* 提交按鈕 */}
                    <div className="flex justify-end gap-3">
                        <Button
                            type="button"
                            variant="outline"
                            onClick={() => router.get(route('production-orders.index'))}
                            className="h-10 px-6"
                        >
                            取消
                        </Button>
                        <Button
                            type="submit"
                            disabled={processing || bomItems.length === 0}
                            className="gap-2 button-filled-primary h-10 px-8"
                        >
                            <Save className="h-4 w-4" />
                            {processing ? '處理中...' : '建立生產單'}
                        </Button>
                    </div>
                </form>
            </div>
        </AuthenticatedLayout>
    );
}