// Tweaks panel
const { useState: useStateT, useEffect: useEffectT } = React;

function Tweaks({ state, setState }) {
  const [open, setOpen] = useStateT(true);
  const [editMode, setEditMode] = useStateT(false);

  useEffectT(() => {
    const handler = (e) => {
      if (e.data?.type === "__activate_edit_mode") setEditMode(true);
      if (e.data?.type === "__deactivate_edit_mode") setEditMode(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  if (!editMode) return null;

  const persist = (edits) => {
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits }, "*");
  };

  const set = (k, v) => { setState({ ...state, [k]: v }); persist({ [k]: v }); };

  const variants = [
    { k: "terminal", l: "A · Terminal" },
    { k: "dossier", l: "B · Dossier" },
    { k: "noir", l: "C · Noir" },
  ];

  const accents = [
    { k: "#a78bfa", l: "violet" },
    { k: "#5eead4", l: "teal" },
    { k: "#00ff9c", l: "green" },
    { k: "#ff5a5a", l: "red" },
    { k: "#e5e5e5", l: "bone" },
    { k: "#ff8c00", l: "amber" },
  ];

  return (
    <div className={`tweaks ${open ? "is-open" : "is-closed"}`}>
      <button className="tweaks-toggle" onClick={() => setOpen(!open)}>
        {open ? "— tweaks" : "+ tweaks"}
      </button>
      {open && (
        <div className="tweaks-body">
          <div className="tw-group">
            <div className="tw-k">hero variant</div>
            <div className="tw-row">
              {variants.map((v) => (
                <button
                  key={v.k}
                  className={`tw-chip ${state.variant === v.k ? "is-on" : ""}`}
                  onClick={() => set("variant", v.k)}
                >{v.l}</button>
              ))}
            </div>
          </div>

          <div className="tw-group">
            <div className="tw-k">accent</div>
            <div className="tw-row">
              {accents.map((a) => (
                <button
                  key={a.k}
                  className={`tw-swatch ${state.accent === a.k ? "is-on" : ""}`}
                  style={{ background: a.k }}
                  onClick={() => set("accent", a.k)}
                  title={a.l}
                />
              ))}
            </div>
          </div>

          <div className="tw-group">
            <div className="tw-k">tagline format</div>
            <div className="tw-row tw-wrap">
              {[
                { k: "editorial", l: "editorial" },
                { k: "serif", l: "serif" },
                { k: "mono", l: "mono" },
                { k: "display", l: "display" },
                { k: "inline", l: "inline" },
                { k: "manifesto", l: "manifesto" },
              ].map((f) => (
                <button
                  key={f.k}
                  className={`tw-chip ${state.taglineFormat === f.k ? "is-on" : ""}`}
                  onClick={() => set("taglineFormat", f.k)}
                >{f.l}</button>
              ))}
            </div>
          </div>

          <div className="tw-group">
            <div className="tw-k">blocking</div>
            <div className="tw-row tw-wrap">
              {[
                { k: "A", l: "A · current" },
                { k: "B", l: "B · banner" },
                { k: "C", l: "C · band" },
                { k: "D", l: "D · triptych" },
              ].map((b) => (
                <button
                  key={b.k}
                  className={`tw-chip ${state.blocking === b.k ? "is-on" : ""}`}
                  onClick={() => set("blocking", b.k)}
                >{b.l}</button>
              ))}
            </div>
          </div>

          <div className="tw-group">
            <div className="tw-k">scanlines</div>
            <div className="tw-row">
              <button className={`tw-chip ${state.scanlines ? "is-on" : ""}`} onClick={() => set("scanlines", !state.scanlines)}>
                {state.scanlines ? "on" : "off"}
              </button>
            </div>
          </div>

          <div className="tw-group">
            <div className="tw-k">grain</div>
            <div className="tw-row">
              <button className={`tw-chip ${state.grain ? "is-on" : ""}`} onClick={() => set("grain", !state.grain)}>
                {state.grain ? "on" : "off"}
              </button>
            </div>
          </div>

          <div className="tw-hint">
            <span>try:</span> type <b>sudo</b> anywhere
          </div>
        </div>
      )}
    </div>
  );
}

window.Tweaks = Tweaks;