// Snippets — short spoken triggers that expand to longer text while you dictate (faithful to the app).
function SnippetsScreen() {
  const { Button, Badge } = window.ROKKORDesignSystem_4e99ef;
  const { PageHead } = window.RokkorScreens;
  const { Section, Inset, SubHead, Notice } = window.RokkorKit;
  const I = window.RokkorIcons;

  const [query, setQuery] = React.useState("");

  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 };

  // ~4 months of heavy daily use. Each: trigger, replacement, times used, last used, top app.
  const snippets = [
    {
      trigger: "my signature",
      replacement: "Best,\nMaya Renner\nStaff Engineer · Northwind Labs\nmaya@example.com",
      used: 612, last: "6/19/2026, 9:11:40 AM", app: "Gmail",
    },
    {
      trigger: "standup template",
      replacement: "**Yesterday:** \n**Today:** \n**Blockers:** none",
      used: 487, last: "6/19/2026, 8:52:03 AM", app: "Slack",
    },
    {
      trigger: "meeting notes header",
      replacement: "# Meeting Notes — {{date}}\n\n**Attendees:** \n**Agenda:** \n\n## Notes\n\n## Action items\n- [ ] ",
      used: 318, last: "6/18/2026, 4:30:18 PM", app: "Obsidian",
    },
    {
      trigger: "my address",
      replacement: "1184 Bishop Court, Apt 3B\nPortland, OR 97214",
      used: 96, last: "6/17/2026, 2:14:55 PM", app: "Gmail",
    },
    {
      trigger: "log helper",
      replacement: 'console.log("[rokkor]", JSON.stringify({ }, null, 2));',
      used: 541, last: "6/19/2026, 9:03:27 AM", app: "Visual Studio Code",
    },
    {
      trigger: "rust result match",
      replacement: "match result {\n    Ok(value) => value,\n    Err(err) => {\n        tracing::error!(?err, \"\");\n        return Err(err.into());\n    }\n};",
      used: 273, last: "6/19/2026, 8:39:11 AM", app: "Visual Studio Code",
    },
    {
      trigger: "pr description",
      replacement: "## What\n\n## Why\n\n## How to test\n\n## Risk\n",
      used: 204, last: "6/18/2026, 5:48:02 PM", app: "Linear",
    },
    {
      trigger: "ship it reply",
      replacement: "Looks good to me — approving. Thanks for the quick turnaround on this. 🚀",
      used: 389, last: "6/19/2026, 8:21:49 AM", app: "Slack",
    },
    {
      trigger: "git wip",
      replacement: "git add -A && git commit -m \"wip\" --no-verify",
      used: 358, last: "6/19/2026, 7:58:30 AM", app: "Terminal",
    },
    {
      trigger: "out of office",
      replacement: "Thanks for your message — I'm out of office and will reply when I'm back. For anything urgent, please reach out to the on-call rotation in #eng-support.",
      used: 41, last: "6/12/2026, 6:02:11 PM", app: "Gmail",
    },
    {
      trigger: "linear ticket",
      replacement: "## Problem\n\n## Proposed solution\n\n## Acceptance criteria\n- [ ] \n\n**Estimate:** ",
      used: 167, last: "6/18/2026, 11:27:40 AM", app: "Linear",
    },
    {
      trigger: "calendar slot",
      replacement: "Happy to chat — does Tuesday or Thursday afternoon (PT) work for you? Send me a slot and I'll grab it.",
      used: 128, last: "6/16/2026, 3:44:09 PM", app: "Gmail",
    },
  ];

  const totalExpansions = snippets.reduce((sum, s) => sum + s.used, 0);

  const filtered = snippets.filter((s) =>
    !query.trim() ||
    s.trigger.toLowerCase().includes(query.toLowerCase()) ||
    s.replacement.toLowerCase().includes(query.toLowerCase())
  );

  const IconBtn = ({ icon: Ic }) => (
    <button style={{ width: 34, height: 34, display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid var(--border)", background: "var(--card)", borderRadius: "var(--radius-md)", color: "var(--ink-500)", cursor: "pointer" }}><Ic size={16} /></button>
  );

  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.Snippet size={30} /></span> Snippets
            <span style={{ flex: 1, height: 2, background: "var(--rule-gold)", maxWidth: 130 }} />
          </h1>
          <p className="rk-subtitle" style={{ marginTop: 12, fontSize: 18 }}>Short triggers that expand to longer text while you dictate.</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)" }}>{snippets.length}</b><span style={{ font: "400 13px/1 var(--font-sans)", color: "var(--ink-600)" }}>Snippets</span></span>
        <span style={{ display: "flex", alignItems: "baseline", gap: 8 }}><b style={{ font: "600 18px/1 var(--font-serif)", color: "var(--oxblood-600)" }}>{totalExpansions.toLocaleString()}</b><span style={{ font: "400 13px/1 var(--font-sans)", color: "var(--ink-600)" }}>Expansions</span></span>
        <span style={{ display: "flex", alignItems: "baseline", gap: 8 }}><b style={{ font: "600 18px/1 var(--font-serif)", color: "var(--oxblood-600)" }}>my signature</b><span style={{ font: "400 13px/1 var(--font-sans)", color: "var(--ink-600)" }}>Most used</span></span>
        <span style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 8, font: "12px/1 var(--font-mono)", color: "var(--ink-500)" }}><I.Sparkle size={15} /> Expands last, after grammar polish</span>
      </Inset>

      {/* How it works */}
      <Notice tone="info" style={{ marginBottom: 22 }}>
        Snippets expand at the very end of the dictation pipeline — after transcription and grammar cleanup — so your saved text lands exactly as you wrote it. Triggers are part of your learned vocabulary and also show up in Style Progress.
      </Notice>

      {/* NEW SNIPPET */}
      <SubHead note="say the trigger while dictating; it expands to the replacement">New snippet</SubHead>
      <Section icon={I.Plus} title="Create a snippet" desc="When you say the trigger while dictating, ROKKOR replaces it with the full replacement text. Pick a short, distinctive cue that won't appear mid-sentence." style={{ marginBottom: 22 }}>
        <label style={{ display: "block", font: "600 14px/1 var(--font-sans)", color: "var(--ink-900)", marginBottom: 8 }}>Trigger</label>
        <input placeholder="e.g. my signature" style={field} />
        <label style={{ display: "block", font: "600 14px/1 var(--font-sans)", color: "var(--ink-900)", margin: "18px 0 8px" }}>Replacement</label>
        <textarea placeholder="The full text it expands to — e.g. your email sign-off, a boilerplate paragraph, or a code snippet." style={area}></textarea>
        <div style={{ marginTop: 16 }}><Button variant="default" icon={<I.Plus size={15} />}>Create</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: a two-word spoken cue works best — short enough to say quickly, distinctive enough that it never expands inside other words. Triggers are case-insensitive and must be unique.
        </div>
      </Section>

      {/* YOUR SNIPPETS */}
      <SubHead note="edit the replacement in place, or delete a snippet">Your snippets</SubHead>
      <Section
        icon={I.Snippet}
        title={`Snippets (${snippets.length})`}
        desc="Sorted by how often you use them. Each card shows the trigger, its expansion, and usage stats."
        action={<Badge tone="gold" dot>{totalExpansions.toLocaleString()} total uses</Badge>}
      >
        <div style={{ position: "relative", marginBottom: 16 }}>
          <span style={{ position: "absolute", left: 13, top: "50%", transform: "translateY(-50%)", color: "var(--ink-400)", pointerEvents: "none" }}><I.Search size={15} /></span>
          <input
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Filter snippets by trigger or text…"
            style={{ ...field, padding: "0 14px 0 36px" }}
          />
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {filtered.map((s) => (
            <Inset key={s.trigger}>
              <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12 }}>
                <div style={{ minWidth: 0, display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
                  <span style={{ font: "600 16px/1 var(--font-sans)", color: "var(--ink-900)" }}>{s.trigger}</span>
                  <Badge tone="neutral">used {s.used.toLocaleString()}×</Badge>
                  <Badge tone="ink">{s.app}</Badge>
                </div>
                <div style={{ display: "flex", gap: 8, flex: "none" }}>
                  <IconBtn icon={I.Copy} />
                  <IconBtn icon={I.Pen} />
                  <IconBtn icon={I.Trash} />
                </div>
              </div>
              <pre style={{ margin: "12px 0 0", padding: "12px 14px", background: "var(--card)", border: "1px solid var(--border)", borderRadius: "var(--radius-md)", font: "400 13px/1.55 var(--font-mono)", color: "var(--ink-800)", whiteSpace: "pre-wrap", wordBreak: "break-word", overflowX: "auto" }}>{s.replacement}</pre>
              <div style={{ display: "flex", alignItems: "center", gap: 7, font: "12px/1 var(--font-mono)", color: "var(--ink-500)", marginTop: 12 }}>
                <I.Clock size={13} /> Last used {s.last}
              </div>
            </Inset>
          ))}
          {filtered.length === 0 ? (
            <div style={{ border: "1px dashed var(--border-strong)", borderRadius: "var(--radius-md)", padding: "16px", textAlign: "center", font: "400 13px/1 var(--font-sans)", color: "var(--ink-500)" }}>No snippets match "{query}".</div>
          ) : null}
        </div>
      </Section>
    </div>
  );
}

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