import { useEffect, useMemo, useState } from 'react';
import {
  BadgeCheck,
  BellRing,
  FileText,
  PenLine,
  Plus,
  ReceiptText,
  Send,
  WalletCards,
} from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { Button, Chart, Table, Tag, type TableColumn } from '@/components/ui';
import { clientApi, type DashboardResponse } from '@/api/adminApi';
import { createLineOption, createPieOption } from '@/theme/chartOptions';
import { formatDateTime } from '@/utils/dateTime';
import { formatAmount, formatCents } from '@/utils/currency';

type RecentTaskRow = {
  id: string;
  taskNo: string;
  scene: string;
  count: number;
  channel: string;
  createdAt: string;
  status: string;
};

const columns: Array<TableColumn<RecentTaskRow>> = [
  { key: 'taskNo', title: '批次编号', render: (record) => record.taskNo },
  { key: 'scene', title: '发送场景', render: (record) => record.scene },
  { key: 'count', title: '发送量', render: (record) => `${record.count.toLocaleString('zh-CN')} 条` },
  { key: 'channel', title: '通道', render: (record) => record.channel },
  { key: 'createdAt', title: '创建时间', render: (record) => record.createdAt },
  { key: 'status', title: '状态', render: (record) => <Tag tone={record.status === 'completed' ? 'success' : record.status === 'failed' ? 'danger' : 'info'}>{record.status}</Tag> },
];

export function ClientHome() {
  const navigate = useNavigate();
  const [dashboard, setDashboard] = useState<DashboardResponse | null>(null);
  const [error, setError] = useState('');

  useEffect(() => {
    clientApi.getDashboard()
      .then(setDashboard)
      .catch((err) => {
        setError(err instanceof Error ? err.message : '客户端工作台加载失败');
        setDashboard(null);
      });
  }, []);

  const account = dashboard?.accounts[0];
  const availableBalance = ((account?.balanceCents ?? 0) + (account?.creditCents ?? 0)) / 100;
  const todaySpend = (dashboard?.today.spendCents ?? 0) / 100;
  const todayRefund = Math.abs((dashboard?.transactions._sum.amountCents ?? 0) < 0 ? 0 : dashboard?.transactions._sum.amountCents ?? 0) / 100;
  const balanceBaseline = Math.max(availableBalance + todaySpend - todayRefund, availableBalance, 1);
  const balancePercent = Math.min(100, Math.round((availableBalance / balanceBaseline) * 100));
  const recentMessages = useMemo<RecentTaskRow[]>(() => (dashboard?.recentTasks ?? []).map((task) => ({
    id: String(task.id ?? task.taskNo),
    taskNo: String(task.taskNo ?? task.id),
    scene: String(task.category ?? task.content ?? '短信发送'),
    count: Number(task.phoneTotal ?? task.progressTotal ?? 0),
    channel: Array.isArray(task.messages) && task.messages[0]?.channel?.name ? String(task.messages[0].channel.name) : '待路由',
    createdAt: formatDateTime(task.createdAt ? String(task.createdAt) : null),
    status: String(task.status ?? 'unknown'),
  })), [dashboard]);
  const latestRecharge = dashboard?.recentRecharges[0];

  const sendTrendOption = useMemo(
    () => createLineOption({
      labels: ['今日'],
      series: [
        { name: '提交量', data: [dashboard?.today.sent ?? 0] },
        { name: '成功量', data: [dashboard?.today.delivered ?? 0] },
      ],
    }),
    [dashboard],
  );

  const channelShareOption = useMemo(() => createPieOption({
    data: (dashboard?.gatewayConnections ?? []).map((item) => ({
      name: item.status,
      value: item._sum.currentConnections ?? item._count._all,
    })),
  }), [dashboard]);

  return (
    <section className="page-stack">
      <div className="overview-hero">
        <div>
          <p className="eyebrow">客户端概览</p>
          <h1>短信服务工作台</h1>
          <p className="muted">查看账户余额、审核进度、发送趋势和常用业务入口。</p>
        </div>
        <div className="page-actions">
          <Button icon={<Plus size={16} />} onClick={() => navigate('/client/templates')} variant="ghost">
            新建模板
          </Button>
          <Button icon={<Send size={16} />} onClick={() => navigate('/client/send')}>发送短信</Button>
        </div>
      </div>

      <div className="dashboard-grid">
        <div className="surface metric-card metric-card--featured">
          <span>账户剩余余额</span>
          <strong>¥{formatAmount(availableBalance)}</strong>
          <small>今日消费 ¥{formatAmount(todaySpend)}</small>
        </div>
        <div className="surface metric-card">
          <span>今日发送</span>
          <strong>{(dashboard?.today.sent ?? 0).toLocaleString('zh-CN')}</strong>
          <small>成功率 {dashboard?.today.successRate ?? 0}%</small>
        </div>
        <div className="surface metric-card">
          <span>今日返还金额</span>
          <strong>¥{formatAmount(todayRefund)}</strong>
          <small>异常回执与退费返还</small>
        </div>
      </div>
      {error ? <div className="surface ui-table__empty">{error}</div> : null}

      <div className="overview-grid">
        <div className="surface section-stack">
          <div className="section-heading">
            <div>
              <h2>快捷操作</h2>
              <p className="muted">覆盖概览页常用入口。</p>
            </div>
          </div>
          <div className="quick-grid">
            <button className="quick-action" onClick={() => navigate('/client/send')} type="button">
              <Send size={20} />
              <span>短信发送</span>
              <small>创建发送批次</small>
            </button>
            <button className="quick-action" onClick={() => navigate('/client/templates')} type="button">
              <FileText size={20} />
              <span>模板管理</span>
              <small>进入真实模板列表</small>
            </button>
            <button className="quick-action" onClick={() => navigate('/client/signatures')} type="button">
              <PenLine size={20} />
              <span>签名管理</span>
              <small>进入真实签名列表</small>
            </button>
            <button className="quick-action" onClick={() => navigate('/client/billing')} type="button">
              <WalletCards size={20} />
              <span>账户充值</span>
              <small>查看余额与流水</small>
            </button>
          </div>
        </div>

        <div className="surface section-stack">
          <div className="section-heading">
            <div>
              <h2>账户状态</h2>
              <p className="muted">企业认证与资源用量。</p>
            </div>
            <Tag tone={account?.status === 'active' ? 'success' : 'warning'}>{account?.status ?? '未知'}</Tag>
          </div>
          <div className="summary-list">
            <div>
              <span>企业主体</span>
              <strong>{account?.tenant?.name ?? account?.tenantId ?? '当前租户'}</strong>
            </div>
            <div>
              <span>默认签名</span>
              <strong>由发送资源 API 管理</strong>
            </div>
            <div>
              <span>最近充值</span>
              <strong>{latestRecharge ? `¥${formatCents(latestRecharge.amountCents)}` : '暂无充值'}</strong>
            </div>
          </div>
          <div>
            <div className="progress-heading">
              <span>余额水位</span>
              <strong>{balancePercent}%</strong>
            </div>
            <div className="progress-track">
              <span style={{ width: `${balancePercent}%` }} />
            </div>
          </div>
        </div>
      </div>

      <div className="overview-grid overview-grid--three">
        <div className="surface mini-status-card">
          <BadgeCheck size={22} />
          <div>
            <span>模板状态</span>
            <strong>{dashboard?.pendingAuditCount ?? 0} 待处理</strong>
            <small>点击进入模板明细</small>
          </div>
        </div>
        <div className="surface mini-status-card">
          <PenLine size={22} />
          <div>
            <span>签名状态</span>
            <strong>真实 API</strong>
            <small>点击进入签名明细</small>
          </div>
        </div>
        <div className="surface mini-status-card">
          <BellRing size={22} />
          <div>
            <span>服务提醒</span>
            <strong>通道运行正常</strong>
            <small>备用通道有排队批次，请关注发送详情。</small>
          </div>
        </div>
      </div>

      <div className="chart-grid">
        <div className="surface chart-card">
          <h2>今日发送趋势</h2>
          <p className="muted">按 3 小时聚合提交量和成功量。</p>
          <Chart height={300} option={sendTrendOption} />
        </div>
        <div className="surface chart-card">
          <h2>运营商占比</h2>
          <p className="muted">按今日提交量估算。</p>
          <Chart height={300} option={channelShareOption} />
        </div>
      </div>

      <div className="surface section-stack">
        <div className="section-heading">
          <div>
            <h2>最近发送批次</h2>
            <p className="muted">跟踪发送状态、通道和创建时间。</p>
          </div>
          <Button icon={<ReceiptText size={16} />} onClick={() => navigate('/client/send-detail')} variant="ghost">
            查看全部
          </Button>
        </div>
        <Table columns={columns} data={recentMessages} rowKey="id" />
      </div>
    </section>
  );
}