import { BarChartOutlined } from '@ant-design/icons';
import { Empty, Spin } from 'antd';
import type { StatsPageLogic } from '../StatsPageLogic';
import StatsMetricCards from './StatsMetricCards';
import StatsPointsCard from './StatsPointsCard';
import StatsTokenSection from './StatsTokenSection';
import StatsTopAgentsCard from './StatsTopAgentsCard';
import StatsTrendCard from './StatsTrendCard';

export default function StatsPageWeb({ logic }: { logic: StatsPageLogic }) {
  if (logic.loading) return <Spin className="stats-state-spin" />;
  if (!logic.data) return <Empty description="暂无数据" className="stats-state-empty" />;

  return (
    <div className="page-container stats-page-web">
      <div className="stats-page-hero">
        <div className="stats-page-header">
          <div className="stats-page-title-section">
            <div className="stats-page-badge">
              <BarChartOutlined className="stats-page-badge-icon" />
              数据洞察看板
            </div>
            <h1 className="page-title stats-page-title">调用统计</h1>
            <p className="page-subtitle stats-page-subtitle">
              不只是查看调用数量，而是帮助你感知哪些智能体正在被频繁使用、最近的消息趋势如何，以及整体会话是否健康增长。
            </p>
          </div>
          <div className="stats-page-summary-card">
            <div className="stats-page-summary-label">近 7 天消息总量</div>
            <div className="stats-page-summary-value">{logic.last7Days}</div>
            <div className="stats-page-summary-desc">平均每个会话 {logic.avgSessionMessages} 条消息</div>
          </div>
        </div>

        <StatsMetricCards logic={logic} />
      </div>

      <StatsPointsCard logic={logic} />

      <div className="stats-page-main-grid stats-page-mt-18">
        <StatsTrendCard logic={logic} />
        <StatsTopAgentsCard logic={logic} />
      </div>

      <StatsTokenSection logic={logic} />
    </div>
  );
}