import React, { useEffect, useState } from 'react';
import {
  Button, Card, Form, Input, InputNumber, message, Modal, Popconfirm, Select, Space, Switch, Table, Tag, Typography,
} from 'antd';
import {
  PlayCircleOutlined, PlusOutlined, EditOutlined, DeleteOutlined,
} from '@ant-design/icons';
import { getVideoEngines, saveVideoEngine, deleteVideoEngine } from '../api';

interface VideoEngine {
  id: string;
  name: string;
  provider: string;
  apiBase: string;
  apiKey: string;
  modelName: string;
  supportedRatios: string[];
  supportedResolutions: string[];
  supportedDurations: number[];
  maxDuration: number;
  maxImageCount: number;
  maxVideoCount: number;
  maxAudioCount: number;
  supportsFirstLastFrame: boolean;
  supportsUniversalReference: boolean;
  isActive: boolean;
  priority: number;
  multiGenerationEnabled: boolean;
  maxGenerationCount: number;
}

function parseJsonArray(val: unknown): any[] {
  if (Array.isArray(val)) return val;
  if (typeof val === 'string') {
    try { return JSON.parse(val); } catch { return []; }
  }
  return [];
}

const AdminVideoEngines: React.FC = () => {
  const [engines, setEngines] = useState<VideoEngine[]>([]);
  const [loading, setLoading] = useState(false);
  const [modal, setModal] = useState<{ open: boolean; engine: VideoEngine | null }>({ open: false, engine: null });
  const [form] = Form.useForm();
  const multiGenerationEnabled = Form.useWatch('multiGenerationEnabled', form) ?? false;

  const load = async () => {
    setLoading(true);
    try {
      const data = await getVideoEngines();
      setEngines(data.map((e: any) => ({
        ...e,
        supportedRatios: parseJsonArray(e.supportedRatios),
        supportedResolutions: parseJsonArray(e.supportedResolutions),
        supportedDurations: parseJsonArray(e.supportedDurations),
      })));
    } catch {
      message.error('加载视频引擎失败');
    } finally {
      setLoading(false);
    }
  };

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

  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      const payload = {
        name: values.name,
        provider: values.provider,
        api_base: values.apiBase,
        api_key: values.apiKey,
        model_name: values.modelName,
        supported_ratios: JSON.stringify(values.supportedRatios || []),
        supported_resolutions: JSON.stringify(values.supportedResolutions || []),
        supported_durations: JSON.stringify(values.supportedDurations || []),
        max_duration: values.maxDuration ?? 15,
        max_image_count: values.maxImageCount ?? 2,
        max_video_count: values.maxVideoCount ?? 0,
        max_audio_count: values.maxAudioCount ?? 0,
        supports_first_last_frame: values.supportsFirstLastFrame ?? false,
        supports_universal_reference: values.supportsUniversalReference ?? true,
        is_active: values.isActive ?? true,
        priority: values.priority ?? 0,
        multi_generation_enabled: values.multiGenerationEnabled ?? false,
        max_generation_count: values.maxGenerationCount ?? 1,
      };
      if (modal.engine) {
        await saveVideoEngine({ id: modal.engine.id, ...payload });
        message.success('已更新');
      } else {
        await saveVideoEngine(payload);
        message.success('已添加');
      }
      setModal({ open: false, engine: null });
      form.resetFields();
      load();
    } catch (e: any) {
      if (e?.errorFields) return;
      message.error(e?.message || '保存失败');
    }
  };

  const handleDelete = async (id: string) => {
    try {
      await deleteVideoEngine(id);
      message.success('已删除');
      load();
    } catch {
      message.error('删除失败');
    }
  };

  const openEdit = (engine?: VideoEngine) => {
    setModal({ open: true, engine: engine || null });
    if (engine) {
      form.setFieldsValue(engine);
    } else {
      form.resetFields();
      form.setFieldsValue({
          isActive: true, priority: 0,
          multiGenerationEnabled: false, maxGenerationCount: 1,
          maxDuration: 15,
          maxImageCount: 2,
          maxVideoCount: 0,
          maxAudioCount: 0,
          supportsFirstLastFrame: false,
          supportsUniversalReference: true,
          supportedRatios: ['16:9', '4:3', '1:1', '3:4', '9:16', '21:9'],
          supportedResolutions: ['480p', '720p', '1080p'],
          supportedDurations: [4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
        });
    }
  };

  const columns = [
    {
      title: '引擎名称', key: 'name', width: 180,
      render: (_: any, r: VideoEngine) => (
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 36, height: 36, borderRadius: 8,
            background: r.isActive
              ? 'linear-gradient(135deg, #6366f1, #8b5cf6)'
              : 'linear-gradient(135deg, #94a3b8, #cbd5e1)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff', fontSize: 16,
          }}><PlayCircleOutlined /></div>
          <div>
            <Typography.Text strong>{r.name}</Typography.Text>
            <div style={{ color: '#94a3b8', fontSize: 12 }}>{r.provider}</div>
          </div>
        </div>
      ),
    },
    {
      title: '支持比例', dataIndex: 'supportedRatios', width: 200,
      render: (ratios: string[]) => <Space size={2} wrap>{ratios.map(r => <Tag key={r}>{r}</Tag>)}</Space>,
    },
    {
      title: '支持分辨率', dataIndex: 'supportedResolutions', width: 150,
      render: (res: string[]) => <Space size={2} wrap>{res.map(r => <Tag key={r} color="blue">{r}</Tag>)}</Space>,
    },
    {
      title: '支持时长', dataIndex: 'supportedDurations', width: 120,
      render: (d: number[]) => <Tag color="orange">{d?.length ? `${Math.min(...d)}-${Math.max(...d)}s` : '-'}</Tag>,
    },
    {
      title: '最大图片', dataIndex: 'maxImageCount', width: 100,
      render: (v: number) => <Tag color="purple">{v} 张</Tag>,
    },
    {
      title: '最大视频', dataIndex: 'maxVideoCount', width: 100,
      render: (v: number) => <Tag color="cyan">{v} 个</Tag>,
    },
    {
      title: '最大音频', dataIndex: 'maxAudioCount', width: 100,
      render: (v: number) => <Tag color={v > 0 ? 'geekblue' : 'default'}>{v || 0} 段</Tag>,
    },
    {
      title: '首尾帧', dataIndex: 'supportsFirstLastFrame', width: 90,
      render: (v: boolean) => <Tag color={v ? 'green' : 'default'}>{v ? '支持' : '不支持'}</Tag>,
    },
    {
      title: '全能参考', dataIndex: 'supportsUniversalReference', width: 100,
      render: (v: boolean) => <Tag color={v ? 'purple' : 'default'}>{v ? '支持' : '不支持'}</Tag>,
    },
    {
      title: '多份生成', dataIndex: 'multiGenerationEnabled', width: 100,
      render: (v: boolean) => <Tag color={v ? 'blue' : 'default'}>{v ? '开启' : '关闭'}</Tag>,
    },
    {
      title: '数量上限', dataIndex: 'maxGenerationCount', width: 100,
      render: (v: number, r: VideoEngine) => (
        <Tag color={r.multiGenerationEnabled && Number(v || 1) > 1 ? 'magenta' : 'default'}>
          最多 {r.multiGenerationEnabled ? (v || 1) : 1} 份
        </Tag>
      ),
    },
    {
      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: VideoEngine) => (
        <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 }}>
          <Space>
            <PlayCircleOutlined style={{ fontSize: 18, color: '#6366f1' }} />
            <Typography.Text strong style={{ fontSize: 16 }}>视频引擎配置</Typography.Text>
            <Tag color="purple">{engines.length} 个引擎</Tag>
          </Space>
          <Button type="primary" icon={<PlusOutlined />} onClick={() => openEdit()} style={{ borderRadius: 8 }}>
            添加引擎
          </Button>
        </div>

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

      <Modal
        title={<Space><PlayCircleOutlined />{modal.engine ? '编辑引擎' : '添加引擎'}</Space>}
        open={modal.open}
        onOk={handleSave}
        onCancel={() => { setModal({ open: false, engine: null }); form.resetFields(); }}
        okText="保存" cancelText="取消" width={620}
      >
        <Form form={form} layout="vertical" style={{ marginTop: 16 }}>
          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item name="name" label="引擎名称" style={{ flex: 1 }}
              rules={[{ required: true }]}>
              <Input placeholder="Seedance 2.0" size="large" />
            </Form.Item>
            <Form.Item name="provider" label="提供商" style={{ flex: 1 }}
              rules={[{ required: true }]}>
              <Select size="large" options={[
                { value: 'ark', label: '火山引擎 (Ark)' },
              ]} />
            </Form.Item>
          </div>
          <Form.Item name="apiBase" label="API基础地址" rules={[{ required: true }]}>
            <Input placeholder="https://ark.cn-beijing.volces.com/api/v3" size="large" />
          </Form.Item>
          <Form.Item name="apiKey" label="API Key">
            <Input.Password placeholder="sk-****" size="large" />
          </Form.Item>
          <Form.Item name="modelName" label="模型名称">
            <Input placeholder="doubao-seedance-2-0-260128" size="large" />
          </Form.Item>
          <Form.Item name="supportedRatios" label="支持比例">
            <Select mode="multiple" size="large" options={[
              { value: '16:9', label: '16:9 (横屏)' },
              { value: '4:3', label: '4:3 (标准)' },
              { value: '1:1', label: '1:1 (方形)' },
              { value: '3:4', label: '3:4 (竖版)' },
              { value: '9:16', label: '9:16 (竖屏)' },
              { value: '21:9', label: '21:9 (超宽)' },
            ]} />
          </Form.Item>
          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item name="supportedResolutions" label="支持分辨率" style={{ flex: 1 }}>
              <Select mode="multiple" size="large" options={[
                { value: '480p' }, { value: '720p' }, { value: '1080p' },
              ]} />
            </Form.Item>
            <Form.Item name="supportedDurations" label="支持时长(秒)" style={{ flex: 1 }}>
              <Select mode="multiple" size="large" options={
                Array.from({ length: 27 }, (_, i) => ({ value: i + 4, label: `${i + 4}秒` }))
              } />
            </Form.Item>
          </div>
          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item name="maxDuration" label="最大时长(秒)" style={{ flex: 1 }}>
              <Input type="number" size="large" />
            </Form.Item>
            <Form.Item name="maxImageCount" label="最大图片数量" style={{ flex: 1 }}>
              <Input type="number" size="large" />
            </Form.Item>
            <Form.Item name="maxVideoCount" label="最大视频数量" style={{ flex: 1 }}>
              <Input type="number" size="large" />
            </Form.Item>
          </div>
          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item
              name="maxAudioCount"
              label="最大参考音频数"
              style={{ flex: 1 }}
              extra="0 表示不支持音频参考"
              rules={[
                {
                  validator: (_, value) => {
                    const n = Number(value ?? 0);
                    // if (!Number.isInteger(n) || n < 0 || n > 3) {
                    //   return Promise.reject(new Error('最大参考音频数必须为 0-3 的整数'));
                    // }
                    return Promise.resolve();
                  },
                },
              ]}
            >
              <Input type="number" size="large" min={0} max={3} />
            </Form.Item>
          </div>
          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item name="supportsFirstLastFrame" label="首尾帧模式" valuePropName="checked" style={{ paddingTop: 30, flex: 1 }}>
              <Switch checkedChildren="支持" unCheckedChildren="不支持" />
            </Form.Item>
            <Form.Item name="supportsUniversalReference" label="全能参考模式" valuePropName="checked" style={{ paddingTop: 30, flex: 1 }}>
              <Switch checkedChildren="支持" unCheckedChildren="不支持" />
            </Form.Item>
            <Form.Item name="isActive" label="启用状态" valuePropName="checked" style={{ paddingTop: 30, flex: 1 }}>
              <Switch />
            </Form.Item>
          </div>
          <div style={{ background: '#f8f9fc', borderRadius: 10, padding: 16, marginBottom: 12 }}>
            <Typography.Text strong>多份生成能力</Typography.Text>
            <Typography.Paragraph style={{ margin: '6px 0 0', color: '#64748b', fontSize: 12 }}>
              管理后台只控制是否允许客户端选择多份及最大数量；客户端每次可在 1 到上限之间选择。
            </Typography.Paragraph>
          </div>
          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item name="multiGenerationEnabled" label="允许客户端多份生成" valuePropName="checked" style={{ flex: 1 }}>
              <Switch checkedChildren="开启" unCheckedChildren="关闭" />
            </Form.Item>
            <Form.Item name="maxGenerationCount" label="客户端最大生成数量" style={{ flex: 1 }} rules={[{ required: true }]}>
              <InputNumber min={1} max={5} precision={0} size="large" style={{ width: '100%' }} disabled={!multiGenerationEnabled} />
            </Form.Item>
            <Form.Item name="priority" label="优先级" style={{ flex: 1 }}>
              <Select size="large" options={[
                { value: 0, label: '0 (默认)' },
                { value: 1, label: '1' },
                { value: 2, label: '2' },
                { value: 3, label: '3' },
                { value: 5, label: '5' },
                { value: 10, label: '10 (最高)' },
              ]} />
            </Form.Item>
          </div>
        </Form>
      </Modal>
    </div>
  );
};

export default AdminVideoEngines;
