import { useState, useRef, useEffect } from 'react'

interface ComboBoxOption {
  value: string
  label: string
}

interface ComboBoxProps {
  value: string | number
  onChange: (value: string) => void
  options: ComboBoxOption[]
  placeholder?: string
  className?: string
}

export function ComboBox({ value, onChange, options, placeholder, className }: ComboBoxProps) {
  const [isOpen, setIsOpen] = useState(false)
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
        setIsOpen(false)
      }
    }

    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [])

  const selectedOption = options.find(opt => opt.value === String(value))
  const displayText = selectedOption?.label || placeholder || '선택'

  return (
    <div ref={containerRef} className="relative">
      <div
        className={`cursor-pointer flex items-center justify-between pr-2 ${className ?? ''}`}
        onClick={() => setIsOpen(!isOpen)}
      >
        <span>{displayText}</span>
        <span
          className="text-[8px] text-text-3"
          style={{
            transition: 'transform 0.2s',
            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
          }}
        >
          ▼
        </span>
      </div>

      {isOpen && (
        <div
          className="absolute left-0 right-0 bg-bg-0 border border-border overflow-y-auto z-[1000]"
          style={{
            top: 'calc(100% + 2px)',
            borderRadius: 'var(--rS)',
            maxHeight: '200px',
            boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
            animation: 'fadeSlideDown 0.15s ease-out'
          }}
        >
          {options.map((option) => (
            <div
              key={option.value}
              onClick={() => {
                onChange(option.value)
                setIsOpen(false)
              }}
              className="text-[11px] cursor-pointer"
              style={{
                padding: '8px 10px',
                color: option.value === String(value) ? 'var(--cyan)' : 'var(--t2)',
                background: option.value === String(value) ? 'rgba(6,182,212,0.1)' : 'transparent',
                transition: '0.1s',
                borderLeft: option.value === String(value) ? '2px solid var(--cyan)' : '2px solid transparent'
              }}
              onMouseEnter={(e) => {
                if (option.value !== String(value)) {
                  e.currentTarget.style.background = 'rgba(255,255,255,0.03)'
                }
              }}
              onMouseLeave={(e) => {
                if (option.value !== String(value)) {
                  e.currentTarget.style.background = 'transparent'
                }
              }}
            >
              {option.label}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}