import { Button, DotLoading, ErrorBlock } from 'antd-mobile'
import { KpiCard } from '../../../components/kpi/KpiCard'
import { MiniTrendChart } from '../../../components/charts/MiniTrendChart'
import { formatMoney } from '../../../utils/format'
import { useDashboardOverview } from '../api'
import { RankList } from '../components/RankList'
import { RiskAlertSection } from '../components/RiskAlertSection'
import { TodaySnapshotSection } from '../components/TodaySnapshotSection'

export function BossDashboardPage() {
  const { data, isLoading, isError, refetch } = useDashboardOverview()

  if (isLoading) {
    return (
      <section className="loading-page">
        <DotLoading color="primary" />
        <p>正在生成经营简报...</p>
      </section>
    )
  }

  if (isError || !data) {
    return (
      <section className="error-page">
        <ErrorBlock status="default" title="驾驶舱加载失败" description="后端接口暂不可用，请确认服务、登录态或接口权限后重试。" />
        <Button color="primary" onClick={() => void refetch()}>
          重新加载
        </Button>
      </section>
    )
  }

  const coreKpis = data.kpis.slice(0, 4)
  const moreKpis = data.kpis.slice(4)

  return (
    <section className="dashboard-page">
      <header className="dashboard-hero">
        <div className="hero-topline">
          <span>经营驾驶舱</span>
          <button type="button">上个工作日</button>
        </div>
        <p className="eyebrow">数据日期 {data.businessDate}</p>
        <h1>上个工作日经营简报</h1>
        <p className="hero-summary">{data.summary}</p>
        <div className="hero-metric">
          <span>上个工作日成交额</span>
          <strong>{formatMoney(data.kpis[0]?.value)}</strong>
          <small>生成时间：{data.generatedAt}</small>
        </div>
      </header>

      <section className="kpi-grid" aria-label="核心经营指标">
        {coreKpis.map((metric) => (
          <KpiCard key={metric.key} metric={metric} />
        ))}
      </section>

      <section className="section-block compact-section">
        <div className="section-title-row">
          <div>
            <p className="section-kicker">More</p>
            <h2>更多经营指标</h2>
          </div>
        </div>
        <div className="kpi-grid kpi-grid--compact">
          {moreKpis.map((metric) => (
            <KpiCard key={metric.key} metric={metric} />
          ))}
        </div>
      </section>

      <TodaySnapshotSection snapshots={data.snapshots} />

      <section className="section-block">
        <div className="section-title-row">
          <div>
            <p className="section-kicker">Trend</p>
            <h2>近 7 天交易趋势</h2>
          </div>
        </div>
        <MiniTrendChart data={data.trends} />
      </section>

      <section className="section-block compact-section">
        <div className="section-title-row">
          <div>
            <p className="section-kicker">Fund</p>
            <h2>资金池摘要</h2>
          </div>
        </div>
        <div className="kpi-grid kpi-grid--compact">
          {data.fundPool.map((metric) => (
            <KpiCard key={metric.key} metric={metric} />
          ))}
        </div>
      </section>

      <RankList title="高价值用户" items={data.userRanks} />
      <RankList title="团队贡献排行" items={data.teamRanks} />
      <RankList title="高货值未成交商品" items={data.productRanks} />
      <RiskAlertSection risks={data.risks} />
    </section>
  )
}