"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 TechVendorPossibleItemsContainerProps {
  vendorTypes: VendorType[];
  children: React.ReactNode;
}

export function TechVendorPossibleItemsContainer({
  vendorTypes,
  children,
}: TechVendorPossibleItemsContainerProps) {
  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>
    </>
  );
}