import { useEffect, useState } from 'react'
import {
  Button, Drawer, Form, Input, 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,
} 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',
}

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 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', 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,
      api_key: null,
      clear_api_key: false,
      enabled: config.enabled,
      is_default: config.is_default,
      description: config.description,
    })
    setDrawerOpen(true)
  }

  const submit = async () => {
    const values = await form.validateFields()
    const payload: ModelConfigPayload = {
      ...values,
      api_key: values.api_key || null,
      model_name: values.model_name || 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: 190,
      render: (value: string, record: ModelConfig) => (
        <Space size={6}>
          <span style={{ fontWeight: 500 }}>{value}</span>
          {record.is_default && <Tag color="gold" style={{ margin: 0 }}>默认</Tag>}
        </Space>
      ),
    },
    {
      title: '能力', dataIndex: 'capability', key: 'capability', width: 110,
      render: (value: ModelCapability) => <Tag color={capabilityColors[value]}>{capabilityLabels[value]}</Tag>,
    },
    { title: '模型', dataIndex: 'model_name', key: 'model_name', width: 180, render: (value: string | null) => value || '-' },
    { title: 'Endpoint', dataIndex: 'endpoint_url', key: 'endpoint_url', 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={{ y: 'calc(100vh - 200px)' }}
          style={{ height: '100%' }}
        />
      </div>

      <Drawer
        title={editing ? '编辑模型配置' : '新增模型配置'}
        width={520}
        open={drawerOpen}
        onClose={() => setDrawerOpen(false)}
        extra={<Button type="primary" icon={<CheckCircleOutlined />} onClick={submit}>保存</Button>}
      >
        <Form form={form} layout="vertical">
          <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="provider" label="协议" rules={[{ required: true }]}>
              <Select options={[{ value: 'openai_compatible', label: 'OpenAI Compatible' }]} />
            </Form.Item>
            <Form.Item name="capability" label="能力" rules={[{ required: true }]}>
              <Select options={Object.entries(capabilityLabels).map(([value, label]) => ({ value, label }))} />
            </Form.Item>
          </div>
          <Form.Item name="endpoint_url" label="完整 Endpoint URL" rules={[{ required: true, message: '请输入 Endpoint URL' }, { type: 'url', message: '请输入有效 URL' }]}>
            <Input placeholder="https://api.example.com/v1/chat/completions" />
          </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>
          )}
          <Form.Item name="description" label="说明">
            <Input.TextArea rows={3} placeholder="该配置的使用范围或注意事项" />
          </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>
  )
}