// tweaks-app.jsx — Escalay tweak panel
//
// Three expressive controls that reshape the entire feel:
//   • Mood    — Studio / Editorial / Brutalist / Midnight  (full visual rewrite)
//   • Density — Airy / Standard / Compact  (spacing + type scale)
//   • Type    — Geist / Editorial serif / Mono  (whole typographic voice)
//
// Plus the brand controls from before (logo + accent).

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "studio",
  "density": "standard",
  "typeset": "geist",
  "logoStyle": "fullLogo",
  "accent": "#FF6700"
}/*EDITMODE-END*/;

const MOOD_OPTIONS = [
  { value: "studio",    label: "Studio" },
  { value: "editorial", label: "Editorial" },
  { value: "brutalist", label: "Brutalist" },
  { value: "midnight",  label: "Midnight" },
];

const DENSITY_OPTIONS = ["airy", "standard", "compact"];

const TYPESET_OPTIONS = [
  { value: "geist",     label: "Geist (default)" },
  { value: "editorial", label: "Editorial serif" },
  { value: "mono",      label: "Monospace" },
];

const LOGO_OPTIONS = [
  { value: "geometric", label: "Geometric" },
  { value: "fullLogo",  label: "Full brand logo" },
  { value: "markOnly",  label: "Mark + wordmark" },
  { value: "wordmark",  label: "Wordmark only" },
];

// Per-mood accent default (used when user switches mood without overriding accent).
const MOOD_ACCENTS = {
  studio:    "#FF6700",
  editorial: "#B5552A",
  brutalist: "#FF3300",
  midnight:  "#00FFA3",
};

function renderLogo(style) {
  const headerLogo = document.getElementById('header-logo');
  const footerLogo = document.getElementById('footer-logo');
  if (!headerLogo || !footerLogo) return;

  const variants = {
    geometric: (footer) => `
      <span class="logo-marks"${footer ? ' style="color:#FCFCFC"' : ''}><span></span><span></span><span></span></span>
      <span class="logo-text">escalay</span>`,
    fullLogo: (footer) => `
      <img class="logo-img" src="assets/escalay-full-${footer ? 'white' : 'black'}.png" alt="escalay" />`,
    markOnly: (footer) => `
      <img class="logo-img mark-only" src="assets/escalay-mark-${footer ? 'white' : 'black'}.png" alt="" />
      <span class="logo-text-only">escalay</span>`,
    wordmark: () => `<span class="logo-text-only">escalay</span>`,
  };

  const make = variants[style] || variants.geometric;
  headerLogo.innerHTML = make(false);
  footerLogo.innerHTML = make(true);
}

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

  React.useEffect(() => { document.documentElement.setAttribute('data-mood', t.mood); }, [t.mood]);
  React.useEffect(() => { document.documentElement.setAttribute('data-density', t.density); }, [t.density]);
  React.useEffect(() => { document.documentElement.setAttribute('data-typeset', t.typeset); }, [t.typeset]);
  React.useEffect(() => { document.documentElement.style.setProperty('--accent', t.accent); }, [t.accent]);
  React.useEffect(() => { renderLogo(t.logoStyle); }, [t.logoStyle]);

  // When mood changes, swap accent to that mood's default — unless user has
  // already customized away from a known mood default.
  const handleMood = (v) => {
    const knownDefaults = Object.values(MOOD_ACCENTS);
    const accentIsDefault = knownDefaults.includes(t.accent.toUpperCase()) || knownDefaults.includes(t.accent);
    if (accentIsDefault) {
      setTweak({ mood: v, accent: MOOD_ACCENTS[v] });
    } else {
      setTweak('mood', v);
    }
  };

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Mood" />
      <TweakSelect
        label="Vibe"
        value={t.mood}
        options={MOOD_OPTIONS}
        onChange={handleMood}
      />
      <TweakRadio
        label="Density"
        value={t.density}
        options={DENSITY_OPTIONS}
        onChange={(v) => setTweak('density', v)}
      />
      <TweakSelect
        label="Typeface"
        value={t.typeset}
        options={TYPESET_OPTIONS}
        onChange={(v) => setTweak('typeset', v)}
      />
      <TweakSection label="Brand" />
      <TweakSelect
        label="Logo"
        value={t.logoStyle}
        options={LOGO_OPTIONS}
        onChange={(v) => setTweak('logoStyle', v)}
      />
      <TweakColor
        label="Accent"
        value={t.accent}
        onChange={(v) => setTweak('accent', v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<App />);