path: root/lib/items/table/import-excel-button.tsx

"use client"

import * as React from "react"
import { Upload } from "lucide-react"
import { toast } from "sonner"
import * as ExcelJS from 'exceljs'

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Progress } from "@/components/ui/progress"
import { processFileImport } from "./import-item-handler" // 별도 파일로 분리
import { decryptWithServerAction } from "@/components/drm/drmUtils"

interface ImportItemButtonProps {
  onSuccess?: () => void
}

export function ImportItemButton({ onSuccess }: ImportItemButtonProps) {
  const [open, setOpen] = React.useState(false)
  const [file, setFile] = React.useState<File | null>(null)
  const [isUploading, setIsUploading] = React.useState(false)
  const [progress, setProgress] = React.useState(0)
  const [error, setError] = React.useState<string | null>(null)
  const fileInputRef = React.useRef<HTMLInputElement>(null)

  // 파일 선택 처리
  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFile = e.target.files?.[0]
    if (!selectedFile) return

    if (!selectedFile.name.endsWith('.xlsx') && !selectedFile.name.endsWith('.xls')) {
      setError("Excel 파일(.xlsx 또는 .xls)만 가능합니다.")
      return
    }

    setFile(selectedFile)
    setError(null)
  }

  // 데이터 가져오기 처리
  const handleImport = async () => {
    if (!file) {
      setError("가져올 파일을 선택해주세요.")
      return
    }

    try {
      setIsUploading(true)
      setProgress(0)
      setError(null)

      // DRM 복호화 처리 - 서버 액션 직접 호출
      let arrayBuffer: ArrayBuffer;
      try {
        setProgress(10);
        toast.info("파일 복호화 중...");
        arrayBuffer = await decryptWithServerAction(file);
        setProgress(30);
      } catch (decryptError) {
        console.error("파일 복호화 실패, 원본 파일 사용:", decryptError);
        toast.warning("파일 복호화에 실패하여 원본 파일을 사용합니다.");
        // 복호화 실패 시 원본 파일 사용
        arrayBuffer = await file.arrayBuffer();
      }
      
      // ExcelJS 워크북 로드
      const workbook = new ExcelJS.Workbook();
      await workbook.xlsx.load(arrayBuffer);
      
      // 첫 번째 워크시트 가져오기
      const worksheet = workbook.worksheets[0];
      if (!worksheet) {
        throw new Error("Excel 파일에 워크시트가 없습니다.");
      }
      
      // 헤더 행 찾기
      let headerRowIndex = 1;
      let headerRow: ExcelJS.Row | undefined;
      let headerValues: (string | null)[] = [];
      
      worksheet.eachRow((row, rowNumber) => {
        const values = row.values as (string | null)[];
        if (!headerRow && values.some(v => v === "아이템 코드" || v === "itemCode" || v === "item_code")) {
          headerRowIndex = rowNumber;
          headerRow = row;
          headerValues = [...values];
        }
      });
      
      if (!headerRow) {
        throw new Error("Excel 파일에서 헤더 행을 찾을 수 없습니다.");
      }
      
      // 헤더를 기반으로 인덱스 매핑 생성
      const headerMapping: Record<string, number> = {};
      headerValues.forEach((value, index) => {
        if (typeof value === 'string') {
          headerMapping[value] = index;
        }
      });
      
      // 필수 헤더 확인
      const requiredHeaders = ["아이템 코드", "아이템 명", "설명"];
      const alternativeHeaders = {
        "아이템 코드": ["itemCode", "item_code"],
        "아이템 명": ["itemName", "item_name"],
        "설명": ["description"]
      };
      
      // 헤더 매핑 확인 (대체 이름 포함)
      const missingHeaders = requiredHeaders.filter(header => {
        const alternatives = alternativeHeaders[header as keyof typeof alternativeHeaders] || [];
        return !(header in headerMapping) && 
               !alternatives.some(alt => alt in headerMapping);
      });
      
      if (missingHeaders.length > 0) {
        throw new Error(`다음 필수 헤더가 누락되었습니다: ${missingHeaders.join(", ")}`);
      }
      
      // 데이터 행 추출 (헤더 이후 행부터)
      const dataRows: Record<string, any>[] = [];
      
      worksheet.eachRow((row, rowNumber) => {
        if (rowNumber > headerRowIndex) {
          const rowData: Record<string, any> = {};
          const values = row.values as (string | null | undefined)[];
          
          // 헤더 매핑에 따라 데이터 추출
          Object.entries(headerMapping).forEach(([header, index]) => {
            rowData[header] = values[index] || "";
          });
          
          // 빈 행이 아닌 경우만 추가
          if (Object.values(rowData).some(value => value && value.toString().trim() !== "")) {
            dataRows.push(rowData);
          }
        }
      });
      
      if (dataRows.length === 0) {
        throw new Error("Excel 파일에 가져올 데이터가 없습니다.");
      }
      
      // 진행 상황 업데이트를 위한 콜백
      const updateProgress = (current: number, total: number) => {
        const percentage = Math.round((current / total) * 100);
        setProgress(percentage);
      };
      
      // 실제 데이터 처리는 별도 함수에서 수행
      const result = await processFileImport(
        dataRows, 
        updateProgress
      );
      
      // 처리 완료
      toast.success(`${result.successCount}개의 아이템이 성공적으로 가져와졌습니다.`);
      
      if (result.errorCount > 0) {
        toast.warning(`${result.errorCount}개의 항목은 처리할 수 없었습니다.`);
      }
      
      // 상태 초기화 및 다이얼로그 닫기
      setFile(null);
      setOpen(false);
      
      // 성공 콜백 호출
      if (onSuccess) {
        onSuccess();
      }
    } catch (error) {
      console.error("Excel 파일 처리 중 오류 발생:", error);
      setError(error instanceof Error ? error.message : "파일 처리 중 오류가 발생했습니다.");
    } finally {
      setIsUploading(false);
    }
  };

  // 다이얼로그 열기/닫기 핸들러
  const handleOpenChange = (newOpen: boolean) => {
    if (!newOpen) {
      // 닫을 때 상태 초기화
      setFile(null)
      setError(null)
      setProgress(0)
      if (fileInputRef.current) {
        fileInputRef.current.value = ""
      }
    }
    setOpen(newOpen)
  }

  return (
    <>
      <Button
        variant="outline"
        size="sm"
        className="gap-2"
        onClick={() => setOpen(true)}
        disabled={isUploading}
      >
        <Upload className="size-4" aria-hidden="true" />
        <span className="hidden sm:inline">Import</span>
      </Button>

      <Dialog open={open} onOpenChange={handleOpenChange}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>아이템 가져오기</DialogTitle>
            <DialogDescription>
              아이템을 Excel 파일에서 가져옵니다.
              <br />
              올바른 형식의 Excel 파일(.xlsx)을 업로드하세요.
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-4 py-4">
            <div className="flex items-center gap-4">
              <input
                type="file"
                ref={fileInputRef}
                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-foreground file:font-medium"
                accept=".xlsx,.xls"
                onChange={handleFileChange}
                disabled={isUploading}
              />
            </div>

            {file && (
              <div className="text-sm text-muted-foreground">
                선택된 파일: <span className="font-medium">{file.name}</span> ({(file.size / 1024).toFixed(1)} KB)
              </div>
            )}

            {isUploading && (
              <div className="space-y-2">
                <Progress value={progress} />
                <p className="text-sm text-muted-foreground text-center">
                  {progress}% 완료
                </p>
              </div>
            )}

            {error && (
              <div className="text-sm font-medium text-destructive">
                {error}
              </div>
            )}
          </div>

          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setOpen(false)}
              disabled={isUploading}
            >
              취소
            </Button>
            <Button 
              onClick={handleImport} 
              disabled={!file || isUploading}
            >
              {isUploading ? "처리 중..." : "가져오기"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  )
}