import React, { useEffect, useState } from 'react';
import {
  Button, Card, Form, Input, InputNumber, message, Modal, Popconfirm, Select, Space, Switch, Table, Tag, Typography,
} from 'antd';
import {
  RobotOutlined, PlusOutlined, EditOutlined, DeleteOutlined,
} from '@ant-design/icons';
import { getModelConfigs, saveModelConfig, deleteModelConfig } from '../api';
import type { ModelConfig } from '../types';

const AdminModels: React.FC = () => {
  const [models, setModels] = useState<ModelConfig[]>([]);
  const [loading, setLoading] = useState(true);
  const [modal, setModal] = useState<{ open: boolean; model: ModelConfig | null }>({ open: false, model: null });
  const [form] = Form.useForm();

  const load = async () => {
    setLoading(true);
    try {
      const data = await getModelConfigs();
      setModels(data);
    } catch { /* auth error handled by client */ }
    setLoading(false);
  };

  useEffect(() => { load(); }, []);

  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      const payload = {
        name: values.name,
        provider: values.provider,
        model_name: values.modelName,
        api_base: values.apiBase,
        api_key: values.apiKey,
        weight: values.weight,
        max_tokens: values.maxTokens,
        temperature: values.temperature,
        is_active: values.isActive ?? true,
        priority: values.priority ?? 0,
      };
      if (modal.model?.id) {
        await saveModelConfig({ id: modal.model.id, ...payload });
      } else {
        await saveModelConfig(payload);
      }
      message.success(modal.model?.id ? '模型配置已更新' : '模型配置已添加');
      setModal({ open: false, model: null });
      form.resetFields();
      load();
    } catch (e: any) {
      if (e?.errorFields) return;
      message.error(e?.message || '保存失败');
    }
  };

  const handleDelete = async (id: string) => {
    try {
      await deleteModelConfig(id);
      message.success('模型配置已删除');
      load();
    } catch (e: any) {
      message.error(e?.message || '删除失败');
    }
  };

  const openEdit = (model?: ModelConfig) => {
    setModal({ open: true, model: model || null });
    if (model) {
      form.setFieldsValue(model);
    } else {
      form.resetFields();
      form.setFieldsValue({
        provider: 'sdk',
        weight: 1,
        maxTokens: 4096,
        temperature: 0.7,
        isActive: true,
        priority: 0,
      });
    }
  };

  const columns = [
    {
      title: '模型名称', dataIndex: 'name', width: 150,
      render: (v: string, r: ModelConfig) => (
        <Space>
          <div style={{
            width: 32, height: 32, borderRadius: 8,
            background: r.isActive
              ? 'linear-gradient(135deg, #6366f1, #8b5cf6)'
              : 'linear-gradient(135deg, #94a3b8, #cbd5e1)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff', fontSize: 14,
          }}>
            <RobotOutlined />
          </div>
          <div>
            <div style={{ fontWeight: 600 }}>{v}</div>
            <div style={{ color: '#94a3b8', fontSize: 12 }}>{r.modelName}</div>
          </div>
        </Space>
      ),
    },
    {
      title: '提供商', dataIndex: 'provider', width: 140,
      render: (v: string) => {
        const labelMap: Record<string, string> = {
          sdk: 'SDK模式',
          openai_compatible: 'OpenAI兼容',
          mock: 'Mock模式',
        };
        return <Tag color={v === 'mock' ? 'default' : 'blue'}>{labelMap[v] || v}</Tag>;
      },
    },
    {
      title: 'API地址', dataIndex: 'apiBase', width: 200,
      render: (v: string) => (
        <Typography.Text type="secondary" style={{ fontSize: 12 }} ellipsis>
          {v || '-'}
        </Typography.Text>
      ),
    },
    {
      title: '权重', dataIndex: 'weight', width: 80, sorter: (a: ModelConfig, b: ModelConfig) => a.weight - b.weight,
    },
    {
      title: 'Max Tokens', dataIndex: 'maxTokens', width: 100,
    },
    {
      title: 'Temperature', dataIndex: 'temperature', width: 100,
      render: (v: number) => v.toFixed(1),
    },
    {
      title: '状态', dataIndex: 'isActive', width: 80,
      render: (v: boolean) => (
        <Tag color={v ? 'green' : 'default'}>{v ? '启用' : '停用'}</Tag>
      ),
    },
    {
      title: '操作', key: 'action', width: 150, fixed: 'right' as const,
      render: (_: any, r: ModelConfig) => (
        <Space size={4}>
          <Button type="link" size="small" icon={<EditOutlined />}
            onClick={() => openEdit(r)}>
            编辑
          </Button>
          <Popconfirm title="确定删除该模型配置？" onConfirm={() => handleDelete(r.id)}>
            <Button type="link" size="small" danger icon={<DeleteOutlined />}>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Card variant="outlined" style={{ borderRadius: 12, border: '1px solid #f0f0f5' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
          <Typography.Text type="secondary">
            共 {models.length} 个模型配置，按权重进行加权随机调度
          </Typography.Text>
          <Button type="primary" icon={<PlusOutlined />} onClick={() => openEdit()}
            style={{ borderRadius: 8 }}>
            添加模型
          </Button>
        </div>

        <Table
          columns={columns}
          dataSource={models}
          rowKey="id"
          loading={loading}
          pagination={false}
          scroll={{ x: 900 }}
        />
      </Card>

      {/* Edit Modal */}
      <Modal
        title={<Space><RobotOutlined />{modal.model?.id ? '编辑模型' : '添加模型'}</Space>}
        open={modal.open}
        onOk={handleSave}
        onCancel={() => { setModal({ open: false, model: null }); form.resetFields(); }}
        okText="确认" cancelText="取消" width={560}
      >
        <Form form={form} layout="vertical">
          <Form.Item name="name" label="显示名称"
            rules={[{ required: true, message: '请输入模型名称' }]}>
            <Input placeholder="例如：GPT-4o" size="large" />
          </Form.Item>
          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item name="provider" label="提供商" style={{ flex: 1 }}
              rules={[{ required: true }]}>
              <Select size="large" options={[
                { value: 'sdk', label: 'SDK模式' },
                { value: 'openai_compatible', label: 'OpenAI兼容' },
                { value: 'mock', label: 'Mock模式' },
              ]} />
            </Form.Item>
            <Form.Item name="modelName" label="模型标识" style={{ flex: 1 }}
              rules={[{ required: true, message: '请输入模型标识' }]}>
              <Input placeholder="例如：gpt-4o" size="large" />
            </Form.Item>
          </div>
          <Form.Item name="apiBase" label="API地址">
            <Input placeholder="https://api.openai.com/v1" size="large" />
          </Form.Item>
          <Form.Item name="apiKey" label="API Key">
            <Input.Password placeholder="sk-****" size="large" />
          </Form.Item>
          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item name="weight" label="权重" style={{ flex: 1 }}
              rules={[{ required: true }]}>
              <InputNumber min={0} max={10} style={{ width: '100%' }} size="large" />
            </Form.Item>
            <Form.Item name="maxTokens" label="Max Tokens" style={{ flex: 1 }}
              rules={[{ required: true }]}>
              <InputNumber min={256} max={128000} style={{ width: '100%' }} size="large" />
            </Form.Item>
            <Form.Item name="temperature" label="Temperature" style={{ flex: 1 }}
              rules={[{ required: true }]}>
              <InputNumber min={0} max={2} step={0.1} style={{ width: '100%' }} size="large" />
            </Form.Item>
          </div>
          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item name="priority" label="优先级" style={{ flex: 1 }}
              rules={[{ required: true }]}>
              <InputNumber min={0} max={10} style={{ width: '100%' }} size="large" />
            </Form.Item>
            <Form.Item name="isActive" label="启用" valuePropName="checked" style={{ flex: 1, paddingTop: 30 }}>
              <Switch />
            </Form.Item>
          </div>
        </Form>
      </Modal>
    </div>
  );
};

export default AdminModels;