/**
 * @name 敏感词库管理
 * 
 * 参考资料：
 * - /rules/development-standards.md
 * - /rules/axure-api-guide.md
 * - /assets/docs/设计指导（简约）.md
 * - /src/themes/antd-new/DESIGN-SPEC.md
 * - /src/themes/antd-new/designToken.json (Ant Design 主题)
 * - /assets/libraries/antd.md (Ant Design 组件库)
 */

import './style.css';

import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
import { Layout, Card, Typography, Space, Input, Button, Table, Switch, Tag, Modal, Form, Radio, message, Tooltip } from 'antd';
import { SearchOutlined, PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import type { AxureProps, AxureHandle, EventItem, Action, KeyDesc, ConfigItem, DataDesc } from '../../common/axure-types';
import { MENU_ITEMS, resolveMenuTarget } from '../../common/menu';
import SideMenu from '../../components/side-menu';

const { Header, Content } = Layout;
const { Title, Text } = Typography;
const { TextArea } = Input;

// --- Axure Definitions ---

const EVENT_LIST: EventItem[] = [
  { name: 'on_search', desc: '点击搜索时触发，payload 为筛选条件 JSON 字符串' },
  { name: 'on_add', desc: '点击新增按钮时触发' },
  { name: 'on_edit', desc: '点击编辑按钮时触发，payload 为规则 ID' },
  { name: 'on_delete', desc: '点击删除按钮时触发，payload 为规则 ID' },
  { name: 'on_toggle_status', desc: '切换状态时触发，payload 为 {id, status}' }
];

const ACTION_LIST: Action[] = [
  { name: 'refresh', desc: '刷新列表' }
];

const VAR_LIST: KeyDesc[] = [
  { name: 'filter_keyword', desc: '当前关键词筛选' }
];

const CONFIG_LIST: ConfigItem[] = [
  {
    type: 'inputNumber',
    attributeId: 'page_size',
    displayName: '每页条数',
    info: '表格分页大小',
    initialValue: 10,
    min: 5,
    max: 50
  }
];

const DATA_LIST: DataDesc[] = [
  {
    name: 'rules',
    desc: '敏感词规则列表',
    keys: [
      { name: 'id', desc: '规则 ID' },
      { name: 'rule_name', desc: '规则名称' },
      { name: 'keywords', desc: '敏感词列表' },
      { name: 'is_block', desc: '是否拦截' },
      { name: 'is_active', desc: '是否启用' },
      { name: 'created_at', desc: '创建时间' }
    ]
  }
];

// --- Mock Data ---

const DEFAULT_RULES = [
  {
    id: 'rule-1',
    rule_name: '涉政敏感词',
    keywords: ['词汇A', '词汇B', '词汇C', '词汇D', '词汇E'],
    is_block: true,
    is_active: true,
    created_at: '2026-01-15 10:00:00'
  },
  {
    id: 'rule-2',
    rule_name: '辱骂/攻击性词汇',
    keywords: ['傻瓜', '笨蛋', '白痴'],
    is_block: false,
    is_active: true,
    created_at: '2026-01-20 14:30:00'
  },
  {
    id: 'rule-3',
    rule_name: '竞品关键词',
    keywords: ['竞品A', '竞品B'],
    is_block: false,
    is_active: false,
    created_at: '2026-02-01 09:15:00'
  },
  {
    id: 'rule-4',
    rule_name: '诈骗风险词',
    keywords: ['转账', '汇款', '银行卡号', '验证码', '密码'],
    is_block: true,
    is_active: true,
    created_at: '2026-02-05 16:45:00'
  }
];

const Component = forwardRef<AxureHandle, AxureProps>(function RiskSensitiveWords(innerProps, ref) {
  const dataSource = innerProps && innerProps.data ? innerProps.data : {};
  const configSource = innerProps && innerProps.config ? innerProps.config : {};
  const onEventHandler = typeof innerProps.onEvent === 'function' ? innerProps.onEvent : function () { return undefined; };

  const pageSize = typeof configSource.page_size === 'number' && configSource.page_size > 0
    ? configSource.page_size
    : 10;

  // --- State ---
  const [localRules, setLocalRules] = useState(DEFAULT_RULES);
  const rules = useMemo(function () {
    return Array.isArray(dataSource.rules) && dataSource.rules.length > 0 ? dataSource.rules : localRules;
  }, [dataSource.rules, localRules]);

  const [filterKeyword, setFilterKeyword] = useState('');
  
  // Modal State
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingRule, setEditingRule] = useState<any>(null);
  const [form] = Form.useForm();

  // --- Handlers ---

  const emitEvent = useCallback(function (eventName: string, payload?: any) {
    try {
      onEventHandler(eventName, payload);
    } catch (error) {
      console.warn('事件触发失败:', eventName, error);
    }
  }, [onEventHandler]);

  const handleSearch = useCallback(function () {
    emitEvent('on_search', filterKeyword);
  }, [emitEvent, filterKeyword]);

  const handleToggleStatus = useCallback(function (id: string, checked: boolean) {
    // Optimistic update for demo
    setLocalRules(prev => prev.map(r => r.id === id ? { ...r, is_active: checked } : r));
    emitEvent('on_toggle_status', JSON.stringify({ id, status: checked }));
    message.success(`已${checked ? '启用' : '停用'}规则`);
  }, [emitEvent]);

  const handleDelete = useCallback(function (id: string) {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除该敏感词规则吗？此操作不可恢复。',
      okType: 'danger',
      onOk: () => {
        setLocalRules(prev => prev.filter(r => r.id !== id));
        emitEvent('on_delete', id);
        message.success('规则已删除');
      }
    });
  }, [emitEvent]);

  const handleOpenModal = useCallback((record?: any) => {
    if (record) {
      setEditingRule(record);
      form.setFieldsValue({
        rule_name: record.rule_name,
        keywords: record.keywords.join('\n'),
        is_block: record.is_block,
        is_active: record.is_active
      });
      emitEvent('on_edit', record.id);
    } else {
      setEditingRule(null);
      form.resetFields();
      form.setFieldsValue({
        is_block: false,
        is_active: true
      });
      emitEvent('on_add', null);
    }
    setIsModalOpen(true);
  }, [form, emitEvent]);

  const handleModalOk = useCallback(() => {
    form.validateFields().then(values => {
      const keywords = values.keywords.split(/[\n,，]+/).map((k: string) => k.trim()).filter(Boolean);
      const newRule = {
        id: editingRule ? editingRule.id : `rule-${Date.now()}`,
        rule_name: values.rule_name,
        keywords,
        is_block: values.is_block,
        is_active: values.is_active,
        created_at: editingRule ? editingRule.created_at : new Date().toLocaleString()
      };

      if (editingRule) {
        setLocalRules(prev => prev.map(r => r.id === editingRule.id ? newRule : r));
        message.success('规则更新成功');
      } else {
        setLocalRules(prev => [newRule, ...prev]);
        message.success('规则创建成功');
      }
      setIsModalOpen(false);
    });
  }, [editingRule, form]);

  const handleMenuSelect = useCallback(function (key: string) {
    const target = resolveMenuTarget(key);
    if (target) {
      window.location.href = target;
    }
  }, []);

  // --- Axure Interface ---

  useImperativeHandle(ref, function () {
    return {
      getVar: function (name: string) {
        if (name === 'filter_keyword') return filterKeyword;
        return undefined;
      },
      fireAction: function (name: string) {
        if (name === 'refresh') {
          // refresh logic
        }
      },
      eventList: EVENT_LIST,
      actionList: ACTION_LIST,
      varList: VAR_LIST,
      configList: CONFIG_LIST,
      dataList: DATA_LIST
    };
  }, [filterKeyword]);

  // --- Filtering ---

  const filteredData = useMemo(function () {
    return rules.filter((item: any) => {
      if (!filterKeyword) return true;
      const lowerKw = filterKeyword.toLowerCase();
      return (
        item.rule_name.toLowerCase().includes(lowerKw) ||
        item.keywords.some((k: string) => k.toLowerCase().includes(lowerKw))
      );
    });
  }, [rules, filterKeyword]);

  // --- Columns ---

  const columns: ColumnsType<any> = [
    {
      title: '规则名称',
      dataIndex: 'rule_name',
      width: 200,
      render: (text) => <Text strong>{text}</Text>
    },
    {
      title: '敏感词',
      dataIndex: 'keywords',
      render: (keywords: string[]) => {
        const display = keywords.slice(0, 3);
        const more = keywords.length > 3;
        return (
          <Space wrap size={4}>
            {display.map(k => <Tag key={k}>{k}</Tag>)}
            {more && (
              <Tooltip title={keywords.slice(3).join(', ')}>
                <Tag>+{keywords.length - 3}...</Tag>
              </Tooltip>
            )}
          </Space>
        );
      }
    },
    {
      title: '拦截策略',
      dataIndex: 'is_block',
      width: 120,
      render: (val) => val ? <Tag color="error">拦截</Tag> : <Tag color="blue">仅记录</Tag>
    },
    {
      title: '启用状态',
      dataIndex: 'is_active',
      width: 120,
      render: (val, record) => (
        <Switch 
          checked={val} 
          onChange={(checked) => handleToggleStatus(record.id, checked)}
          checkedChildren="启用"
          unCheckedChildren="停用"
        />
      )
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      width: 180,
      render: (text) => <Text type="secondary">{text}</Text>
    },
    {
      title: '操作',
      key: 'actions',
      width: 150,
      render: (_, record) => (
        <Space>
          <Button 
            type="text" 
            icon={<EditOutlined />} 
            onClick={() => handleOpenModal(record)}
          >
            编辑
          </Button>
          <Button 
            type="text" 
            danger 
            icon={<DeleteOutlined />} 
            onClick={() => handleDelete(record.id)}
          >
            删除
          </Button>
        </Space>
      )
    }
  ];

  return (
    <Layout className="risk-sensitive-page" hasSider>
      <SideMenu
        title="风控中心"
        width={280}
        defaultSelectedKey="risk_sensitive_library"
        items={MENU_ITEMS}
        onMenuSelect={handleMenuSelect}
      />
      <Layout>
        <Header className="risk-sensitive-header">
          <div>
            <Title level={4}>敏感词库管理</Title>
            <Text type="secondary">配置敏感词规则与拦截策略</Text>
          </div>
          <Space>
            <Button type="primary" icon={<PlusOutlined />} onClick={() => handleOpenModal()}>新增规则</Button>
          </Space>
        </Header>
        <Content className="risk-sensitive-content">
          <Card className="risk-sensitive-filter" bordered={false}>
            <Space>
              <Input
                placeholder="搜索规则名称或敏感词"
                prefix={<SearchOutlined />}
                value={filterKeyword}
                onChange={(e) => setFilterKeyword(e.target.value)}
                style={{ width: 300 }}
                onPressEnter={handleSearch}
              />
              <Button type="primary" onClick={handleSearch}>查询</Button>
            </Space>
          </Card>

          <Card className="risk-sensitive-table" bordered={false}>
            <Table
              rowKey="id"
              columns={columns}
              dataSource={filteredData}
              pagination={{ pageSize }}
            />
          </Card>
        </Content>

        <Modal
          title={editingRule ? "编辑敏感词规则" : "新增敏感词规则"}
          open={isModalOpen}
          onOk={handleModalOk}
          onCancel={() => setIsModalOpen(false)}
          width={600}
        >
          <Form
            form={form}
            layout="vertical"
          >
            <Form.Item
              name="rule_name"
              label="规则名称"
              rules={[{ required: true, message: '请输入规则名称' }]}
            >
              <Input placeholder="例如：涉政敏感词" />
            </Form.Item>
            <Form.Item
              name="keywords"
              label="敏感词列表"
              rules={[{ required: true, message: '请输入敏感词' }]}
              extra="支持批量输入，多个敏感词请用换行或逗号分隔"
            >
              <TextArea rows={6} placeholder="词汇A&#13;&#10;词汇B&#13;&#10;词汇C" />
            </Form.Item>
            <Form.Item
              name="is_block"
              label="拦截策略"
              initialValue={false}
            >
              <Radio.Group>
                <Radio value={false}>仅记录（不拦截消息）</Radio>
                <Radio value={true}>拦截（阻止消息发送）</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item
              name="is_active"
              label="启用状态"
              valuePropName="checked"
              initialValue={true}
            >
              <Switch checkedChildren="启用" unCheckedChildren="停用" />
            </Form.Item>
          </Form>
        </Modal>
      </Layout>
    </Layout>
  );
});

export default Component;