import React from 'react';
import { Select, Space, Tag, Tooltip } from 'antd';
import { ThunderboltOutlined, RocketOutlined, GlobalOutlined } from '@ant-design/icons';
import './ModelSelector.css';

const { Option } = Select;

export type ModelType = 'deepseek-v3' | 'qwen3-72b' | 'qwen-long' | 'gemini-pro';

interface ModelInfo {
  value: ModelType;
  label: string;
  description: string;
  icon: React.ReactNode;
  color: string;
  features: string[];
  recommended?: boolean;
}

const models: ModelInfo[] = [
  {
    value: 'deepseek-v3',
    label: 'DeepSeek-V3',
    description: '高性价比，推理能力强（128K上下文）',
    icon: <ThunderboltOutlined />,
    color: '#1890ff',
    features: ['快速响应', '成本优化', '128K上下文'],
    recommended: true,
  },
  {
    value: 'qwen3-72b',
    label: 'Qwen3-72B',
    description: '阿里通义千问，中文理解优秀（32K上下文）',
    icon: <RocketOutlined />,
    color: '#52c41a',
    features: ['中文优化', '多轮对话', '32K上下文'],
  },
  {
    value: 'qwen-long',
    label: 'Qwen-Long',
    description: '超长上下文模型，1M tokens（约700页）',
    icon: <RocketOutlined />,
    color: '#722ed1',
    features: ['1M超长上下文', '全文档理解', '文献综述'],
    recommended: false,
  },
  {
    value: 'gemini-pro',
    label: 'Gemini Pro',
    description: 'Google大模型（即将上线）',
    icon: <GlobalOutlined />,
    color: '#faad14',
    features: ['多模态', '全球化', '创新能力'],
  },
];

interface ModelSelectorProps {
  value: ModelType;
  onChange: (value: ModelType) => void;
  disabled?: boolean;
}

const ModelSelector: React.FC<ModelSelectorProps> = ({
  value,
  onChange,
  disabled = false,
}) => {
  const currentModel = models.find(m => m.value === value);

  return (
    <div className="model-selector-container">
      <Space align="center">
        <span className="model-selector-label">AI模型：</span>
        <Select
          value={value}
          onChange={onChange}
          disabled={disabled}
          style={{ width: 200 }}
          className="model-selector"
        >
          {models.map(model => (
            <Option
              key={model.value}
              value={model.value}
              disabled={model.value === 'gemini-pro'} // Gemini暂未开放
            >
              <Space>
                <span style={{ color: model.color }}>{model.icon}</span>
                <span>{model.label}</span>
                {model.recommended && (
                  <Tag color="gold" style={{ marginLeft: 4 }}>
                    推荐
                  </Tag>
                )}
                {model.value === 'gemini-pro' && (
                  <Tag color="default" style={{ marginLeft: 4 }}>
                    即将上线
                  </Tag>
                )}
              </Space>
            </Option>
          ))}
        </Select>

        {currentModel && (
          <Tooltip
            title={
              <div>
                <div style={{ marginBottom: 8, fontWeight: 600 }}>
                  {currentModel.label}
                </div>
                <div style={{ marginBottom: 8 }}>
                  {currentModel.description}
                </div>
                <div>
                  <strong>特点：</strong>
                  {currentModel.features.map((f, i) => (
                    <Tag
                      key={i}
                      color={currentModel.color}
                      style={{ marginLeft: 4, marginTop: 4 }}
                    >
                      {f}
                    </Tag>
                  ))}
                </div>
              </div>
            }
          >
            <Tag
              color={currentModel.color}
              icon={currentModel.icon}
              className="model-tag"
            >
              {currentModel.label}
            </Tag>
          </Tooltip>
        )}
      </Space>
    </div>
  );
};

export default ModelSelector;
export { models };
export type { ModelInfo };

