/**
 * @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, Row, Col, Typography, Space, Select, DatePicker, Button, Tag, Table, List, Badge } from 'antd';
import { AlertOutlined, ReloadOutlined } 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 { RangePicker } = DatePicker;

const EVENT_LIST: EventItem[] = [
  { name: 'on_search', desc: '点击搜索时触发，payload 为筛选条件 JSON 字符串' },
  { name: 'on_action', desc: '点击操作按钮时触发，payload 为操作 JSON 字符串' }
];

const ACTION_LIST: Action[] = [
  { name: 'set_filters', desc: '设置筛选条件，参数为 JSON 字符串', params: 'JSON string' },
  { name: 'refresh', desc: '刷新数据' }
];

const VAR_LIST: KeyDesc[] = [
  { name: 'risk_filter', desc: '风险等级筛选' },
  { name: 'selected_count', desc: '选中记录数' }
];

const CONFIG_LIST: ConfigItem[] = [
  {
    type: 'inputNumber',
    attributeId: 'page_size',
    displayName: '每页条数',
    info: '表格分页大小',
    initialValue: 10,
    min: 5,
    max: 50
  },
  {
    type: 'switch',
    attributeId: 'show_alerts',
    displayName: '显示告警',
    info: '是否显示右侧告警列表',
    initialValue: true
  }
];

const DATA_LIST: DataDesc[] = [
  {
    name: 'operations',
    desc: '操作记录',
    keys: [
      { name: 'id', desc: '操作 ID' },
      { name: 'operator', desc: '执行人' },
      { name: 'action', desc: '操作内容' },
      { name: 'target', desc: '操作对象' },
      { name: 'risk_level', desc: '风险等级' },
      { name: 'risk_score', desc: '风险评分' },
      { name: 'status', desc: '审核状态' },
      { name: 'created_at', desc: '时间' }
    ]
  },
  {
    name: 'alerts',
    desc: '异常告警',
    keys: [
      { name: 'id', desc: '告警 ID' },
      { name: 'title', desc: '告警标题' },
      { name: 'level', desc: '等级' },
      { name: 'time', desc: '时间' }
    ]
  }
];

const DEFAULT_OPERATIONS = [
  {
    id: 'op-1',
    operator: '李昕',
    action: '批量导出客户',
    target: '黑龙江移动企业客户',
    risk_level: 'high',
    risk_score: 88,
    status: 'pending',
    created_at: '2026-02-10 10:12'
  },
  {
    id: 'op-2',
    operator: '王晓宁',
    action: '修改客户归属',
    target: '南岗区重点客户',
    risk_level: 'medium',
    risk_score: 62,
    status: 'approved',
    created_at: '2026-02-10 09:40'
  },
  {
    id: 'op-3',
    operator: '陈凯',
    action: '删除对话记录',
    target: '会话#39402',
    risk_level: 'high',
    risk_score: 91,
    status: 'pending',
    created_at: '2026-02-10 09:08'
  }
];

const DEFAULT_ALERTS = [
  { id: 'alert-1', title: '单账号 30 分钟内导出 3 次', level: 'high', time: '10:05' },
  { id: 'alert-2', title: '异常登录触发二次验证', level: 'medium', time: '09:50' },
  { id: 'alert-3', title: '连续删除客户备注', level: 'medium', time: '09:20' }
];

const Component = forwardRef<AxureHandle, AxureProps>(function RiskOpsMonitor(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 container = innerProps && innerProps.container ? innerProps.container : null;

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

  const operations = useMemo(function () {
    return Array.isArray(dataSource.operations) && dataSource.operations.length > 0 ? dataSource.operations : DEFAULT_OPERATIONS;
  }, [dataSource.operations]);

  const alerts = useMemo(function () {
    return Array.isArray(dataSource.alerts) && dataSource.alerts.length > 0 ? dataSource.alerts : DEFAULT_ALERTS;
  }, [dataSource.alerts]);

  const filterState = useState({ level: 'all', status: 'all' });
  const filters = filterState[0];
  const setFilters = filterState[1];

  const selectedState = useState<string[]>([]);
  const selectedRowKeys = selectedState[0];
  const setSelectedRowKeys = selectedState[1];

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

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

  const fireActionHandler = useCallback(function (name: string, params?: string) {
    if (name === 'set_filters' && params) {
      try {
        const parsed = JSON.parse(params);
        setFilters(function (prev) {
          return { ...prev, ...parsed };
        });
      } catch (error) {
        console.warn('set_filters 参数解析失败', error);
      }
    }
  }, [setFilters]);

  useImperativeHandle(ref, function () {
    return {
      getVar: function (name: string) {
        if (name === 'risk_filter') return filters.level;
        if (name === 'selected_count') return selectedRowKeys.length;
        return undefined;
      },
      fireAction: fireActionHandler,
      eventList: EVENT_LIST,
      actionList: ACTION_LIST,
      varList: VAR_LIST,
      configList: CONFIG_LIST,
      dataList: DATA_LIST
    };
  }, [filters.level, selectedRowKeys.length, fireActionHandler]);

  const filteredOps = useMemo(function () {
    return operations.filter(function (item: any) {
      if (filters.level !== 'all' && item.risk_level !== filters.level) return false;
      if (filters.status !== 'all' && item.status !== filters.status) return false;
      return true;
    });
  }, [operations, filters]);

  const columns: ColumnsType<any> = [
    { title: '执行人', dataIndex: 'operator' },
    { title: '操作', dataIndex: 'action' },
    { title: '对象', dataIndex: 'target', ellipsis: true },
    {
      title: '风险等级',
      dataIndex: 'risk_level',
      render: function (value: string) {
        if (value === 'high') return <Tag color="red">高</Tag>;
        if (value === 'medium') return <Tag color="orange">中</Tag>;
        return <Tag color="green">低</Tag>;
      }
    },
    {
      title: '评分',
      dataIndex: 'risk_score',
      render: function (value: number) {
        return <Text strong>{value}</Text>;
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: function (value: string) {
        if (value === 'pending') return <Badge status="warning" text="待审核" />;
        if (value === 'approved') return <Badge status="success" text="已通过" />;
        return <Badge status="error" text="已驳回" />;
      }
    },
    { title: '时间', dataIndex: 'created_at' },
    {
      title: '操作',
      key: 'actions',
      render: function (_: any, record: any) {
        return (
          <Space>
            <Button
              size="small"
              onClick={function () {
                emitEvent('on_action', JSON.stringify({ id: record.id, action: 'review' }));
              }}
            >
              审核
            </Button>
            <Button
              size="small"
              onClick={function () {
                emitEvent('on_action', JSON.stringify({ id: record.id, action: 'whitelist' }));
              }}
            >
              白名单
            </Button>
          </Space>
        );
      }
    }
  ];

  return (
    <Layout className="risk-ops-page" hasSider>
      <SideMenu
        title="风控中心"
        width={280}
        defaultSelectedKey="risk_ops"
        items={MENU_ITEMS}
        onMenuSelect={handleMenuSelect}
      />
      <Layout>
        <Header className="risk-ops-header">
          <div>
            <Title level={4}>运营操作监控</Title>
            <Text type="secondary">监控高风险操作并跟进审核</Text>
          </div>
          <Space>
            <Button icon={<ReloadOutlined />}>刷新</Button>
            <Button type="primary" icon={<AlertOutlined />}>告警策略</Button>
          </Space>
        </Header>
        <Content className="risk-ops-content">
          <Row gutter={[16, 16]}>
            <Col xs={24} md={8}>
              <Card className="risk-ops-metric">
                <Text type="secondary">异常操作数</Text>
                <Title level={3}>46</Title>
                <Text type="secondary">近 24 小时</Text>
              </Card>
            </Col>
            <Col xs={24} md={8}>
              <Card className="risk-ops-metric">
                <Text type="secondary">高风险账号</Text>
                <Title level={3}>18</Title>
                <Text type="secondary">需优先排查</Text>
              </Card>
            </Col>
            <Col xs={24} md={8}>
              <Card className="risk-ops-metric">
                <Text type="secondary">待审核事件</Text>
                <Title level={3}>12</Title>
                <Text type="secondary">待主管确认</Text>
              </Card>
            </Col>
          </Row>

          <Card className="risk-ops-filter" bordered={false}>
            <Space size={12} wrap>
              <Select
                value={filters.level}
                onChange={function (value) { setFilters(function (prev) { return { ...prev, level: value }; }); }}
                options={[
                  { label: '全部风险', value: 'all' },
                  { label: '高', value: 'high' },
                  { label: '中', value: 'medium' },
                  { label: '低', value: 'low' }
                ]}
              />
              <Select
                value={filters.status}
                onChange={function (value) { setFilters(function (prev) { return { ...prev, status: value }; }); }}
                options={[
                  { label: '全部状态', value: 'all' },
                  { label: '待审核', value: 'pending' },
                  { label: '已通过', value: 'approved' },
                  { label: '已驳回', value: 'rejected' }
                ]}
              />
              <RangePicker />
              <Button type="primary" onClick={function () { emitEvent('on_search', JSON.stringify(filters)); }}>查询</Button>
            </Space>
          </Card>

          <div className="risk-ops-main">
            <Card className="risk-ops-table" bordered={false}>
              <Table
                rowKey="id"
                columns={columns}
                dataSource={filteredOps}
                pagination={{ pageSize }}
                rowSelection={{
                  selectedRowKeys,
                  onChange: function (keys) { setSelectedRowKeys(keys as string[]); }
                }}
              />
            </Card>
            {showAlerts ? (
              <Card className="risk-ops-alerts" title="异常告警" bordered={false}>
                <List
                  dataSource={alerts}
                  renderItem={function (item: any) {
                    return (
                      <List.Item>
                        <List.Item.Meta
                          title={
                            <Space size={8}>
                              <Tag color={item.level === 'high' ? 'red' : 'orange'}>{item.level === 'high' ? '高' : '中'}</Tag>
                              <span>{item.title}</span>
                            </Space>
                          }
                          description={<Text type="secondary">{item.time}</Text>}
                        />
                      </List.Item>
                    );
                  }}
                />
              </Card>
            ) : null}
          </div>
        </Content>
      </Layout>
    </Layout>
  );
});

export default Component;