star-erp/resources/js/Components/Transfer/TransferImportDialog.tsx

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

interface TransferImportDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    orderId: number;
}

export default function TransferImportDialog({ open, onOpenChange, orderId }: TransferImportDialogProps) {
    const { data, setData, post, processing, errors, reset, clearErrors } = useForm<{
        file: File | null;
    }>({
        file: null,
    });

    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files && e.target.files[0]) {
            setData("file", e.target.files[0]);
            clearErrors("file");
        }
    };

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        post(route("inventory.transfer.import-items", orderId), {
            forceFormData: true,
            onSuccess: () => {
                reset();
                onOpenChange(false);
                router.reload();
            },
        });
    };

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

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-[500px]">
                <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：取得 CSV 範本
                        </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">
                            <Upload className="w-4 h-4 text-blue-600" />
                            步驟 2：上傳填寫後的檔案
                        </Label>

                        <div className="grid w-full max-w-sm items-center gap-1.5">
                            <Input
                                id="file"
                                type="file"
                                accept=".xlsx, .xls, .csv"
                                onChange={handleFileChange}
                                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="item-1" 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>：必填，必須為大於 0 的數字。</li>
                                        <li><span className="font-medium text-gray-700">批號</span>：選填，若不填寫將自動對應「無批號 (NO-BATCH)」的庫存。</li>
                                        <li><span className="font-medium text-gray-700">備註</span>：選填，可填寫該筆明細的備註說明。</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={!data.file || processing} className="button-filled-primary">
                            {processing ? "匯入中..." : "開始匯入"}
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}