/* ═══════════════════════════════════════════════════════════════
   AMBER BLAKE — Tweaks app (drives window.AB.apply)
   ═══════════════════════════════════════════════════════════════ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "heritage",
  "typeset": "couture",
  "motion": "rich",
  "hero": "liquidgold",
  "name": "wordmark"
}/*EDITMODE-END*/;

const AB_SWATCHES = {
  heritage: ["#EAD6CC", "#C2867F", "#B68B4C"],
  midnight: ["#15110E", "#CBA463", "#C28F87"],
  coastal:  ["#D6D0C2", "#7C8B90", "#A98F63"]
};

function PaletteChips({ value, onChange }) {
  const keys = Object.keys(AB_SWATCHES);
  return (
    <div className="twk-row">
      <div className="twk-lbl"><span>Color world</span>
        <span className="twk-val" style={{ textTransform: "capitalize" }}>{value}</span></div>
      <div className="twk-chips" role="radiogroup">
        {keys.map((k) => {
          const cols = AB_SWATCHES[k];
          const on = k === value;
          return (
            <button key={k} type="button" className="twk-chip" role="radio"
              aria-checked={on} data-on={on ? "1" : "0"} title={k}
              style={{ background: cols[0] }} onClick={() => onChange(k)}>
              <span>
                <i style={{ background: cols[1] }} />
                <i style={{ background: cols[2] }} />
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function AmberTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    if (window.AB && window.AB.apply) window.AB.apply(t);
  }, [t]);

  return (
    <TweaksPanel title="Amber Blake — Studio">
      <TweakSection label="Atmosphere" />
      <PaletteChips value={t.palette} onChange={(v) => setTweak("palette", v)} />
      <TweakSelect label="Hero concept" value={t.hero}
        options={[
          { value: "caustics", label: "I · Light through water" },
          { value: "liquidgold", label: "II · Liquid gold" },
          { value: "aurora", label: "III · Aurora mist" },
          { value: "particles", label: "IV · Drifting particles" }
        ]}
        onChange={(v) => setTweak("hero", v)} />
      <TweakRadio label="Motion" value={t.motion}
        options={[
          { value: "subtle", label: "Subtle" },
          { value: "rich", label: "Rich" },
          { value: "immersive", label: "Immersive" }
        ]}
        onChange={(v) => setTweak("motion", v)} />

      <TweakSection label="Identity" />
      <TweakRadio label="Typeface" value={t.typeset}
        options={[
          { value: "couture", label: "Couture" },
          { value: "editorial", label: "Editorial" },
          { value: "literary", label: "Literary" }
        ]}
        onChange={(v) => setTweak("typeset", v)} />
      <TweakRadio label="Wordmark" value={t.name}
        options={[
          { value: "wordmark", label: "Amber·Blake" },
          { value: "monogram", label: "AB monogram" }
        ]}
        onChange={(v) => setTweak("name", v)} />
    </TweaksPanel>
  );
}

(function mount() {
  function go() {
    var host = document.createElement("div");
    host.id = "ab-tweaks-root";
    document.body.appendChild(host);
    ReactDOM.createRoot(host).render(React.createElement(AmberTweaks));
  }
  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go);
  else go();
})();