// Memory / KB — durable local corrections and style signals (faithful to the app).
function MemoryScreen() {
  const { Button, Badge } = window.ROKKORDesignSystem_4e99ef;
  const { PageHead } = window.RokkorScreens;
  const { Section, Inset, SubHead, Notice } = window.RokkorKit;
  const I = window.RokkorIcons;

  const field = { width: "100%", height: 44, padding: "0 14px", background: "var(--secondary)", border: "1px solid var(--border-strong)", borderRadius: "var(--radius-md)", font: "400 14px/1 var(--font-sans)", color: "var(--ink-900)", outline: "none", boxSizing: "border-box" };
  const area = { ...field, height: 78, padding: "12px 14px", resize: "vertical", lineHeight: 1.5 };

  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.Brain size={30} /></span> Memory
            <span style={{ flex: 1, height: 2, background: "var(--rule-gold)", maxWidth: 130 }} />
          </h1>
          <p className="rk-subtitle" style={{ marginTop: 12, fontSize: 18 }}>Durable local corrections and style signals.</p>
        </div>
        <div style={{ marginTop: 30 }}><Button variant="outline" icon={<I.Refresh size={15} />}>Refresh</Button></div>
      </div>

      {/* Stats bar */}
      <Inset style={{ display: "flex", alignItems: "center", gap: 40, padding: "18px 22px", marginBottom: 22 }}>
        <span style={{ display: "flex", alignItems: "baseline", gap: 8 }}><b style={{ font: "600 18px/1 var(--font-serif)", color: "var(--oxblood-600)" }}>342</b><span style={{ font: "400 13px/1 var(--font-sans)", color: "var(--ink-600)" }}>Corrections</span></span>
        <span style={{ display: "flex", alignItems: "baseline", gap: 8 }}><b style={{ font: "600 18px/1 var(--font-serif)", color: "var(--oxblood-600)" }}>4,812</b><span style={{ font: "400 13px/1 var(--font-sans)", color: "var(--ink-600)" }}>Transcripts</span></span>
        <span style={{ display: "flex", alignItems: "baseline", gap: 8 }}><b style={{ font: "600 18px/1 var(--font-serif)", color: "var(--oxblood-600)" }}>5,154</b><span style={{ font: "400 13px/1 var(--font-sans)", color: "var(--ink-600)" }}>Vectors</span></span>
        <span style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 8, font: "12px/1 var(--font-mono)", color: "var(--ink-500)" }}><I.Database size={15} /> Sqlite C:\\Users\\ProfessorX\\AppData\\Local\\ROKKOR\\me…</span>
      </Inset>

      {/* PRONUNCIATION CALIBRATION */}
      <SubHead note="say it your way — we learn what the recognizer hears">Pronunciation calibration</SubHead>
      <Section icon={I.Mic} title="Calibrate a word" desc="Say it the way you normally do; we learn what the Transcription Engine hears and fix it automatically next time. This teaches a correction layer (your raw → your intended) — it does not retrain the speech model. Calibrations now also catch similar-sounding variants (phonetic matching), and each take captures a local acoustic fingerprint of your voice to make the correction more reliable." style={{ marginBottom: 22 }}>
        <label style={{ display: "block", font: "600 14px/1 var(--font-sans)", color: "var(--ink-900)", marginBottom: 8 }}>1 · The word or phrase you mean</label>
        <input placeholder="e.g. GitHub, kubectl, Anthropic…" style={field} />
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", margin: "18px 0 8px" }}>
          <label style={{ font: "600 14px/1 var(--font-sans)", color: "var(--ink-900)" }}>2 · Record it — what the Transcription Engine heard</label>
          <Button variant="outline" size="sm" icon={<I.Mic size={14} />}>Record</Button>
        </div>
        <input placeholder="Press Record and say the word — the raw transcript shows here" style={field} />
        <div style={{ marginTop: 16 }}><Button variant="default" icon={<I.Check size={15} />}>Save mapping</Button></div>
        <div style={{ border: "1px dashed var(--border-strong)", borderRadius: "var(--radius-md)", padding: "14px 16px", marginTop: 16, font: "400 12.5px/1.5 var(--font-sans)", color: "var(--ink-500)" }}>
          Tip: record the same word 2–3 times the way you naturally say it. Each save adds a raw spelling → intended mapping plus an acoustic fingerprint, so the Transcription Engine is corrected however it mishears — even on close-sounding variants.
        </div>
      </Section>

      {/* CORRECTIONS */}
      <SubHead note="teach, search, and review">Corrections</SubHead>
      <Section title="Add a Correction" desc="Map what the recognizer mis-hears to what you meant. Saved to the local memory store." style={{ marginBottom: 18 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }}>
          <span style={{ font: "600 14px/1 var(--font-sans)", color: "var(--ink-900)" }}>Raw</span>
          <Button variant="outline" size="sm" icon={<I.Mic size={14} />}>Record</Button>
          <span style={{ font: "600 14px/1 var(--font-sans)", color: "var(--ink-900)" }}>Corrected</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <textarea style={area}></textarea>
          <textarea style={area}></textarea>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr auto", gap: 16, alignItems: "end", marginTop: 16 }}>
          <div><label style={{ display: "block", font: "600 13.5px/1 var(--font-sans)", color: "var(--ink-900)", marginBottom: 8 }}>Context</label><input style={field} /></div>
          <div><label style={{ display: "block", font: "600 13.5px/1 var(--font-sans)", color: "var(--ink-900)", marginBottom: 8 }}>App</label><input style={field} /></div>
          <Button variant="default" style={{ height: 44 }}>Save</Button>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, font: "600 13px/1 var(--font-sans)", color: "var(--ink-900)", marginTop: 20 }}><I.Volume size={15} /> Pronunciation hints</div>
        <div style={{ font: "400 12.5px/1.5 var(--font-sans)", color: "var(--ink-500)", marginTop: 6 }}>Phrases dictated repeatedly with varying tone — advisory. Click "Teach" to prefill the fields above.</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 12 }}>
          {[["kubectl", "heard 31× as “cube cuttle / cube control”"], ["PostgreSQL", "heard 18× as “post gres q l”"], ["Tauri", "heard 12× as “torrey / tao ree”"]].map(([word, hint], i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, background: "var(--paper-50)", border: "1px solid var(--border)", borderRadius: "var(--radius-md)", padding: "10px 14px" }}>
              <div style={{ minWidth: 0 }}><span style={{ font: "600 14px/1 var(--font-sans)", color: "var(--ink-900)" }}>{word}</span><span style={{ font: "400 12.5px/1 var(--font-sans)", color: "var(--ink-500)", marginLeft: 10 }}>{hint}</span></div>
              <Button variant="outline" size="sm">Teach</Button>
            </div>
          ))}
        </div>
      </Section>

      <Section title="Search Corrections" style={{ marginBottom: 18 }}>
        <div style={{ display: "flex", gap: 10 }}>
          <input placeholder="Search saved corrections…" style={{ ...field, flex: 1 }} />
          <Button variant="outline" icon={<I.Search size={15} />}>Search</Button>
        </div>
        <div style={{ border: "1px dashed var(--border-strong)", borderRadius: "var(--radius-md)", padding: "16px", marginTop: 14, textAlign: "center", font: "400 13px/1 var(--font-sans)", color: "var(--ink-500)" }}>No matching corrections.</div>
      </Section>

      <Section title="Recent Corrections" style={{ marginBottom: 18 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {[
            ["get hub", "GitHub", "6/19/2026, 9:14:02 AM", "Visual Studio Code"],
            ["cube cuttle", "kubectl", "6/19/2026, 8:47:55 AM", "Terminal"],
            ["antropic", "Anthropic", "6/18/2026, 4:32:10 PM", "Slack"],
            ["post gres", "Postgres", "6/18/2026, 2:09:41 PM", "Visual Studio Code"],
            ["next js", "Next.js", "6/17/2026, 11:51:27 AM", "Visual Studio Code"],
            ["tensor flow", "TensorFlow", "6/16/2026, 3:22:08 PM", "Obsidian"],
          ].map(([raw, corrected, when, app], i) => (
            <Inset key={i}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <div><div style={{ font: "400 12px/1 var(--font-sans)", color: "var(--ink-500)", marginBottom: 6 }}>Raw</div><div style={{ font: "500 15px/1 var(--font-sans)", color: "var(--ink-900)" }}>{raw}</div></div>
                <div><div style={{ font: "400 12px/1 var(--font-sans)", color: "var(--ink-500)", marginBottom: 6 }}>Corrected</div><div style={{ font: "500 15px/1 var(--font-sans)", color: "var(--ink-900)" }}>{corrected}</div></div>
              </div>
              <div style={{ font: "12px/1 var(--font-mono)", color: "var(--ink-500)", marginTop: 14 }}>{when} / {app}</div>
            </Inset>
          ))}
        </div>
      </Section>

      {/* TRAIN */}
      <Section title="Train a personal grammar model from your corrections" style={{ marginBottom: 18 }}>
        <p style={{ font: "400 14px/1.6 var(--font-sans)", color: "var(--ink-600)", margin: "0 0 16px" }}>Fine-tune your grammar model on the 342 corrections you have taught ROKKOR, so it cleans up dictation the way you actually write. Training runs 100% locally on your GPU and takes a while (typically 40-90 minutes). The new model only goes live at the final step, so you can keep working — and you can roll back any time.</p>
        <Inset style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 14 }}>
          <span style={{ font: "400 13px/1 var(--font-sans)", color: "var(--ink-500)" }}>Last trained</span>
          <span style={{ font: "600 13px/1 var(--font-mono)", color: "var(--ink-900)" }}>rokkor-grammar v3</span>
          <Badge tone="oxblood">Live</Badge>
          <span style={{ font: "12px/1 var(--font-mono)", color: "var(--ink-500)" }}>6/14/2026, 1:08:22 AM / 1,860 pairs</span>
        </Inset>
        <div style={{ display: "flex", gap: 10 }}>
          <Button variant="default" icon={<I.Grad size={15} />}>Train now</Button>
          <Button variant="outline" icon={<I.Refresh size={15} />}>Revert to base</Button>
        </div>
        <div style={{ font: "400 12.5px/1.5 var(--font-sans)", color: "var(--ink-500)", marginTop: 14 }}>Runs the local QLoRA pipeline (needs ~5-6 GB of free VRAM). Requires the training scripts and a local GPU; without them, training reports a clear error and your current model is untouched.</div>
      </Section>

      {/* ROLLUPS */}
      <Section title="Rollups">
        <div style={{ font: "600 11px/1 var(--font-display)", letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-500)", marginBottom: 10 }}>By day</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {[["2026-06-19", "142"], ["2026-06-18", "121"], ["2026-06-17", "98"], ["2026-06-16", "134"], ["2026-06-15", "76"]].map(([k, v]) => (
            <Inset key={k} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "13px 16px" }}><span style={{ font: "13px/1 var(--font-mono)", color: "var(--ink-900)" }}>{k}</span><span style={{ font: "13px/1 var(--font-mono)", color: "var(--ink-500)" }}>{v}</span></Inset>
          ))}
        </div>
        <div style={{ font: "600 11px/1 var(--font-display)", letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-500)", margin: "18px 0 10px" }}>By app</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {[["Visual Studio Code", "1,842"], ["Slack", "1,107"], ["Gmail", "583"], ["Obsidian", "472"], ["Terminal", "391"], ["Linear", "248"], ["Google Chrome", "169"]].map(([k, v]) => (
            <Inset key={k} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "13px 16px" }}><span style={{ font: "13px/1 var(--font-mono)", color: "var(--ink-900)" }}>{k}</span><span style={{ font: "13px/1 var(--font-mono)", color: "var(--ink-500)" }}>{v}</span></Inset>
          ))}
        </div>
      </Section>
    </div>
  );
}

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