// Claimmee 运营 · 数据看板。合成本地数据，CSS 绘制图表（不引第三方）。
const DB = window.ClaimmeeDesignSystem_e4fda8;

function Dashboard() {
  const m = window.ClaimmeeKit.metrics;
  const funnelMax = m.funnel[0].n;
  const statusTotal = m.byStatus.reduce((a, s) => a + s.n, 0);
  const regionMax = Math.max(...m.byRegion.map((r) => r.n));

  return (
    <div style={{ width: 'min(1180px, calc(100vw - 32px))', margin: '0 auto', padding: '28px 0 64px', display: 'grid', gap: 20 }}>
      <DB.Panel>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: 16 }}>
          <DB.PanelHeading step="◑" tone="teal" title="运营数据看板">关键指标、转化漏斗与地区分布（合成）。</DB.PanelHeading>
          <DB.Badge tone="gate" dot>synthetic metrics</DB.Badge>
        </div>
      </DB.Panel>

      {/* KPI */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {m.kpis.map((k) => (
          <DB.Panel key={k.k}>
            <div style={{ color: 'var(--text-muted)', fontWeight: 750, fontSize: '0.85rem' }}>{k.k}</div>
            <div style={{ fontSize: '2.2rem', fontWeight: 950, color: 'var(--slate-900)', margin: '4px 0 2px', letterSpacing: '-0.02em' }}>{k.v}</div>
            <div style={{ color: 'var(--teal-700)', fontWeight: 800, fontSize: '0.82rem' }}>{k.d}</div>
          </DB.Panel>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 20 }}>
        {/* 转化漏斗 */}
        <DB.Panel>
          <h3 style={{ margin: '0 0 18px', fontSize: '1.15rem', fontWeight: 800, color: 'var(--slate-900)' }}>转化漏斗</h3>
          <div style={{ display: 'grid', gap: 12 }}>
            {m.funnel.map((f, i) => {
              const pct = Math.round((f.n / funnelMax) * 100);
              return (
                <div key={f.stage}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.88rem', marginBottom: 6 }}>
                    <span style={{ fontWeight: 750, color: 'var(--slate-700)' }}>{f.stage}</span>
                    <span style={{ color: 'var(--text-muted)' }}>{f.n.toLocaleString()} · {pct}%</span>
                  </div>
                  <div style={{ height: 22, borderRadius: 'var(--radius-pill)', background: 'var(--surface-sunken)', overflow: 'hidden' }}>
                    <div style={{ width: pct + '%', height: '100%', borderRadius: 'var(--radius-pill)', background: `linear-gradient(90deg, var(--teal-700), var(--teal-500))`, opacity: 1 - i * 0.12 }} />
                  </div>
                </div>
              );
            })}
          </div>
        </DB.Panel>

        {/* 状态环形 */}
        <DB.Panel>
          <h3 style={{ margin: '0 0 18px', fontSize: '1.15rem', fontWeight: 800, color: 'var(--slate-900)' }}>案件状态分布</h3>
          {(() => {
            let acc = 0;
            const segs = m.byStatus.map((s) => { const start = acc / statusTotal * 360; acc += s.n; const end = acc / statusTotal * 360; return `${s.color} ${start}deg ${end}deg`; }).join(', ');
            return (
              <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
                <div style={{ width: 130, height: 130, borderRadius: '50%', flex: '0 0 auto', background: `conic-gradient(${segs})`, display: 'grid', placeItems: 'center' }}>
                  <div style={{ width: 78, height: 78, borderRadius: '50%', background: 'var(--white)', display: 'grid', placeItems: 'center', textAlign: 'center' }}>
                    <div><div style={{ fontSize: '1.4rem', fontWeight: 950, color: 'var(--slate-900)' }}>{statusTotal}</div><div style={{ fontSize: '0.72rem', color: 'var(--text-muted)' }}>总案件</div></div>
                  </div>
                </div>
                <div style={{ display: 'grid', gap: 10, flex: 1 }}>
                  {m.byStatus.map((s) => (
                    <div key={s.label} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ width: 12, height: 12, borderRadius: 3, background: s.color, flex: '0 0 auto' }} />
                      <span style={{ fontWeight: 700, color: 'var(--slate-700)', flex: 1 }}>{s.label}</span>
                      <span style={{ fontWeight: 800, color: 'var(--slate-900)' }}>{s.n}</span>
                    </div>
                  ))}
                </div>
              </div>
            );
          })()}
        </DB.Panel>
      </div>

      {/* 地区分布 */}
      <DB.Panel>
        <h3 style={{ margin: '0 0 18px', fontSize: '1.15rem', fontWeight: 800, color: 'var(--slate-900)' }}>案件来源地区</h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, alignItems: 'end', height: 160 }}>
          {m.byRegion.map((r) => {
            const h = Math.round((r.n / regionMax) * 120) + 20;
            return (
              <div key={r.region} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, justifyContent: 'flex-end' }}>
                <span style={{ fontWeight: 900, color: 'var(--teal-700)' }}>{r.n}</span>
                <div style={{ width: '70%', height: h, borderRadius: 'var(--radius-md) var(--radius-md) 0 0', background: 'linear-gradient(180deg, var(--teal-600), var(--teal-700))' }} />
                <span style={{ fontSize: '0.85rem', color: 'var(--slate-600)', fontWeight: 700 }}>{r.region}</span>
              </div>
            );
          })}
        </div>
      </DB.Panel>
      <DB.Disclaimer>看板数据全部为合成演示，不代表真实运营指标。</DB.Disclaimer>
    </div>
  );
}

window.Dashboard = Dashboard;