/* Live tweaks panel — emdash pattern. Mirrors the Aster design's data-props:
   accent color (4 options) + celestialMotifs toggle. Persists to localStorage. */

const TWEAK_DEFAULTS = {
  accent: "#BD8A4C",          // warm gold (default), plus terracotta / periwinkle / slate-blue
  celestialMotifs: true,      // the twinkling ✦ stars
};
const ACCENT_OPTIONS = ["#BD8A4C", "#B5654A", "#6E6AA8", "#3E5C8A"];

function useTweaks(defaults) {
  const [t, setT] = React.useState(() => {
    try { return { ...defaults, ...JSON.parse(localStorage.getItem("cd_tweaks") || "{}") }; }
    catch { return defaults; }
  });
  const setTweak = (k, v) => setT(prev => {
    const next = { ...prev, [k]: v };
    try { localStorage.setItem("cd_tweaks", JSON.stringify(next)); } catch {}
    return next;
  });
  return [t, setTweak];
}

/* Applies tweaks to the rendered design — exactly what the design's DCLogic.applyTweaks did:
   set --accent on the root, and show/hide [data-motif] elements. */
function applyTweaks(rootEl, t) {
  if (!rootEl) return;
  rootEl.style.setProperty("--accent", t.accent || "#BD8A4C");
  rootEl.querySelectorAll("[data-motif]").forEach(m => {
    m.style.display = t.celestialMotifs === false ? "none" : "";
  });
}

function TweaksPanel({ t, setTweak }) {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <button className="tweaks-toggle" title="Design tweaks" onClick={() => setOpen(o => !o)}>✦</button>
      {open && (
        <div className="tweaks-panel">
          <h4>Accent</h4>
          <div className="swatches">
            {ACCENT_OPTIONS.map(c => (
              <span
                key={c}
                className={"swatch" + (t.accent === c ? " active" : "")}
                style={{ background: c }}
                onClick={() => setTweak("accent", c)}
              />
            ))}
          </div>
          <label>
            Celestial motifs
            <input
              type="checkbox"
              checked={t.celestialMotifs !== false}
              onChange={e => setTweak("celestialMotifs", e.target.checked)}
            />
          </label>
        </div>
      )}
    </>
  );
}