import { SelectHTMLAttributes, ReactNode, useState } from 'react';
import { ChevronDown, AlertCircle } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';

interface FormSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className'> {
  id: string;
  label: string;
  icon?: ReactNode;
  error?: string;
  children: ReactNode;
}

export function FormSelect({
  id,
  label,
  icon,
  error,
  value,
  disabled,
  children,
  ...rest
}: FormSelectProps) {
  const [isFocused, setIsFocused] = useState(false);
  const hasError = !!error;

  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    // Blur the select to close it and reset the chevron
    e.currentTarget.blur();
    setIsFocused(false);
    if (rest.onChange) {
      rest.onChange(e);
    }
  };

  return (
    <div className="w-full">
      {/* Label above */}
      <label
        htmlFor={id}
        className={`block text-sm font-medium mb-2 transition-colors duration-200 ${
          hasError ? 'text-puffin-error' : 'text-gray-700'
        } ${disabled ? 'opacity-50' : ''}`}
      >
        {label}
      </label>

      <div className="relative group">
        {/* Icon (if provided) */}
        {icon && (
          <div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-gray-500 z-10 transition-colors duration-200 group-hover:text-gray-700">
            {icon}
          </div>
        )}

        {/* Select element */}
        <select
          id={id}
          value={value}
          disabled={disabled}
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
          onChange={handleChange}
          aria-describedby={hasError ? `${id}-error` : undefined}
          aria-invalid={hasError}
          className={`
            w-full px-3 py-2.5 pr-10 rounded-lg
            border transition-all duration-200
            bg-white appearance-none cursor-pointer
            text-sm text-gray-900 font-medium outline-none
            shadow-sm
            ${icon ? 'pl-10' : ''}
            ${hasError
              ? 'border-red-300 ring-2 ring-red-100 hover:border-red-400'
              : isFocused
              ? 'border-blue-500 ring-2 ring-blue-100 shadow-md'
              : 'border-gray-200 hover:border-gray-300 hover:shadow-md'
            }
            ${disabled ? 'bg-gray-50 cursor-not-allowed opacity-60' : ''}
          `}
          {...rest}
        >
          {children}
        </select>

        {/* Chevron Icon */}
        <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
          <ChevronDown
            className={`w-4 h-4 transition-all duration-300 ${
              isFocused ? 'rotate-180 text-blue-500' : 'text-gray-400'
            } ${hasError ? 'text-red-400' : ''} ${
              !isFocused && !hasError ? 'group-hover:text-gray-600' : ''
            }`}
          />
        </div>
      </div>

      {/* Error Message */}
      <AnimatePresence>
        {hasError && (
          <motion.div
            id={`${id}-error`}
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.2 }}
            className="flex items-center gap-1.5 mt-2 text-sm text-red-600"
          >
            <AlertCircle className="w-4 h-4 flex-shrink-0" />
            <span>{error}</span>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}
