'use client'

/**
 * 선적지/하역지 선택기
 *
 * placeOfShipping 테이블 기준으로 선적지/하역지에 쓰이는 장소코드 및 장소명 선택
 */

import { Select, SelectItem, SelectContent } from "@/components/ui/select"
import { SelectTrigger } from "@/components/ui/select"
import { SelectValue } from "@/components/ui/select"
import { Input } from "@/components/ui/input"
import { useState, useEffect, useMemo } from "react"
import { getPlaceOfShippingForSelection } from "./place-of-shipping-service"

interface PlaceOfShippingData {
  code: string
  description: string
}

interface PlaceOfShippingSelectorProps {
  value?: string
  onValueChange?: (value: string) => void
  placeholder?: string
  disabled?: boolean
  className?: string
}

export function PlaceOfShippingSelector({
  value = "",
  onValueChange,
  placeholder = "선적지/하역지 선택",
  disabled = false,
  className
}: PlaceOfShippingSelectorProps) {
  const [placeOfShippingData, setPlaceOfShippingData] = useState<PlaceOfShippingData[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [searchTerm, setSearchTerm] = useState("")

  const filteredData = useMemo(() => {
    if (!searchTerm) return placeOfShippingData
    return placeOfShippingData.filter(item =>
      item.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.description.toLowerCase().includes(searchTerm.toLowerCase())
    )
  }, [placeOfShippingData, searchTerm])

  useEffect(() => {
    const loadData = async () => {
      try {
        const data = await getPlaceOfShippingForSelection()
        setPlaceOfShippingData(data)
      } catch (error) {
        console.error('선적지/하역지 데이터 로드 실패:', error)
        setPlaceOfShippingData([])
      } finally {
        setIsLoading(false)
      }
    }

    loadData()
  }, [])

  return (
    <div className="space-y-2">
      <Input
        placeholder="검색..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        className="w-full"
      />
      <Select
        value={value}
        onValueChange={onValueChange}
        disabled={disabled || isLoading}
      >
        <SelectTrigger className={className}>
          <SelectValue placeholder={isLoading ? "로딩 중..." : placeholder} />
        </SelectTrigger>
        <SelectContent>
          {filteredData.length === 0 && searchTerm ? (
            <div className="p-2 text-sm text-muted-foreground">
              검색 결과가 없습니다
            </div>
          ) : (
            filteredData.map((item) => (
              <SelectItem key={item.code} value={item.code}>
                {item.code} {item.description}
              </SelectItem>
            ))
          )}
        </SelectContent>
      </Select>
    </div>
  )
}