star-erp/resources/js/Components/Product/ProductImportDialog.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 } from "@inertiajs/react";
import { Alert, AlertDescription } from "@/Components/ui/alert";

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

export default function ProductImportDialog({ open, onOpenChange }: ProductImportDialogProps) {
  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("products.import"), {
      onSuccess: () => {
        reset();
        onOpenChange(false);
      },
    });
  };

  const handleDownloadTemplate = () => {
    window.location.href = route('products.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：取得 Excel 範本
            </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"
                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>：商品代號 (2-8 碼)、條碼、商品名稱、類別名稱、基本單位。</li>
                    <li><span className="font-medium text-gray-700">唯一性</span>：商品代號與條碼不可與現有資料重複。</li>
                    <li><span className="font-medium text-gray-700">自動關聯</span>：類別與單位請填寫系統當前存在的「名稱」（如：飲品、瓶）。</li>
                    <li><span className="font-medium text-gray-700">大單位</span>：若填寫大單位，則「換算率」為必填（需大於 0）。</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>
  );
}