import React, { useCallback, useEffect, useState } from 'react';
import {
  Button,
  Col,
  Form,
  Input,
  InputNumber,
  Modal,
  Popconfirm,
  Row,
  Select,
  Space,
  Switch,
  Table,
  Tag,
  Typography,
  message,
} from 'antd';
import {
  ApiOutlined,
  DeleteOutlined,
  EditOutlined,
  PlusOutlined,
  ReloadOutlined,
  SaveOutlined,
} from '@ant-design/icons';
import {
  deleteDatabaseConfig,
  getDatabaseConfig,
  getDatabaseConfigs,
  getSystemDatabaseConfig,
  testDatabaseConfig,
  testSystemDatabaseConfig,
  updateDatabaseConfig,
  updateSystemDatabaseConfig,
} from '../../api/admin';
import { SycmCard } from '../../components/Common';

const { Text } = Typography;

const DRIVER_OPTIONS = [
  { value: 'mysql', label: 'MySQL / MariaDB' },
  { value: 'mssql', label: 'SQL Server (MSSQL)' },
  { value: 'postgres', label: 'PostgreSQL' },
];

const DEFAULT_PORTS = {
  mysql: 3306,
  mssql: 1433,
  postgres: 5432,
};

const CORE_CONFIG_NAMES = new Set([
  'cloud_database',
  'cloud_database_public',
  'planning_database',
]);

const CONFIG_LABELS = {
  cloud_database: '默认业务数据库',
  cloud_database_public: '公网业务数据库',
  planning_database: '企划数据库',
  jiansun_database: '简尚业务数据库',
  product_information_database: '产品资料系统数据库',
};

const DatabaseSettings = () => {
  const [systemForm] = Form.useForm();
  const [databaseForm] = Form.useForm();
  const [systemLoading, setSystemLoading] = useState(false);
  const [systemTesting, setSystemTesting] = useState(false);
  const [listLoading, setListLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [testing, setTesting] = useState(false);
  const [configs, setConfigs] = useState([]);
  const [editorOpen, setEditorOpen] = useState(false);
  const [editingConfig, setEditingConfig] = useState(null);
  const [envConfig, setEnvConfig] = useState(null);
  const useEnvConfig = Form.useWatch('useEnvConfig', databaseForm);

  const loadSystemConfig = useCallback(async () => {
    try {
      const config = await getSystemDatabaseConfig();
      systemForm.setFieldsValue({
        driver: 'mysql',
        host: config.host || '',
        port: config.port || 3306,
        database: config.database || '',
        username: config.username || '',
        password: '',
      });
    } catch (error) {
      message.error(error.response?.data?.error || '获取系统数据库配置失败');
    }
  }, [systemForm]);

  const loadConfigs = useCallback(async () => {
    try {
      setListLoading(true);
      const result = await getDatabaseConfigs();
      setConfigs(Array.isArray(result) ? result : []);
    } catch (error) {
      message.error(error.response?.data?.error || '获取数据库配置列表失败');
    } finally {
      setListLoading(false);
    }
  }, []);

  useEffect(() => {
    loadSystemConfig();
    loadConfigs();
  }, [loadConfigs, loadSystemConfig]);

  const saveSystemConfig = async () => {
    try {
      const values = await systemForm.validateFields();
      setSystemLoading(true);
      const result = await updateSystemDatabaseConfig(values);
      message.success(result.message || '系统数据库配置已保存');
      await loadSystemConfig();
    } catch (error) {
      if (!error?.errorFields) {
        message.error(error.response?.data?.error || '保存系统数据库配置失败');
      }
    } finally {
      setSystemLoading(false);
    }
  };

  const testSystemConfig = async () => {
    try {
      const values = await systemForm.validateFields();
      if (!values.password) {
        message.warning('测试系统数据库前请填写密码');
        return;
      }
      setSystemTesting(true);
      const result = await testSystemDatabaseConfig(values);
      message.success(result.message || '系统数据库连接成功');
    } catch (error) {
      if (!error?.errorFields) {
        message.error(error.response?.data?.message || error.response?.data?.error || '系统数据库连接失败');
      }
    } finally {
      setSystemTesting(false);
    }
  };

  const openCreate = () => {
    setEditingConfig(null);
    setEnvConfig(null);
    databaseForm.resetFields();
    databaseForm.setFieldsValue({ driver: 'mysql', port: 3306, ssl: false, useEnvConfig: false });
    setEditorOpen(true);
  };

  const openEdit = async (record) => {
    try {
      setEditingConfig(record);
      const config = await getDatabaseConfig(record.name);
      setEnvConfig(config.envConfig || null);
      databaseForm.setFieldsValue({
        ...config,
        password: '',
        ssl: Boolean(config.ssl),
        useEnvConfig: Boolean(config.useEnvConfig),
      });
      setEditorOpen(true);
    } catch (error) {
      message.error(error.response?.data?.error || '获取数据库配置失败');
    }
  };

  const testEditorConfig = async () => {
    try {
      const values = await databaseForm.validateFields();
      setTesting(true);
      const result = await testDatabaseConfig(values);
      message.success(`${result.message || '连接成功'}${result.responseTime ? `，${result.responseTime}ms` : ''}`);
    } catch (error) {
      if (!error?.errorFields) {
        message.error(error.response?.data?.error || error.message || '数据库连接失败');
      }
    } finally {
      setTesting(false);
    }
  };

  const saveDatabaseConfig = async () => {
    try {
      const values = await databaseForm.validateFields();
      setSaving(true);
      const result = await updateDatabaseConfig({ ...values, status: editingConfig?.status || 'active' }, values.name);
      message.success(result.message || '数据库配置已保存');
      setEditorOpen(false);
      await loadConfigs();
    } catch (error) {
      if (!error?.errorFields) {
        message.error(error.response?.data?.error || error.message || '保存数据库配置失败');
      }
    } finally {
      setSaving(false);
    }
  };

  const toggleStatus = async (record, enabled) => {
    try {
      const current = await getDatabaseConfig(record.name);
      await updateDatabaseConfig({ ...current, password: '', status: enabled ? 'active' : 'inactive' }, record.name);
      message.success(enabled ? '数据库配置已启用' : '数据库配置已停用');
      await loadConfigs();
    } catch (error) {
      message.error(error.response?.data?.error || '更新数据库状态失败');
    }
  };

  const removeConfig = async (record) => {
    try {
      const result = await deleteDatabaseConfig(record.id);
      message.success(result.message || '数据库配置已删除');
      await loadConfigs();
    } catch (error) {
      message.error(error.response?.data?.error || '删除数据库配置失败');
    }
  };

  const columns = [
    {
      title: '配置',
      dataIndex: 'name',
      width: 220,
      render: (value) => (
        <div className="database-settings-name">
          <strong>{CONFIG_LABELS[value] || value}</strong>
          {CONFIG_LABELS[value] ? <span>{value}</span> : null}
        </div>
      ),
    },
    {
      title: '类型',
      dataIndex: 'driver',
      width: 150,
      render: (value) => DRIVER_OPTIONS.find((item) => item.value === value)?.label || value,
    },
    {
      title: '连接地址',
      key: 'endpoint',
      ellipsis: true,
      render: (_, record) => `${record.host || '-'}:${record.port || '-'}/${record.database || '-'}`,
    },
    { title: '用户名', dataIndex: 'username', width: 150, ellipsis: true },
    {
      title: '来源',
      key: 'source',
      width: 100,
      render: (_, record) => <Tag>{record.useEnvConfig ? '.env' : '系统配置'}</Tag>,
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 90,
      render: (value, record) => (
        <Switch
          size="small"
          checked={value !== 'inactive'}
          disabled={Boolean(record.is_default)}
          onChange={(checked) => toggleStatus(record, checked)}
        />
      ),
    },
    {
      title: '操作',
      key: 'actions',
      width: 120,
      fixed: 'right',
      render: (_, record) => (
        <Space size={2}>
          <Button type="text" icon={<EditOutlined />} onClick={() => openEdit(record)} aria-label="编辑数据库配置" />
          <Popconfirm
            title="删除这个数据库配置？"
            description="只删除连接配置，不会删除远程数据库中的数据。"
            disabled={record.protected || CORE_CONFIG_NAMES.has(record.name)}
            onConfirm={() => removeConfig(record)}
          >
            <Button
              type="text"
              danger
              disabled={record.protected || CORE_CONFIG_NAMES.has(record.name)}
              icon={<DeleteOutlined />}
              aria-label="删除数据库配置"
            />
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <div className="settings-tab-page database-settings-page">
      <SycmCard bodyStyle={{ padding: 16 }}>
        <div className="database-settings-section-head">
          <div>
            <strong>系统数据库</strong>
            <Text type="secondary">保存账号、权限和系统配置，修改后需重启服务。</Text>
          </div>
          <Button icon={<ReloadOutlined />} onClick={loadSystemConfig}>刷新</Button>
        </div>
        <Form form={systemForm} layout="vertical">
          <Row gutter={[16, 0]}>
            <Col xs={24} md={8}>
              <Form.Item label="类型" name="driver"><Select options={[{ value: 'mysql', label: 'MySQL / MariaDB' }]} disabled /></Form.Item>
            </Col>
            <Col xs={24} md={8}>
              <Form.Item label="主机地址" name="host" rules={[{ required: true, message: '请输入主机地址' }]}><Input /></Form.Item>
            </Col>
            <Col xs={24} md={8}>
              <Form.Item label="端口" name="port" rules={[{ required: true, message: '请输入端口' }]}><InputNumber min={1} max={65535} style={{ width: '100%' }} /></Form.Item>
            </Col>
            <Col xs={24} md={8}>
              <Form.Item label="数据库名" name="database" rules={[{ required: true, message: '请输入数据库名' }]}><Input /></Form.Item>
            </Col>
            <Col xs={24} md={8}>
              <Form.Item label="用户名" name="username" rules={[{ required: true, message: '请输入用户名' }]}><Input /></Form.Item>
            </Col>
            <Col xs={24} md={8}>
              <Form.Item label="密码" name="password" extra="留空表示沿用已保存密码"><Input.Password /></Form.Item>
            </Col>
          </Row>
          <div className="database-settings-actions">
            <Button icon={<ApiOutlined />} loading={systemTesting} onClick={testSystemConfig}>测试连接</Button>
            <Button type="primary" icon={<SaveOutlined />} loading={systemLoading} onClick={saveSystemConfig}>保存系统库</Button>
          </div>
        </Form>
      </SycmCard>

      <SycmCard bodyStyle={{ padding: 16 }}>
        <div className="database-settings-section-head">
          <div>
            <strong>业务与扩展数据库</strong>
            <Text type="secondary">统一管理业务库和管理员自定义的数据源连接。</Text>
          </div>
          <Space>
            <Button icon={<ReloadOutlined />} onClick={loadConfigs} loading={listLoading}>刷新</Button>
            <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>新增数据库</Button>
          </Space>
        </div>
        <Table
          rowKey="id"
          columns={columns}
          dataSource={configs}
          loading={listLoading}
          pagination={false}
          scroll={{ x: 1050 }}
        />
      </SycmCard>

      <Modal
        title={editingConfig ? '编辑数据库配置' : '新增数据库配置'}
        open={editorOpen}
        width={720}
        onCancel={() => setEditorOpen(false)}
        footer={[
          <Button key="test" icon={<ApiOutlined />} loading={testing} onClick={testEditorConfig}>测试连接</Button>,
          <Button key="cancel" onClick={() => setEditorOpen(false)}>取消</Button>,
          <Button key="save" type="primary" loading={saving} onClick={saveDatabaseConfig}>保存</Button>,
        ]}
        destroyOnHidden
      >
        <Form form={databaseForm} layout="vertical" className="database-settings-editor">
          <Row gutter={[16, 0]}>
            <Col span={12}>
              <Form.Item
                label="配置标识"
                name="name"
                rules={[
                  { required: true, message: '请输入配置标识' },
                  { pattern: /^[a-zA-Z0-9][a-zA-Z0-9_-]{1,99}$/, message: '使用 2-100 位英文、数字、下划线或短横线' },
                  {
                    validator: (_, value) => (
                      !editingConfig && configs.some((item) => item.name === value)
                        ? Promise.reject(new Error('该配置标识已经存在'))
                        : Promise.resolve()
                    ),
                  },
                ]}
              >
                <Input disabled={Boolean(editingConfig)} placeholder="例如 market_archive" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="数据库类型" name="driver" rules={[{ required: !useEnvConfig }]}>
                <Select
                  options={DRIVER_OPTIONS}
                  disabled={useEnvConfig}
                  onChange={(driver) => databaseForm.setFieldValue('port', DEFAULT_PORTS[driver])}
                />
              </Form.Item>
            </Col>
            {editingConfig && ['cloud_database', 'cloud_database_public'].includes(editingConfig.name) ? (
              <Col span={24}>
                <div className="database-settings-env-row">
                  <div>
                    <strong>优先使用 .env 配置</strong>
                    <Text type="secondary">
                      {envConfig?.available
                        ? `${envConfig.host}:${envConfig.port}/${envConfig.database}`
                        : '当前环境变量配置不完整'}
                    </Text>
                  </div>
                  <Form.Item name="useEnvConfig" valuePropName="checked" noStyle><Switch /></Form.Item>
                </div>
              </Col>
            ) : null}
            <Col span={12}>
              <Form.Item label="主机地址" name="host" rules={[{ required: !useEnvConfig, message: '请输入主机地址' }]}><Input disabled={useEnvConfig} /></Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="端口" name="port" rules={[{ required: !useEnvConfig, message: '请输入端口' }]}><InputNumber disabled={useEnvConfig} min={1} max={65535} style={{ width: '100%' }} /></Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="数据库名" name="database" rules={[{ required: !useEnvConfig, message: '请输入数据库名' }]}><Input disabled={useEnvConfig} /></Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="用户名" name="username" rules={[{ required: !useEnvConfig, message: '请输入用户名' }]}><Input disabled={useEnvConfig} /></Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="密码" name="password" rules={[{ required: !editingConfig && !useEnvConfig, message: '请输入密码' }]} extra={editingConfig ? '留空表示沿用已保存密码' : null}><Input.Password disabled={useEnvConfig} /></Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="SSL 加密" name="ssl" valuePropName="checked"><Switch disabled={useEnvConfig} /></Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </div>
  );
};

export default DatabaseSettings;