// Dashboard
function Dashboard({ t }) {
  // Chart data — modest, illustrative
  const usageByModel = [
    { name: t({ en: "Kimi", "zh-Hant": "Kimi" }), v: 18.4, color: "var(--ink)" },
    { name: t({ en: "MiniMax", "zh-Hant": "MiniMax" }), v: 12.7, color: "var(--accent)" },
    { name: t({ en: "Qwen", "zh-Hant": "Qwen" }), v: 11.7, color: "var(--clay)" },
    { name: t({ en: "DeepSeek", "zh-Hant": "DeepSeek" }), v: 8.1, color: "var(--ink-3)" },
  ];

  const costByDept = [
    { name: t({ en: "Research", "zh-Hant": "研發" }), v: 38 },
    { name: t({ en: "Legal", "zh-Hant": "法務" }), v: 22 },
    { name: t({ en: "Support", "zh-Hant": "客服" }), v: 18 },
    { name: t({ en: "Engineering", "zh-Hant": "工程" }), v: 14 },
    { name: t({ en: "Ops", "zh-Hant": "營運" }), v: 8 },
  ];

  const savings = [
    { month: t({ en: "Jan", "zh-Hant": "01月" }), market: 100, modelport: 78 },
    { month: t({ en: "Feb", "zh-Hant": "02月" }), market: 100, modelport: 75 },
    { month: t({ en: "Mar", "zh-Hant": "03月" }), market: 100, modelport: 71 },
    { month: t({ en: "Apr", "zh-Hant": "04月" }), market: 100, modelport: 70 },
    { month: t({ en: "May", "zh-Hant": "05月" }), market: 100, modelport: 69 },
    { month: t({ en: "Jun", "zh-Hant": "06月" }), market: 100, modelport: 69 },
  ];

  const latency = [
    { day: t({ en: "Mon", "zh-Hant": "週一" }), v: 410 }, { day: t({ en: "Tue", "zh-Hant": "週二" }), v: 395 }, { day: t({ en: "Wed", "zh-Hant": "週三" }), v: 402 },
    { day: t({ en: "Thu", "zh-Hant": "週四" }), v: 388 }, { day: t({ en: "Fri", "zh-Hant": "週五" }), v: 392 }, { day: t({ en: "Sat", "zh-Hant": "週六" }), v: 376 },
    { day: t({ en: "Sun", "zh-Hant": "週日" }), v: 384 },
  ];

  return (
    <section className="rule" style={{ background: "var(--bg-2)" }}>
      <div className="wrap" style={{ paddingTop: 48, paddingBottom: 56 }}>
        <div className="row between center" style={{ marginBottom: 24 }}>
          <div>
            <div className="mono-sm">{t({ en: "Enterprise dashboard", "zh-Hant": "企業控制台" })}</div>
            <h2 className="display" style={{ fontSize: 36, margin: "6px 0 0" }}>{t({ en: "This month · Demo portfolio", "zh-Hant": "本月 · 示範組合" })}</h2>
          </div>
          <div className="row gap-8">
            <span className="tag tag-dot tag-ok">{t({ en: "SLA 99.95%", "zh-Hant": "SLA 99.95%" })}</span>
            <span className="tag tag-dot tag-ok">{t({ en: "Audit passed", "zh-Hant": "審計通過" })}</span>
            <span className="tag tag-dot">{t({ en: "Region · HK", "zh-Hant": "區域 · 香港" })}</span>
          </div>
        </div>

        {/* Metric strip */}
        <div className="grid metric-grid" style={{ gridTemplateColumns: "repeat(6, 1fr)", gap: 12, marginBottom: 20 }}>
            <Metric l={t({ en: "Monthly usage", "zh-Hant": "月使用量" })} v="42.8M" sub={t({ en: "tokens", "zh-Hant": "代幣" })} />
            <Metric l={t({ en: "Estimated saving", "zh-Hant": "估計節省" })} v="31%" sub={t({ en: "vs retail", "zh-Hant": "對比零售" })} delta={t({ en: "+4 pts", "zh-Hant": "+4 點" })} />
            <Metric l={t({ en: "Active deployments", "zh-Hant": "活躍部署" })} v="3" sub={t({ en: "private endpoints", "zh-Hant": "私有端點" })} />
          <Metric l={t({ en: "Audit status", "zh-Hant": "審計狀態" })} v={t({ en: "Passed", "zh-Hant": "通過" })} sub={t({ en: "last review · May 02", "zh-Hant": "上次審查：5月02日" })} />
          <Metric l={t({ en: "SLA status", "zh-Hant": "SLA 狀態" })} v="99.95%" sub={t({ en: "rolling 30d", "zh-Hant": "近30天" })} />
          <Metric l={t({ en: "Data region", "zh-Hant": "資料區域" })} v="HK" sub={t({ en: "bound · no transit", "zh-Hant": "駐留 · 不外流" })} />
        </div>

        <div className="grid dashboard-grid" style={{ gridTemplateColumns: "1.2fr 1fr", gap: 12, marginBottom: 12 }}>
          {/* Usage by model */}
          <div className="card" style={{ padding: 24 }}>
            <div className="row between center" style={{ marginBottom: 20 }}>
              <div className="mono-sm">{t({ en: "Usage by model · M tokens", "zh-Hant": "模型使用量（M Token）" })}</div>
              <span className="mono-sm">{t({ en: "May 2026", "zh-Hant": "2026年5月" })}</span>
            </div>
            <div className="bars" style={{ height: 180, paddingBottom: 28 }}>
              {usageByModel.map(m => {
                const max = Math.max(...usageByModel.map(x => x.v));
                const h = Math.round((m.v / max) * 150);
                return (
                  <div key={m.name} className="bar" style={{ background: m.color, height: h }}>
                    <div style={{ position: "absolute", top: -22, left: 0, right: 0, textAlign: "center", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink)" }}>{m.v}M</div>
                    <div className="bar-label">{m.name}</div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Savings */}
          <div className="card" style={{ padding: 24 }}>
            <div className="row between center" style={{ marginBottom: 20 }}>
              <div className="mono-sm">{t({ en: "Savings vs market price · indexed", "zh-Hant": "相對市價節省（指數）" })}</div>
              <span className="mono-sm">{t({ en: "6 months", "zh-Hant": "6 個月" })}</span>
            </div>
            <svg viewBox="0 0 460 200" style={{ width: "100%", height: 180 }}>
              <g stroke="var(--rule-2)" strokeDasharray="2 4">
                {[0, 25, 50, 75, 100].map(v => (
                  <line key={v} x1="34" y1={180 - v * 1.4} x2="450" y2={180 - v * 1.4} />
                ))}
              </g>
              <g fontFamily="var(--font-mono)" fontSize="9" fill="var(--ink-3)">
                {[0, 50, 100].map(v => (
                  <text key={v} x="30" y={183 - v * 1.4} textAnchor="end">{v}</text>
                ))}
              </g>
              {/* Market line */}
              <polyline
                points={savings.map((p, i) => `${40 + i * 70},${180 - p.market * 1.4}`).join(" ")}
                fill="none" stroke="var(--ink-3)" strokeWidth="1.5" strokeDasharray="4 4" />
              {/* ModelPort line */}
              <polyline
                points={savings.map((p, i) => `${40 + i * 70},${180 - p.modelport * 1.4}`).join(" ")}
                fill="none" stroke="var(--accent)" strokeWidth="2" />
              {savings.map((p, i) => (
                <circle key={i} cx={40 + i * 70} cy={180 - p.modelport * 1.4} r="3" fill="var(--bg)" stroke="var(--accent)" strokeWidth="1.5" />
              ))}
              {savings.map((p, i) => (
                <text key={p.month} x={40 + i * 70} y="196" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" fill="var(--ink-3)">{p.month}</text>
              ))}
            </svg>
            <div className="row gap-16 center" style={{ marginTop: 12 }}>
              <Legend2 dashed color="var(--ink-3)" label={t({ en: "Retail market index", "zh-Hant": "市場指數（零售）" })} />
              <Legend2 color="var(--accent)" label={t({ en: "ModelPort effective cost", "zh-Hant": "ModelPort 實際成本" })} />
            </div>
          </div>
        </div>

        <div className="grid dashboard-grid" style={{ gridTemplateColumns: "1fr 1.4fr", gap: 12 }}>
          {/* Cost by dept */}
          <div className="card" style={{ padding: 24 }}>
            <div className="row between center" style={{ marginBottom: 20 }}>
              <div className="mono-sm">{t({ en: "Cost by department · %", "zh-Hant": "部門成本 · %" })}</div>
              <span className="mono-sm">{t({ en: "May 2026", "zh-Hant": "2026年5月" })}</span>
            </div>
            <div className="col gap-12">
              {costByDept.map(d => (
                <div key={d.name} className="col gap-4">
                  <div className="row between" style={{ fontSize: 13 }}>
                    <span>{d.name}</span>
                    <span className="mono">{d.v}%</span>
                  </div>
                  <div style={{ height: 6, background: "var(--bg-3)", borderRadius: 3, overflow: "hidden" }}>
                    <div style={{ width: d.v * 2 + "%", height: "100%", background: "var(--ink)" }} />
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Latency trend */}
          <div className="card" style={{ padding: 24 }}>
            <div className="row between center" style={{ marginBottom: 20 }}>
              <div className="mono-sm">{t({ en: "Latency · p95 ms · HK private endpoint", "zh-Hant": "延遲 · p95 ms · 香港私有端點" })}</div>
              <span className="mono-sm">{t({ en: "7 days", "zh-Hant": "7 天" })}</span>
            </div>
            <svg viewBox="0 0 600 180" style={{ width: "100%", height: 160 }}>
              <g stroke="var(--rule-2)" strokeDasharray="2 4">
                {[200, 300, 400, 500].map(v => (
                  <line key={v} x1="40" y1={170 - (v - 200) * 0.4} x2="590" y2={170 - (v - 200) * 0.4} />
                ))}
              </g>
              <g fontFamily="var(--font-mono)" fontSize="9" fill="var(--ink-3)">
                {[200, 300, 400, 500].map(v => (
                  <text key={v} x="36" y={173 - (v - 200) * 0.4} textAnchor="end">{v}</text>
                ))}
              </g>
              {/* Area */}
              {(() => {
                const pts = latency.map((p, i) => `${50 + i * 85},${170 - (p.v - 200) * 0.4}`);
                const area = `50,170 ${pts.join(" ")} ${50 + (latency.length - 1) * 85},170`;
                return (
                  <g>
                    <polygon points={area} fill="var(--accent-soft)" />
                    <polyline points={pts.join(" ")} fill="none" stroke="var(--accent)" strokeWidth="2" />
                    {latency.map((p, i) => (
                      <circle key={i} cx={50 + i * 85} cy={170 - (p.v - 200) * 0.4} r="3" fill="var(--bg)" stroke="var(--accent)" strokeWidth="1.5" />
                    ))}
                  </g>
                );
              })()}
              {latency.map((p, i) => (
                <text key={p.day} x={50 + i * 85} y="186" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="10" fill="var(--ink-3)">{p.day}</text>
              ))}
            </svg>
          </div>
        </div>

        {/* Compliance checklist */}
        <div className="card" style={{ padding: 28, marginTop: 12 }}>
          <div className="row between center" style={{ marginBottom: 20 }}>
            <div className="mono-sm">{t({ en: "Compliance checklist", "zh-Hant": "合規清單" })}</div>
            <span className="tag tag-dot tag-ok">{t({ en: "7 / 7 complete", "zh-Hant": "7 / 7 已完成" })}</span>
          </div>
          <div className="grid" style={{ gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }}>
            {[
              t({ en: "DPA signed", "zh-Hant": "DPA 已簽署" }),
              t({ en: "Data region: Hong Kong", "zh-Hant": "資料區域：香港" }),
              t({ en: "Overseas-ready version selected", "zh-Hant": "已選擇海外就緒版本" }),
              t({ en: "No-training option enabled where available", "zh-Hant": "如有提供則已啟用不訓練選項" }),
              t({ en: "Audit logs enabled", "zh-Hant": "已啟用審計日誌" }),
              t({ en: "Usage controls enabled", "zh-Hant": "已啟用使用控管" }),
              t({ en: "Department-level billing enabled", "zh-Hant": "已啟用部門層級計費" }),
            ].map(item => (
              <div key={item} className="row gap-12 center" style={{ padding: "10px 14px", border: "1px solid var(--rule)", borderRadius: 8, background: "var(--bg)" }}>
                <span style={{
                  width: 18, height: 18, borderRadius: 4,
                  background: "var(--accent)", color: "#fff",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  fontSize: 11, fontFamily: "var(--font-mono)",
                }}>✓</span>
                <span style={{ fontSize: 13.5 }}>{item}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Metric({ l, v, sub, delta }) {
  return (
    <div className="metric">
      <div className="l">{l}</div>
      <div className="v">{v}</div>
      <div className="row between center">
        <span className="muted" style={{ fontSize: 12 }}>{sub}</span>
        {delta && <span className="delta">{delta}</span>}
      </div>
    </div>
  );
}

function Legend2({ color, label, dashed }) {
  return (
    <div className="row gap-8 center">
      <svg width="20" height="6"><line x1="0" y1="3" x2="20" y2="3" stroke={color} strokeWidth="2" strokeDasharray={dashed ? "3 3" : ""} /></svg>
      <span className="mono-sm">{label}</span>
    </div>
  );
}

function PageDashboard({ go, language }) {
  const t = (labels) => localizedLabel(labels, language);
  return (
    <div data-screen-label="08 Dashboard">
      <section style={{ paddingTop: 64, paddingBottom: 32 }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 12 }}>{t({ en: "Dashboard", "zh-Hant": "控制台" })}</div>
          <h1 className="display" style={{ fontSize: 64, margin: 0, lineHeight: 1.04, maxWidth: 1000 }}>
            {t({ en: "Enterprise control for usage, savings,", "zh-Hant": "一站式掌握企業用量、節省、" })}
            <br/>{t({ en: "compliance and SLA, in one view.", "zh-Hant": "合規和 SLA。" })}
          </h1>
          <p style={{ color: "var(--ink-2)", fontSize: 17, marginTop: 20, maxWidth: 720 }}>
            {t({
              en: "One pane covers every workload routed through ModelPort. Sample portfolio data shown below.",
              "zh-Hant": "單一畫面展示所有經由 ModelPort 導向的工作負載，下方為示例組合資料。",
            })}
          </p>
        </div>
      </section>

      <Dashboard t={t} />
    </div>
  );
}

Object.assign(window, { PageDashboard, Dashboard });