// Insights — read-only local analytics: lifetime usage, where dictation lands,
// the learning corpus, and the correction-rate trend (faithful to the app's Insights tab).
function InsightsScreen() {
  const { Button, Badge, StatCard } = window.ROKKORDesignSystem_4e99ef;
  const { PageHead } = window.RokkorScreens;
  const { Section, Inset, SubHead } = window.RokkorKit;
  const I = window.RokkorIcons;

  // Where dictation lands most often (consistent with Memory rollups + Overview).
  const perApp = [
    ["Visual Studio Code", 1842],
    ["Slack", 1107],
    ["Gmail", 583],
    ["Obsidian", 472],
    ["Terminal", 391],
    ["Linear", 248],
    ["Google Chrome", 169],
  ];
  const maxApp = perApp.reduce((m, a) => Math.max(m, a[1]), 0);

  // Correction rate per 100 dictations — the ever-improving learning curve.
  const trend = [
    ["Feb", 11.2],
    ["Mar", 8.4],
    ["Apr", 5.1],
    ["May", 3.3],
    ["Jun", 1.9],
  ];
  const maxRate = trend.reduce((m, t) => Math.max(m, t[1]), 0);

  // Most-corrected terms — personalization targets.
  const terms = [
    ["kubectl", 31],
    ["GitHub", 27],
    ["Postgres", 22],
    ["Next.js", 19],
    ["TensorFlow", 16],
    ["Tauri", 12],
    ["Anthropic", 9],
    ["Wayland", 7],
  ];

  return (
    <div style={{ maxWidth: "var(--content-max)" }}>
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}>
        <div style={{ marginBottom: 26 }}>
          <h1 className="rk-display" style={{ font: "600 40px/1 var(--font-display)", letterSpacing: "0.035em", textTransform: "uppercase", display: "flex", alignItems: "center", gap: 14 }}>
            <span style={{ color: "var(--oxblood-600)" }}><I.Chart size={30} /></span> Insights
            <span style={{ flex: 1, height: 2, background: "var(--rule-gold)", maxWidth: 130 }} />
          </h1>
          <p className="rk-subtitle" style={{ marginTop: 12, fontSize: 18 }}>How much you dictate, how fast, and where — computed locally from your own transcripts.</p>
        </div>
        <div style={{ marginTop: 30 }}><Button variant="outline" icon={<I.Refresh size={15} />}>Refresh</Button></div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
        {/* LIFETIME STATS */}
        <SubHead note="everything you've dictated through ROKKOR so far">Lifetime stats</SubHead>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          <StatCard label="Words dictated" value="511,304" note="Across 4,812 transcripts · 100% local" />
          <StatCard label="Dictation sessions" value="4,812" note="Daily use since Feb 2026" />
          <StatCard label="Fixes made" value="9,640" note="Recognizer + your taught corrections" accent="gold" />
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          <StatCard label="Words / minute" value="148" note="Median dictation throughput" />
          <StatCard label="Day streak" value="131" note="Consecutive days with dictation" accent="gold" />
          <StatCard label="Apps used" value="7" note="Distinct applications dictated into" />
        </div>

        {/* BY APP */}
        <Section icon={I.Folder} title="Where dictation lands" desc="Each app you've dictated into, scaled relative to your most-used app." style={{ marginTop: 4 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {perApp.map(([app, count]) => (
              <div key={app}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 7 }}>
                  <span style={{ font: "500 14px/1 var(--font-sans)", color: "var(--ink-900)" }}>{app}</span>
                  <span style={{ font: "600 13px/1 var(--font-mono)", color: "var(--ink-500)" }}>{count.toLocaleString()}</span>
                </div>
                <div style={{ height: 9, borderRadius: 5, background: "var(--paper-200)", overflow: "hidden" }}>
                  <div style={{ width: `${(count / maxApp) * 100}%`, height: "100%", borderRadius: 5, background: "linear-gradient(90deg, var(--oxblood-500), var(--gold-500))" }} />
                </div>
              </div>
            ))}
          </div>
        </Section>

        {/* STYLE PROGRESS / LEARNING CURVE */}
        <SubHead note="your personal model, learning from every correction">Style progress</SubHead>
        <Section icon={I.Trending} title="Corrections per 100 dictations" desc="The recognizer needs fewer fixes every month as your personal corrections and vocabulary compound. Lower is better.">
          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 18, height: 168, padding: "0 6px" }}>
            {trend.map(([month, rate]) => (
              <div key={month} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-end", height: "100%" }}>
                <span style={{ font: "600 14px/1 var(--font-serif)", color: "var(--oxblood-600)", marginBottom: 8 }}>{rate}</span>
                <div style={{ width: "100%", maxWidth: 56, height: `${(rate / maxRate) * 100}%`, minHeight: 6, borderRadius: "6px 6px 0 0", background: "linear-gradient(180deg, var(--oxblood-500), var(--gold-500))" }} />
                <span style={{ font: "600 11px/1 var(--font-display)", letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-500)", marginTop: 10 }}>{month}</span>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 18, font: "400 13px/1.5 var(--font-sans)", color: "var(--ink-600)" }}>
            <Badge tone="success" dot>−83%</Badge>
            <span>Fixes per 100 dictations are down from <b style={{ color: "var(--ink-900)" }}>11.2</b> in February to <b style={{ color: "var(--ink-900)" }}>1.9</b> this month — roughly 6× fewer than week one.</span>
          </div>
        </Section>

        {/* LEARNING CORPUS */}
        <Section icon={I.Brain} title="Learning corpus" desc="Every correction you make is stored as a training pair and feeds grammar improvement — all on this machine.">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
            {[
              ["1,860", "Training pairs"],
              ["342", "Active corrections"],
              ["128", "Patterns internalized"],
              ["4,812", "Transcripts"],
            ].map(([v, l]) => (
              <Inset key={l} style={{ textAlign: "center", padding: "18px 14px" }}>
                <div style={{ font: "600 26px/1 var(--font-serif)", color: "var(--ink-900)" }}>{v}</div>
                <div style={{ font: "400 12.5px/1.3 var(--font-sans)", color: "var(--ink-500)", marginTop: 7 }}>{l}</div>
              </Inset>
            ))}
          </div>
          <Inset style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, marginTop: 14 }}>
            <span style={{ font: "400 13.5px/1.5 var(--font-sans)", color: "var(--ink-600)" }}>
              Accuracy signal: <b style={{ font: "600 14px/1 var(--font-mono)", color: "var(--oxblood-600)" }}>0.7</b> corrections per 1,000 words.
            </span>
            <Badge tone="oxblood">rokkor-grammar v3 · Live</Badge>
          </Inset>
        </Section>

        {/* MOST-CORRECTED TERMS */}
        <Section icon={I.Pen} title="Most-corrected terms" desc="Where the recognizer most often needs fixing — your personalization targets, learned automatically.">
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
            {terms.map(([term, n]) => (
              <span key={term} style={{ display: "inline-flex", alignItems: "baseline", gap: 7, background: "var(--paper-50)", border: "1px solid var(--border)", borderRadius: 999, padding: "8px 14px" }}>
                <span style={{ font: "600 13.5px/1 var(--font-sans)", color: "var(--ink-900)" }}>{term}</span>
                <span style={{ font: "12px/1 var(--font-mono)", color: "var(--ink-500)" }}>×{n}</span>
              </span>
            ))}
          </div>
          <div style={{ font: "400 12.5px/1.5 var(--font-sans)", color: "var(--ink-500)", marginTop: 14 }}>
            Each of these now resolves correctly on first pass — calibrate any of them again from the Memory tab if your usage shifts.
          </div>
        </Section>

        <p style={{ font: "400 13px/1.5 var(--font-sans)", color: "var(--ink-500)", marginTop: 2 }}>
          Everything on this page is computed locally from your transcripts — nothing is uploaded, and the page only reads existing local data. It's safe to open any time.
        </p>
      </div>
    </div>
  );
}

window.RokkorScreens = Object.assign(window.RokkorScreens || {}, { InsightsScreen });