star-erp/resources/js/Components/Sales/SalesImportDialog.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, AlertCircle, Info } from "lucide-react";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/Components/ui/accordion";
import { useForm } from "@inertiajs/react";
import { Alert, AlertDescription } from "@/Components/ui/alert";
import React from "react";

interface SalesImportDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
}

export default function SalesImportDialog({ open, onOpenChange }: SalesImportDialogProps) {
    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("sales-imports.store"), {
            onSuccess: () => {
                reset();
                onOpenChange(false);
            },
        });
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="sm:max-w-[500px]">
                <DialogHeader>
                    <DialogTitle>匯入銷售單</DialogTitle>
                    <DialogDescription>
                        請上傳統一格式的銷售單 Excel 檔案。系統將自動解析內容。
                    </DialogDescription>
                </DialogHeader>

                <form onSubmit={handleSubmit} className="space-y-6">
                    {/* 上傳檔案區域 */}
                    <div className="space-y-2">
                        <Label className="font-medium flex items-center gap-2">
                            <Upload className="w-4 h-4 text-blue-600" />
                            上傳銷售單檔案
                        </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>
                        )}
                        <p className="text-xs text-gray-500">支援格式：.xlsx, .xls, .csv</p>
                    </div>

                    {/* 匯入說明 - 使用 Accordion 收合 */}
                    <Accordion type="single" collapsible className="w-full border rounded-lg px-2" defaultValue="item-1">
                        <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">
                                    <p className="mb-2">請確保 Excel 檔案包含以下關鍵欄位資訊（依序或對應位置）：</p>
                                    <ul className="list-disc space-y-1 text-xs">
                                        <li><span className="font-medium text-gray-700">A 欄 (0)</span>：交易序號 (Serial)</li>
                                        <li><span className="font-medium text-gray-700">B 欄 (1)</span>：機台編號 (Machine ID)</li>
                                        <li><span className="font-medium text-gray-700">E 欄 (4)</span>：交易狀態 (Status)</li>
                                        <li><span className="font-medium text-gray-700">H 欄 (7)</span>：商品代號 (Product Code)</li>
                                        <li><span className="font-medium text-gray-700">J 欄 (9)</span>：交易時間 (Transaction Date)</li>
                                        <li><span className="font-medium text-gray-700">L 欄 (11)</span>：金額 (Amount)</li>
                                        <li><span className="font-medium text-gray-700">T 欄 (19)</span>：貨道 (Slot)</li>
                                    </ul>
                                    <div className="mt-2 pt-2 border-t text-xs text-gray-500">
                                        注意：系統將從第 3 列開始讀取資料。
                                    </div>
                                </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>
    );
}