// App shell — screenshot-faithful: big window, centered title, INNER paper canvas
// on the left (white rounded rectangle floating inside the grey window), right
// properties column sits on the window's grey bg (NOT inside the paper).

const { useState: uS_a, useEffect: uE_a } = React;

function TrafficLights() {
  return (
    <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
      <span style={{ width: 12, height: 12, borderRadius: 999, background: "#ff5f57" }} />
      <span style={{ width: 12, height: 12, borderRadius: 999, background: "#febc2e" }} />
      <span style={{ width: 12, height: 12, borderRadius: 999, background: "#28c840" }} />
    </div>
  );
}

function CommandK({ open, onClose }) {
  if (!open) return null;
  return (
    <div onClick={onClose} style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,.18)", display: "flex", alignItems: "flex-start", justifyContent: "center", paddingTop: "12%", zIndex: 30, animation: "fadeIn 120ms ease" }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: "min(520px, 80%)", background: "#fff", borderRadius: 14, border: "1px solid var(--line)", boxShadow: "0 20px 50px -20px rgba(0,0,0,.3)", overflow: "hidden", animation: "fadeInUp 160ms cubic-bezier(.2,.8,.3,1)" }}>
        <div style={{ padding: "14px 16px", display: "flex", alignItems: "center", gap: 10, borderBottom: "1px solid var(--line-soft)" }}>
          <Ic.search width="15" height="15" />
          <input autoFocus placeholder="Search transcriptions, settings, styles…" style={{ border: "none", outline: "none", flex: 1, fontSize: 14, background: "transparent" }} />
          <span style={{ fontSize: 10.5, padding: "2px 6px", borderRadius: 5, background: "#f3f3f3", color: "var(--ink-mute)" }}>esc</span>
        </div>
        <div style={{ maxHeight: 320, overflowY: "auto", padding: "6px" }}>
          {["Go to Home","Go to Dictionary","Go to Style","Change hotkey","Toggle streaming","Clear history"].map((s,i)=>(
            <div key={i} style={{ padding: "10px 12px", fontSize: 13, borderRadius: 7, display: "flex", alignItems: "center", gap: 10, cursor: "pointer", background: i===0?"#f5f5f5":"transparent" }}>
              <Ic.chevRight width="13" height="13" />{s}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": "comfortable",
  "rightPanel": "visible",
  "variation": "default"
}/*EDITMODE-END*/;

function App() {
  const [values, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = uS_a("home");
  const [ckOpen, setCkOpen] = uS_a(false);

  uE_a(() => {
    const h = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault(); setCkOpen(true); }
      if (e.key === "Escape") setCkOpen(false);
    };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, []);

  const showRightPanel =
    view !== "settings" &&
    (values.rightPanel === "visible" ||
      (values.rightPanel === "contextual" && view === "home"));

  return (
    <div style={{ position: "fixed", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", padding: "clamp(16px, 3vw, 44px)" }}>
      <div style={{ width: "100%", height: "100%", maxWidth: 1280, maxHeight: 820, borderRadius: "var(--radius-window)", background: "var(--window-bg)", boxShadow: "var(--shadow-window)", overflow: "hidden", display: "flex", flexDirection: "column", border: "0.5px solid rgba(0,0,0,.1)", position: "relative" }}>
        {/* Title bar — tall, no bottom border, traffic lights + centered title */}
        <div style={{ height: 44, flexShrink: 0, display: "flex", alignItems: "center", padding: "0 16px", background: "var(--window-bg)", position: "relative" }}>
          <TrafficLights />
          <div style={{ position: "absolute", left: 0, right: 0, textAlign: "center", fontSize: 12.5, color: "var(--ink-soft)", pointerEvents: "none", letterSpacing: "-0.005em", fontWeight: 400 }}>
            {view === "home" ? "globefn" : view[0].toUpperCase() + view.slice(1)}
          </div>
          <div style={{ flex: 1 }} />
        </div>

        {/* Body: sidebar + (paper canvas) + right column */}
        <div style={{ flex: 1, display: "flex", minHeight: 0, padding: "0 14px 14px", gap: 10 }}>
          <Sidebar view={view} setView={setView} onOpenCommandK={() => setCkOpen(true)} />

          {/* PAPER — floating white canvas like the screenshot */}
          <section style={{ flex: 1, minWidth: 0, background: "var(--paper)", borderRadius: "var(--radius-paper)", border: "none", boxShadow: "none", overflow: "hidden", position: "relative", display: "flex", flexDirection: "column" }}>
            {view === "home" && <HomeView density={values.density} variation={values.variation} />}
            {view === "dictionary" && <DictionaryView density={values.density} />}
            {view === "style" && <StyleView density={values.density} />}
            {view === "transforms" && <TransformsView density={values.density} />}
            {view === "settings" && <SettingsView density={values.density} />}
            {view === "help" && (
              <div style={{ padding: 48, color: "var(--ink-mute)", fontSize: 13 }}>Help & shortcuts live here.</div>
            )}
          </section>

          {/* RIGHT COLUMN — sits on the grey window bg, not in paper */}
          {showRightPanel && <RightPanel onToggle={() => setTweak("rightPanel", "hidden")} />}
        </div>

        <CommandK open={ckOpen} onClose={() => setCkOpen(false)} />
      </div>

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Layout" />
        <window.TweakRadio label="Density" value={values.density} options={["compact","comfortable","airy"]} onChange={(v)=>setTweak("density",v)} />
        <window.TweakRadio label="Right panel" value={values.rightPanel} options={["visible","contextual","hidden"]} onChange={(v)=>setTweak("rightPanel",v)} />
        <window.TweakSection label="Variation" />
        <window.TweakRadio label="Home" value={values.variation} options={["default","quiet"]} onChange={(v)=>setTweak("variation",v)} />
      </window.TweaksPanel>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);