"use client"

import * as React from "react"
import { useRouter, usePathname, useSearchParams } from "next/navigation"
import { ChevronDown } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

interface VendorType {
  id: string
  name: string
  value: string
}

interface TechVendorContainerProps {
  vendorTypes: VendorType[]
  children: React.ReactNode
}

export function TechVendorContainer({
  vendorTypes,
  children,
}: TechVendorContainerProps) {
  const router = useRouter()
  const pathname = usePathname()
  const searchParamsObj = useSearchParams()
  
  // useSearchParams를 메모이제이션하여 안정적인 참조 생성
  const searchParams = React.useMemo(
    () => searchParamsObj || new URLSearchParams(),
    [searchParamsObj]
  )

  // URL에서 현재 선택된 벤더 타입 가져오기
  const vendorType = searchParams.get("vendorType") || "all"

  // 선택한 벤더 타입에 해당하는 이름 찾기
  const selectedVendor = vendorTypes.find((vendor) => vendor.id === vendorType)?.name || "전체"

  // 벤더 타입 변경 핸들러
  const handleVendorTypeChange = React.useCallback((value: string) => {
    const params = new URLSearchParams(searchParams.toString())
    if (value === "all") {
      params.delete("vendorType")
    } else {
      params.set("vendorType", value)
    }
    
    router.push(`${pathname}?${params.toString()}`)
  }, [router, pathname, searchParams])

  return (
    <>
      {/* 상단 영역: 제목 왼쪽 / 벤더 타입 선택기 오른쪽 */}
      <div className="flex items-center justify-between">
        {/* 왼쪽: 타이틀 & 설명 */}
        <div>
          <h2 className="text-2xl font-bold tracking-tight">기술영업 벤더 리스트</h2>
          <p className="text-muted-foreground">
            기술영업 벤더에 대한 요약 정보를 확인하고 관리할 수 있습니다.
          </p>
        </div>
        
        {/* 오른쪽: 벤더 타입 드롭다운 */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" className="min-w-[150px]">
              {selectedVendor}
              <ChevronDown className="ml-2 h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-[200px]">
            {vendorTypes.map((vendor) => (
              <DropdownMenuItem
                key={vendor.id}
                onClick={() => handleVendorTypeChange(vendor.id)}
                className={vendor.id === vendorType ? "bg-muted" : ""}
              >
                {vendor.name}
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
      
      {/* 컨텐츠 영역 */}
      <section className="overflow-hidden">
        <div>
          {children}
        </div>
      </section>
    </>
  )
}