"use client"

import * as React from "react"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Calendar, Users, FileText, ChevronDown, ChevronRight } from "lucide-react"
import type { AvlListItem } from "@/lib/avl/types"

interface AvlHistoryModalProps {
  isOpen: boolean
  onClose: () => void
  avlItem: AvlListItem | null
  historyData?: AvlHistoryRecord[]
  onLoadHistory?: (avlItem: AvlListItem) => Promise<AvlHistoryRecord[]>
}

export interface VendorSnapshot {
  id: number
  vendorName?: string
  avlVendorName?: string
  vendorCode?: string
  disciplineName?: string
  materialNameCustomerSide?: string
  materialGroupCode?: string
  materialGroupName?: string
  tier?: string
  hasAvl?: boolean
  faTarget?: boolean
  headquarterLocation?: string
  ownerSuggestion?: boolean
  shiSuggestion?: boolean
  [key: string]: unknown // 다른 모든 속성들
}

export interface AvlHistoryRecord {
  id: number
  rev: number
  createdAt: string
  createdBy: string
  vendorInfoSnapshot: VendorSnapshot[] // JSON 데이터
  changeDescription?: string
}

// 스냅샷 테이블 컴포넌트
interface SnapshotTableProps {
  snapshot: VendorSnapshot[]
  isOpen: boolean
  onToggle: () => void
}

function SnapshotTable({ snapshot, isOpen, onToggle }: SnapshotTableProps) {
  if (!snapshot || snapshot.length === 0) {
    return (
      <div className="text-sm text-muted-foreground">
        스냅샷 데이터가 없습니다.
      </div>
    )
  }

  return (
    <Collapsible open={isOpen} onOpenChange={onToggle}>
      <CollapsibleTrigger asChild>
        <Button variant="outline" size="sm" className="w-full justify-between">
          <span>벤더 상세 정보 ({snapshot.length}개)</span>
          {isOpen ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
        </Button>
      </CollapsibleTrigger>
      <CollapsibleContent className="mt-3">
        <div className="border rounded-lg">
          <div className="overflow-auto max-h-[400px]">
            <Table>
              <TableHeader className="sticky top-0 bg-background z-10">
                <TableRow>
                  <TableHead className="w-[60px]">No.</TableHead>
                  <TableHead className="w-[100px]">설계공종</TableHead>
                  <TableHead>고객사 AVL 자재명</TableHead>
                  <TableHead className="w-[120px]">자재그룹 코드</TableHead>
                  <TableHead className="w-[130px]">자재그룹 명</TableHead>
                  <TableHead>AVL 등재업체명</TableHead>
                  <TableHead className="w-[120px]">협력업체 코드</TableHead>
                  <TableHead className="w-[130px]">협력업체 명</TableHead>
                  <TableHead className="w-[80px]">선주제안</TableHead>
                  <TableHead className="w-[80px]">SHI 제안</TableHead>
                  <TableHead className="w-[100px]">본사 위치</TableHead>
                  <TableHead className="w-[80px]">등급</TableHead>
                  <TableHead className="w-[60px]">AVL</TableHead>
                  <TableHead className="w-[80px]">FA대상</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {snapshot.map((item, index) => (
                  <TableRow key={item.id || index}>
                    <TableCell className="font-mono text-xs text-center">{index + 1}</TableCell>
                    <TableCell className="text-sm">{item.disciplineName || '-'}</TableCell>
                    <TableCell className="text-sm">{item.materialNameCustomerSide || '-'}</TableCell>
                    <TableCell className="font-mono text-xs">{item.materialGroupCode || '-'}</TableCell>
                    <TableCell className="text-sm">{item.materialGroupName || '-'}</TableCell>
                    <TableCell className="font-medium text-sm">{item.avlVendorName || '-'}</TableCell>
                    <TableCell className="font-mono text-xs">{item.vendorCode || '-'}</TableCell>
                    <TableCell className="font-medium text-sm">{item.vendorName || '-'}</TableCell>
                    <TableCell>
                      <Badge variant={item.ownerSuggestion ? "default" : "secondary"} className="text-xs">
                        {item.ownerSuggestion ? "예" : "아니오"}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      <Badge variant={item.shiSuggestion ? "default" : "secondary"} className="text-xs">
                        {item.shiSuggestion ? "예" : "아니오"}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-xs">{item.headquarterLocation || '-'}</TableCell>
                    <TableCell>
                      {item.tier ? (
                        <Badge variant="outline" className="text-xs">
                          {item.tier}
                        </Badge>
                      ) : '-'}
                    </TableCell>
                    <TableCell>
                      <Badge variant={item.hasAvl ? "default" : "secondary"} className="text-xs">
                        {item.hasAvl ? "Y" : "N"}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      <Badge variant={item.faTarget ? "default" : "secondary"} className="text-xs">
                        {item.faTarget ? "Y" : "N"}
                      </Badge>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </div>
      </CollapsibleContent>
    </Collapsible>
  )
}

export function AvlHistoryModal({
  isOpen,
  onClose,
  avlItem,
  historyData,
  onLoadHistory
}: AvlHistoryModalProps) {
  const [loading, setLoading] = React.useState(false)
  const [history, setHistory] = React.useState<AvlHistoryRecord[]>([])
  const [openSnapshots, setOpenSnapshots] = React.useState<Record<number, boolean>>({})

  // 히스토리 데이터 로드
  React.useEffect(() => {
    if (isOpen && avlItem && onLoadHistory) {
      setLoading(true)
      onLoadHistory(avlItem)
        .then(setHistory)
        .catch(console.error)
        .finally(() => setLoading(false))
    } else if (historyData) {
      setHistory(historyData)
    }
  }, [isOpen, avlItem, onLoadHistory, historyData])

  // 스냅샷 테이블 토글 함수
  const toggleSnapshot = (recordId: number) => {
    setOpenSnapshots(prev => ({
      ...prev,
      [recordId]: !prev[recordId]
    }))
  }

  if (!avlItem) return null

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-7xl h-[90vh] flex flex-col">
        <DialogHeader className="flex-shrink-0">
          <DialogTitle className="flex items-center gap-2">
            <FileText className="h-5 w-5" />
            AVL 리비전 히스토리
          </DialogTitle>
          <div className="text-sm text-muted-foreground">
            {avlItem.isTemplate ? "표준 AVL" : "프로젝트 AVL"} - {avlItem.avlKind}
            {avlItem.projectCode && ` (${avlItem.projectCode})`}
          </div>
        </DialogHeader>

        <div className="flex-1 overflow-auto min-h-0">
          <div className="pr-4">
          {loading ? (
            <div className="flex items-center justify-center h-[300px]">
              <div className="text-muted-foreground">히스토리를 불러오는 중...</div>
            </div>
          ) : history.length === 0 ? (
            <div className="flex items-center justify-center h-[300px]">
              <div className="text-muted-foreground">히스토리 데이터가 없습니다.</div>
            </div>
          ) : (
            <div className="space-y-4 py-4">
              {history.map((record, index) => (
                <div
                  key={record.id}
                  className={`p-4 border rounded-lg ${
                    index === 0 ? "border-primary bg-primary/5" : "border-border"
                  }`}
                >
                  {/* 리비전 헤더 */}
                  <div className="flex items-center justify-between mb-3">
                    <div className="flex items-center gap-2">
                      <Badge
                        variant={index === 0 ? "default" : "outline"}
                        className="font-mono"
                      >
                        Rev {record.rev}
                      </Badge>
                      {index === 0 && (
                        <Badge variant="secondary" className="text-xs">
                          현재
                        </Badge>
                      )}
                    </div>
                    <div className="flex items-center gap-4 text-sm text-muted-foreground">
                      <div className="flex items-center gap-1">
                        <Calendar className="h-4 w-4" />
                        {new Date(record.createdAt).toLocaleDateString('ko-KR')}
                      </div>
                    </div>
                  </div>

                  {/* 변경 설명 */}
                  {record.changeDescription && (
                    <div className="mb-3 p-2 bg-muted/50 rounded text-sm">
                      {record.changeDescription}
                    </div>
                  )}

                  {/* Vendor Info 요약 */}
                  <div className="grid grid-cols-3 gap-4 text-sm">
                    <div className="text-center">
                      <div className="font-medium text-lg">
                        {record.vendorInfoSnapshot?.length || 0}
                      </div>
                      <div className="text-muted-foreground">총 협력업체</div>
                    </div>
                    <div className="text-center">
                      <div className="font-medium text-lg">
                        {record.vendorInfoSnapshot?.filter(v => v.hasAvl).length || 0}
                      </div>
                      <div className="text-muted-foreground">AVL 등재</div>
                    </div>
                    <div className="text-center">
                      <div className="font-medium text-lg">
                        {record.vendorInfoSnapshot?.filter(v => v.faTarget).length || 0}
                      </div>
                      <div className="text-muted-foreground">FA 대상</div>
                    </div>
                  </div>

                  {/* 스냅샷 테이블 */}
                  <div className="mt-3 pt-3 border-t">
                    <SnapshotTable
                      snapshot={record.vendorInfoSnapshot || []}
                      isOpen={openSnapshots[record.id] || false}
                      onToggle={() => toggleSnapshot(record.id)}
                    />
                  </div>
                </div>
              ))}
            </div>
          )}
          </div>
        </div>

        <div className="flex justify-end pt-4 border-t flex-shrink-0 mt-4">
          <Button variant="outline" onClick={onClose}>
            닫기
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}