import React from 'react';
import { cn } from '../../lib/utils';
import { ChevronDown } from 'lucide-react';

interface ChineseSelectOption {
  value: string;
  label: string;
  disabled?: boolean;
}

interface ChineseSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
  label?: string;
  error?: string;
  helperText?: string;
  variant?: 'default' | 'bordered' | 'filled';
  size?: 'sm' | 'md' | 'lg';
  options: ChineseSelectOption[];
  placeholder?: string;
}

const ChineseSelect = React.forwardRef<HTMLSelectElement, ChineseSelectProps>(
  ({ className, label, error, helperText, variant = 'default', size = 'md', options, placeholder, ...props }, ref) => {
    const baseClasses = [
      'w-full font-chinese transition-all duration-200 ease-in-out',
      'focus:outline-none focus:ring-2 focus:ring-offset-1',
      'disabled:opacity-50 disabled:cursor-not-allowed',
      'appearance-none cursor-pointer',
      'bg-no-repeat bg-right',
    ];

    const variantClasses = {
      default: [
        'bg-white border border-gray-300',
        'hover:border-red-400 focus:border-red-500 focus:ring-red-500/20',
        error ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20' : '',
      ],
      bordered: [
        'bg-transparent border-2 border-red-300',
        'hover:border-red-500 focus:border-red-600 focus:ring-red-500/20',
        error ? 'border-red-500 focus:border-red-600 focus:ring-red-500/20' : '',
      ],
      filled: [
        'bg-red-50 border border-red-200',
        'hover:bg-red-100 hover:border-red-300',
        'focus:bg-white focus:border-red-500 focus:ring-red-500/20',
        error ? 'bg-red-100 border-red-500 focus:border-red-500 focus:ring-red-500/20' : '',
      ],
    };

    const sizeClasses = {
      sm: [
        'px-3 py-2 pr-8 text-sm rounded-md',
        'min-h-[36px]', // 移动端友好
      ],
      md: [
        'px-4 py-2.5 pr-10 text-base rounded-lg',
        'min-h-[44px]', // 移动端友好
      ],
      lg: [
        'px-5 py-3 pr-12 text-lg rounded-xl',
        'min-h-[52px]', // 移动端友好
      ],
    };

    // 移动端响应式调整
    const responsiveClasses = [
      'touch-manipulation', // 优化触摸体验
      'max-md:text-base', // 移动端字体调整
    ];

    return (
      <div className="w-full">
        {/* 标签 */}
        {label && (
          <label className="block text-sm font-medium text-gray-700 mb-2 font-chinese">
            {label}
            {props.required && <span className="text-red-500 ml-1">*</span>}
          </label>
        )}
        
        {/* 选择器容器 */}
        <div className="relative">
          <select
            className={cn(
              baseClasses,
              variantClasses[variant],
              sizeClasses[size],
              responsiveClasses,
              className
            )}
            ref={ref}
            {...props}
          >
            {/* 占位符选项 */}
            {placeholder && (
              <option value="" disabled>
                {placeholder}
              </option>
            )}
            
            {/* 选项列表 */}
            {options.map((option) => (
              <option
                key={option.value}
                value={option.value}
                disabled={option.disabled}
                className="font-chinese"
              >
                {option.label}
              </option>
            ))}
          </select>
          
          {/* 下拉箭头 */}
          <div className="absolute inset-y-0 right-0 flex items-center pointer-events-none">
            <div className={cn(
              'pr-2',
              size === 'sm' ? 'pr-2' : size === 'md' ? 'pr-3' : 'pr-4'
            )}>
              <ChevronDown className={cn(
                'text-gray-400',
                size === 'sm' ? 'h-4 w-4' : size === 'md' ? 'h-5 w-5' : 'h-6 w-6'
              )} />
            </div>
          </div>
          
          {/* 错误状态图标 */}
          {error && (
            <div className={cn(
              'absolute inset-y-0 right-0 flex items-center pointer-events-none',
              size === 'sm' ? 'pr-7' : size === 'md' ? 'pr-9' : 'pr-11'
            )}>
              <svg className="h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
              </svg>
            </div>
          )}
        </div>
        
        {/* 错误信息或帮助文本 */}
        {(error || helperText) && (
          <div className="mt-1.5">
            {error ? (
              <p className="text-sm text-red-600 font-chinese">{error}</p>
            ) : (
              helperText && (
                <p className="text-sm text-gray-500 font-chinese">{helperText}</p>
              )
            )}
          </div>
        )}
      </div>
    );
  }
);

ChineseSelect.displayName = 'ChineseSelect';

export { ChineseSelect };
export type { ChineseSelectProps, ChineseSelectOption };