"use client"

import * as React from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { formatDate } from "@/lib/utils"

interface ProjectInfoTabProps {
  quotation: {
    id: number
    rfq: {
      id: number
      rfqCode: string | null
      materialCode: string | null
      dueDate: Date | null
      status: string | null
      remark: string | null
      biddingProject?: {
        id: number
        pspid: string | null
        projNm: string | null
        sector: string | null
        projMsrm: string | null
        ptypeNm: string | null
      } | null
      createdByUser?: {
        id: number
        name: string | null
        email: string | null
      } | null
    } | null
    vendor: {
      id: number
      vendorName: string
      vendorCode: string | null
    } | null
  }
}

export function ProjectInfoTab({ quotation }: ProjectInfoTabProps) {
  const rfq = quotation.rfq

  console.log("rfq: ", rfq)

  if (!rfq) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="text-center">
          <h3 className="text-lg font-medium">RFQ 정보를 찾을 수 없습니다</h3>
          <p className="text-sm text-muted-foreground mt-1">
            연결된 RFQ 정보가 없습니다.
          </p>
        </div>
      </div>
    )
  }

  return (
    <ScrollArea className="h-full">
      <div className="space-y-6 p-1">
        {/* RFQ 기본 정보 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              RFQ 기본 정보
              <Badge variant="outline">{rfq.rfqCode || "미할당"}</Badge>
            </CardTitle>
            <CardDescription>
              요청서 기본 정보 및 자재 정보
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <div className="text-sm font-medium text-muted-foreground">RFQ 번호</div>
                <div className="text-sm">{rfq.rfqCode || "미할당"}</div>
              </div>
              <div className="space-y-2">
                <div className="text-sm font-medium text-muted-foreground">자재 그룹</div>
                <div className="text-sm">{rfq.materialCode || "N/A"}</div>
              </div>
              <div className="space-y-2">
                <div className="text-sm font-medium text-muted-foreground">마감일</div>
                <div className="text-sm">
                  {rfq.dueDate ? formatDate(rfq.dueDate) : "N/A"}
                </div>
              </div>
              <div className="space-y-2">
                <div className="text-sm font-medium text-muted-foreground">RFQ 상태</div>
                <div className="text-sm">{rfq.status || "N/A"}</div>
              </div>
              <div className="space-y-2">
                <div className="text-sm font-medium text-muted-foreground">담당자</div>
                <div className="text-sm">{rfq.createdByUser?.name || "N/A"}</div>
              </div>
            </div>
            {rfq.remark && (
              <div className="space-y-2">
                <div className="text-sm font-medium text-muted-foreground">비고</div>
                <div className="text-sm p-3 bg-muted rounded-md">{rfq.remark}</div>
              </div>
            )}
          </CardContent>
        </Card>

        {/* 프로젝트 기본 정보 */}
        {rfq.biddingProject && (
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                프로젝트 기본 정보
                <Badge variant="outline">{rfq.biddingProject.pspid || "N/A"}</Badge>
              </CardTitle>
              <CardDescription>
                연결된 프로젝트의 기본 정보
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <div className="text-sm font-medium text-muted-foreground">프로젝트 ID</div>
                  <div className="text-sm">{rfq.biddingProject.pspid || "N/A"}</div>
                </div>
                <div className="space-y-2">
                  <div className="text-sm font-medium text-muted-foreground">프로젝트명</div>
                  <div className="text-sm">{rfq.biddingProject.projNm || "N/A"}</div>
                </div>
                <div className="space-y-2">
                  <div className="text-sm font-medium text-muted-foreground">프로젝트 섹터</div>
                  <div className="text-sm">{rfq.biddingProject.sector || "N/A"}</div>
                </div>
                <div className="space-y-2">
                  <div className="text-sm font-medium text-muted-foreground">프로젝트 규모</div>
                  <div className="text-sm">{rfq.biddingProject.projMsrm || "N/A"}</div>
                </div>
                <div className="space-y-2">
                  <div className="text-sm font-medium text-muted-foreground">프로젝트 타입</div>
                  <div className="text-sm">{rfq.biddingProject.ptypeNm || "N/A"}</div>
                </div>
              </div>
            </CardContent>
          </Card>
        )}

      </div>
    </ScrollArea>
  )
}