// Transforms — hotkey-triggered LLM rewrites of the clipboard text (faithful to the app).
function TransformsScreen() {
  const { Button, Switch, Badge, StatCard } = window.ROKKORDesignSystem_4e99ef;
  const { PageHead } = window.RokkorScreens;
  const { Section, Inset, Notice, SubHead } = window.RokkorKit;
  const I = window.RokkorIcons;

  // ~7 well-used transforms built up over ~4 months of daily use.
  const seed = [
    { id: "t1", name: "Polish", prompt: "Improve clarity and concision without changing the meaning. Fix grammar, punctuation, and casing. Return only the rewritten text, no preamble.", hotkey: "Ctrl+Alt+P", enabled: true, uses: 1284, last: "6/19/2026, 9:11:47 AM" },
    { id: "t2", name: "Make formal", prompt: "Rewrite the user's text in a formal, professional tone. Keep the meaning identical. Return only the rewritten text.", hotkey: "Ctrl+Alt+F", enabled: true, uses: 642, last: "6/19/2026, 8:38:02 AM" },
    { id: "t3", name: "Prompt Engineer", prompt: "Rewrite this as a precise, well-structured LLM prompt. State the goal, give explicit constraints, and specify the desired output format. Return only the prompt.", hotkey: "Ctrl+Alt+G", enabled: true, uses: 511, last: "6/18/2026, 5:52:19 PM" },
    { id: "t4", name: "Commit message", prompt: "Turn this into a conventional commit message: a concise imperative subject line under 72 chars, a blank line, then a short body explaining why. Return only the message.", hotkey: "Ctrl+Alt+C", enabled: true, uses: 398, last: "6/19/2026, 8:05:44 AM" },
    { id: "t5", name: "Reply (concise)", prompt: "Draft a short, friendly reply to this message. Two or three sentences, warm but direct, no filler. Return only the reply.", hotkey: "Ctrl+Alt+R", enabled: true, uses: 327, last: "6/18/2026, 4:21:10 PM" },
    { id: "t6", name: "Bulletize", prompt: "Convert this prose into a tight bulleted list. One idea per bullet, parallel phrasing, drop redundancy. Return only the bullets.", hotkey: "Ctrl+Alt+B", enabled: true, uses: 256, last: "6/17/2026, 11:47:33 AM" },
    { id: "t7", name: "Make casual", prompt: "Loosen this up into a casual, conversational tone like a Slack message to a teammate. Keep it clear. Return only the rewritten text.", hotkey: "Ctrl+Alt+L", enabled: false, uses: 73, last: "6/12/2026, 2:09:55 PM" },
  ];

  const [transforms, setTransforms] = React.useState(seed);
  const toggle = (id) => setTransforms((prev) => prev.map((t) => (t.id === id ? { ...t, enabled: !t.enabled } : t)));

  const totalUses = transforms.reduce((n, t) => n + t.uses, 0);
  const enabledCount = transforms.filter((t) => t.enabled).length;

  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: 84, padding: "12px 14px", resize: "vertical", lineHeight: 1.55 };
  const mono = { ...field, font: "400 13.5px/1 var(--font-mono)" };
  const lbl = { display: "block", font: "600 13.5px/1 var(--font-sans)", color: "var(--ink-900)", marginBottom: 8 };

  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.Transform size={30} /></span> Transforms
            <span style={{ flex: 1, height: 2, background: "var(--rule-gold)", maxWidth: 130 }} />
          </h1>
          <p className="rk-subtitle" style={{ marginTop: 12, fontSize: 18 }}>Hotkey-triggered LLM rewrites of the clipboard text (e.g. Polish, Prompt Engineer).</p>
        </div>
        <div style={{ marginTop: 30 }}><Button variant="outline" icon={<I.Refresh size={15} />}>Refresh</Button></div>
      </div>

      {/* Stats */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: 24 }}>
        <StatCard label="Transforms" value={String(transforms.length)} note={`${enabledCount} enabled · all local`} />
        <StatCard label="Rewrites fired" value={totalUses.toLocaleString()} note="Since Feb 2026 · this device" accent="gold" />
        <StatCard label="Grammar model" value="rokkor-grammar v3" note="Ollama · GPU · low-latency" />
      </div>

      <Notice tone="info" style={{ marginBottom: 24 }}>
        Select text → copy → press a transform hotkey, and ROKKOR rewrites the clipboard through the configured chat model using your prompt as the system message, then pastes the result back. Restart to bind hotkey changes; <b>Apply Now</b> uses the current clipboard text.
      </Notice>

      {/* NEW TRANSFORM */}
      <SubHead note="the prompt becomes the system message">New transform</SubHead>
      <Section icon={I.Plus} title="New transform" desc="The prompt becomes the system message; the clipboard text is rewritten through the configured grammar model and pasted." style={{ marginBottom: 24 }}>
        <div style={{ marginBottom: 16 }}>
          <label style={lbl}>Name</label>
          <input placeholder="Polish" style={field} />
        </div>
        <div style={{ marginBottom: 16 }}>
          <label style={lbl}>Prompt (system message)</label>
          <textarea placeholder="Improve clarity and concision, keep meaning" style={area}></textarea>
        </div>
        <div style={{ marginBottom: 18 }}>
          <label style={lbl}>Hotkey (optional)</label>
          <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
            <div style={{ ...mono, display: "flex", alignItems: "center", color: "var(--ink-500)", cursor: "pointer" }}>Click to set hotkey</div>
            <Button variant="outline" size="sm" icon={<I.Pen size={14} />}>Record</Button>
          </div>
          <div style={{ font: "400 12.5px/1.5 var(--font-sans)", color: "var(--ink-500)", marginTop: 7 }}>A non-modifier key commits immediately; a modifier-only combo (e.g. Ctrl+Alt+P) commits on release. Conflicts with push-to-talk, scratchpad, and other transforms are blocked.</div>
        </div>
        <Button variant="default" icon={<I.Plus size={15} />}>Create</Button>
      </Section>

      {/* EXISTING TRANSFORMS */}
      <SubHead note="enable, edit, save, or apply now">Your transforms</SubHead>
      <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
        {transforms.map((t) => (
          <Section key={t.id} style={{ opacity: t.enabled ? 1 : 0.74 }}
            title={
              <span style={{ display: "flex", alignItems: "center", gap: 9 }}>
                <span style={{ color: "var(--oxblood-600)" }}><I.Wand size={18} /></span>
                {t.name}
                <span style={{ font: "12px/1 var(--font-mono)", color: "var(--gold-ink)", marginLeft: 4 }}>{t.hotkey}</span>
                {!t.enabled ? <Badge tone="neutral">Off</Badge> : null}
              </span>
            }
            action={
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <Switch checked={t.enabled} onCheckedChange={() => toggle(t.id)} />
                <Button variant="ghost" size="sm" icon={<I.Trash size={15} />} style={{ color: "var(--oxblood-600)" }} />
              </div>
            }
          >
            <div style={{ marginBottom: 16 }}>
              <label style={lbl}>Name</label>
              <input defaultValue={t.name} style={field} />
            </div>
            <div style={{ marginBottom: 16 }}>
              <label style={lbl}>Prompt</label>
              <textarea defaultValue={t.prompt} style={area}></textarea>
            </div>
            <div style={{ marginBottom: 16 }}>
              <label style={lbl}>Hotkey</label>
              <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                <div style={{ ...mono, display: "flex", alignItems: "center", color: "var(--ink-900)", cursor: "pointer" }}>{t.hotkey}</div>
                <Button variant="outline" size="sm" icon={<I.Pen size={14} />}>Record</Button>
              </div>
              <div style={{ font: "400 12.5px/1.5 var(--font-sans)", color: "var(--ink-500)", marginTop: 7 }}>Restart to bind hotkey changes. Apply Now uses the current clipboard text.</div>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <Button variant="default" icon={<I.Save size={15} />}>Save</Button>
              <Button variant="outline" icon={<I.Wand size={15} />}>Apply Now</Button>
              <span style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 16, font: "12px/1 var(--font-mono)", color: "var(--ink-500)" }}>
                <span style={{ display: "flex", alignItems: "center", gap: 6 }}><I.Sparkle size={13} /> {t.uses.toLocaleString()} fired</span>
                <span style={{ display: "flex", alignItems: "center", gap: 6 }}><I.Clock size={13} /> {t.last}</span>
              </span>
            </div>
          </Section>
        ))}
      </div>

      <p style={{ font: "400 13px/1.5 var(--font-sans)", color: "var(--ink-500)", marginTop: 22 }}>
        Tip: use <b>Apply Now</b> to test a prompt without binding a key — copy some text, click Apply Now, and check the rewrite. Transforms run through the same grammar backend as dictation cleanup; if it isn't running, check the Settings tab's grammar backend status.
      </p>
    </div>
  );
}

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