import { useEffect, useMemo, useState } from 'react';
import { BarChart3 } from 'lucide-react';
import { adminApi, type DashboardResponse } from '@/api/adminApi';
import { Breadcrumb, Button, Chart, Tag } from '@/components/ui';
import { createBarOption, createPieOption } from '@/theme/chartOptions';

export function AdminAnalyticsPage() {
  const [dashboard, setDashboard] = useState<DashboardResponse | null>(null);
  const [tenantStats, setTenantStats] = useState<Array<{ tenantId: string | null; _count: { _all: number }; _sum: { amountCents?: number | null } }>>([]);
  const [channelStats, setChannelStats] = useState<Array<{ channelId: string | null; _count: { _all: number }; _sum: { amountCents?: number | null } }>>([]);
  const [error, setError] = useState('');

  function loadData() {
    Promise.all([
      adminApi.getDashboard(),
      adminApi.listStatistics({ groupBy: 'tenantId' }),
      adminApi.listStatistics({ groupBy: 'channelId' }),
    ])
      .then(([dashboardData, tenantData, channelData]) => {
        setDashboard(dashboardData);
        setTenantStats((Array.isArray(tenantData) ? tenantData : []) as Array<{ tenantId: string | null; _count: { _all: number }; _sum: { amountCents?: number | null } }>);
        setChannelStats((Array.isArray(channelData) ? channelData : []) as Array<{ channelId: string | null; _count: { _all: number }; _sum: { amountCents?: number | null } }>);
        setError('');
      })
      .catch((failure: Error) => setError(failure.message || '统计数据加载失败'));
  }

  useEffect(() => {
    loadData();
  }, []);

  const tenantOption = useMemo(() => createBarOption({
    labels: tenantStats.map((item) => item.tenantId ?? '未绑定企业'),
    series: [{ name: '发送量', data: tenantStats.map((item) => item._count._all) }],
  }), [tenantStats]);

  const channelOption = useMemo(() => createPieOption({
    data: channelStats.map((item) => ({ name: item.channelId ?? '未分配通道', value: item._count._all })),
  }), [channelStats]);

  return (
    <section className="page-stack">
      <div className="page-heading">
        <div>
          <Breadcrumb items={['数据统计']} />
        </div>
        <Button icon={<BarChart3 size={16} />} onClick={loadData} variant="ghost">刷新统计</Button>
      </div>
      {error ? <p className="form-error">{error}</p> : null}

      <div className="dashboard-grid">
        <div className="surface metric-card">
          <span>今日发送量</span>
          <strong>{dashboard?.today.sent.toLocaleString('zh-CN') ?? 0}</strong>
          <small>真实消息记录</small>
        </div>
        <div className="surface metric-card">
          <span>成功率</span>
          <strong>{dashboard?.today.successRate ?? 0}%</strong>
          <small>今日已回执</small>
        </div>
        <div className="surface metric-card">
          <span>待审核</span>
          <strong>{dashboard?.pendingAuditCount ?? 0}</strong>
          <small>企业/签名/模板/风控</small>
        </div>
      </div>

      <div className="chart-grid">
        <div className="surface chart-card">
          <div className="section-heading">
            <div>
              <h2>企业发送排行</h2>
              <p className="muted">按真实短信消息记录聚合。</p>
            </div>
            <Tag tone="info">企业</Tag>
          </div>
          <Chart height={320} option={tenantOption} />
        </div>
        <div className="surface chart-card">
          <div className="section-heading">
            <div>
              <h2>通道占比</h2>
              <p className="muted">按通道消息记录聚合。</p>
            </div>
            <Tag tone="accent">通道</Tag>
          </div>
          <Chart height={320} option={channelOption} />
        </div>
      </div>
    </section>
  );
}