"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-pq-handler" // 별도 파일로 분리

interface ImportPqButtonProps {
  projectId?: number | null
  onSuccess?: () => void
}

export function ImportPqButton({ projectId, onSuccess }: ImportPqButtonProps) {
  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)

      // 파일을 ArrayBuffer로 읽기
      const 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 === "Code" || v === "Check Point") && rowNumber > 1) {
          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 = ["Code", "Check Point", "Group Name"];
      const missingHeaders = requiredHeaders.filter(header => !(header 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, 
        projectId, 
        updateProgress
      );
      
      // 처리 완료
      toast.success(`${result.successCount}개의 PQ 항목이 성공적으로 가져와졌습니다.`);
      
      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>PQ 항목 가져오기</DialogTitle>
            <DialogDescription>
              {projectId 
                ? "프로젝트별 PQ 항목을 Excel 파일에서 가져옵니다." 
                : "일반 PQ 항목을 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>
    </>
  )
}