/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio, TweakToggle, TweakSelect */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#EE8B6B",
  "displayFont": "Instrument Serif",
  "vibe": "warm",
  "stagedReveal": true
}/*EDITMODE-END*/;

const accentMap = {
  "#EE8B6B": { brand: "#EE8B6B", brandInk: "#5A1230", a50: "#FDF1EC", a100: "#F8DDD2", a300: "#F3B69E", a400: "#F09877", a600: "#B23A4C", a700: "#5A1230" },
  "#14B8A6": { brand: "#14B8A6", brandInk: "#0F766E", a50: "#ECFDF7", a100: "#D1FAE7", a300: "#6EE7C0", a400: "#34D7A8", a600: "#0D9488", a700: "#0F766E" },
  "#6366F1": { brand: "#6366F1", brandInk: "#4338CA", a50: "#EEF2FF", a100: "#E0E7FF", a300: "#A5B4FC", a400: "#818CF8", a600: "#4F46E5", a700: "#4338CA" },
  "#0EA5E9": { brand: "#0EA5E9", brandInk: "#0369A1", a50: "#F0F9FF", a100: "#E0F2FE", a300: "#7DD3FC", a400: "#38BDF8", a600: "#0284C7", a700: "#0369A1" },
};

const vibeMap = {
  warm:   { paperWarm: "#FAFAF7", paperCool: "#F4F6FA", ink900: "#0B1220" },
  ink:    { paperWarm: "#0B1220", paperCool: "#131C2E", ink900: "#FFFFFF" }, // not used — placeholder
  paper:  { paperWarm: "#FFFFFF", paperCool: "#F5F5F5", ink900: "#0F172A" },
  sand:   { paperWarm: "#F7F2E9", paperCool: "#EFE6D6", ink900: "#1F1B16" },
};

const displayFontMap = {
  "Instrument Serif": `"Instrument Serif", "Plus Jakarta Sans", serif`,
  "Plus Jakarta Sans": `"Plus Jakarta Sans", system-ui, sans-serif`,
  "DM Serif Display": `"DM Serif Display", serif`,
};

function applyTweaks(t){
  const root = document.documentElement;
  const a = accentMap[t.accent] || accentMap["#14B8A6"];
  root.style.setProperty('--teal-50', a.a50);
  root.style.setProperty('--teal-100', a.a100);
  root.style.setProperty('--teal-300', a.a300);
  root.style.setProperty('--teal-400', a.a400);
  root.style.setProperty('--teal-500', a.brand);
  root.style.setProperty('--teal-600', a.a600);
  root.style.setProperty('--teal-700', a.a700);
  root.style.setProperty('--brand', a.brand);
  root.style.setProperty('--brand-ink', a.brandInk);

  const v = vibeMap[t.vibe] || vibeMap.warm;
  root.style.setProperty('--paper-warm', v.paperWarm);
  root.style.setProperty('--paper-cool', v.paperCool);

  const df = displayFontMap[t.displayFont] || displayFontMap["Instrument Serif"];
  root.style.setProperty('--font-display', df);
}

// Ensure DM Serif Display is loaded if chosen
(function ensureFonts(){
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap';
  document.head.appendChild(link);
})();

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

  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Accent">
        <TweakColor
          label="Brand accent"
          value={t.accent}
          onChange={v => setTweak('accent', v)}
          options={["#EE8B6B", "#14B8A6", "#0EA5E9", "#6366F1"]}
        />
      </TweakSection>

      <TweakSection title="Surface vibe">
        <TweakRadio
          label="Page surface"
          value={t.vibe}
          onChange={v => setTweak('vibe', v)}
          options={[
            { label: "Warm", value: "warm" },
            { label: "Paper", value: "paper" },
            { label: "Sand", value: "sand" },
          ]}
        />
      </TweakSection>

      <TweakSection title="Typography">
        <TweakSelect
          label="Display font"
          value={t.displayFont}
          onChange={v => setTweak('displayFont', v)}
          options={[
            { label: "Instrument Serif (italic)", value: "Instrument Serif" },
            { label: "DM Serif Display", value: "DM Serif Display" },
            { label: "Plus Jakarta Sans (sans)", value: "Plus Jakarta Sans" },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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