/**
 * @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 组件库)
 * - /assets/libraries/echarts.md (ECharts)
 */

import './style.css';

import React, { forwardRef, useCallback, useImperativeHandle } from 'react';
import { Layout, Typography, Row, Col } from 'antd';
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';
import OperatorStats from './OperatorStats';
import StaffStats from './StaffStats';

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

const EVENT_LIST: EventItem[] = [];
const ACTION_LIST: Action[] = [];
const VAR_LIST: KeyDesc[] = [];
const CONFIG_LIST: ConfigItem[] = [];
const DATA_LIST: DataDesc[] = [];

const DEFAULT_METRICS = [
  { key: 'accounts', name: '托管账号数', value: 3284, delta: '+4% 本月' },
  { key: 'customers', name: '托管客户数', value: '2,489,101', delta: '+1.2% 本月' },
  { key: 'active_sessions', name: '活跃会话', value: 86320, delta: '+6% 本周' },
  { key: 'online_rate', name: '在线率', value: '96.2%', delta: '稳定' }
];

const Component = forwardRef<AxureHandle, AxureProps>(function DataDashboard(innerProps, ref) {
  const onEventHandler = typeof innerProps.onEvent === 'function' ? innerProps.onEvent : function () { return undefined; };

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

  useImperativeHandle(ref, function () {
    return {
      getVar: function (name: string) {
        return undefined;
      },
      fireAction: function (name: string, params?: string) {},
      eventList: EVENT_LIST,
      actionList: ACTION_LIST,
      varList: VAR_LIST,
      configList: CONFIG_LIST,
      dataList: DATA_LIST
    };
  }, []);

  return (
    <Layout className="data-dashboard-page" hasSider>
      <SideMenu
        title="数据中心"
        width={280}
        defaultSelectedKey="data_dashboard"
        items={MENU_ITEMS}
        onMenuSelect={handleMenuSelect}
      />
      <Layout>
        <Header className="data-dashboard-header">
          <div>
            <Title level={4}>数据看板</Title>
            <Text type="secondary">托管账号与客户总览</Text>
          </div>
          {/* Removed global Tabs as per new requirements having local filters */}
        </Header>
        <Content className="data-dashboard-content">
          <Row gutter={[16, 16]}>
            <Col span={24}>
              <OperatorStats />
            </Col>
            <Col span={24}>
              <StaffStats />
            </Col>
          </Row>
        </Content>
      </Layout>
    </Layout>
  );
});

export default Component;