"use client"

import * as React from "react"
import { Upload, Download, FileText, AlertCircle, CheckCircle2, X } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"

import { type ExcelColumnDef } from "@/lib/export"
import { downloadExcelTemplate, parseExcelFile } from "./excel-import"
import { type GtcClauseTreeView } from "@/db/schema/gtc"
import { toast } from "@/hooks/use-toast"

interface ImportExcelDialogProps {
  documentId: number
  columns: ExcelColumnDef[]
  onSuccess?: () => void
  onImport?: (data: Partial<GtcClauseTreeView>[]) => Promise<void>
  trigger?: React.ReactNode
}

type ImportStep = "upload" | "preview" | "importing" | "complete"

export function ImportExcelDialog({
  documentId,
  columns,
  onSuccess,
  onImport,
  trigger,
}: ImportExcelDialogProps) {
  const [open, setOpen] = React.useState(false)
  const [step, setStep] = React.useState<ImportStep>("upload")
  const [selectedFile, setSelectedFile] = React.useState<File | null>(null)
  const [parsedData, setParsedData] = React.useState<Partial<GtcClauseTreeView>[]>([])
  const [errors, setErrors] = React.useState<string[]>([])
  const [isProcessing, setIsProcessing] = React.useState(false)
  const fileInputRef = React.useRef<HTMLInputElement>(null)

  // 다이얼로그 열기/닫기 시 상태 초기화
  const handleOpenChange = (isOpen: boolean) => {
    setOpen(isOpen)
    if (!isOpen) {
      // 다이얼로그 닫을 때 상태 초기화
      setStep("upload")
      setSelectedFile(null)
      setParsedData([])
      setErrors([])
      setIsProcessing(false)
      if (fileInputRef.current) {
        fileInputRef.current.value = ""
      }
    }
  }

  // 템플릿 다운로드
  const handleDownloadTemplate = async () => {
    try {
      await downloadExcelTemplate(columns, {
        filename: `gtc-clauses-template-${new Date().toISOString().split('T')[0]}`,
        includeExampleData: true,
        useGroupHeader: true,
      })
      
      toast({
        title: "템플릿 다운로드 완료",
        description: "Excel 템플릿이 다운로드되었습니다. 템플릿에 데이터를 입력한 후 업로드해주세요.",
      })
    } catch (error) {
      toast({
        title: "템플릿 다운로드 실패",
        description: "템플릿 다운로드 중 오류가 발생했습니다.",
        variant: "destructive",
      })
    }
  }

  // 파일 선택
  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      if (file.type !== "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" && 
          file.type !== "application/vnd.ms-excel") {
        toast({
          title: "잘못된 파일 형식",
          description: "Excel 파일(.xlsx, .xls)만 업로드할 수 있습니다.",
          variant: "destructive",
        })
        return
      }
      setSelectedFile(file)
    }
  }

  // 파일 파싱
  const handleParseFile = async () => {
    if (!selectedFile) return

    setIsProcessing(true)
    try {
      const result = await parseExcelFile<GtcClauseTreeView>(
        selectedFile,
        columns,
        {
          hasGroupHeader: true,
          sheetName: "GTC조항템플릿",
        }
      )

      setParsedData(result.data)
      setErrors(result.errors)

      if (result.errors.length > 0) {
        toast({
          title: "파싱 완료 (오류 있음)",
          description: `${result.data.length}개의 행을 파싱했지만 ${result.errors.length}개의 오류가 있습니다.`,
          variant: "destructive",
        })
      } else {
        toast({
          title: "파싱 완료",
          description: `${result.data.length}개의 행이 성공적으로 파싱되었습니다.`,
        })
      }

      setStep("preview")
    } catch (error) {
      toast({
        title: "파싱 실패",
        description: "파일 파싱 중 오류가 발생했습니다.",
        variant: "destructive",
      })
    } finally {
      setIsProcessing(false)
    }
  }

  // 데이터 가져오기 실행
  const handleImportData = async () => {
    if (parsedData.length === 0 || !onImport) return

    setStep("importing")
    try {
      await onImport(parsedData)
      setStep("complete")
      
      toast({
        title: "가져오기 완료",
        description: `${parsedData.length}개의 조항이 성공적으로 가져와졌습니다.`,
      })

      // 성공 콜백 호출 후 잠시 후 다이얼로그 닫기
      setTimeout(() => {
        onSuccess?.()
        setOpen(false)
      }, 2000)
    } catch (error) {
      toast({
        title: "가져오기 실패",
        description: "데이터 가져오기 중 오류가 발생했습니다.",
        variant: "destructive",
      })
      setStep("preview")
    }
  }

  const renderUploadStep = () => (
    <div className="space-y-6">
      <div className="text-center">
        <FileText className="mx-auto h-12 w-12 text-muted-foreground" />
        <h3 className="mt-4 text-lg font-semibold">Excel 파일로 조항 가져오기</h3>
        <p className="mt-2 text-sm text-muted-foreground">
          먼저 템플릿을 다운로드하여 데이터를 입력한 후 업로드해주세요.
        </p>
      </div>

      <div className="space-y-4">
        <div>
          <Button 
            onClick={handleDownloadTemplate}
            variant="outline"
            className="w-full"
          >
            <Download className="mr-2 h-4 w-4" />
            Excel 템플릿 다운로드
          </Button>
          <p className="mt-2 text-xs text-muted-foreground">
            템플릿에는 입력 가이드와 예시 데이터가 포함되어 있습니다.
          </p>
        </div>

        <Separator />

        <div>
          <input
            ref={fileInputRef}
            type="file"
            accept=".xlsx,.xls"
            onChange={handleFileSelect}
            className="hidden"
          />
          <Button
            onClick={() => fileInputRef.current?.click()}
            variant={selectedFile ? "secondary" : "outline"}
            className="w-full"
          >
            <Upload className="mr-2 h-4 w-4" />
            {selectedFile ? selectedFile.name : "Excel 파일 선택"}
          </Button>
        </div>

        {selectedFile && (
          <Button
            onClick={handleParseFile}
            disabled={isProcessing}
            className="w-full"
          >
            {isProcessing ? "파싱 중..." : "파일 분석하기"}
          </Button>
        )}
      </div>
    </div>
  )

  const renderPreviewStep = () => (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold">데이터 미리보기</h3>
        <div className="flex items-center gap-2">
          <Badge variant="secondary">
            {parsedData.length}개 행
          </Badge>
          {errors.length > 0 && (
            <Badge variant="destructive">
              {errors.length}개 오류
            </Badge>
          )}
        </div>
      </div>

      {errors.length > 0 && (
        <Alert variant="destructive">
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>
            <div className="space-y-1">
              <div className="font-medium">다음 오류들을 확인해주세요:</div>
              <ul className="list-disc list-inside space-y-1 text-sm">
                {errors.slice(0, 5).map((error, index) => (
                  <li key={index}>{error}</li>
                ))}
                {errors.length > 5 && (
                  <li>... 및 {errors.length - 5}개 추가 오류</li>
                )}
              </ul>
            </div>
          </AlertDescription>
        </Alert>
      )}

      <ScrollArea className="h-[300px] border rounded-md">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-12">#</TableHead>
              <TableHead>채번</TableHead>
              <TableHead>소제목</TableHead>
              <TableHead>상세항목</TableHead>
              <TableHead>분류</TableHead>
              <TableHead>상태</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {parsedData.map((item, index) => (
              <TableRow key={index}>
                <TableCell>{index + 1}</TableCell>
                <TableCell className="font-mono">
                  {item.itemNumber || "-"}
                </TableCell>
                <TableCell className="max-w-[200px] truncate">
                  {item.subtitle || "-"}
                </TableCell>
                <TableCell className="max-w-[300px] truncate">
                  {item.content || "-"}
                </TableCell>
                <TableCell>{item.category || "-"}</TableCell>
                <TableCell>
                  <Badge variant={item.isActive ? "default" : "secondary"}>
                    {item.isActive ? "활성" : "비활성"}
                  </Badge>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </ScrollArea>

      <div className="flex gap-2">
        <Button
          variant="outline"
          onClick={() => setStep("upload")}
          className="flex-1"
        >
          다시 선택
        </Button>
        <Button
          onClick={handleImportData}
          disabled={parsedData.length === 0 || errors.length > 0}
          className="flex-1"
        >
          {errors.length > 0 ? "오류 수정 후 가져오기" : `${parsedData.length}개 조항 가져오기`}
        </Button>
      </div>
    </div>
  )

  const renderImportingStep = () => (
    <div className="text-center py-8">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
      <h3 className="mt-4 text-lg font-semibold">가져오는 중...</h3>
      <p className="mt-2 text-sm text-muted-foreground">
        {parsedData.length}개의 조항을 데이터베이스에 저장하고 있습니다.
      </p>
    </div>
  )

  const renderCompleteStep = () => (
    <div className="text-center py-8">
      <CheckCircle2 className="mx-auto h-12 w-12 text-green-500" />
      <h3 className="mt-4 text-lg font-semibold">가져오기 완료!</h3>
      <p className="mt-2 text-sm text-muted-foreground">
        {parsedData.length}개의 조항이 성공적으로 가져와졌습니다.
      </p>
    </div>
  )

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogTrigger asChild>
        {trigger || (
          <Button variant="outline" size="sm">
            <Upload className="mr-2 h-4 w-4" />
            Excel에서 가져오기
          </Button>
        )}
      </DialogTrigger>
      <DialogContent className="max-w-4xl max-h-[80vh] overflow-hidden">
        <DialogHeader>
          <DialogTitle>Excel에서 조항 가져오기</DialogTitle>
          <DialogDescription>
            Excel 파일을 사용하여 여러 조항을 한 번에 가져올 수 있습니다.
          </DialogDescription>
        </DialogHeader>
        
        <div className="mt-4">
          {step === "upload" && renderUploadStep()}
          {step === "preview" && renderPreviewStep()}
          {step === "importing" && renderImportingStep()}
          {step === "complete" && renderCompleteStep()}
        </div>
      </DialogContent>
    </Dialog>
  )
}