import { useEffect, useMemo, useState } from 'react';
import { Activity } from 'lucide-react';
import { Breadcrumb, Button, Table, Tag, type TableColumn } from '@/components/ui';
import { adminApi, type AdminChannel } from '@/api/adminApi';

const columns: Array<TableColumn<AdminChannel>> = [
  { key: 'id', title: '通道编号', render: (record) => record.id },
  { key: 'name', title: '通道名称', render: (record) => record.name },
  { key: 'carrier', title: '运营商', render: (record) => record.carrier ?? '-' },
  { key: 'gatewayHost', title: '网关地址', render: (record) => `${record.gatewayHost}:${record.gatewayPort}` },
  { key: 'rateLimitPerSecond', title: '限速', render: (record) => `${record.rateLimitPerSecond} 条/秒` },
  {
    key: 'status',
    title: '状态',
    render: (record) => <Tag tone={record.status === 'active' ? 'success' : 'danger'}>{record.status === 'active' ? '运行中' : '已停用'}</Tag>,
  },
];

export function AdminMonitorPage() {
  const [channels, setChannels] = useState<AdminChannel[]>([]);
  const [monitor, setMonitor] = useState<Record<string, unknown>>({});
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  function loadData() {
    setLoading(true);
    Promise.all([adminApi.listChannels(), adminApi.listMonitor()])
      .then(([channelItems, monitorData]) => {
        setChannels(channelItems.filter((item) => item.status !== 'deleted'));
        setMonitor(monitorData);
        setError('');
      })
      .catch((reason: Error) => setError(reason.message || '监控数据加载失败'))
      .finally(() => setLoading(false));
  }

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

  const enabledChannels = channels.filter((item) => item.status === 'active').length;
  const statusGroups = Array.isArray(monitor.byStatus) ? monitor.byStatus as Array<{ status: string; _count: { _all: number } }> : [];
  const totalMessages = useMemo(() => statusGroups.reduce((sum, item) => sum + (item._count?._all ?? 0), 0), [statusGroups]);
  const deliveredMessages = useMemo(() => statusGroups.filter((item) => item.status === 'delivered').reduce((sum, item) => sum + (item._count?._all ?? 0), 0), [statusGroups]);
  const successRate = totalMessages > 0 ? ((deliveredMessages / totalMessages) * 100).toFixed(1) : '0.0';

  return (
    <section className="page-stack">
      <div className="page-heading">
        <div>
          <Breadcrumb items={['发送监控']} />
        </div>
        <Button icon={<Activity size={16} />} onClick={loadData} variant="ghost">实时刷新</Button>
      </div>
      {loading ? <p className="muted">正在加载监控数据...</p> : null}
      {error ? <p className="form-error">{error}</p> : null}
      <div className="dashboard-grid">
        <div className="surface metric-card">
          <span>运行通道</span>
          <strong>{enabledChannels}</strong>
          <small>共 {channels.length} 条通道</small>
        </div>
        <div className="surface metric-card">
          <span>平均成功率</span>
          <strong>{successRate}%</strong>
          <small>真实消息记录</small>
        </div>
        <div className="surface metric-card">
          <span>消息总量</span>
          <strong>{totalMessages.toLocaleString('zh-CN')}</strong>
          <small>按当前查询聚合</small>
        </div>
      </div>
      <div className="surface">
        <Table columns={columns} data={channels} rowKey="id" />
      </div>
    </section>
  );
}