'use client';

import { useState, useRef, useEffect } from 'react';
import { ChevronDown, X } from 'lucide-react';

interface SelectOption {
  value: string;
  label: string;
}

interface FilterSelectProps {
  value: string;
  onChange: (value: string) => void;
  options: SelectOption[];
  placeholder?: string;
  allLabel?: string;
  showAllOption?: boolean;
  className?: string;
  labelClassName?: string;
}

export function FilterSelect({ value, onChange, options, placeholder, allLabel = '全部', showAllOption = true, className, labelClassName }: FilterSelectProps) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  const selected = options.find((o) => o.value === value);
  const displayText = value === 'all' || !value ? '' : selected?.label || '';

  return (
    <div ref={ref} className={`relative ${className || ''}`}>
      <button
        type="button"
        onClick={() => setOpen(!open)}
        className="flex h-8 w-full items-center justify-between gap-1.5 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-2.5 text-[12px] hover:border-[var(--accent)] transition-colors whitespace-nowrap"
      >
        <span className={`truncate ${labelClassName || 'max-w-[80px]'} ${displayText ? 'text-[var(--ink)]' : 'text-[var(--ink-muted)]'}`}>
          {displayText || placeholder || allLabel}
        </span>
        <ChevronDown className={`shrink-0 h-3 w-3 text-[var(--ink-muted)] transition-transform ${open ? 'rotate-180' : ''}`} />
      </button>

      {open && (
        <div className="absolute top-full left-0 mt-1 z-50 min-w-full max-w-[200px] max-h-[240px] overflow-y-auto rounded-xl border border-[var(--line)] bg-[var(--bg-card)] shadow-[var(--shadow-md)] py-1">
          {showAllOption && (
            <button
              type="button"
              onClick={() => { onChange('all'); setOpen(false); }}
              className={`w-full text-left px-3 py-1.5 text-[12px] truncate transition-colors ${value === 'all' || !value ? 'text-[var(--accent)] font-medium bg-[var(--accent-soft)]' : 'text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]'}`}
            >
              {allLabel}
            </button>
          )}
          {options.map((opt) => (
            <button
              key={opt.value}
              type="button"
              onClick={() => { onChange(opt.value); setOpen(false); }}
              className={`w-full text-left px-3 py-1.5 text-[12px] truncate transition-colors ${value === opt.value ? 'text-[var(--accent)] font-medium bg-[var(--accent-soft)]' : 'text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]'}`}
            >
              {opt.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}
