import React from "react";
import { useForm } from "@inertiajs/react";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from "@/Components/ui/dialog";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Download, FileUp, Loader2, AlertCircle, FileSpreadsheet, Info } from "lucide-react";
import { toast } from "sonner";
import { Alert, AlertDescription } from "@/Components/ui/alert";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/Components/ui/accordion";

interface Props {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    warehouseId: string;
}

export default function InventoryImportDialog({ open, onOpenChange, warehouseId }: Props) {
    const { data, setData, post, processing, errors, reset, clearErrors } = useForm({
        file: null as File | null,
        inboundDate: new Date().toISOString().split('T')[0],
        notes: "Excel 匯入",
    });

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();

        post(route("warehouses.inventory.import", warehouseId), {
            forceFormData: true,
            onSuccess: () => {
                toast.success("庫存匯入完成");
                onOpenChange(false);
                reset();
            },
            onError: (err) => {
                console.error("Import error:", err);
                toast.error("匯入失敗，請檢查檔案格式");
            }
        });
    };

    const handleDownloadTemplate = () => {
        window.location.href = route("warehouses.inventory.template");
    };

    return (
        <Dialog open={open} onOpenChange={(val) => {
            onOpenChange(val);
            if (!val) {
                reset();
                clearErrors();
            }
        }}>
            <DialogContent className="sm:max-w-[550px]">
                <DialogHeader>
                    <DialogTitle>匯入庫存資料</DialogTitle>
                    <DialogDescription>
                        請先下載範本，填寫完畢後上傳檔案進行批次入庫。
                    </DialogDescription>
                </DialogHeader>

                <form onSubmit={handleSubmit} className="space-y-6">
                    {/* 步驟 1: 下載範本 */}
                    <div className="space-y-2 p-4 bg-gray-50 rounded-lg border border-gray-100">
                        <Label className="font-medium flex items-center gap-2">
                            <FileSpreadsheet className="w-4 h-4 text-green-600" />
                            步驟 1：取得匯入範本
                        </Label>
                        <div className="text-sm text-gray-500 mb-2">
                            下載標準範本以確保資料格式正確。請勿修改標題欄位。
                        </div>
                        <Button
                            type="button"
                            variant="outline"
                            size="sm"
                            onClick={handleDownloadTemplate}
                            className="w-full sm:w-auto button-outlined-primary"
                        >
                            <Download className="w-4 h-4 mr-2" />
                            下載庫存匯入範本 (.xlsx)
                        </Button>
                    </div>

                    {/* 步驟 2: 設定資訊 */}
                    <div className="space-y-2">
                        <Label className="font-medium flex items-center gap-2">
                            <Info className="w-4 h-4 text-primary-main" />
                            步驟 2：設定入庫資訊
                        </Label>

                        <div className="grid grid-cols-2 gap-4">
                            <div className="space-y-2">
                                <Label htmlFor="inboundDate" className="text-sm text-gray-700 flex items-center gap-1.5 align-middle">
                                    入庫日期 <span className="text-red-500">*</span>
                                </Label>
                                <Input
                                    id="inboundDate"
                                    type="date"
                                    value={data.inboundDate}
                                    onChange={e => setData('inboundDate', e.target.value)}
                                    required
                                    className="cursor-pointer"
                                />
                            </div>
                            <div className="space-y-2">
                                <Label htmlFor="notes" className="text-sm text-gray-700 flex items-center gap-1.5">
                                    入庫備註
                                </Label>
                                <Input
                                    id="notes"
                                    placeholder="選填備註"
                                    value={data.notes}
                                    onChange={e => setData('notes', e.target.value)}
                                />
                            </div>
                        </div>
                    </div>

                    {/* 步驟 3: 上傳檔案 */}
                    <div className="space-y-2">
                        <Label className="font-medium flex items-center gap-2">
                            <FileUp className="w-4 h-4 text-blue-600" />
                            步驟 3：上傳填寫後的檔案
                        </Label>
                        <div className="grid w-full max-w-sm items-center gap-1.5">
                            <Input
                                id="file"
                                type="file"
                                accept=".xlsx,.xls,.csv"
                                onChange={e => setData('file', e.target.files ? e.target.files[0] : null)}
                                required
                                className="cursor-pointer"
                            />
                        </div>
                        {errors.file && (
                            <Alert variant="destructive" className="mt-2">
                                <AlertCircle className="h-4 w-4" />
                                <AlertDescription className="whitespace-pre-wrap">
                                    {errors.file}
                                </AlertDescription>
                            </Alert>
                        )}
                    </div>

                    {/* 欄位說明 */}
                    <Accordion type="single" collapsible className="w-full border rounded-lg px-2">
                        <AccordionItem value="rules" className="border-b-0">
                            <AccordionTrigger className="text-sm text-gray-500 hover:no-underline py-3">
                                <div className="flex items-center gap-2">
                                    <Info className="h-4 w-4" />
                                    庫存匯入規則與提示
                                </div>
                            </AccordionTrigger>
                            <AccordionContent>
                                <div className="text-sm text-gray-600 space-y-2 pb-2 pl-6">
                                    <ul className="list-disc space-y-1">
                                        <li><span className="font-medium text-gray-700">商品匹配</span>：優先使用「商品條碼」匹配，其次為「商品代號」。</li>
                                        <li><span className="font-medium text-gray-700">無批號模式</span>：若 Excel 中的「批號」欄位保持空白，系統將自動累加至該商品的「通用紀錄」。(對販賣機而言，此紀錄通常對應至預設的一般庫存)。</li>
                                        <li><span className="font-medium text-gray-700">效期設定</span>：若商品無效期概念可留空，或輸入格式如：2026/12/31。</li>
                                        <li><span className="font-medium text-gray-700">入庫單價</span>：未填寫時將預設使用商品的「採購成本價」。</li>
                                    </ul>
                                </div>
                            </AccordionContent>
                        </AccordionItem>
                    </Accordion>

                    <DialogFooter>
                        <Button
                            type="button"
                            variant="outline"
                            onClick={() => onOpenChange(false)}
                            disabled={processing}
                            className="button-outlined-primary"
                        >
                            取消
                        </Button>
                        <Button
                            type="submit"
                            disabled={processing || !data.file}
                            className="button-filled-primary"
                        >
                            {processing ? (
                                <>
                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                    上傳中...
                                </>
                            ) : (
                                "開始匯入"
                            )}
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}