// Scratchpad — a side-queue for dictated thoughts, appended to a Markdown work-queue (faithful to the app).
function ScratchpadScreen() {
  const { Button, Badge } = window.ROKKORDesignSystem_4e99ef;
  const { PageHead } = window.RokkorScreens;
  const { Section, Inset, ToggleRow, Select, Field, Notice, SubHead } = 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" };

  // Parsed from scratchpad.md, newest first — a dev/writer's running voice work-queue.
  const notes = [
    ["2026-06-19 09:12:41", "Visual Studio Code", "Bugfix idea: the scratchpad-stop listener double-fires when you release the hotkey under 200ms — debounce the refresh or the last note gets parsed twice. Repro is easy on the trackpad-bound machine."],
    ["2026-06-19 08:58:03", "Terminal", "Follow up: kubectl rollout on the staging cluster is still pinned to the old grammar image — bump the tag and redeploy before the demo, otherwise the p95 numbers look worse than they are."],
    ["2026-06-19 08:31:55", "Obsidian", "Blog outline — \"Why your voice notes belong in a flat file\":\n- The inbox-zero trap of yet another app\n- Markdown as the lowest-common-denominator AI handoff\n- One ## heading per note = trivially parseable\n- Demo: point an agent at scratchpad.md, watch it triage"],
    ["2026-06-18 17:44:12", "Slack", "Tell the design team the pill overlay clips on the second monitor when DPI scaling differs — happens at 150% on the laptop panel but not the external. Screenshot is in the thread."],
    ["2026-06-18 16:20:37", "Visual Studio Code", "Refactor: pull the Obsidian/Logseq date-token path templating out of the target loop into its own helper so the unit tests stop hitting the filesystem. Tauri command stays the same."],
    ["2026-06-18 14:09:50", "Google Chrome", "Errand — order the new Focusrite breakout cable, the left channel on the current one is intermittent. Also grab another USB-C hub, the desk one is flaky after the firmware update."],
    ["2026-06-18 11:37:24", "Linear", "Follow-up on ROK-412: the SHA-256 mismatch on model download should surface as a clear error, not a panic. Add exponential backoff around the retry while I'm in there."],
    ["2026-06-18 09:02:18", "Obsidian", "Half-formed: a 'process my scratchpad' command that drafts Linear issues from each ## entry that starts with 'Bugfix' or 'Follow up'. Local LLM pass, no cloud. Park it for the weekend."],
    ["2026-06-17 18:51:06", "Terminal", "Note to self: the cold-cache benchmark needs a warmup pass before it records numbers — the latency regression only shows on the first run, so the dashboard is lying about the regression."],
    ["2026-06-17 15:14:33", "Slack", "Reply to the onboarding thread — cut the third welcome screen, people drop off before the privacy promise. Keep mic check + language pick, move the Elite toggle to Settings."],
    ["2026-06-17 10:28:47", "Visual Studio Code", "Shopping/errands: coffee beans, replace the standing-desk grommet, return the keyboard switches that came in the wrong actuation weight. Pick up batteries for the lav mic."],
    ["2026-06-16 22:03:11", "Obsidian", "Idea for the newsletter intro: open with the moment I stopped trusting cloud transcription and just wired my own. Lead with the privacy promise, land on the flat-file scratchpad."],
  ];

  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.Pen size={28} /></span> Scratchpad
            <span style={{ flex: 1, height: 2, background: "var(--rule-gold)", maxWidth: 130 }} />
          </h1>
          <p className="rk-subtitle" style={{ marginTop: 12, fontSize: 18 }}>A side-queue for dictated thoughts. Hold the scratchpad hotkey to append a note here instead of pasting into the focused app. Hotkey changes apply after an app restart.</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)" }}>247</b><span style={{ font: "400 13px/1 var(--font-sans)", color: "var(--ink-600)" }}>Notes queued</span></span>
        <span style={{ display: "flex", alignItems: "baseline", gap: 8 }}><b style={{ font: "600 18px/1 var(--font-serif)", color: "var(--oxblood-600)" }}>3</b><span style={{ font: "400 13px/1 var(--font-sans)", color: "var(--ink-600)" }}>Append targets</span></span>
        <span style={{ display: "flex", alignItems: "baseline", gap: 8 }}><b style={{ font: "600 18px/1 var(--font-serif)", color: "var(--oxblood-600)" }}>09:12</b><span style={{ font: "400 13px/1 var(--font-sans)", color: "var(--ink-600)" }}>Last note today</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} /> C:\\Users\\ProfessorX\\AppData\\Local\\ROKKOR\\scratchpad.md</span>
      </Inset>

      <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
        {/* PRIMARY SCRATCHPAD */}
        <Section icon={I.Save} title="Primary scratchpad" desc="Append target file — give it to your AI agents. Hold the hotkey to dictate straight into this file. Hotkey changes apply after an app restart.">
          <Field label="Scratchpad hotkey (hold to dictate a note)" value="Ctrl+Alt+Win" mono hint="Default Ctrl+Alt+Win. This mirrors Settings and is saved the same way." />
          <Field
            label="Scratchpad file (.md / .txt)"
            value="C:\\Users\\ProfessorX\\AppData\\Local\\ROKKOR\\scratchpad.md"
            mono
            right={<Button variant="outline" size="sm" icon={<I.Folder size={15} />}>Choose file…</Button>}
            hint="Leave blank to use the default scratchpad.md. Point it at a file your AI agents read."
            style={{ marginTop: 16 }}
          />
        </Section>

        {/* QUICK NOTE */}
        <Section title="Quick note" desc="Type a note and append it to the work-queue.">
          <div style={{ display: "flex", gap: 10 }}>
            <input placeholder="Add a thought to the queue…" style={{ ...field, flex: 1 }} />
            <Button variant="default" icon={<I.Plus size={15} />}>Add</Button>
          </div>
        </Section>

        {/* RECENT NOTES */}
        <Section title="Recent notes (247)" desc="Newest first, parsed from your scratchpad.md.">
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {notes.map(([when, app, text], i) => (
              <Inset key={i}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, marginBottom: 8 }}>
                  <span style={{ font: "11px/1 var(--font-mono)", color: "var(--ink-500)" }}>{when}</span>
                  <Badge tone="neutral" dot>{app}</Badge>
                </div>
                <div style={{ font: "400 14px/1.55 var(--font-sans)", color: "var(--ink-900)", whiteSpace: "pre-wrap" }}>{text}</div>
              </Inset>
            ))}
          </div>
          <div style={{ font: "400 12.5px/1.5 var(--font-sans)", color: "var(--ink-500)", marginTop: 14 }}>Showing the 12 most recent of 247 entries. Each is a <code>## &lt;timestamp&gt;</code> heading followed by the dictated body — any AI assistant or script can read the file directly.</div>
        </Section>

        {/* ADVANCED — APPEND TARGETS */}
        <SubHead note="route dictation to different projects or AIs">Advanced</SubHead>
        <Section title="Append targets" desc="Add extra hold keys that each record a note straight into their own file, so you can route dictation to different projects or AIs. Each target needs a name, a destination file, and its own hotkey. Hotkey changes apply after an app restart.">
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {[
              ["Work Queue", "Ctrl+Alt+Shift+W", "D:\\dev\\rokkor\\AGENT_QUEUE.md", "Plain", "", true],
              ["Obsidian Daily", "Ctrl+Alt+Shift+O", "C:\\Users\\ProfessorX\\Vault\\Daily\\{{date}}.md", "Obsidian", "Daily/{{date:YYYY-MM-DD}}.md", true],
              ["Logseq Journal", "Ctrl+Alt+Shift+L", "C:\\Users\\ProfessorX\\Logseq\\journals\\{{date}}.md", "Logseq", "journals/{{date:YYYY_MM_DD}}.md", false],
            ].map(([name, hotkey, path, format, template, enabled], i) => (
              <Inset key={i} style={{ padding: "18px 20px" }}>
                <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16, marginBottom: 14 }}>
                  <Field label="Name" value={name} style={{ flex: 1 }} />
                  <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 28, flex: "none" }}>
                    <Badge tone={enabled ? "success" : "neutral"} dot>{enabled ? "Enabled" : "Disabled"}</Badge>
                    <Button variant="ghost" size="sm" icon={<I.Trash size={14} />}>Remove</Button>
                  </div>
                </div>
                <Field
                  label="File (.md / .txt)"
                  value={path}
                  mono
                  right={<Button variant="outline" size="sm" icon={<I.Folder size={15} />}>Choose file…</Button>}
                  style={{ marginBottom: 14 }}
                />
                <Field label="Hotkey (hold to dictate into this file)" value={hotkey} mono style={{ marginBottom: 14 }} />
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, alignItems: "start" }}>
                  <Select label="Note format" value={format} options={["Plain", "Obsidian", "Logseq"]} />
                  <Field
                    label="Path template (optional)"
                    value={template}
                    placeholder="e.g. Daily/{{date:YYYY-MM-DD}}.md"
                    mono
                    right={<Button variant="outline" size="sm" icon={<I.Folder size={15} />}>Choose folder…</Button>}
                    hint="Use date tokens to route notes into Obsidian daily notes or Logseq journals."
                  />
                </div>
              </Inset>
            ))}
          </div>

          <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 12, marginTop: 18 }}>
            <Button variant="outline" icon={<I.Plus size={15} />}>Add target</Button>
            <Button variant="default" icon={<I.Save size={15} />}>Save targets</Button>
            <span style={{ display: "flex", alignItems: "center", gap: 6, font: "12px/1 var(--font-sans)", color: "var(--success-600)" }}><I.Check size={14} /> Saved — hotkey changes apply after restart</span>
          </div>
          <div style={{ font: "400 12.5px/1.5 var(--font-sans)", color: "var(--ink-500)", marginTop: 14 }}>Incomplete rows (missing name, file, or hotkey) are skipped on save. Hotkey changes apply after an app restart.</div>
        </Section>

        <Notice tone="info">The scratchpad is a distinct key from your push-to-talk hotkey (default <code>Ctrl+Win</code>), so you choose per-utterance whether a thought goes into your app or into the queue. Your active app is never touched — the note is simply appended.</Notice>
      </div>
    </div>
  );
}

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