/**
 * 数据看板面板 - 业务与运营指标（订单 / 活跃 / 付费 / 留存）
 * 静态演示数据：核心指标卡 + 12 周 WAU 趋势 + 转化漏斗 + 指标明细表
 */
'use client';

import { Notice, SectionTitle } from '../ui';

/** 核心指标（本周值 + 环比） */
const kpis = [
  { label: '注册用户', value: '1,284', delta: '+37', up: true },
  { label: '日活 DAU', value: '186', delta: '+4.2%', up: true },
  { label: '周活 WAU', value: '412', delta: '+6.8%', up: true },
  { label: '月活 MAU', value: '893', delta: '+11.3%', up: true },
  { label: '付费用户', value: '305', delta: '+21', up: true },
  { label: '付费率', value: '23.8%', delta: '+1.6pp', up: true },
  { label: '本周订单', value: '892', delta: '+9.4%', up: true },
  { label: '本周 GMV', value: '$1,290', delta: '+12.1%', up: true },
];

/** 12 周 WAU 趋势（柱状图） */
const wauBars = [
  { label: 'W1', height: 42 },
  { label: 'W2', height: 46 },
  { label: 'W3', height: 45 },
  { label: 'W4', height: 52 },
  { label: 'W5', height: 50 },
  { label: 'W6', height: 58 },
  { label: 'W7', height: 55 },
  { label: 'W8', height: 63 },
  { label: 'W9', height: 61 },
  { label: 'W10', height: 70 },
  { label: 'W11', height: 68 },
  { label: 'W12', height: 78 },
];

/** 转化漏斗：注册 → 充值 → 首次调用 → 周活跃 */
const funnel = [
  { label: '注册用户', value: '1,284', pct: 100, color: 'bg-brand-purple' },
  { label: '完成充值', value: '486', pct: 38, color: 'bg-brand-purple' },
  { label: '首次调用 API', value: '412', pct: 32, color: 'bg-brand-purple' },
  { label: '本周活跃（WAU）', value: '412', pct: 32, color: 'bg-brand-green' },
  { label: '复购用户（≥2 次充值）', value: '203', pct: 16, color: 'bg-brand-green' },
];

/** 指标明细（本周 vs 上周 + 环比） */
const metricRows = [
  { name: '新增注册', week: 37, last: 31, delta: '+19.4%', trend: 'up' },
  { name: '新增付费用户', week: 21, last: 16, delta: '+31.3%', trend: 'up' },
  { name: '客单价（ARPU/付费）', week: '$4.23', last: '$3.98', delta: '+6.3%', trend: 'up' },
  { name: '订单数（充值笔数）', week: 892, last: 815, delta: '+9.4%', trend: 'up' },
  { name: '退款率', week: '1.2%', last: '1.5%', delta: '-0.3pp', trend: 'down' },
  { name: '退订率（账号注销）', week: '0.8%', last: '0.9%', delta: '-0.1pp', trend: 'down' },
  { name: '30 日留存率', week: '34.2%', last: '31.8%', delta: '+2.4pp', trend: 'up' },
  { name: '平均每日请求/活跃用户', week: '31.2', last: '29.4', delta: '+6.1%', trend: 'up' },
];

export function DashboardPanel() {
  return (
    <div>
      {/* 核心指标卡 */}
      <div className="grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(190px,1fr))]">
        {kpis.map((k) => (
          <div key={k.label} className="rounded-[14px] border border-white/[0.08] bg-brand-card p-5">
            <div className="text-xs text-brand-muted">{k.label}</div>
            <div className="mt-1.5 text-[22px] font-extrabold">{k.value}</div>
            <div className={`mt-1 text-[11.5px] ${k.up ? 'text-brand-green-l' : 'text-[#FF6B6B]'}`}>
              {k.delta} 环比上周
            </div>
          </div>
        ))}
      </div>

      {/* 12 周 WAU 趋势 */}
      <SectionTitle>周活跃用户（WAU）趋势 · 近 12 周</SectionTitle>
      <div className="rounded-[14px] border border-white/[0.08] bg-brand-card p-5">
        <div className="flex h-[150px] items-end gap-2 px-2">
          {wauBars.map((bar) => (
            <div key={bar.label} className="flex flex-1 flex-col items-center gap-1.5">
              <div
                className="min-h-[6px] w-[70%] max-w-[34px] rounded-b-sm rounded-t-md bg-gradient-to-b from-brand-purple to-[rgba(124,92,255,.25)]"
                style={{ height: `${bar.height}%` }}
              />
              <span className="text-[10.5px] text-brand-muted">{bar.label}</span>
            </div>
          ))}
        </div>
      </div>

      {/* 转化漏斗 */}
      <SectionTitle>付费转化漏斗（本月）</SectionTitle>
      <div className="rounded-[14px] border border-white/[0.08] bg-brand-card p-5">
        <div className="flex flex-col gap-2.5">
          {funnel.map((f) => (
            <div key={f.label} className="flex items-center gap-3">
              <div className="w-32 shrink-0 text-[12.5px] text-brand-muted">{f.label}</div>
              <div className="h-7 flex-1 overflow-hidden rounded-md bg-brand-card2">
                <div
                  className={`flex h-full items-center rounded-md px-2 text-[12px] font-semibold text-brand-text ${f.color}`}
                  style={{ width: `${f.pct}%` }}
                >
                  {f.value}
                </div>
              </div>
              <div className="w-11 shrink-0 text-right text-[11.5px] text-brand-muted">
                {f.pct}%
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 指标明细表 */}
      <SectionTitle>运营指标明细 · 本周 vs 上周</SectionTitle>
      <div className="overflow-x-auto rounded-[14px] border border-white/[0.08] bg-brand-card">
        <table className="w-full min-w-[640px] border-collapse">
          <thead>
            <tr>
              {['指标', '本周', '上周', '环比', '趋势'].map((h) => (
                <th
                  key={h}
                  className="whitespace-nowrap bg-[rgba(124,92,255,.12)] px-4 py-[13px] text-left text-[12.5px] tracking-[0.4px] text-brand-purple-l"
                >
                  {h}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {metricRows.map((row) => (
              <tr key={row.name} className="group">
                <td className="border-t border-white/[0.08] px-4 py-[13px] text-sm font-semibold">
                  {row.name}
                </td>
                <td className="border-t border-white/[0.08] px-4 py-[13px] font-mono text-[13px]">
                  {row.week}
                </td>
                <td className="border-t border-white/[0.08] px-4 py-[13px] font-mono text-[13px] text-brand-muted">
                  {row.last}
                </td>
                <td className="border-t border-white/[0.08] px-4 py-[13px] font-mono text-[13px]">
                  {row.delta}
                </td>
                <td className="border-t border-white/[0.08] px-4 py-[13px] text-[13px]">
                  {row.trend === 'up' ? (
                    <span className="text-brand-green-l">▲ 上升</span>
                  ) : (
                    <span className="text-[#5FF5C3]">▼ 下降（向好）</span>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <Notice className="mt-4">
        📌 口径说明：当前为「仅预充值」模式（无订阅），「退订率」按账号注销率计；「退款率」为充值订单退款占比。订阅模式上线后新增退订统计。
      </Notice>
    </div>
  );
}