"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"
import { InformationButton } from "@/components/information/information-button"
interface ItemType {
  id: string
  name: string
}

interface ItemTechContainerProps {
  itemTypes: ItemType[]
  children: React.ReactNode
}

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

  // URL에서 현재 선택된 아이템 타입 가져오기
  const itemType = searchParams.get("type") || "ship"

  // 선택한 아이템 타입에 해당하는 이름 찾기
  const selectedItem = itemTypes.find((item) => item.id === itemType)?.name || "조선 아이템"

  // 아이템 타입 변경 핸들러
  const handleItemTypeChange = React.useCallback((value: string) => {
    const params = new URLSearchParams(searchParams.toString())
    params.set("type", value)
    
    router.push(`${pathname}?${params.toString()}`)
  }, [router, pathname, searchParams])

  return (
    <>
      {/* 상단 영역: 제목 왼쪽 / 아이템 타입 선택기 오른쪽 */}
      <div className="flex items-center justify-between">
        {/* 왼쪽: 타이틀 & 설명 */}
        <div>
          <div className="flex items-center gap-2">
            <h2 className="text-2xl font-bold tracking-tight">자재 관리</h2>
            <InformationButton pagePath="evcp/items-tech" />
          </div>
          {/* <p className="text-muted-foreground">
            조선 및 해양 자재를 등록하고 관리할 수 있습니다.
          </p> */}
        </div>
        
        {/* 오른쪽: 아이템 타입 드롭다운 */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" className="min-w-[150px]">
              {selectedItem}
              <ChevronDown className="ml-2 h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-[200px]">
            {itemTypes.map((item) => (
              <DropdownMenuItem
                key={item.id}
                onClick={() => handleItemTypeChange(item.id)}
                className={item.id === itemType ? "bg-muted" : ""}
              >
                {item.name}
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
      
      {/* 컨텐츠 영역 */}
      <section className="overflow-hidden">
        <div>
          {children}
        </div>
      </section>
    </>
  )
}