// Right panel — styled to match the screenshot:
//   · Top flat rows (Name + trash, Hotkey + link + Mic, big Profile select)
//   · A bordered rounded card containing tabs + Tone grid + labeled fields (Length, Pronoun)
//   · A bold "Dictionary" section with chips
//   · No dropdowns hiding content — everything visible, stacked.

const { useState: uS_rp } = React;

// ── Real model (from openwhispr/src/components/StyleView.tsx) ────────────────
const TONE_OPTS = [
  { id: "professional", label: "Professional" },
  { id: "casual", label: "Casual" },
  { id: "friendly", label: "Friendly" },
  { id: "direct", label: "Direct" },
];
const LENGTH_OPTS = [
  { id: "concise", label: "Concise" },
  { id: "balanced", label: "Balanced" },
  { id: "detailed", label: "Detailed" },
  { id: "verbose", label: "Verbose" },
];
const BULLETS_OPTS = [
  { id: "auto", label: "Auto" },
  { id: "always", label: "Always" },
  { id: "never", label: "Never" },
];
const PRONOUN_OPTS = [
  { id: "neutral", label: "Neutral" },
  { id: "tu", label: "Tu" },
  { id: "vous", label: "Vous" },
];

function GlyphTone({ id }) {
  const s = { width: 22, height: 18, viewBox: "0 0 22 18", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  if (id === "professional") return (<svg {...s}><path d="M3 4h10"/><path d="M3 9h14"/><path d="M3 14h8"/></svg>);
  if (id === "casual") return (<svg {...s}><path d="M3 6 C 8 3, 14 9, 19 6"/><path d="M3 13 C 8 10, 14 16, 19 13"/></svg>);
  if (id === "friendly") return (<svg {...s}><path d="M3 4h16v8H9l-4 4v-4H3z"/><path d="M7 8h8"/></svg>);
  if (id === "direct") return (<svg {...s}><path d="M3 9h14"/><path d="m13 5 4 4-4 4"/></svg>);
  return null;
}
function GlyphLength({ id }) {
  const s = { width: 22, height: 18, viewBox: "0 0 22 18", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round" };
  if (id === "concise") return (<svg {...s}><path d="M5 6h12"/><path d="M5 12h6"/></svg>);
  if (id === "balanced") return (<svg {...s}><path d="M4 5h14"/><path d="M4 9h14"/><path d="M4 13h10"/></svg>);
  if (id === "detailed") return (<svg {...s}><path d="M3 4h16"/><path d="M3 8h16"/><path d="M3 12h16"/><path d="M3 16h12"/></svg>);
  if (id === "verbose") return (<svg {...s}><path d="M3 3h16"/><path d="M3 7h16"/><path d="M3 11h16"/><path d="M3 15h16"/></svg>);
  return null;
}
function GlyphBullets({ id }) {
  const s = { width: 22, height: 18, viewBox: "0 0 22 18", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round" };
  if (id === "auto") return (<svg {...s}><path d="M4 6h14"/><circle cx="5" cy="12" r="1" fill="currentColor" stroke="none"/><path d="M8 12h10"/></svg>);
  if (id === "always") return (<svg {...s}><circle cx="5" cy="5" r="1" fill="currentColor" stroke="none"/><path d="M8 5h10"/><circle cx="5" cy="10" r="1" fill="currentColor" stroke="none"/><path d="M8 10h10"/><circle cx="5" cy="15" r="1" fill="currentColor" stroke="none"/><path d="M8 15h10"/></svg>);
  if (id === "never") return (<svg {...s}><path d="M4 6h14"/><path d="M4 10h14"/><path d="M4 14h14"/></svg>);
  return null;
}

// ── Panel ────────────────────────────────────────────────────────────────────
function RightPanel() {
  // Style
  const [tone, setTone] = uS_rp("professional");
  const [customTone, setCustomTone] = uS_rp("");
  const [length, setLength] = uS_rp("balanced");
  const [pronoun, setPronoun] = uS_rp("neutral");
  const [emoji, setEmoji] = uS_rp(false);
  const [bullets, setBullets] = uS_rp("auto");
  const [examples, setExamples] = uS_rp("");

  // Dictation
  const [hotkey, setHotkey] = uS_rp("Alt");
  const [mic, setMic] = uS_rp("MacBook");
  const [activationMode, setActivationMode] = uS_rp("hold");
  const [autoPaste, setAutoPaste] = uS_rp(true);

  // Dictionary
  const [dictAdd, setDictAdd] = uS_rp("");
  const [dict, setDict] = uS_rp(DICTIONARY);

  return (
    <aside style={{ width: 310, flexShrink: 0, display: "flex", flexDirection: "column", gap: 8, overflowY: "auto", paddingRight: 2 }}>

      {/* Microphone */}
      <Row>
        <LabeledInput label="Microphone" value={mic} onChange={setMic} icon={<Ic.mic width="13" height="13" />} />
      </Row>

      {/* ╔════════════ HOTKEYS CARD ════════════╗ */}
      <div style={{ borderRadius: 18, background: "#fff", padding: 14, display: "flex", flexDirection: "column", gap: 12 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{ fontSize: 13, color: "var(--ink-mute)" }}>Hotkeys</span>
          <div style={{ flex: 1 }} />
          <span style={{ fontSize: 11.5, color: "var(--ink-faint)" }}>Tap to edit</span>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {[
            { id: "dictate", label: "Dictate", keys: ["alt"] },
            { id: "agent", label: "Agent mode", keys: ["⌘","⇧","A"] },
            { id: "correction", label: "Correction", keys: ["⌘","⇧","C"] },
          ].map((h) => (
            <div key={h.id} style={{ display: "flex", alignItems: "center", height: 36 }}>
              <span style={{ flex: 1, fontSize: 12.5, color: "var(--ink)" }}>{h.label}</span>
              <div style={{ display: "flex", gap: 4 }}>
                {h.keys.map((k, i) => (
                  <Keycap key={i} label={k} width={28} height={28} soft />
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Activation mode — real segmented toggle, like Spring / Cubic */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, height: 48, minHeight: 48, flexShrink: 0, borderRadius: 18, background: "#eeeeee", padding: 4 }}>
        {[
          {id:"hold", label:"Push to talk", icon: (
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M8 13V6a2 2 0 1 1 4 0v5"/><path d="M12 11V4a2 2 0 1 1 4 0v8"/><path d="M16 10v-.5a2 2 0 1 1 4 0V16a6 6 0 0 1-6 6h-1a6 6 0 0 1-6-6v-2l-2-3a1.5 1.5 0 0 1 2.5-1.6L8 11"/></svg>
          )},
          {id:"toggle", label:"Toggle", icon: (
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0"/><path d="M12 17v4"/></svg>
          )},
        ].map((o) => {
          const a = activationMode === o.id;
          return (
            <button key={o.id} onClick={()=>setActivationMode(o.id)}
              style={{ border: "none", borderRadius: 14, background: a ? "#fff" : "transparent", cursor: "pointer", fontSize: 12.5, fontWeight: a ? 500 : 400, color: a ? "var(--ink)" : "var(--ink-soft)", boxShadow: "none", transition: "all 140ms ease", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 7 }}>
              {o.icon}
              <span>{o.label}</span>
            </button>
          );
        })}
      </div>

      {/* ╔════════════ PROPERTIES CARD — Tone & Length ════════════╗ */}
      <div style={{ borderRadius: 18, background: "#fff", padding: 14, display: "flex", flexDirection: "column", gap: 12 }}>
        {/* Tabs row: Style */}
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{ fontSize: 13, color: "var(--ink-mute)" }}>Style</span>
          <div style={{ flex: 1 }} />
        </div>

        {/* 4-icon Tone grid — like Smooth/Bouncy/Snappy/Custom */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
          {TONE_OPTS.map((o) => {
            const active = tone === o.id;
            return (
              <div key={o.id} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 5 }}>
                <button onClick={() => setTone(o.id)}
                  style={{ width: "100%", aspectRatio: "1 / 1", borderRadius: 14, background: "#eeeeee", border: active ? "1.5px solid var(--ink)" : "1.5px solid transparent", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--ink)", transition: "all 120ms ease" }}>
                  <GlyphTone id={o.id} />
                </button>
                <span style={{ fontSize: 11.5, color: "var(--ink-soft)" }}>{o.label}</span>
              </div>
            );
          })}
        </div>
      </div>

      {/* ╔════════════ LENGTH CARD — 4 choix (agent mode) ════════════╗ */}
      <div style={{ borderRadius: 18, background: "#fff", padding: 14, display: "flex", flexDirection: "column", gap: 12 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{ fontSize: 13, color: "var(--ink-mute)" }}>Length</span>
          <div style={{ flex: 1 }} />
          <span style={{ fontSize: 11.5, color: "var(--ink-faint)" }}>Agent mode</span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
          {LENGTH_OPTS.map((o) => {
            const active = length === o.id;
            return (
              <div key={o.id} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 5 }}>
                <button onClick={() => setLength(o.id)}
                  style={{ width: "100%", aspectRatio: "1 / 1", borderRadius: 14, background: "#eeeeee", border: active ? "1.5px solid var(--ink)" : "1.5px solid transparent", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--ink)", transition: "all 120ms ease" }}>
                  <GlyphLength id={o.id} />
                </button>
                <span style={{ fontSize: 11.5, color: "var(--ink-soft)" }}>{o.label}</span>
              </div>
            );
          })}
        </div>
      </div>

      {/* ── Playback-equivalent: bold header + rows with toggles ── */}
      <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink)", padding: "10px 2px 2px" }}>Output</div>
      <ToggleRow label="Auto-paste" on={autoPaste} onChange={setAutoPaste} />
      <ToggleRow label="Emoji" on={emoji} onChange={setEmoji} />

      {/* ── Dictionary ── */}
      <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink)", padding: "12px 2px 2px", display: "flex", alignItems: "center" }}>
        <span style={{ flex: 1 }}>Dictionary</span>
        <span style={{ fontSize: 11, fontWeight: 400, color: "var(--ink-mute)" }}>{dict.length} words</span>
      </div>
      <FlatInput value={dictAdd} onChange={setDictAdd} placeholder="Add a word · Enter" height={44}
        onKeyDown={(e)=>{ if(e.key==="Enter" && dictAdd.trim()){ setDict([dictAdd.trim(), ...dict]); setDictAdd(""); }}}/>
      <div style={{ display:"flex", flexWrap:"wrap", gap:6, padding: "2px 0" }}>
        {dict.slice(0, 20).map((w,i)=>(
          <span key={i} style={{ fontSize:11.5, padding:"4px 9px", borderRadius:999, background:"#fff", border:"0.5px solid var(--line)", display:"inline-flex", alignItems:"center", gap:6 }}>
            {w}
            <button onClick={()=>setDict(dict.filter((_,j)=>j!==i))} style={{ border:"none", background:"transparent", cursor:"pointer", color:"var(--ink-mute)", padding:0, fontSize:12, lineHeight:1 }}>×</button>
          </span>
        ))}
      </div>

      {/* Examples (textarea) */}
      <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink)", padding: "12px 2px 2px" }}>Custom prompt</div>
      <textarea value={examples} onChange={(e)=>setExamples(e.target.value)}
        placeholder="Describe how you want your output to sound…"
        style={{ border: "none", borderRadius: 18, background: "#fff", padding: "14px 16px", fontSize: 12.5, fontFamily: "inherit", resize: "vertical", minHeight: 80, outline: "none", color: "var(--ink)" }} />

      <div style={{ height: 8 }} />
    </aside>
  );
}

// ── Atoms ────────────────────────────────────────────────────────────────────

function Row({ children }) { return <div style={{ display: "flex", alignItems: "center", gap: 6 }}>{children}</div>; }

function FlatInput({ value, onChange, strong, readOnly, placeholder, onKeyDown, height = 34 }) {
  return (
    <div style={{ flex: 1, minWidth: 0, height, minHeight: height, borderRadius: 18, background: "#fff", border: "none", display: "flex", alignItems: "center", padding: "0 16px" }}>
      <input readOnly={readOnly} value={value} onChange={(e)=>onChange&&onChange(e.target.value)} onKeyDown={onKeyDown} placeholder={placeholder}
        style={{ flex: 1, minWidth: 0, border: "none", outline: "none", background: "transparent", fontSize: 13, fontWeight: strong ? 500 : 400, color: "var(--ink)" }} />
    </div>
  );
}

// "Width 200" — label left, value right-aligned
function LabeledInput({ label, value, onChange, icon }) {
  return (
    <div style={{ flex: 1, minWidth: 0, height: 44, borderRadius: 18, background: "#fff", border: "none", display: "flex", alignItems: "center", padding: "0 16px", gap: 8 }}>
      {icon && <span style={{ color: "var(--ink-soft)", display: "inline-flex" }}>{icon}</span>}
      <span style={{ fontSize: 12.5, color: "var(--ink-soft)", flex: 1 }}>{label}</span>
      <input value={value} onChange={(e)=>onChange&&onChange(e.target.value)}
        style={{ width: 100, border: "none", outline: "none", background: "transparent", fontSize: 12.5, color: "var(--ink)", textAlign: "right", fontWeight: 500 }} />
    </div>
  );
}

function BigSelect({ label, value, onClick }) {
  return (
    <button onClick={onClick} style={{ width: "100%", height: 38, borderRadius: 10, background: "#fff", border: "0.5px solid var(--line)", display: "flex", alignItems: "center", padding: "0 14px", cursor: "pointer", textAlign: "left", gap: 10 }}>
      <span style={{ fontSize: 13, color: "var(--ink-soft)" }}>{label}</span>
      <span style={{ flex: 1, fontSize: 13, color: "var(--ink)", fontWeight: 500, textAlign: "right" }}>{value}</span>
      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ color: "var(--ink-mute)" }}>
        <path d="m7 9 5-5 5 5"/><path d="m7 15 5 5 5-5"/>
      </svg>
    </button>
  );
}

function SquareBtn({ icon, onClick }) {
  return (
    <button onClick={onClick} style={{ width: 34, height: 34, borderRadius: 10, background: "#fff", border: "0.5px solid var(--line)", display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", color: "var(--ink-soft)" }}>
      {icon}
    </button>
  );
}

function LinkDot() {
  return (
    <div style={{ width: 34, height: 34, borderRadius: 10, background: "#fff", border: "0.5px solid var(--line)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--ink-soft)", flexShrink: 0 }}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/>
      </svg>
    </div>
  );
}

// Like "Duration 2s" — label left, value pill right
function LabeledRow({ label, value, onClick }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <span style={{ fontSize: 12.5, color: "var(--ink-soft)", flex: 1 }}>{label}</span>
      <button onClick={onClick} style={{ minWidth: 120, height: 30, borderRadius: 9, background: "#fff", border: "0.5px solid var(--line)", padding: "0 12px", cursor: "pointer", textAlign: "left", fontSize: 12.5, color: "var(--ink)", fontWeight: 500 }}>
        {value}
      </button>
    </div>
  );
}

function ToggleRow({ label, on, onChange }) {
  return (
    <div style={{ display: "flex", alignItems: "center", padding: "4px 2px" }}>
      <span style={{ flex: 1, fontSize: 13, color: "var(--ink)" }}>{label}</span>
      <Toggle on={on} onChange={onChange} />
    </div>
  );
}

window.RightPanel = RightPanel;