"use client"

import React from 'react'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { CheckCircle2, XCircle, AlertCircle, RefreshCw, FileText } from "lucide-react"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"

export interface ImportResultItem {
  rowNumber: number
  status: 'success' | 'error' | 'duplicate' | 'warning'
  message: string
  data?: {
    vendorName?: string
    materialGroupName?: string
    designCategory?: string
  }
}

export interface ImportResult {
  totalRows: number
  successCount: number
  errorCount: number
  duplicateCount: number
  items: ImportResultItem[] // 실패한 건만 포함
}

interface ImportResultDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  result: ImportResult | null
}

export function ImportResultDialog({ open, onOpenChange, result }: ImportResultDialogProps) {
  if (!result) return null

  const getStatusIcon = (status: ImportResultItem['status']) => {
    switch (status) {
      case 'success':
        return <CheckCircle2 className="h-4 w-4 text-green-600" />
      case 'error':
        return <XCircle className="h-4 w-4 text-red-600" />
      case 'duplicate':
        return <RefreshCw className="h-4 w-4 text-yellow-600" />
      case 'warning':
        return <AlertCircle className="h-4 w-4 text-orange-600" />
    }
  }

  const getStatusBadge = (status: ImportResultItem['status']) => {
    switch (status) {
      case 'success':
        return <Badge variant="default" className="bg-green-600">성공</Badge>
      case 'error':
        return <Badge variant="destructive">실패</Badge>
      case 'duplicate':
        return <Badge variant="secondary" className="bg-yellow-600 text-white">중복</Badge>
      case 'warning':
        return <Badge variant="secondary" className="bg-orange-600 text-white">경고</Badge>
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-3xl max-h-[80vh]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <FileText className="h-5 w-5" />
            엑셀 Import 결과
          </DialogTitle>
          <DialogDescription>
            총 {result.totalRows}건의 데이터를 처리했습니다.
          </DialogDescription>
        </DialogHeader>

        {/* 요약 정보 */}
        <div className="grid grid-cols-3 gap-4 py-4">
          <div className="flex flex-col items-center p-4 bg-green-50 rounded-lg border border-green-200">
            <CheckCircle2 className="h-8 w-8 text-green-600 mb-2" />
            <div className="text-2xl font-bold text-green-700">{result.successCount}</div>
            <div className="text-sm text-green-600">성공</div>
          </div>
          
          <div className="flex flex-col items-center p-4 bg-yellow-50 rounded-lg border border-yellow-200">
            <RefreshCw className="h-8 w-8 text-yellow-600 mb-2" />
            <div className="text-2xl font-bold text-yellow-700">{result.duplicateCount}</div>
            <div className="text-sm text-yellow-600">중복</div>
          </div>

          <div className="flex flex-col items-center p-4 bg-red-50 rounded-lg border border-red-200">
            <XCircle className="h-8 w-8 text-red-600 mb-2" />
            <div className="text-2xl font-bold text-red-700">{result.errorCount}</div>
            <div className="text-sm text-red-600">실패</div>
          </div>
        </div>

        {/* 상세 정보 - 실패한 건만 표시 */}
        {result.errorCount > 0 && (
          <>
            <Separator />
            <div className="space-y-2">
              <h4 className="text-sm font-semibold text-red-600">실패한 항목 ({result.errorCount}건)</h4>
              <ScrollArea className="h-[300px] rounded-md border p-4">
                <div className="space-y-3">
                  {result.items.map((item, index) => (
                    <div
                      key={index}
                      className="flex items-start gap-3 p-3 rounded-lg bg-red-50 border border-red-200 hover:bg-red-100 transition-colors"
                    >
                      <div className="flex-shrink-0 mt-0.5">
                        {getStatusIcon(item.status)}
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 mb-1">
                          <span className="text-sm font-medium text-muted-foreground">
                            행 {item.rowNumber}
                          </span>
                          {getStatusBadge(item.status)}
                        </div>
                        <p className="text-sm text-foreground">{item.message}</p>
                        {item.data && (
                          <div className="mt-2 text-xs text-muted-foreground space-y-1">
                            {item.data.vendorName && (
                              <div>• 협력업체: {item.data.vendorName}</div>
                            )}
                            {item.data.materialGroupName && (
                              <div>• 자재그룹: {item.data.materialGroupName}</div>
                            )}
                            {item.data.designCategory && (
                              <div>• 설계기능: {item.data.designCategory}</div>
                            )}
                          </div>
                        )}
                      </div>
                    </div>
                  ))}

                  {result.items.length === 0 && (
                    <div className="text-center text-muted-foreground py-8">
                      모든 항목이 정상적으로 처리되었습니다.
                    </div>
                  )}
                </div>
              </ScrollArea>
            </div>
          </>
        )}

        {/* 하단 버튼 */}
        <div className="flex justify-end gap-2">
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            닫기
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}