"use client"

import * as React from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ProjectInfoTab } from "./project-info-tab"
import { QuotationResponseTab } from "./quotation-response-tab"
import { CommunicationTab } from "./communication-tab"

interface QuotationData {
  id: number
  status: string
  totalPrice: string | null
  currency: string | null
  validUntil: Date | null
  remark: string | null
  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
}

interface TechSalesQuotationTabsProps {
  quotation: QuotationData
  defaultTab?: string
}

export function TechSalesQuotationTabs({ quotation, defaultTab = "project" }: TechSalesQuotationTabsProps) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const currentTab = searchParams?.get("tab") || defaultTab

  const handleTabChange = (value: string) => {
    const params = new URLSearchParams(searchParams?.toString() || "")
    params.set("tab", value)
    router.push(`?${params.toString()}`, { scroll: false })
  }

  return (
    <Tabs value={currentTab} onValueChange={handleTabChange} className="h-full flex flex-col">
      <TabsList className="grid w-full grid-cols-3">
        <TabsTrigger value="project">프로젝트 및 RFQ 정보</TabsTrigger>
        <TabsTrigger value="quotation">견적 응답</TabsTrigger>
        <TabsTrigger value="communication">커뮤니케이션</TabsTrigger>
      </TabsList>
      
      <div className="flex-1 mt-4 overflow-hidden">
        <TabsContent value="project" className="h-full m-0">
          <ProjectInfoTab quotation={quotation} />
        </TabsContent>
        
        <TabsContent value="quotation" className="h-full m-0">
          <QuotationResponseTab quotation={quotation} />
        </TabsContent>
        
        <TabsContent value="communication" className="h-full m-0">
          <CommunicationTab quotation={quotation} />
        </TabsContent>
      </div>
    </Tabs>
  )
}