"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { formatDate } from "@/lib/utils"
import { Building2, Package, Calendar, FileText, User, Users, Ship, Award, Anchor, ArrowLeft } from "lucide-react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button";

interface RfqInfoHeaderProps {
    rfq: any
    rfqDetail: any
    vendor: any
}

export default function RfqInfoHeader({ rfq, rfqDetail, vendor }: RfqInfoHeaderProps) {
    const majorMaterial = rfq.rfqPrItems?.find(v => v.majorYn)
    const router = useRouter()

    console.log(rfq,"rfq")

    const handleGoBack = () => {
        router.push("/partners/rfq-last");
    };

    return (
        <Card>
            <CardHeader>
                <div className="flex items-center justify-between">
                    <CardTitle className="text-2xl">
                        견적서 작성
                        <Badge variant="outline" className="ml-3">
                            {rfq.rfqCode}
                        </Badge>
                    </CardTitle>
                    <Button
                        variant="ghost"
                        size="sm"
                        onClick={handleGoBack}
                        className="gap-2"
                    >
                        <ArrowLeft className="h-4 w-4" />
                        목록으로
                    </Button>
                </div>
            </CardHeader>
            <CardContent className="space-y-4">
                {/* 기본 정보 섹션 */}
                <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
                    {/* 프로젝트 정보 */}
                    <div className="space-y-1">
                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
                            <Building2 className="h-4 w-4" />
                            <span>프로젝트</span>
                        </div>
                        <p className="font-medium">{rfq.project?.name || '-'}</p>
                        <p className="text-xs text-muted-foreground">{rfq.project?.code || '-'}</p>
                    </div>

                    {/* 패키지 정보 */}
                    <div className="space-y-1">
                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
                            <Package className="h-4 w-4" />
                            <span>패키지</span>
                        </div>
                        <p className="font-medium">{rfq.packageName || '-'}</p>
                        <p className="text-xs text-muted-foreground">{rfq.packageNo || '-'}</p>
                    </div>

                    {/* 자재 그룹 */}
                    <div className="space-y-1">
                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
                            <Package className="h-4 w-4" />
                            <span>자재 그룹</span>
                        </div>
                        <p className="font-medium">{majorMaterial?.materialCategory || '-'}</p>
                        <p className="text-xs text-muted-foreground">{majorMaterial?.materialDescription || '-'}</p>
                    </div>

                    {/* 마감일 */}
                    <div className="space-y-1">
                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
                            <Calendar className="h-4 w-4" />
                            <span>마감일</span>
                        </div>
                        <p className="font-medium">
                            {rfq.dueDate ? formatDate(new Date(rfq.dueDate)) : '-'}
                        </p>
                        {rfq.dueDate && (
                            <p className="text-xs text-muted-foreground">
                                {(() => {
                                    const now = new Date()
                                    const dueDate = new Date(rfq.dueDate)
                                    const diffTime = dueDate.getTime() - now.getTime()
                                    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))

                                    if (diffDays < 0) {
                                        return <span className="text-red-600">마감일 초과</span>
                                    } else if (diffDays === 0) {
                                        return <span className="text-orange-600">오늘 마감</span>
                                    } else if (diffDays === 1) {
                                        return <span className="text-orange-600">내일 마감</span>
                                    } else {
                                        return `${diffDays}일 남음`
                                    }
                                })()}
                            </p>
                        )}
                    </div>

                    {/* 구매담당자 */}
                    <div className="space-y-1">
                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
                            <User className="h-4 w-4" />
                            <span>구매담당자</span>
                        </div>
                        <p className="font-medium">{rfq.picName || '-'}</p>
                    </div>

                    {/* 설계담당자 */}
                    <div className="space-y-1">
                        <div className="flex items-center gap-2 text-sm text-muted-foreground">
                            <User className="h-4 w-4" />
                            <span>설계담당자</span>
                        </div>
                        <p className="font-medium">{rfq.EngPicName || '-'}</p>
                    </div>

                    {/* RFQ 제목 및 타입 (F로 시작하는 경우만) */}
                    {rfq.rfqCode && rfq.rfqCode.startsWith("F") && (
                        <>
                            <div className="space-y-1 col-span-2">
                                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                                    <FileText className="h-4 w-4" />
                                    <span>견적 제목</span>
                                </div>
                                <p className="font-medium">{rfq.rfqTitle || '-'}</p>
                            </div>
                            <div className="space-y-1">
                                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                                    <FileText className="h-4 w-4" />
                                    <span>견적 종류</span>
                                </div>
                                <p className="font-medium">{rfq.rfqType || '-'}</p>
                            </div>
                        </>
                    )}
                </div>

                {/* 프로젝트 상세 정보 섹션 (별도 div) */}

                <div className="pt-4 border-t">
                    <h3 className="text-sm font-semibold mb-3">프로젝트 상세 정보</h3>
                    <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
                        {/* 고객정보 */}
                        {(
                            <div className="space-y-1">
                                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                                    <Users className="h-4 w-4" />
                                    <span>고객정보</span>
                                </div>
                                <p className="font-medium">{rfq.project?.OWN_NM || '-'}</p>
                            </div>
                        )}

                        {/* 선급 */}
                        {(
                            <div className="space-y-1">
                                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                                    <Award className="h-4 w-4" />
                                    <span>선급</span>
                                </div>
                                <p className="font-medium">{rfq.project?.CLS_1 || '-'}</p>
                            </div>
                        )}

                        {/* 선종 */}
                        {(
                            <div className="space-y-1">
                                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                                    <Ship className="h-4 w-4" />
                                    <span>선종</span>
                                </div>
                                <p className="font-medium">{rfq.project?.SKND || '-'}</p>
                            </div>
                        )}

                        {/* 척수 */}
                        {(
                            <div className="space-y-1">
                                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                                    <Anchor className="h-4 w-4" />
                                    <span>척수</span>
                                </div>
                                <p className="font-medium">{rfq.project?.TOT_CNRT_CNT || '-'}척</p>
                            </div>
                        )}

                        {/* 계약일 */}
                        {(
                            <div className="space-y-1">
                                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                                    <Calendar className="h-4 w-4" />
                                    <span>계약일</span>
                                </div>
                                <p className="font-medium">{rfq.project && rfq.project.CNRT_DT ? rfq.project.CNRT_DT : '-'}</p>
                            </div>
                        )}
                    </div>
                </div>

            </CardContent>
        </Card>
    )
}