/**
 * @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, Select, DatePicker, Button, Tabs, Table, Tag } from 'antd';
import { SearchOutlined, DownloadOutlined } 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_reset', desc: '点击重置时触发，payload 为 "reset"' },
  { name: 'on_export', desc: '点击导出时触发，payload 为 "export"' }
];

const ACTION_LIST: Action[] = [
  { name: 'set_filters', desc: '设置筛选条件，参数为 JSON 字符串', params: 'JSON string' },
  { name: 'switch_tab', desc: '切换日志分类，参数为 tab key', params: 'string' }
];

const VAR_LIST: KeyDesc[] = [
  { name: 'active_tab', desc: '当前日志分类' },
  { name: 'selected_count', desc: '选中记录数' }
];

const CONFIG_LIST: ConfigItem[] = [
  {
    type: 'inputNumber',
    attributeId: 'page_size',
    displayName: '每页条数',
    info: '表格分页大小',
    initialValue: 10,
    min: 5,
    max: 50
  },
  {
    type: 'select',
    attributeId: 'default_tab',
    displayName: '默认分类',
    info: '默认日志分类',
    initialValue: 'system',
    options: [
      { label: '系统日志', value: 'system' },
      { label: '操作日志', value: 'operation' },
      { label: '安全日志', value: 'security' }
    ]
  }
];

const DATA_LIST: DataDesc[] = [
  {
    name: 'logs',
    desc: '日志记录',
    keys: [
      { name: 'id', desc: '日志 ID' },
      { name: 'module', desc: '模块' },
      { name: 'action', desc: '动作' },
      { name: 'operator', desc: '操作人' },
      { name: 'result', desc: '结果' },
      { name: 'ip', desc: 'IP 地址' },
      { name: 'duration', desc: '耗时' },
      { name: 'created_at', desc: '时间' }
    ]
  }
];

const DEFAULT_LOGS = [
  {
    id: 'log-1',
    module: '托管账号',
    action: '修改托管状态',
    operator: '李昕',
    result: 'success',
    ip: '10.12.32.18',
    duration: '480ms',
    created_at: '2026-02-10 10:05'
  },
  {
    id: 'log-2',
    module: '敏感词监控',
    action: '批量处置',
    operator: '王晓宁',
    result: 'success',
    ip: '10.12.32.21',
    duration: '1.2s',
    created_at: '2026-02-10 09:32'
  },
  {
    id: 'log-3',
    module: '会话管理',
    action: '导出聊天记录',
    operator: '陈凯',
    result: 'failed',
    ip: '10.12.32.29',
    duration: '2.6s',
    created_at: '2026-02-10 09:10'
  }
];

const Component = forwardRef<AxureHandle, AxureProps>(function RiskLogManagement(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 defaultTab = typeof configSource.default_tab === 'string' && configSource.default_tab
    ? configSource.default_tab
    : 'system';

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

  const tabState = useState<string>(defaultTab);
  const activeTab = tabState[0];
  const setActiveTab = tabState[1];

  const filterState = useState({ module: 'all', result: 'all', keyword: '' });
  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 handleSearch = useCallback(function () {
    emitEvent('on_search', JSON.stringify({ ...filters, tab: activeTab }));
  }, [emitEvent, filters, activeTab]);

  const handleReset = useCallback(function () {
    setFilters({ module: 'all', result: 'all', keyword: '' });
    emitEvent('on_reset', 'reset');
  }, [emitEvent, setFilters]);

  const handleExport = useCallback(function () {
    emitEvent('on_export', 'export');
  }, [emitEvent]);

  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);
      }
    }
    if (name === 'switch_tab' && params) {
      setActiveTab(params);
    }
  }, [setFilters, setActiveTab]);

  useImperativeHandle(ref, function () {
    return {
      getVar: function (name: string) {
        if (name === 'active_tab') return activeTab;
        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
    };
  }, [activeTab, selectedRowKeys.length, fireActionHandler]);

  const columns: ColumnsType<any> = [
    { title: '模块', dataIndex: 'module' },
    { title: '操作', dataIndex: 'action' },
    { title: '操作人', dataIndex: 'operator' },
    {
      title: '结果',
      dataIndex: 'result',
      render: function (value: string) {
        return value === 'success' ? <Tag color="green">成功</Tag> : <Tag color="red">失败</Tag>;
      }
    },
    { title: 'IP', dataIndex: 'ip' },
    { title: '耗时', dataIndex: 'duration' },
    { title: '时间', dataIndex: 'created_at' }
  ];

  return (
    <Layout className="risk-log-page" hasSider>
      <SideMenu
        title="风控中心"
        width={280}
        defaultSelectedKey="risk_logs"
        items={MENU_ITEMS}
        onMenuSelect={handleMenuSelect}
      />
      <Layout>
        <Header className="risk-log-header">
          <div>
            <Title level={4}>日志管理</Title>
            <Text type="secondary">统一查询系统与操作日志</Text>
          </div>
          <Button type="primary" icon={<DownloadOutlined />} onClick={handleExport}>导出</Button>
        </Header>
        <Content className="risk-log-content">
          <Card className="risk-log-tabs" bordered={false}>
            <Tabs
              activeKey={activeTab}
              onChange={function (key) { setActiveTab(key); }}
              items={[
                { key: 'system', label: '系统日志' },
                { key: 'operation', label: '操作日志' },
                { key: 'security', label: '安全日志' }
              ]}
            />
          </Card>

          <Card className="risk-log-filter" bordered={false}>
            <Space size={12} wrap>
              <Input
                placeholder="关键词"
                prefix={<SearchOutlined />}
                value={filters.keyword}
                onChange={function (event) {
                  setFilters(function (prev) { return { ...prev, keyword: event.target.value }; });
                }}
              />
              <Select
                value={filters.module}
                onChange={function (value) { setFilters(function (prev) { return { ...prev, module: value }; }); }}
                options={[
                  { label: '全部模块', value: 'all' },
                  { label: '托管账号', value: '托管账号' },
                  { label: '敏感词监控', value: '敏感词监控' },
                  { label: '会话管理', value: '会话管理' }
                ]}
              />
              <Select
                value={filters.result}
                onChange={function (value) { setFilters(function (prev) { return { ...prev, result: value }; }); }}
                options={[
                  { label: '全部结果', value: 'all' },
                  { label: '成功', value: 'success' },
                  { label: '失败', value: 'failed' }
                ]}
              />
              <RangePicker />
              <Button type="primary" onClick={handleSearch}>查询</Button>
              <Button onClick={handleReset}>重置</Button>
            </Space>
          </Card>

          <Card className="risk-log-table" bordered={false}>
            <Table
              rowKey="id"
              columns={columns}
              dataSource={logs}
              pagination={{ pageSize }}
              rowSelection={{
                selectedRowKeys,
                onChange: function (keys) { setSelectedRowKeys(keys as string[]); }
              }}
            />
          </Card>
        </Content>
      </Layout>
    </Layout>
  );
});

export default Component;