import { useEffect, useRef, useState } from 'react';
import { cls } from '../../utils/cls';

interface SelectProps {
    options: string[];
    value?: string;
    onChange?: (value: string) => void;
    className?: string;
    placeholder?: string;
}

export const Select = ({ options, value, onChange, className = '', placeholder }: SelectProps) => {
    const [isOpen, setIsOpen] = useState(false);
    const [selectedValue, setSelectedValue] = useState(value || options[0] || '');
    const selectRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (value !== undefined) {
            setSelectedValue(value);
        }
    }, [value]);

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

        if (isOpen) {
            document.addEventListener('mousedown', handleClickOutside);
        }

        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [isOpen]);

    const handleSelect = (option: string) => {
        setSelectedValue(option);
        onChange?.(option);
        setIsOpen(false);
    };

    return (
        <div ref={selectRef} className={cls('relative', className)}>
            <button
                type='button'
                onClick={() => setIsOpen(!isOpen)}
                className={cls(
                    'mt-1 w-full rounded-2xl border px-3 py-1.5 bg-white outline-none text-xs',
                    'flex items-center justify-between',
                    'hover:border-gray-300 focus:ring-2 focus:ring-gray-200 transition-colors',
                )}
            >
                <span className={selectedValue ? 'text-gray-900' : 'text-gray-400'}>
                    {selectedValue || placeholder || '请选择'}
                </span>
                <span className={cls('text-gray-400 transition-transform text-[10px]', isOpen && 'rotate-180')}>
                    ▼
                </span>
            </button>
            {isOpen && (
                <div className='absolute z-50 w-full mt-1 bg-white border rounded-2xl shadow-lg overflow-hidden'>
                    {options.map((option) => (
                        <button
                            key={option}
                            type='button'
                            onClick={() => handleSelect(option)}
                            className={cls(
                                'w-full px-3 py-2 text-xs text-left transition-colors',
                                'hover:bg-gray-50',
                                selectedValue === option && 'bg-gray-100 text-gray-900 font-medium',
                                selectedValue !== option && 'text-gray-700',
                            )}
                        >
                            {option}
                        </button>
                    ))}
                </div>
            )}
        </div>
    );
};

