王明 / Food-Labeling-Management-Platform

  import React, { useCallback, useId, useRef, useState } from "react";
  import { FileSpreadsheet, Upload, X } from "lucide-react";

  import { Button } from "../ui/button";
  import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
  } from "../ui/dialog";
  import { Label } from "../ui/label";

  import { cn } from "../ui/utils";

  import { toast } from "sonner";
  import { ApiError } from "../../lib/apiClient";
  
  export type BatchImportDialogProps = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    title: string;
    description?: string;
    /** 弹框底部「下载模板」 */
    onDownloadTemplate: () => void | Promise<void>;
    /** 选择文件后点击 Import 上传 */
    onImportFile: (file: File) => Promise<{ successCount: number; failCount: number }>;
    downloadingTemplate?: boolean;
  };
  

  const ACCEPT = ".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
  
  function formatFileSize(bytes: number): string {
    if (!Number.isFinite(bytes) || bytes < 0) return "";
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
  }
  
  function pickFile(list: FileList | null): File | null {
    const f = list?.[0];
    if (!f) return null;
    const name = f.name.toLowerCase();
    if (!name.endsWith(".xlsx")) {
      return null;
    }
    return f;
  }
  

  export function BatchImportDialog({
    open,
    onOpenChange,
    title,
    description,
    onDownloadTemplate,
    onImportFile,
    downloadingTemplate = false,
  }: BatchImportDialogProps) {

    const fileInputId = useId();

    const inputRef = useRef<HTMLInputElement | null>(null);
    const [file, setFile] = useState<File | null>(null);
    const [busy, setBusy] = useState(false);

    const [dragActive, setDragActive] = useState(false);

  
    const reset = () => {
      setFile(null);

      setDragActive(false);

      if (inputRef.current) inputRef.current.value = "";
    };
  

    const clearSelectedFile = () => {
      setFile(null);
      if (inputRef.current) inputRef.current.value = "";
    };
  
    const applyFiles = useCallback((list: FileList | null) => {
      const f = pickFile(list);
      if (list?.length && !f) {
        toast.error("Invalid file", { description: "Please choose an .xlsx file." });
        return;
      }
      setFile(f);
    }, []);
  
    /** 延迟触发：避免嵌在 Radix Dialog 内时，同步 click() 导致部分浏览器不触发 change */
    const openPicker = () => {
      window.setTimeout(() => {
        const el = inputRef.current;
        if (!el) return;
        el.value = "";
        el.click();
      }, 0);
    };
  

    return (
      <Dialog
        open={open}
        onOpenChange={(v) => {
          if (!v) reset();
          onOpenChange(v);
        }}
      >

        <DialogContent
          className={cn("gap-4")}
          style={{
            padding: 20,
            width: "min(50vw, calc(100vw - 2rem))",
            maxWidth: "min(50vw, calc(100vw - 2rem))",
          }}
        >
          <DialogHeader className="space-y-1.5">
            <DialogTitle className="text-base">{title}</DialogTitle>
            {description ? (
              <DialogDescription className="text-xs leading-relaxed">{description}</DialogDescription>
            ) : null}

          </DialogHeader>

  
          <div className="flex flex-col gap-3">

            <div className="space-y-2">

              <Label htmlFor={fileInputId} className="text-sm">
                Excel file (.xlsx)
              </Label>

              <input

                id={fileInputId}

                ref={inputRef}
                type="file"

                accept={ACCEPT}
                className="sr-only"
                tabIndex={-1}
                aria-label="Choose Excel spreadsheet"
                onChange={(e) => applyFiles(e.target.files)}

              />

              <button
                type="button"
                className={cn(
                  "flex w-full flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed px-4 py-5 text-center transition-colors outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
                  dragActive
                    ? "border-blue-400 bg-blue-50/80"
                    : "border-gray-300 bg-gray-50/90 hover:border-gray-400 hover:bg-gray-50",
                )}
                onClick={openPicker}
                onKeyDown={(e) => {
                  if (e.key === "Enter" || e.key === " ") {
                    e.preventDefault();
                    openPicker();
                  }
                }}
                onDragEnter={(e) => {
                  e.preventDefault();
                  setDragActive(true);
                }}
                onDragOver={(e) => {
                  e.preventDefault();
                  e.dataTransfer.dropEffect = "copy";
                }}
                onDragLeave={(e) => {
                  e.preventDefault();
                  if (!e.currentTarget.contains(e.relatedTarget as Node)) setDragActive(false);
                }}
                onDrop={(e) => {
                  e.preventDefault();
                  setDragActive(false);
                  applyFiles(e.dataTransfer.files);
                }}
              >
                <Upload className="h-7 w-7 shrink-0 text-gray-400" aria-hidden />
                <div className="text-sm text-gray-700">
                  <span className="font-medium text-blue-700">Browse</span>
                  <span className="text-gray-600"> or drop your file here</span>
                </div>
                <p className="text-xs text-gray-500">
                  {file ? "Click again to replace the file" : "Only .xlsx is accepted"}
                </p>
              </button>
  
              {file ? (
                <div
                  role="status"
                  aria-live="polite"
                  className="flex items-center gap-3 rounded-lg border border-blue-200 bg-blue-50/60 px-3 py-2.5"
                >
                  <FileSpreadsheet className="h-8 w-8 shrink-0 text-blue-600" aria-hidden />
                  <div className="min-w-0 flex-1">
                    <div className="text-xs font-medium uppercase tracking-wide text-blue-800">Selected file</div>
                    <div className="truncate text-sm font-semibold text-gray-900" title={file.name}>
                      {file.name}
                    </div>
                    {formatFileSize(file.size) ? (
                      <div className="text-xs text-gray-600">{formatFileSize(file.size)}</div>
                    ) : null}
                  </div>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    className="shrink-0 border-gray-300 bg-white px-2 text-gray-700 hover:bg-gray-50"
                    onClick={(e) => {
                      e.stopPropagation();
                      clearSelectedFile();
                    }}
                    aria-label="Remove selected file"
                  >
                    <X className="h-4 w-4" aria-hidden />
                    <span className="ml-1 hidden sm:inline">Remove</span>
                  </Button>
                </div>
              ) : (
                <div className="rounded-lg border border-dashed border-gray-200 bg-gray-50/50 px-3 py-2 text-center text-xs text-gray-500">
                  No file selected yet — use Browse or drag an .xlsx above
                </div>
              )}
  
              <p className="text-xs text-gray-600">
                After a file is selected, click <span className="font-medium text-gray-900">Import</span> to upload
                it to the server.
              </p>
            </div>
  
            <div className="flex justify-stretch sm:justify-center">
              <Button
                type="button"
                variant="outline"
                className="w-full sm:w-auto"
                size="sm"
                disabled={downloadingTemplate}
                onClick={() => void onDownloadTemplate()}
              >
                {downloadingTemplate ? "Downloading…" : "Download template"}
              </Button>

            </div>
          </div>

          <DialogFooter className="gap-2 sm:gap-0">
            <Button
              type="button"
              variant="outline"

              size="sm"

              onClick={() => {
                reset();
                onOpenChange(false);
              }}
            >
              Cancel
            </Button>
            <Button
              type="button"

              size="sm"
              className="bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50"

              disabled={!file || busy}
              onClick={async () => {
                if (!file) return;
                setBusy(true);
                try {
                  const r = await onImportFile(file);
                  toast.success("Import finished", {
                    description: `Success: ${r.successCount}, failed: ${r.failCount}`,
                  });
                  reset();
                  onOpenChange(false);
                } catch (e) {
                  const msg = e instanceof ApiError ? e.message : e instanceof Error ? e.message : "Import failed.";
                  toast.error("Import failed", { description: msg });
                } finally {
                  setBusy(false);
                }
              }}
            >
              {busy ? "Importing…" : "Import"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    );
  }