/**
 * @name 托管数据统计
 */
import React, { useState, useCallback } from 'react';
import { Layout, Typography, Tabs } from 'antd';
import SideMenu from '../../components/side-menu';
import { MENU_ITEMS, resolveMenuTarget } from '../../common/menu';
import DashboardView from './DashboardView';
import DetailsView from './DetailsView';
import OfflineRecordsView from './OfflineRecordsView';
import './style.css';

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

const ManagedDataStats: React.FC = () => {
  const [activeTab, setActiveTab] = useState('dashboard');

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

  const items = [
    {
      key: 'dashboard',
      label: '托管数据视图',
      children: <DashboardView />,
    },
    {
      key: 'details',
      label: '托管数据明细',
      children: <DetailsView />,
    },
    {
      key: 'offline',
      label: '掉线数据记录',
      children: <OfflineRecordsView />,
    },
  ];

  return (
    <Layout className="managed-data-page" hasSider>
      <SideMenu
        title="数据中心"
        width={280}
        defaultSelectedKey="data_managed_stats"
        items={MENU_ITEMS}
        onMenuSelect={handleMenuSelect}
      />
      <Layout>
        <Header className="managed-data-header" style={{ height: 'auto', display: 'block', padding: '16px 24px' }}>
          <div>
            <Title level={4} style={{ margin: 0 }}>托管数据统计</Title>
            <Text type="secondary">全方位的托管业务数据监控与分析</Text>
          </div>
        </Header>
        <Content className="managed-data-content">
          <Tabs 
            activeKey={activeTab} 
            items={items} 
            onChange={setActiveTab} 
            destroyInactiveTabPane={true}
            type="card"
            style={{ background: '#fff', padding: '16px', borderRadius: '8px' }}
          />
        </Content>
      </Layout>
    </Layout>
  );
};

export default ManagedDataStats;