"use client"

import React from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Building, FileText, AlertCircle } from "lucide-react"
import { SimplifiedDocumentsTable } from "@/lib/vendor-document-list/ship/enhanced-documents-table"
import { getUserVendorDocuments, getUserVendorDocumentStats } from "@/lib/vendor-document-list/enhanced-document-service"

interface UserVendorDocumentDisplayProps {
  allPromises: Promise<[
    Awaited<ReturnType<typeof getUserVendorDocuments>>,
    Awaited<ReturnType<typeof getUserVendorDocumentStats>>
  ]>
}

// DrawingKind별 설명 매핑
const DRAWING_KIND_INFO = {
  B3: {
    title: "B3 승인 도면",
    description: "Approval → Work 단계로 진행되는 승인 중심 도면",
    color: "bg-blue-50 text-blue-700 border-blue-200"
  },
  B4: {
    title: "B4 작업 도면", 
    description: "Pre → Work 단계로 진행되는 DOLCE 연동 도면",
    color: "bg-green-50 text-green-700 border-green-200"
  },
  B5: {
    title: "B5 단계 도면",
    description: "First → Second 단계로 진행되는 순차적 도면", 
    color: "bg-purple-50 text-purple-700 border-purple-200"
  }
} as const

export function UserVendorDocumentDisplay({
  allPromises
}: UserVendorDocumentDisplayProps) {
  // allPromises가 제대로 전달되었는지 확인
  if (!allPromises) {
    return (
      <Card>
        <CardContent className="flex items-center justify-center py-8">
          <div className="text-center">
            <AlertCircle className="w-8 h-8 text-gray-400 mx-auto mb-2" />
            <p className="text-gray-600">데이터를 불러올 수 없습니다.</p>
          </div>
        </CardContent>
      </Card>
    )
  }

  // Promise.all로 감싸진 Promise를 사용해서 데이터 가져오기
  const [documentResult, statsResult] = React.use(allPromises)

  const { data, pageCount, total, drawingKind, vendorInfo } = documentResult
  const { stats, totalDocuments, primaryDrawingKind } = statsResult

  // 문서가 없는 경우
  if (total === 0) {
    return (
      <Card>
        <CardContent className="flex items-center justify-center py-8">
          <div className="text-center">
            <FileText className="w-8 h-8 text-gray-400 mx-auto mb-2" />
            <p className="text-gray-600">등록된 문서가 없습니다.</p>
          </div>
        </CardContent>
      </Card>
    )
  }

  // 실제 데이터의 drawingKind 또는 주요 drawingKind 사용
  const activeDrawingKind = drawingKind || primaryDrawingKind
  
  if (!activeDrawingKind) {
    return (
      <Card>
        <CardContent className="flex items-center justify-center py-8">
          <div className="text-center">
            <AlertCircle className="w-8 h-8 text-gray-400 mx-auto mb-2" />
            <p className="text-gray-600">문서 유형을 확인할 수 없습니다.</p>
          </div>
        </CardContent>
      </Card>
    )
  }

  // SimplifiedDocumentsTable에 전달할 promise (단일 객체로 변경)
  const tablePromise = Promise.resolve({ data, pageCount, total })
  
  const kindInfo = DRAWING_KIND_INFO[activeDrawingKind]

  return (
    <div className="space-y-6">
      {/* 벤더 정보 헤더 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Building className="w-5 h-5" />
            {vendorInfo?.vendorName || "내 회사"} 문서 관리
          </CardTitle>
          <CardDescription>
            {vendorInfo?.vendorCode && `코드: ${vendorInfo.vendorCode} • `}
            총 {totalDocuments}개 문서
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex gap-4">
            {Object.entries(stats).map(([kind, count]) => (
              <Badge 
                key={kind}
                variant={kind === activeDrawingKind ? "default" : "outline"}
                className="flex items-center gap-1"
              >
                <FileText className="w-3 h-3" />
                {kind}: {count}개
              </Badge>
            ))}
          </div>
        </CardContent>
      </Card>

    
          <SimplifiedDocumentsTable promises={tablePromise} />
 
    </div>
  )
}