import React, { useState, useEffect } from 'react';
import { Table, Button, Modal, Form, Input, Select, message, Popconfirm, Tag, Card } from 'antd';
import { PlusOutlined, KeyOutlined } from '@ant-design/icons';
import { getSecrets, createSecret, updateSecret, deleteSecret } from '@/api/secrets';

const { Search } = Input;

// 分组中文映射
const GROUP_LABELS: Record<string, string> = {
  database: '数据库',
  jwt: 'JWT',
  sms: '短信',
  wechat: '微信',
  wechat_pay: '微信支付',
  alipay: '支付宝',
  default: '其他',
};

// 分组颜色
const GROUP_COLORS: Record<string, string> = {
  database: 'red',
  jwt: 'orange',
  sms: 'green',
  wechat: 'blue',
  wechat_pay: 'cyan',
  alipay: 'purple',
  default: 'default',
};

// 环境映射
const ENV_LABELS: Record<string, string> = {
  all: '通用',
  prod: '生产',
  test: '测试',
};

const ENV_COLORS: Record<string, string> = {
  all: 'default',
  prod: 'red',
  test: 'blue',
};

const SystemSecrets: React.FC = () => {
  const [secrets, setSecrets] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [modalVisible, setModalVisible] = useState(false);
  const [editingSecret, setEditingSecret] = useState<any>(null);
  const [form] = Form.useForm();
  const [filterGroup, setFilterGroup] = useState<string | undefined>();

  const fetchData = async () => {
    setLoading(true);
    try {
      const params: any = {};
      if (filterGroup) params.groupName = filterGroup;
      const res = await getSecrets(params);
      setSecrets(res.data || []);
    } catch {
      message.error('获取密钥列表失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, [filterGroup]);

  const handleAdd = () => {
    setEditingSecret(null);
    form.resetFields();
    setModalVisible(true);
  };

  const handleEdit = (record: any) => {
    setEditingSecret(record);
    form.setFieldsValue({
      secretKey: record.secretKey,
      description: record.description,
      groupName: record.groupName,
      env: record.env,
      secretValue: '', // 编辑时不回显原值
    });
    setModalVisible(true);
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      if (editingSecret) {
        // 更新时如果没有填新值则不更新
        const updateData: any = {
          description: values.description,
          groupName: values.groupName,
          env: values.env,
        };
        if (values.secretValue) {
          updateData.secretValue = values.secretValue;
        }
        await updateSecret(editingSecret.id, updateData);
        message.success('密钥已更新');
      } else {
        await createSecret(values);
        message.success('密钥已创建');
      }
      setModalVisible(false);
      fetchData();
    } catch {
      message.error('操作失败');
    }
  };

  const handleDelete = async (id: number) => {
    try {
      await deleteSecret(id);
      message.success('密钥已删除');
      fetchData();
    } catch {
      message.error('删除失败');
    }
  };

  const columns = [
    {
      title: '密钥名',
      dataIndex: 'secretKey',
      key: 'secretKey',
      width: 220,
      render: (text: string) => <code style={{ fontSize: 13 }}>{text}</code>,
    },
    {
      title: '当前值',
      dataIndex: 'maskedValue',
      key: 'maskedValue',
      width: 140,
      render: (text: string) => <span style={{ color: '#999' }}>{text}</span>,
    },
    {
      title: '说明',
      dataIndex: 'description',
      key: 'description',
      ellipsis: true,
    },
    {
      title: '分组',
      dataIndex: 'groupName',
      key: 'groupName',
      width: 100,
      render: (text: string) => (
        <Tag color={GROUP_COLORS[text] || 'default'}>
          {GROUP_LABELS[text] || text}
        </Tag>
      ),
    },
    {
      title: '环境',
      dataIndex: 'env',
      key: 'env',
      width: 80,
      render: (text: string) => (
        <Tag color={ENV_COLORS[text]}>{ENV_LABELS[text]}</Tag>
      ),
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
      key: 'updatedAt',
      width: 170,
      render: (text: string) => text?.replace('T', ' ').slice(0, 19),
    },
    {
      title: '操作',
      key: 'action',
      width: 120,
      render: (_: any, record: any) => (
        <span>
          <Button type="link" size="small" onClick={() => handleEdit(record)}>
            编辑
          </Button>
          <Popconfirm
            title="确定删除此密钥？"
            onConfirm={() => handleDelete(record.id)}
            okText="确定"
            cancelText="取消"
          >
            <Button type="link" size="small" danger>
              删除
            </Button>
          </Popconfirm>
        </span>
      ),
    },
  ];

  return (
    <div>
      <Card>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
          <div style={{ display: 'flex', gap: 8 }}>
            <Select
              placeholder="按分组筛选"
              allowClear
              style={{ width: 150 }}
              value={filterGroup}
              onChange={setFilterGroup}
            >
              {Object.entries(GROUP_LABELS).map(([key, label]) => (
                <Select.Option key={key} value={key}>{label}</Select.Option>
              ))}
            </Select>
          </div>
          <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
            添加密钥
          </Button>
        </div>

        <Table
          columns={columns}
          dataSource={secrets}
          rowKey="id"
          loading={loading}
          pagination={false}
          size="middle"
        />
      </Card>

      <Modal
        title={editingSecret ? '编辑密钥' : '添加密钥'}
        open={modalVisible}
        onOk={handleSubmit}
        onCancel={() => setModalVisible(false)}
        okText="保存"
        cancelText="取消"
        width={520}
      >
        <Form form={form} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item
            name="secretKey"
            label="密钥名"
            rules={[{ required: true, message: '请输入密钥名' }]}
          >
            <Input
              placeholder="如 WECHAT_SECRET"
              disabled={!!editingSecret}
            />
          </Form.Item>

          <Form.Item
            name="secretValue"
            label="密钥值"
            rules={editingSecret ? [] : [{ required: true, message: '请输入密钥值' }]}
            extra={editingSecret ? '留空则不修改原值' : ''}
          >
            <Input.Password placeholder="输入密钥值（加密存储）" />
          </Form.Item>

          <Form.Item name="description" label="说明">
            <Input placeholder="如：微信小程序 Secret" />
          </Form.Item>

          <div style={{ display: 'flex', gap: 16 }}>
            <Form.Item
              name="groupName"
              label="分组"
              style={{ flex: 1 }}
              initialValue="default"
            >
              <Select>
                {Object.entries(GROUP_LABELS).map(([key, label]) => (
                  <Select.Option key={key} value={key}>{label}</Select.Option>
                ))}
              </Select>
            </Form.Item>

            <Form.Item
              name="env"
              label="适用环境"
              style={{ flex: 1 }}
              initialValue="all"
            >
              <Select>
                <Select.Option value="all">通用</Select.Option>
                <Select.Option value="prod">仅生产</Select.Option>
                <Select.Option value="test">仅测试</Select.Option>
              </Select>
            </Form.Item>
          </div>
        </Form>
      </Modal>
    </div>
  );
};

export default SystemSecrets;
