/**
 * 新增庫存頁面（手動入庫）
 */

import { useState } from "react";
import { Plus, Trash2, Calendar, ArrowLeft, Save } from "lucide-react";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Textarea } from "@/Components/ui/textarea";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/Components/ui/select";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/Components/ui/table";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, Link, router } from "@inertiajs/react";
import { Warehouse, InboundItem, InboundReason } from "@/types/warehouse";
import { getCurrentDateTime } from "@/utils/format";
import { toast } from "sonner";
import { getInventoryBreadcrumbs } from "@/utils/breadcrumb";

interface Product {
    id: string;
    name: string;
    unit: string;
}

interface Props {
    warehouse: Warehouse;
    products: Product[];
}

const INBOUND_REASONS: InboundReason[] = [
    "期初建檔",
    "盤點調整",
    "實際入庫未走採購流程",
    "生產加工成品入庫",
    "其他",
];

export default function AddInventoryPage({ warehouse, products }: Props) {
    const [inboundDate, setInboundDate] = useState(getCurrentDateTime());
    const [reason, setReason] = useState<InboundReason>("期初建檔");
    const [notes, setNotes] = useState("");
    const [items, setItems] = useState<InboundItem[]>([]);
    const [errors, setErrors] = useState<Record<string, string>>({});

    // 新增明細行
    const handleAddItem = () => {
        const defaultProduct = products.length > 0 ? products[0] : { id: "", name: "", unit: "kg" };
        const newItem: InboundItem = {
            tempId: `temp-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
            productId: defaultProduct.id,
            productName: defaultProduct.name,
            quantity: 0,
            unit: defaultProduct.unit,
        };
        setItems([...items, newItem]);
    };

    // 刪除明細行
    const handleRemoveItem = (tempId: string) => {
        setItems(items.filter((item) => item.tempId !== tempId));
    };

    // 更新明細行
    const handleUpdateItem = (tempId: string, updates: Partial<InboundItem>) => {
        setItems(
            items.map((item) =>
                item.tempId === tempId ? { ...item, ...updates } : item
            )
        );
    };

    // 處理商品變更
    const handleProductChange = (tempId: string, productId: string) => {
        const product = products.find((p) => p.id === productId);
        if (product) {
            handleUpdateItem(tempId, {
                productId,
                productName: product.name,
                unit: product.unit,
            });
        }
    };

    // 驗證表單
    const validateForm = (): boolean => {
        const newErrors: Record<string, string> = {};

        if (!reason) {
            newErrors.reason = "請選擇入庫原因";
        }

        if (reason === "其他" && !notes.trim()) {
            newErrors.notes = "原因為「其他」時，備註為必填";
        }

        if (items.length === 0) {
            newErrors.items = "請至少新增一筆庫存明細";
        }

        items.forEach((item, index) => {
            if (!item.productId) {
                newErrors[`item-${index}-product`] = "請選擇商品";
            }
            if (item.quantity <= 0) {
                newErrors[`item-${index}-quantity`] = "數量必須大於 0";
            }
        });

        setErrors(newErrors);
        return Object.keys(newErrors).length === 0;
    };

    // 處理儲存
    const handleSave = () => {
        if (!validateForm()) {
            toast.error("請檢查表單內容");
            return;
        }

        router.post(`/warehouses/${warehouse.id}/inventory`, {
            inboundDate,
            reason,
            notes,
            items: items.map(item => ({
                productId: item.productId,
                quantity: item.quantity
            }))
        }, {
            onSuccess: () => {
                toast.success("庫存記錄已儲存");
                router.get(`/warehouses/${warehouse.id}/inventory`);
            },
            onError: (err) => {
                toast.error("儲存失敗，請檢查輸入內容");
                console.error(err);
            }
        });
    };

    return (
        <AuthenticatedLayout breadcrumbs={getInventoryBreadcrumbs(warehouse.id, warehouse.name, "手動入庫")}>
            <Head title={`新增庫存 - ${warehouse.name}`} />
            <div className="container mx-auto p-6 max-w-7xl">
                {/* 頁面標題與導航 - 已於先前任務優化 */}
                <div className="mb-6">
                    <div className="mb-6">
                        <Link href={`/warehouses/${warehouse.id}/inventory`}>
                            <Button
                                variant="outline"
                                className="gap-2 button-outlined-primary"
                            >
                                <ArrowLeft className="h-4 w-4" />
                                返回庫存管理
                            </Button>
                        </Link>
                    </div>

                    <div className="flex items-center justify-between">
                        <div>
                            <h1 className="mb-2">新增庫存（手動入庫）</h1>
                            <p className="text-gray-600 font-medium">
                                為 <span className="font-semibold text-gray-900">{warehouse.name}</span> 新增庫存記錄
                            </p>
                        </div>
                        <Button
                            onClick={handleSave}
                            className="button-filled-primary"
                        >
                            <Save className="mr-2 h-4 w-4" />
                            儲存
                        </Button>
                    </div>
                </div>

                {/* 表單內容 */}
                <div className="space-y-6">
                    {/* 基本資訊區塊 */}
                    <div className="bg-white rounded-lg shadow-sm border p-6 space-y-4">
                        <h3 className="font-semibold text-lg border-b pb-2">基本資訊</h3>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            {/* 倉庫 */}
                            <div className="space-y-2">
                                <Label className="text-gray-700">倉庫</Label>
                                <Input
                                    value={warehouse.name}
                                    disabled
                                    className="bg-gray-50 border-gray-200"
                                />
                            </div>

                            {/* 入庫日期 */}
                            <div className="space-y-2">
                                <Label htmlFor="inbound-date" className="text-gray-700">
                                    入庫日期 <span className="text-red-500">*</span>
                                </Label>
                                <div className="relative">
                                    <Input
                                        id="inbound-date"
                                        type="datetime-local"
                                        value={inboundDate}
                                        onChange={(e) => setInboundDate(e.target.value)}
                                        className="border-gray-300 pr-10"
                                    />
                                    <Calendar className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
                                </div>
                            </div>

                            {/* 入庫原因 */}
                            <div className="space-y-2">
                                <Label htmlFor="reason" className="text-gray-700">
                                    入庫原因 <span className="text-red-500">*</span>
                                </Label>
                                <Select value={reason} onValueChange={(value) => setReason(value as InboundReason)}>
                                    <SelectTrigger id="reason" className="border-gray-300">
                                        <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {INBOUND_REASONS.map((r) => (
                                            <SelectItem key={r} value={r}>
                                                {r}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                                {errors.reason && (
                                    <p className="text-sm text-red-500">{errors.reason}</p>
                                )}
                            </div>

                            {/* 備註 */}
                            <div className="space-y-2 md:col-span-2">
                                <Label htmlFor="notes" className="text-gray-700">
                                    備註 {reason === "其他" && <span className="text-red-500">*</span>}
                                </Label>
                                <Textarea
                                    id="notes"
                                    value={notes}
                                    onChange={(e) => setNotes(e.target.value)}
                                    placeholder="請輸入備註說明..."
                                    className="border-gray-300 resize-none min-h-[100px]"
                                />
                                {errors.notes && (
                                    <p className="text-sm text-red-500">{errors.notes}</p>
                                )}
                            </div>
                        </div>
                    </div>

                    {/* 庫存明細區塊 */}
                    <div className="bg-white rounded-lg shadow-sm border p-6 space-y-4">
                        <div className="flex items-center justify-between">
                            <div>
                                <h3 className="font-semibold text-lg">庫存明細</h3>
                                <p className="text-sm text-gray-500">
                                    請新增要入庫的商品明細
                                </p>
                            </div>
                            <Button
                                type="button"
                                onClick={handleAddItem}
                                variant="outline"
                                className="button-outlined-primary"
                            >
                                <Plus className="mr-2 h-4 w-4" />
                                新增明細
                            </Button>
                        </div>

                        {errors.items && (
                            <p className="text-sm text-red-500">{errors.items}</p>
                        )}

                        {items.length > 0 ? (
                            <div className="border rounded-lg overflow-hidden">
                                <Table>
                                    <TableHeader>
                                        <TableRow className="bg-gray-50/50">
                                            <TableHead className="w-[280px]">
                                                商品 <span className="text-red-500">*</span>
                                            </TableHead>
                                            <TableHead className="w-[120px]">
                                                數量 <span className="text-red-500">*</span>
                                            </TableHead>
                                            <TableHead className="w-[100px]">單位</TableHead>
                                            {/* <TableHead className="w-[180px]">效期</TableHead>
                                            <TableHead className="w-[220px]">進貨編號</TableHead> */}
                                            <TableHead className="w-[60px]"></TableHead>
                                        </TableRow>
                                    </TableHeader>
                                    <TableBody>
                                        {items.map((item, index) => (
                                            <TableRow key={item.tempId}>
                                                {/* 商品 */}
                                                <TableCell>
                                                    <Select
                                                        value={item.productId}
                                                        onValueChange={(value) =>
                                                            handleProductChange(item.tempId, value)
                                                        }
                                                    >
                                                        <SelectTrigger className="border-gray-300">
                                                            <SelectValue />
                                                        </SelectTrigger>
                                                        <SelectContent>
                                                            {products.map((product) => (
                                                                <SelectItem key={product.id} value={product.id}>
                                                                    {product.name}
                                                                </SelectItem>
                                                            ))}
                                                        </SelectContent>
                                                    </Select>
                                                    {errors[`item-${index}-product`] && (
                                                        <p className="text-xs text-red-500 mt-1">
                                                            {errors[`item-${index}-product`]}
                                                        </p>
                                                    )}
                                                </TableCell>

                                                {/* 數量 */}
                                                <TableCell>
                                                    <Input
                                                        type="number"
                                                        min="1"
                                                        value={item.quantity || ""}
                                                        onChange={(e) =>
                                                            handleUpdateItem(item.tempId, {
                                                                quantity: parseInt(e.target.value) || 0,
                                                            })
                                                        }
                                                        className="border-gray-300"
                                                    />
                                                    {errors[`item-${index}-quantity`] && (
                                                        <p className="text-xs text-red-500 mt-1">
                                                            {errors[`item-${index}-quantity`]}
                                                        </p>
                                                    )}
                                                </TableCell>

                                                {/* 單位 */}
                                                <TableCell>
                                                    <Input
                                                        value={item.unit}
                                                        disabled
                                                        className="bg-gray-50 border-gray-200"
                                                    />
                                                </TableCell>

                                                {/* 效期 */}
                                                {/* <TableCell>
                                                    <div className="relative">
                                                        <Input
                                                            type="date"
                                                            value={item.expiryDate}
                                                            onChange={(e) =>
                                                                handleUpdateItem(item.tempId, {
                                                                    expiryDate: e.target.value,
                                                                })
                                                            }
                                                            className="border-gray-300"
                                                        />
                                                    </div>
                                                </TableCell> */}

                                                {/* 批號 */}
                                                {/* <TableCell>
                                                    <Input
                                                        value={item.batchNumber}
                                                        onChange={(e) =>
                                                            handleBatchNumberChange(item.tempId, e.target.value)
                                                        }
                                                        className="border-gray-300"
                                                        placeholder="系統自動生成"
                                                    />
                                                    {errors[`item-${index}-batch`] && (
                                                        <p className="text-xs text-red-500 mt-1">
                                                            {errors[`item-${index}-batch`]}
                                                        </p>
                                                    )}
                                                </TableCell> */}

                                                {/* 刪除按鈕 */}
                                                <TableCell>
                                                    <Button
                                                        type="button"
                                                        variant="ghost"
                                                        size="icon"
                                                        onClick={() => handleRemoveItem(item.tempId)}
                                                        className="hover:bg-red-50 hover:text-red-600 h-8 w-8"
                                                    >
                                                        <Trash2 className="h-4 w-4" />
                                                    </Button>
                                                </TableCell>
                                            </TableRow>
                                        ))}
                                    </TableBody>
                                </Table>
                            </div>
                        ) : (
                            <div className="border border-dashed rounded-lg p-12 text-center text-gray-500 bg-gray-50/30">
                                <p className="text-base font-medium">尚無明細</p>
                                <p className="text-sm mt-1">請點擊右上方「新增明細」按鈕加入商品</p>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
