// Style & Tone — per-context tone, cleanup strength, and auto-switch by app.
function StyleToneScreen() {
  const { Button, Switch, Badge } = window.ROKKORDesignSystem_4e99ef;
  const { PageHead } = window.RokkorScreens;
  const { Section, Inset, ToggleRow, Select, Notice, RadioGroup } = window.RokkorKit;
  const I = window.RokkorIcons;

  const [advanced, setAdvanced] = React.useState(true);
  const [ctx, setCtx] = React.useState("work");
  const [autoswitch, setAutoswitch] = React.useState(false);
  const [tones, setTones] = React.useState({ personal: "formal", work: "formal", email: "formal", other: "formal" });
  const setTone = (k) => (v) => setTones((p) => ({ ...p, [k]: v }));

  const toneOpts = [
    { id: "formal", label: "Formal", hint: "Full capitalization and punctuation" },
    { id: "casual", label: "Casual", hint: "Light punctuation, natural casing" },
    { id: "verycasual", label: "Very casual", hint: "Minimal caps/punctuation, chat style" },
  ];
  const cleanupOpts = ["Inherit (global)", "Raw", "Light", "Standard", "Heavy", "Context-aware"];

  const contexts = [
    ["personal", "Personal", "Notes, chats, journaling"],
    ["work", "Work", "Docs, tickets, Slack"],
    ["email", "Email", "Outbound mail"],
    ["other", "Other", "Everything else"],
  ];
  const rules = [
    ["outlook", "Email"], ["gmail", "Email"], ["mail", "Email"], ["proton", "Email"],
    ["slack", "Work"], ["teams", "Work"], ["jira", "Work"], ["linear", "Work"],
    ["notion", "Work"], ["confluence", "Work"], ["zendesk", "Work"], ["docs", "Work"],
  ];

  const ToneBlock = ({ id, label }) => (
    <Section title={`${label} tone`} desc={`Applies when ${label} is your active context (or an app rule matches it).`}>
      <RadioGroup value={tones[id]} onChange={setTone(id)} options={toneOpts} />
      <div style={{ marginTop: 18 }}>
        <Select label="Cleanup strength" value="Inherit (global)" options={cleanupOpts} hint="How hard grammar cleanup works for this context. Inherit uses your global Refinement setting. Context-aware reconstructs intended words from fast/tired/slurred speech using your vocabulary & recent corrections." />
      </div>
    </Section>
  );

  return (
    <div style={{ maxWidth: "var(--content-max)" }}>
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16 }}>
        <PageHead title="Style &amp; Tone" subtitle="Per-context tone, per-context cleanup strength, and auto-switch by app." />
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 30 }}>
          <span style={{ display: "flex", alignItems: "center", gap: 9, font: "400 14px/1 var(--font-sans)", color: "var(--ink-700, var(--ink-800))" }}>Advanced <Switch checked={advanced} onCheckedChange={setAdvanced} /></span>
          <Button variant="outline" icon={<I.Refresh size={15} />}>Refresh</Button>
          <Button variant="default" icon={<I.Save size={15} />}>Save</Button>
        </div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
        {/* GLOBAL CLEANUP */}
        <Section title="Global cleanup strength" desc="The default amount of grammar cleanup applied to every dictation. Each context below can override this or inherit it.">
          <Select label="Default strength" value="Context-aware (fast/tired/slurred speech)" options={["Raw", "Light", "Standard", "Heavy", "Context-aware (fast/tired/slurred speech)"]} />
          <div style={{ font: "400 12.5px/1.6 var(--font-sans)", color: "var(--ink-500)", marginTop: 12 }}>Filler words ("um", "uh", "er", "like") are removed from Standard upward; Raw and Light keep your words exactly as spoken.</div>
          <div style={{ font: "400 12.5px/1.6 var(--font-sans)", color: "var(--ink-500)", marginTop: 8 }}>Raw = paste exactly as spoken · Light = punctuation & capitalization only (your words unchanged) · Standard = clean grammar & fillers · Heavy = polish & rephrase · Context-aware = uses your vocabulary & recent corrections to reconstruct intended words from fast/tired/slurred speech (LLM post-correction, not a different mic).</div>
        </Section>

        {/* CONTEXT */}
        <Section icon={I.Wand} title="Context" desc="The context applied to your next dictation. Pick one here; with auto-switch on, a matching app rule can override it for that capture.">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
            {contexts.map(([id, label, hint]) => {
              const sel = ctx === id;
              return (
                <button key={id} onClick={() => setCtx(id)} style={{ textAlign: "left", cursor: "pointer", padding: "14px 16px", borderRadius: "var(--radius-md)", border: `1px solid ${sel ? "var(--oxblood-500)" : "var(--border)"}`, background: sel ? "var(--oxblood-100)" : "var(--paper-50)" }}>
                  <div style={{ font: "600 15px/1 var(--font-sans)", color: "var(--ink-900)" }}>{label}</div>
                  <div style={{ font: "400 12.5px/1.3 var(--font-sans)", color: "var(--ink-500)", marginTop: 6 }}>{hint}</div>
                </button>
              );
            })}
          </div>

          <div style={{ marginTop: 20 }}>
            <ToggleRow label="Auto-switch context by app" hint="Uses the foreground app name + window title, on-device, sampled once per dictation. Off by default." checked={autoswitch} onChange={setAutoswitch} />
          </div>

          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", margin: "8px 0 6px" }}>
            <span style={{ font: "600 14px/1 var(--font-sans)", color: "var(--ink-900)" }}>App rules</span>
            <Button variant="outline" size="sm" icon={<I.Plus size={14} />}>Add rule</Button>
          </div>
          <div style={{ font: "400 12.5px/1.5 var(--font-sans)", color: "var(--ink-500)", marginBottom: 14 }}>First match wins. A rule matches when its text appears in the app name or window title (case-insensitive), e.g. <code>outlook → Email</code>.</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {rules.map(([app, target], i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <input defaultValue={app} style={{ flex: 1, height: 42, padding: "0 14px", background: "var(--card)", border: "1px solid var(--border-strong)", borderRadius: "var(--radius-md)", font: "400 14px/1 var(--font-sans)", color: "var(--ink-900)", outline: "none" }} />
                <span style={{ color: "var(--ink-400)" }}>→</span>
                <div style={{ position: "relative", width: 160, flex: "none" }}>
                  <select defaultValue={target} style={{ appearance: "none", WebkitAppearance: "none", width: "100%", height: 42, padding: "0 32px 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)", cursor: "pointer" }}>
                    <option>Email</option><option>Work</option><option>Personal</option><option>Other</option>
                  </select>
                  <span style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", color: "var(--ink-500)", pointerEvents: "none", font: "12px/1 var(--font-sans)" }}>▾</span>
                </div>
                <button style={{ width: 36, height: 36, flex: "none", display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid var(--border)", background: "var(--card)", borderRadius: "var(--radius-md)", color: "var(--ink-500)", cursor: "pointer" }}><I.Trash size={15} /></button>
              </div>
            ))}
          </div>
        </Section>

        {/* PER-CONTEXT TONE */}
        <ToneBlock id="personal" label="Personal" />
        <ToneBlock id="work" label="Work" />
        <ToneBlock id="email" label="Email" />
        <ToneBlock id="other" label="Other" />
      </div>
    </div>
  );
}

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