import { useEffect, useState } from 'react'
import {
  Button, Divider, Drawer, Form, Input, InputNumber, message, Popconfirm, Select, Space, Switch, Table, Tag,
  Tooltip,
} from 'antd'
import {
  ApiOutlined, CheckCircleOutlined, DeleteOutlined, EditOutlined, PlusOutlined, ReloadOutlined,
} from '@ant-design/icons'
import {
  modelConfigsApi, type ModelCapability, type ModelConfig, type ModelConfigPayload, type ModelModality,
  type ModelProtocol,
} from '../api'
import PageWrapper from '../components/PageWrapper'
import { formatDateTime } from '../utils/date'
import { notifyModelConfigsChanged } from '../utils/modelConfigEvents'

const capabilityLabels: Record<ModelCapability, string> = {
  chat: '对话',
  embedding: '向量',
  moderation: '内容审核',
}

const capabilityColors: Record<ModelCapability, string> = {
  chat: 'blue',
  embedding: 'green',
  moderation: 'orange',
}

const modalityLabels: Record<ModelModality, string> = {
  text: '文本',
  image: '图像',
  audio: '音频',
  video: '视频',
}

const modalityColors: Record<ModelModality, string> = {
  text: 'default',
  image: 'cyan',
  audio: 'magenta',
  video: 'purple',
}

const modalityOptions = Object.entries(modalityLabels).map(([value, label]) => ({ value, label }))

const featureLabels: Array<[keyof Pick<
  ModelConfig,
  'supports_streaming' | 'supports_tool_calling' | 'supports_structured_output' | 'supports_reasoning'
>, string]> = [
  ['supports_streaming', '流式'],
  ['supports_tool_calling', '工具调用'],
  ['supports_structured_output', '结构化输出'],
  ['supports_reasoning', '推理'],
]

const formatTokens = (value: number | null) => value ? new Intl.NumberFormat('zh-CN').format(value) : '-'

const protocolOptions: Record<ModelProtocol, {
  label: string
  capabilities: ModelCapability[]
  endpointPlaceholder: string
}> = {
  openai_compatible: {
    label: 'OpenAI 兼容',
    capabilities: ['chat', 'embedding', 'moderation'],
    endpointPlaceholder: 'https://api.example.com/v1/chat/completions',
  },
  anthropic: {
    label: 'Anthropic Messages',
    capabilities: ['chat'],
    endpointPlaceholder: 'https://api.anthropic.com/v1/messages',
  },
  google_gemini: {
    label: 'Google Gemini',
    capabilities: ['chat'],
    endpointPlaceholder: 'https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent',
  },
  dashscope: {
    label: 'DashScope 原生',
    capabilities: ['chat'],
    endpointPlaceholder: 'https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation',
  },
}

export default function ModelConfigsPage() {
  const [configs, setConfigs] = useState<ModelConfig[]>([])
  const [loading, setLoading] = useState(false)
  const [drawerOpen, setDrawerOpen] = useState(false)
  const [editing, setEditing] = useState<ModelConfig | null>(null)
  const [testingId, setTestingId] = useState<string | null>(null)
  const [capability, setCapability] = useState<ModelCapability | undefined>()
  const [enabled, setEnabled] = useState<boolean | undefined>()
  const [form] = Form.useForm<ModelConfigPayload>()
  const selectedProtocol = Form.useWatch('provider', form) || 'openai_compatible'
  const selectedProtocolMeta = protocolOptions[selectedProtocol]

  const load = async () => {
    setLoading(true)
    try {
      const response = await modelConfigsApi.list({ capability, enabled })
      setConfigs(response.data)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => { load() }, [capability, enabled])

  const openCreate = () => {
    setEditing(null)
    form.resetFields()
    form.setFieldsValue({
      provider: 'openai_compatible',
      capability: 'chat',
      vendor_name: '',
      input_modalities: ['text'],
      output_modalities: ['text'],
      context_window: null,
      max_output_tokens: null,
      supports_streaming: false,
      supports_tool_calling: false,
      supports_structured_output: false,
      supports_reasoning: false,
      region: '',
      documentation_url: null,
      enabled: true,
      is_default: false,
      description: '',
    })
    setDrawerOpen(true)
  }

  const openEdit = (config: ModelConfig) => {
    setEditing(config)
    form.setFieldsValue({
      name: config.name,
      provider: config.provider,
      capability: config.capability,
      endpoint_url: config.endpoint_url,
      model_name: config.model_name,
      vendor_name: config.vendor_name,
      input_modalities: config.input_modalities,
      output_modalities: config.output_modalities,
      context_window: config.context_window,
      max_output_tokens: config.max_output_tokens,
      supports_streaming: config.supports_streaming,
      supports_tool_calling: config.supports_tool_calling,
      supports_structured_output: config.supports_structured_output,
      supports_reasoning: config.supports_reasoning,
      region: config.region,
      documentation_url: config.documentation_url,
      api_key: null,
      clear_api_key: false,
      enabled: config.enabled,
      is_default: config.is_default,
      description: config.description,
    })
    setDrawerOpen(true)
  }

  const changeProtocol = (provider: ModelProtocol) => {
    const supportedCapabilities = protocolOptions[provider].capabilities
    if (!supportedCapabilities.includes(form.getFieldValue('capability'))) {
      form.setFieldValue('capability', supportedCapabilities[0])
    }
  }

  const submit = async () => {
    const values = await form.validateFields()
    const payload: ModelConfigPayload = {
      ...values,
      api_key: values.api_key || null,
      model_name: values.model_name || null,
      vendor_name: values.vendor_name || '',
      region: values.region || '',
      documentation_url: values.documentation_url || null,
      description: values.description || '',
    }
    if (editing) {
      await modelConfigsApi.update(editing.id, payload)
      message.success('模型配置已更新')
    } else {
      await modelConfigsApi.create(payload)
      message.success('模型配置已创建')
    }
    notifyModelConfigsChanged()
    setDrawerOpen(false)
    load()
  }

  const testConnection = async (config: ModelConfig) => {
    setTestingId(config.id)
    try {
      const response = await modelConfigsApi.test(config.id)
      if (response.data.ok) message.success(`${config.name} 连接成功`)
      else message.warning(response.data.message)
    } finally {
      setTestingId(null)
    }
  }

  const remove = async (config: ModelConfig) => {
    await modelConfigsApi.delete(config.id)
    message.success('模型配置已删除')
    notifyModelConfigsChanged()
    load()
  }

  const columns = [
    {
      title: '配置名称', dataIndex: 'name', key: 'name', width: 220,
      render: (value: string, record: ModelConfig) => (
        <div style={{ minWidth: 0 }}>
          <Space size={6}>
            <Tooltip title={record.description || undefined}>
              <span style={{ fontWeight: 500 }}>{value}</span>
            </Tooltip>
            {record.is_default && <Tag color="gold" style={{ margin: 0 }}>默认</Tag>}
          </Space>
          {(record.vendor_name || record.region) && (
            <div style={{ color: '#8c8c8c', fontSize: 12, marginTop: 3 }}>
              {[record.vendor_name, record.region].filter(Boolean).join(' · ')}
            </div>
          )}
        </div>
      ),
    },
    {
      title: '协议', dataIndex: 'provider', key: 'provider', width: 150,
      render: (value: ModelProtocol) => <Tag>{protocolOptions[value]?.label || value}</Tag>,
    },
    {
      title: '能力', dataIndex: 'capability', key: 'capability', width: 110,
      render: (value: ModelCapability) => <Tag color={capabilityColors[value]}>{capabilityLabels[value]}</Tag>,
    },
    {
      title: '输入 / 输出', key: 'modalities', width: 230,
      render: (_: unknown, record: ModelConfig) => (
        <Space direction="vertical" size={3}>
          <Space size={4} wrap>
            <span style={{ color: '#8c8c8c', fontSize: 12, width: 28 }}>输入</span>
            {record.input_modalities.map((value) => (
              <Tag key={`input-${value}`} color={modalityColors[value]} style={{ margin: 0 }}>
                {modalityLabels[value]}
              </Tag>
            ))}
          </Space>
          <Space size={4} wrap>
            <span style={{ color: '#8c8c8c', fontSize: 12, width: 28 }}>输出</span>
            {record.output_modalities.map((value) => (
              <Tag key={`output-${value}`} color={modalityColors[value]} style={{ margin: 0 }}>
                {modalityLabels[value]}
              </Tag>
            ))}
          </Space>
        </Space>
      ),
    },
    {
      title: '模型', dataIndex: 'model_name', key: 'model_name', width: 180, ellipsis: true,
      render: (value: string | null) => value || '-',
    },
    {
      title: '规格', key: 'limits', width: 170,
      render: (_: unknown, record: ModelConfig) => (
        <div style={{ fontSize: 12, lineHeight: 1.7 }}>
          <div><span style={{ color: '#8c8c8c' }}>上下文 </span>{formatTokens(record.context_window)}</div>
          <div><span style={{ color: '#8c8c8c' }}>最大输出 </span>{formatTokens(record.max_output_tokens)}</div>
        </div>
      ),
    },
    {
      title: '特性', key: 'features', width: 210,
      render: (_: unknown, record: ModelConfig) => {
        const enabledFeatures = featureLabels.filter(([key]) => record[key])
        return enabledFeatures.length ? (
          <Space size={[4, 4]} wrap>
            {enabledFeatures.map(([key, label]) => <Tag key={key} style={{ margin: 0 }}>{label}</Tag>)}
          </Space>
        ) : '-'
      },
    },
    { title: 'Endpoint', dataIndex: 'endpoint_url', key: 'endpoint_url', width: 260, ellipsis: true },
    {
      title: '凭据', dataIndex: 'has_api_key', key: 'has_api_key', width: 90,
      render: (value: boolean) => value ? <Tag color="success">已配置</Tag> : <Tag>无</Tag>,
    },
    {
      title: '状态', dataIndex: 'enabled', key: 'enabled', width: 90,
      render: (value: boolean) => value ? <Tag color="success">启用</Tag> : <Tag>停用</Tag>,
    },
    {
      title: '更新时间', dataIndex: 'updated_at', key: 'updated_at', width: 170,
      render: (value: string | null) => formatDateTime(value),
    },
    {
      title: '操作', key: 'actions', width: 145, fixed: 'right' as const,
      render: (_: unknown, record: ModelConfig) => (
        <Space size={2}>
          <Tooltip title="连接测试">
            <Button
              type="text"
              size="small"
              icon={<ApiOutlined />}
              loading={testingId === record.id}
              disabled={!record.enabled}
              onClick={() => testConnection(record)}
            />
          </Tooltip>
          <Tooltip title="编辑">
            <Button type="text" size="small" icon={<EditOutlined />} onClick={() => openEdit(record)} />
          </Tooltip>
          <Popconfirm title="确认删除该模型配置？" onConfirm={() => remove(record)}>
            <Tooltip title="删除">
              <Button type="text" size="small" danger icon={<DeleteOutlined />} />
            </Tooltip>
          </Popconfirm>
        </Space>
      ),
    },
  ]

  return (
    <PageWrapper
      title="模型配置"
      description="统一管理评测工程使用的外部模型连接"
      inline
      fullHeight
      extra={
        <Space>
          <Select
            allowClear
            placeholder="全部能力"
            style={{ width: 120 }}
            value={capability}
            onChange={setCapability}
            options={Object.entries(capabilityLabels).map(([value, label]) => ({ value, label }))}
          />
          <Select
            allowClear
            placeholder="全部状态"
            style={{ width: 110 }}
            value={enabled}
            onChange={setEnabled}
            options={[{ value: true, label: '启用' }, { value: false, label: '停用' }]}
          />
          <Tooltip title="刷新"><Button icon={<ReloadOutlined />} onClick={load} /></Tooltip>
          <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>新增</Button>
        </Space>
      }
    >
      <div style={{ height: '100%', minHeight: 0, overflow: 'hidden' }}>
        <Table
          dataSource={configs}
          columns={columns}
          rowKey="id"
          loading={loading}
          pagination={{ pageSize: 15, showSizeChanger: true, showTotal: (total) => `共 ${total} 个` }}
          scroll={{ x: 1800, y: 'calc(100vh - 200px)' }}
          style={{ height: '100%' }}
        />
      </div>

      <Drawer
        title={editing ? '编辑模型配置' : '新增模型配置'}
        width="min(680px, 100vw)"
        open={drawerOpen}
        onClose={() => setDrawerOpen(false)}
        extra={<Button type="primary" icon={<CheckCircleOutlined />} onClick={submit}>保存</Button>}
      >
        <Form form={form} layout="vertical">
          <Divider orientation="left" plain style={{ marginTop: 0 }}>基础信息</Divider>
          <Form.Item name="name" label="配置名称" rules={[{ required: true, message: '请输入配置名称' }]}>
            <Input placeholder="例如：评估对话模型" />
          </Form.Item>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <Form.Item name="vendor_name" label="厂商 / 平台">
              <Input placeholder="例如：阿里云百炼" />
            </Form.Item>
            <Form.Item name="region" label="部署区域">
              <Input placeholder="例如：华北 2（北京）" />
            </Form.Item>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <Form.Item name="input_modalities" label="输入模态" rules={[{ required: true, message: '请选择输入模态' }]}>
              <Select mode="multiple" options={modalityOptions} />
            </Form.Item>
            <Form.Item name="output_modalities" label="输出模态" rules={[{ required: true, message: '请选择输出模态' }]}>
              <Select mode="multiple" options={modalityOptions} />
            </Form.Item>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <Form.Item name="context_window" label="上下文窗口（Token）">
              <InputNumber min={1} precision={0} style={{ width: '100%' }} placeholder="例如：128000" />
            </Form.Item>
            <Form.Item name="max_output_tokens" label="最大输出（Token）">
              <InputNumber min={1} precision={0} style={{ width: '100%' }} placeholder="例如：8192" />
            </Form.Item>
          </div>
          <Form.Item name="documentation_url" label="官方文档地址" rules={[{ type: 'url', message: '请输入有效 URL' }]}>
            <Input placeholder="https://..." />
          </Form.Item>
          <Form.Item name="description" label="说明">
            <Input.TextArea rows={3} placeholder="该配置的使用范围或注意事项" />
          </Form.Item>

          <Divider orientation="left" plain>模型特性</Divider>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 20px' }}>
            <Form.Item name="supports_streaming" label="流式输出" valuePropName="checked"><Switch /></Form.Item>
            <Form.Item name="supports_tool_calling" label="工具调用" valuePropName="checked"><Switch /></Form.Item>
            <Form.Item name="supports_structured_output" label="结构化输出" valuePropName="checked"><Switch /></Form.Item>
            <Form.Item name="supports_reasoning" label="推理模型" valuePropName="checked"><Switch /></Form.Item>
          </div>

          <Divider orientation="left" plain>连接设置</Divider>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <Form.Item name="provider" label="协议" rules={[{ required: true }]}>
              <Select
                onChange={changeProtocol}
                options={Object.entries(protocolOptions).map(([value, option]) => ({ value, label: option.label }))}
              />
            </Form.Item>
            <Form.Item name="capability" label="能力" rules={[{ required: true }]}>
              <Select
                options={selectedProtocolMeta.capabilities.map((value) => ({ value, label: capabilityLabels[value] }))}
              />
            </Form.Item>
          </div>
          <Form.Item name="endpoint_url" label="完整 Endpoint URL" rules={[{ required: true, message: '请输入 Endpoint URL' }, { type: 'url', message: '请输入有效 URL' }]}>
            <Input placeholder={selectedProtocolMeta.endpointPlaceholder} />
          </Form.Item>
          <Form.Item shouldUpdate noStyle>
            {() => form.getFieldValue('capability') !== 'moderation' && (
              <Form.Item name="model_name" label="模型名称" rules={[{ required: true, message: '请输入模型名称' }]}>
                <Input placeholder="例如：gpt-4o-mini" />
              </Form.Item>
            )}
          </Form.Item>
          <Form.Item name="api_key" label="API Key" extra={editing?.has_api_key ? '已配置；留空将保留现有凭据' : undefined}>
            <Input.Password autoComplete="new-password" placeholder={editing?.has_api_key ? '留空保留现有凭据' : '可选'} />
          </Form.Item>
          {editing?.has_api_key && (
            <Form.Item name="clear_api_key" label="清除现有凭据" valuePropName="checked">
              <Switch />
            </Form.Item>
          )}
          <Space size={24}>
            <Form.Item name="enabled" label="启用" valuePropName="checked"><Switch /></Form.Item>
            <Form.Item name="is_default" label="设为该能力默认配置" valuePropName="checked"><Switch /></Form.Item>
          </Space>
        </Form>
      </Drawer>
    </PageWrapper>
  )
}