import { useEffect, useMemo, useState } from 'react';
import { BarChart3, DollarSign, FileCheck2, ShieldCheck } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { Breadcrumb, Button, Modal, MoneyText, Table, Tag, type TableColumn } from '@/components/ui';
import './AdminHome.css';
import { Chart } from '@/components/ui/Chart';
import { adminApi, type DashboardResponse, type SendQualityResponse } from '@/api/adminApi';
import { createDualAxisBarLineOption, createLineOption } from '@/theme/chartOptions';
import { formatAmount, moneyUnitsToYuan } from '@/utils/currency';

type EnterpriseSpendRank = {
  id: string;
  enterprise: string;
  todaySpend: number;
  balanceStatus: '充足' | '紧张' | '欠费';
  availableBalance: number;
};

const balanceTone = {
  充足: 'success',
  紧张: 'warning',
  欠费: 'danger',
} as const;

function formatCurrency(value: number) {
  return formatAmount(value);
}

function formatCount(value: number) {
  return value.toLocaleString('zh-CN');
}

export function AdminHome() {
  const navigate = useNavigate();
  const [dashboard, setDashboard] = useState<DashboardResponse | null>(null);
  const [quality, setQuality] = useState<SendQualityResponse | null>(null);
  const [error, setError] = useState('');
  const [selectedEnterprise, setSelectedEnterprise] = useState<EnterpriseSpendRank | null>(null);

  useEffect(() => {
    Promise.all([adminApi.getDashboard(), adminApi.getSendQuality()])
      .then(([nextDashboard, nextQuality]) => {
        setDashboard(nextDashboard);
        setQuality(nextQuality);
      })
      .catch((err) => {
        setError(err instanceof Error ? err.message : '运营看板加载失败');
        setDashboard(null);
      });
  }, []);

  const enterpriseSpendRanks = useMemo<EnterpriseSpendRank[]>(() => {
    return (dashboard?.enterpriseSpendRanks ?? []).map((account) => {
      const todaySpend = moneyUnitsToYuan(account.todaySpendCents);
      const availableBalance = moneyUnitsToYuan(account.balanceCents + account.creditCents);
      return {
        id: account.tenantId,
        enterprise: account.tenantName,
        todaySpend,
        availableBalance,
        balanceStatus: (availableBalance <= 0
          ? '欠费'
          : availableBalance < 100
            ? '紧张'
            : '充足') as EnterpriseSpendRank['balanceStatus'],
      };
    });
  }, [dashboard]);

  const totalSend = dashboard?.today.sent ?? 0;
  const averageSuccessRate = dashboard?.today.successRate ?? 0;
  const todaySpend = moneyUnitsToYuan(dashboard?.today.spendCents);
  const todayReturned = moneyUnitsToYuan(dashboard?.today.returnedCents);
  const todayBilled = moneyUnitsToYuan(dashboard?.today.billedCents);
  const todayProfit = moneyUnitsToYuan(dashboard?.today.profitCents);
  const activeSignatureCount = new Set(quality?.signatures.map((item) => item.signatureId) ?? []).size;
  const downstreamAlertCount = dashboard?.downstreamDeliverySummary?.alertCount ?? 0;
  const pendingAudits = dashboard?.pendingAudits ?? {
    enterpriseCertifications: 0,
    smsAudits: 0,
    templates: 0,
    signatures: 0,
    drainageInfos: 0,
    total: 0,
  };

  const sendTrendOption = useMemo(
    () =>
      createLineOption({
        labels: dashboard?.hourlySendTrend.map((item) => item.label) ?? [],
        series: [
          { name: '提交总条数', data: dashboard?.hourlySendTrend.map((item) => item.submittedCount) ?? [] },
          { name: '成功条数', data: dashboard?.hourlySendTrend.map((item) => item.successCount) ?? [] },
        ],
      }),
    [dashboard],
  );

  const auditSpeedOption = useMemo(
    () =>
      createDualAxisBarLineOption({
        labels: dashboard?.auditProcessingSpeed.map((item) => item.label) ?? [],
        bar: {
          name: '审核数量',
          data: dashboard?.auditProcessingSpeed.map((item) => item.count) ?? [],
        },
        line: {
          name: '平均处理时长（分钟）',
          data:
            dashboard?.auditProcessingSpeed.map((item) =>
              item.averageProcessingMs == null ? null : Number((item.averageProcessingMs / 60_000).toFixed(1)),
            ) ?? [],
        },
      }),
    [dashboard],
  );

  const enterpriseColumns: Array<TableColumn<EnterpriseSpendRank>> = [
    { key: 'rank', title: '排名', width: '72px', render: (_record, index) => index + 1 },
    {
      key: 'enterprise',
      title: '企业名称',
      render: (record) => (
        <div>
          <strong>{record.enterprise}</strong>
          <p className="text-caption">{record.id}</p>
        </div>
      ),
    },
    {
      key: 'todaySpend',
      title: '今日消费（元）',
      align: 'right',
      render: (record) => <MoneyText>¥{formatCurrency(record.todaySpend)}</MoneyText>,
    },
    {
      key: 'availableBalance',
      title: '可用余额',
      align: 'right',
      render: (record) => formatCount(record.availableBalance),
    },
    {
      key: 'balanceStatus',
      title: '余额状态',
      render: (record) => <Tag tone={balanceTone[record.balanceStatus]}>{record.balanceStatus}</Tag>,
    },
    {
      key: 'actions',
      title: '操作',
      align: 'right',
      render: (record) => (
        <Button onClick={() => setSelectedEnterprise(record)} size="sm" variant="ghost">
          查看详情
        </Button>
      ),
    },
  ];

  return (
    <section className="page-stack admin-dashboard">
      <div className="overview-hero admin-dashboard-hero">
        <div>
          <Breadcrumb items={['数据概览']} />
          <p className="muted">按业务口径查看平台发送、签名、消费和审核情况。</p>
        </div>
        <div className="page-actions">
          <Button icon={<FileCheck2 size={16} />} onClick={() => navigate('/admin/templates')} variant="ghost">
            处理审核
          </Button>
          <Button onClick={() => navigate('/admin/monitor')}>查看发送监控</Button>
        </div>
      </div>

      <div className="home-metrics" aria-busy={!dashboard && !error}>
        {[
          {
            label: '今日发送总量',
            value: formatCount(totalSend),
            unit: '条',
            note: '业务短信',
            group: '发送',
            icon: <BarChart3 size={18} />,
          },
          {
            label: '今日消息分片数',
            value: formatCount(dashboard?.today.segmentCount ?? 0),
            unit: '片',
            note: '实际消息分片',
            group: '发送',
          },
          {
            label: '总体成功率',
            value: averageSuccessRate.toFixed(1),
            unit: '%',
            note: '送达成功 / 今日总量',
            group: '质量',
            icon: <ShieldCheck size={18} />,
          },
          {
            label: '今日到达率',
            value: (dashboard?.today.arrivalRate ?? 0).toFixed(1),
            unit: '%',
            note: '到达分片 / 发送总分片',
            group: '质量',
          },
          {
            label: '今日活跃签名',
            value: formatCount(activeSignatureCount),
            unit: '个',
            note: '今日有真实发送记录',
            group: '发送',
          },
          {
            label: '今日消费金额',
            value: formatCurrency(todaySpend),
            unit: '元',
            note: '今日消息消费',
            group: '经营',
            icon: <DollarSign size={18} />,
          },
          {
            label: '今日返还金额',
            value: formatCurrency(todayReturned),
            unit: '元',
            note: '今日返还流水',
            group: '经营',
          },
          {
            label: '今日计收金额',
            value: formatCurrency(todayBilled),
            unit: '元',
            note: '成功计费条数 × 客户价',
            group: '经营',
          },
          {
            label: '今日利润',
            value: formatCurrency(todayProfit),
            unit: '元',
            note: '计收金额 − 成功分片通道成本',
            group: '经营',
            danger: todayProfit < 0,
          },
          {
            label: '今日利润率',
            value: (dashboard?.today.profitRate ?? 0).toFixed(1),
            unit: '%',
            note: '今日利润 / 今日计收金额',
            group: '经营',
            danger: (dashboard?.today.profitRate ?? 0) < 0,
          },
        ].map((metric) => (
          <article className="home-metric" key={metric.label}>
            <div className="home-metric__heading">
              <span>{metric.label}</span>
              <span className="home-metric__category">
                {metric.icon}
                {metric.group}
              </span>
            </div>
            <div className={metric.danger ? 'home-metric__number is-negative' : 'home-metric__number'}>
              <strong>{dashboard ? metric.value : '—'}</strong>
              <span>{metric.unit}</span>
            </div>
            <p>{dashboard ? metric.note : error ? '数据暂不可用' : '正在加载…'}</p>
          </article>
        ))}
      </div>
      {error ? <div className="surface ui-table__empty">{error}</div> : null}

      <div className="chart-grid">
        <div className="surface chart-card">
          <h2>今日发送趋势</h2>
          <p className="muted">按上海时区逐小时展示业务短信提交总条数和最终成功条数。</p>
          <Chart height={300} option={sendTrendOption} />
        </div>
        <div className="surface chart-card">
          <h2>审核处理速度</h2>
          <p className="muted">展示今日各项已处理审核数量，以及从提交到审核完成的平均时长。</p>
          <Chart height={300} option={auditSpeedOption} />
        </div>
      </div>

      <div className="surface section-stack">
        <div className="section-heading">
          <div>
            <h2>今日企业消费排行</h2>
            <p className="muted">来自真实账户、充值和消息金额聚合。</p>
          </div>
          <Button icon={<DollarSign size={16} />} size="sm" variant="ghost">
            导出排行
          </Button>
        </div>
        <Table columns={enterpriseColumns} data={enterpriseSpendRanks} rowKey="id" />
      </div>

      <div className="surface section-stack">
        <div className="section-heading">
          <div>
            <h2>运营状态</h2>
            <p className="muted">当日关键流程状态汇总。</p>
          </div>
          <BarChart3 size={20} className="status-info" />
        </div>
        <div className="overview-grid overview-grid--three">
          <Button className="mini-status-card" onClick={() => navigate('/admin/enterprise-audit')} variant="ghost">
            <FileCheck2 size={22} />
            <span>企业认证待审</span>
            <strong>{pendingAudits.enterpriseCertifications} 条</strong>
          </Button>
          <Button className="mini-status-card" onClick={() => navigate('/admin/sms-audit')} variant="ghost">
            <FileCheck2 size={22} />
            <span>短信审核待审</span>
            <strong>{pendingAudits.smsAudits} 条</strong>
          </Button>
          <Button className="mini-status-card" onClick={() => navigate('/admin/templates')} variant="ghost">
            <FileCheck2 size={22} />
            <span>模板待审</span>
            <strong>{pendingAudits.templates} 条</strong>
          </Button>
          <Button className="mini-status-card" onClick={() => navigate('/admin/signatures')} variant="ghost">
            <FileCheck2 size={22} />
            <span>签名待审</span>
            <strong>{pendingAudits.signatures} 条</strong>
          </Button>
          <Button className="mini-status-card" onClick={() => navigate('/admin/drainage-audits')} variant="ghost">
            <FileCheck2 size={22} />
            <span>引流信息待审</span>
            <strong>{pendingAudits.drainageInfos} 条</strong>
          </Button>
          <div className="mini-status-card">
            <ShieldCheck size={22} />
            <div>
              <span>平均等待</span>
              <strong>{dashboard?.taskCount ?? 0} 任务</strong>
              <small>真实批量任务总数。</small>
            </div>
          </div>
          <div className="mini-status-card">
            <ShieldCheck size={22} />
            <div>
              <span>下游投递告警</span>
              <strong>{downstreamAlertCount} 条</strong>
              <small>积压过久或近期失败。</small>
            </div>
          </div>
        </div>
      </div>

      <Modal
        footer={
          <>
            <Button onClick={() => setSelectedEnterprise(null)} variant="ghost">
              关闭
            </Button>
            <Button onClick={() => navigate('/admin/recharge-records')}>查看充值记录</Button>
          </>
        }
        onClose={() => setSelectedEnterprise(null)}
        open={Boolean(selectedEnterprise)}
        title={
          <div className="ui-detail-title">
            <h2>企业消费详情</h2>
            <p>{selectedEnterprise?.id}</p>
          </div>
        }
      >
        {selectedEnterprise ? (
          <div className="ui-detail-info-grid">
            <div className="ui-detail-info-grid__item">
              <span>企业名称</span>
              <strong>{selectedEnterprise.enterprise}</strong>
            </div>
            <div className="ui-detail-info-grid__item">
              <span>企业ID</span>
              <strong>{selectedEnterprise.id}</strong>
            </div>
            <div className="ui-detail-info-grid__item">
              <span>余额状态</span>
              <strong>
                <Tag tone={balanceTone[selectedEnterprise.balanceStatus]}>{selectedEnterprise.balanceStatus}</Tag>
              </strong>
            </div>
            <div className="ui-detail-info-grid__item">
              <span>今日消费</span>
              <strong>
                <MoneyText>¥{formatCurrency(selectedEnterprise.todaySpend)}</MoneyText>
              </strong>
            </div>
            <div className="ui-detail-info-grid__item">
              <span>可用余额</span>
              <strong>{formatCount(selectedEnterprise.availableBalance)}</strong>
            </div>
          </div>
        ) : null}
      </Modal>
    </section>
  );
}