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, FileSpreadsheet } 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 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：取得 Excel 範本
                        </Label>
                        <div className="text-sm text-gray-500 mb-2">
                            下載標準範本以確保資料格式正確。請勿修改欄位名稱。
                        </div>
                        <Button
                            type="button"
                            variant="outline"
                            size="sm"
                            onClick={() => window.location.href = route('sales-imports.template')}
                            className="w-full sm:w-auto button-outlined-primary"
                        >
                            <Upload className="w-4 h-4 mr-2 rotate-180" />
                            下載範本 (.xlsx)
                        </Button>
                    </div>

                    {/* 上傳檔案區域 */}
                    <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>
                        )}
                        <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">
                        <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>：請使用統一的 Excel 格式（商品銷貨單）。</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>
    );
}