import { Input } from 'antd';

const { TextArea } = Input;

interface OptionListProps {
  type: 'single' | 'multiple' | 'judgment' | 'text';
  options?: string[];
  value: string | string[];
  onChange: (val: string | string[]) => void;
  disabled?: boolean;
}

export const OptionList = ({ type, options, value, onChange, disabled }: OptionListProps) => {
  const getOptionLabel = (index: number) => String.fromCharCode(65 + index);

  const isSelected = (val: string) => {
    if (Array.isArray(value)) {
      return value.includes(val);
    }
    return value === val;
  };

  const handleSelect = (val: string) => {
    if (disabled) return;
    
    if (type === 'multiple') {
      const current = Array.isArray(value) ? value : [];
      const next = current.includes(val)
        ? current.filter(v => v !== val)
        : [...current, val];
      onChange(next);
    } else {
      onChange(val);
    }
  };

  if (type === 'text') {
    return (
      <div className="mt-4">
        <TextArea
          rows={6}
          value={value as string || ''}
          onChange={(e) => onChange(e.target.value)}
          placeholder="请输入您的答案..."
          disabled={disabled}
          className="rounded-xl border-gray-300 focus:border-[#008C8C] focus:ring-[#008C8C] text-base p-4 resize-none shadow-sm hover:border-[#008C8C] transition-colors"
        />
      </div>
    );
  }

  const renderOptions = () => {
    if (type === 'judgment') {
      return ['正确', '错误'].map((opt, idx) => ({ label: opt, value: opt, key: idx }));
    }
    return (options || []).map((opt, idx) => ({ label: opt, value: opt, key: idx }));
  };

  return (
    <div className="space-y-1.5 mt-2">
      {renderOptions().map((opt, index) => {
        const selected = isSelected(opt.value);
        return (
          <div
            key={opt.key}
            onClick={() => handleSelect(opt.value)}
            className={`
              relative flex items-center p-1.5 rounded-xl border-2 transition-all duration-200 active:scale-[0.99] cursor-pointer
              ${selected 
                ? 'border-[#00897B] bg-[#E0F2F1]' 
                : 'border-transparent bg-white shadow-sm hover:border-gray-200'}
            `}
          >
            {/* 选项圆圈 */}
            <div className={`
              flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-xs font-medium border mr-1.5 transition-colors
              ${selected
                ? 'bg-[#00897B] border-[#00897B] text-white'
                : 'bg-white border-gray-300 text-gray-500'}
            `}>
              {type === 'judgment' ? (index === 0 ? '对' : '错') : getOptionLabel(index)}
            </div>
            
            {/* 选项内容 */}
            <div className={`text-xs leading-tight select-none ${selected ? 'text-[#00695C] font-medium' : 'text-gray-700'}`}>
              {opt.label}
            </div>
          </div>
        );
      })}
    </div>
  );
};
