// Dictionary — teach ROKKOR your words and how to rewrite them (faithful to the app).
function DictionaryScreen() {
  const { Button, Badge } = window.ROKKORDesignSystem_4e99ef;
  const { PageHead } = window.RokkorScreens;
  const { Section, Inset, 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" };

  // Vocabulary: phrase + optional replacement (spelling hint when blank) + source.
  // source null = user-authored; otherwise the pack it shipped in.
  // Sorted by source then phrase — the way the recognized-words list reads in the app.
  const vocab = [
    // — user-added domain terms (the bulk of a heavy user's list) —
    ["kubectl", null, null],
    ["Kubernetes", null, null],
    ["Postgres", null, null],
    ["pgvector", null, null],
    ["Tauri", null, null],
    ["ONNX", null, null],
    ["Parakeet", null, null],
    ["Nemotron", null, null],
    ["GitHub", "github", null],
    ["Anthropic", "anthropic", null],
    ["OAuth", "oauth", null],
    ["JWT", null, null],
    ["Next.js", "nextjs", null],
    ["TypeScript", "typescript", null],
    ["Wayland", null, null],
    ["Cloudflare", "cloud flare", null],
    ["QLoRA", null, null],
    ["Vitest", null, null],
    ["Zustand", null, null],
    ["Drizzle", null, null],
    ["Supabase", null, null],
    ["Vercel", null, null],
    ["systemd", null, null],
    ["ripgrep", null, null],
    ["Renner", null, null],
    ["Søren", null, null],
    ["Kaupþing", null, null],
    ["Reykjavík", null, null],
    // — shipped with the Programming Vocabulary Accuracy Pack —
    ["WebAssembly", null, "programming-pack"],
    ["GraphQL", null, "programming-pack"],
    ["Rustup", null, "programming-pack"],
    ["Clippy", null, "programming-pack"],
    ["Axum", null, "programming-pack"],
    ["serde", null, "programming-pack"],
    ["nginx", null, "programming-pack"],
    // — shipped with the Legal & E-Discovery Accuracy Pack —
    ["voir dire", null, "legal-pack"],
    ["subpoena duces tecum", null, "legal-pack"],
    ["res judicata", null, "legal-pack"],
    ["in camera", null, "legal-pack"],
  ];

  // Text replacements: whole-word, case-insensitive, apply everywhere. User-authored
  // only (the calibration / pack / wispr rows are managed elsewhere and excluded).
  const replacements = [
    ["get hub", "GitHub"],
    ["cube cuttle", "kubectl"],
    ["antropic", "Anthropic"],
    ["post gres", "Postgres"],
    ["next js", "Next.js"],
    ["type script", "TypeScript"],
    ["o auth", "OAuth"],
    ["jot", "JWT"],
    ["tensor flow", "TensorFlow"],
    ["py torch", "PyTorch"],
    ["web assembly", "WebAssembly"],
    ["graph q l", "GraphQL"],
    ["cloud flare", "Cloudflare"],
    ["super base", "Supabase"],
    ["P G vector", "pgvector"],
    ["sys d", "systemd"],
    ["way land", "Wayland"],
    ["rip grep", "ripgrep"],
    ["q lora", "QLoRA"],
    ["on x", "ONNX"],
    ["paraquette", "Parakeet"],
    ["nemo tron", "Nemotron"],
  ];

  const vocabCount = vocab.length;
  const replCount = replacements.length;

  // Word row (vocabulary): phrase → replacement, source tag, delete.
  function WordRow({ phrase, replacement, source }) {
    return (
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, background: "var(--paper-50)", border: "1px solid var(--border)", borderRadius: "var(--radius-md)", padding: "11px 14px" }}>
        <div style={{ minWidth: 0, display: "flex", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
          <span style={{ font: "600 14px/1.3 var(--font-sans)", color: "var(--ink-900)" }}>{phrase}</span>
          {replacement ? <span style={{ font: "400 13px/1.3 var(--font-sans)", color: "var(--ink-500)" }}>→ {replacement}</span> : null}
          {source ? <span style={{ font: "600 10.5px/1 var(--font-display)", letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-400)" }}>{source}</span> : null}
        </div>
        <Button variant="ghost" size="sm" icon={<I.Trash size={15} />} aria-label={`Delete ${phrase}`} />
      </div>
    );
  }

  // Replacement row: raw → corrected, delete.
  function ReplRow({ raw, corrected }) {
    return (
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, background: "var(--paper-50)", border: "1px solid var(--border)", borderRadius: "var(--radius-md)", padding: "11px 14px" }}>
        <div style={{ minWidth: 0, display: "flex", alignItems: "baseline", gap: 10 }}>
          <span style={{ font: "600 14px/1.3 var(--font-sans)", color: "var(--ink-900)" }}>{raw}</span>
          <span style={{ font: "400 13px/1.3 var(--font-sans)", color: "var(--ink-500)" }}>→ {corrected}</span>
        </div>
        <Button variant="ghost" size="sm" icon={<I.Trash size={15} />} aria-label={`Delete replacement ${raw}`} />
      </div>
    );
  }

  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.Book size={30} /></span> Dictionary
            <span style={{ flex: 1, height: 2, background: "var(--rule-gold)", maxWidth: 130 }} />
          </h1>
          <p className="rk-subtitle" style={{ marginTop: 12, fontSize: 18 }}>Teach ROKKOR your words and how to rewrite them — all stored locally.</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 }}>
        {/* VOCABULARY */}
        <Section
          icon={I.Book}
          title={`Vocabulary (${vocabCount})`}
          desc="Names, jargon, and spellings the recognizer should know. An optional replacement fixes a consistent mishearing of a word."
          action={
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <Button variant="outline" size="sm" icon={<I.Download size={14} />}>Import CSV</Button>
              <Button variant="outline" size="sm" icon={<I.Refresh size={14} />}>Refresh</Button>
            </div>
          }
        >
          {/* Add form */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr auto", gap: 14, alignItems: "end" }}>
            <div>
              <label style={{ display: "block", font: "600 13.5px/1 var(--font-sans)", color: "var(--ink-900)", marginBottom: 8 }}>Word or phrase</label>
              <input placeholder="Kubernetes" style={field} />
            </div>
            <div>
              <label style={{ display: "block", font: "600 13.5px/1 var(--font-sans)", color: "var(--ink-900)", marginBottom: 8 }}>Replacement (optional)</label>
              <input placeholder="(leave blank for a spelling hint)" style={field} />
            </div>
            <Button variant="default" icon={<I.Plus size={15} />} style={{ height: 44 }}>Add</Button>
          </div>

          {/* Pack summary */}
          <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap", marginTop: 18 }}>
            <span style={{ font: "400 12.5px/1 var(--font-sans)", color: "var(--ink-500)" }}>Accuracy packs loaded:</span>
            <Badge tone="neutral" dot>Programming · 7 terms</Badge>
            <Badge tone="neutral" dot>Legal &amp; E-Discovery · 4 terms</Badge>
          </div>

          {/* Word list */}
          <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 16 }}>
            {vocab.map(([phrase, replacement, source], i) => (
              <WordRow key={i} phrase={phrase} replacement={replacement} source={source} />
            ))}
          </div>
        </Section>

        {/* TEXT REPLACEMENTS */}
        <Section
          icon={I.Transform}
          title={`Text replacements (${replCount})`}
          desc="Replacements are whole-word, case-insensitive, and apply everywhere. The most recent 500 apply automatically."
          action={<Button variant="outline" size="sm" icon={<I.Refresh size={14} />}>Refresh</Button>}
        >
          {/* Add form */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr auto", gap: 14, alignItems: "end" }}>
            <div>
              <label style={{ display: "block", font: "600 13.5px/1 var(--font-sans)", color: "var(--ink-900)", marginBottom: 8 }}>Replace this</label>
              <input placeholder="github" style={field} />
            </div>
            <div>
              <label style={{ display: "block", font: "600 13.5px/1 var(--font-sans)", color: "var(--ink-900)", marginBottom: 8 }}>With this</label>
              <input placeholder="GitHub" style={field} />
            </div>
            <Button variant="default" icon={<I.Plus size={15} />} style={{ height: 44 }}>Add</Button>
          </div>

          <Notice tone="info" style={{ marginTop: 16 }}>
            Calibration mappings, bundled accuracy/legal packs, and imported Wispr corrections are managed elsewhere and don't show here — this list is only the whole-word replacements you authored.
          </Notice>

          {/* Replacement list */}
          <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 16 }}>
            {replacements.map(([raw, corrected], i) => (
              <ReplRow key={i} raw={raw} corrected={corrected} />
            ))}
          </div>
        </Section>
      </div>
    </div>
  );
}

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