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

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#102C2F", "#18333C", "#EFEDE8", "#ED6426"],
  "emberColor": "#ED6426",
  "displayFont": "Fraunces",
  "uiFont": "Geist",
  "headlineWeight": 300,
  "heroOverlay": 5,
  "heroTextGradient": 30,
  "heroVideoScale": 1.35,
  "heroLayout": "split",
  "sectionPadding": 150,
  "showTransitions": true,
  "transitionStyle": "wave",
  "transitionHeight": 72,
  "cardStyle": "default",
  "buttonShape": "square",
  "eyebrowStyle": "rule",
  "sparkSpeed": 2.2,
  "fieldDrift": true
}/*EDITMODE-END*/;

const DISPLAY_FONT_FAMILIES = {
  "Fraunces":            "Fraunces:opsz,wght@9..144,200;9..144,300;9..144,400",
  "DM Serif Display":    "DM+Serif+Display:wght@400",
  "Playfair Display":    "Playfair+Display:wght@400;500",
  "Instrument Serif":    "Instrument+Serif:ital@0;1",
  "Cormorant Garamond":  "Cormorant+Garamond:wght@300;400;500",
  "Libre Caslon Text":   "Libre+Caslon+Text:wght@400",
  "Bricolage Grotesque": "Bricolage+Grotesque:wght@300;400;500"
};
const UI_FONT_FAMILIES = {
  "Geist":          "Geist:wght@400;500;600;700",
  "Inter":          "Inter:wght@400;500;600;700",
  "IBM Plex Sans":  "IBM+Plex+Sans:wght@400;500;600;700",
  "Manrope":        "Manrope:wght@400;500;600;700",
  "Space Grotesk":  "Space+Grotesk:wght@400;500;600;700"
};

const loadedFonts = new Set(["Fraunces", "Geist"]);
function ensureFont(name, families) {
  if (!families[name] || loadedFonts.has(name)) return;
  loadedFonts.add(name);
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = `https://fonts.googleapis.com/css2?family=${families[name]}&display=swap`;
  document.head.appendChild(link);
}

// Curated palettes — [forge-deep, forge, bone, ember]
const PALETTES = [
  ["#102C2F", "#18333C", "#EFEDE8", "#ED6426"], // Forge (default)
  ["#0E1A2A", "#1A2A3F", "#F1ECE3", "#E08B3E"], // Midnight + amber
  ["#1A1A1A", "#262626", "#F5F0E8", "#D4A24A"], // Charcoal + gold
  ["#0F1D2B", "#1A2F44", "#EDE7DB", "#E15F4A"], // Ink + coral
  ["#15201E", "#1F2D2A", "#E8E5DC", "#85B09A"], // Moss + sage
  ["#1F1A18", "#2B2521", "#EBE6DD", "#C75B36"], // Burnt umber
  ["#0B1A1C", "#11272A", "#E8E4DA", "#F2B53B"], // Deep teal + saffron
  ["#1B1B26", "#27273A", "#EDEAE3", "#7B5BFF"]  // Indigo + violet
];

const EMBER_OPTIONS = [
  "#ED6426", "#E08B3E", "#D4A24A", "#E15F4A",
  "#F2B53B", "#85B09A", "#7B5BFF", "#3B82F6"
];

function applyVar(name, value) {
  document.documentElement.style.setProperty(name, value);
}
function applyAttr(name, value) {
  if (value == null || value === "") {
    delete document.documentElement.dataset[name];
  } else {
    document.documentElement.dataset[name] = value;
  }
}

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

  // Palette
  useEffect(() => {
    applyVar("--forge-deep", t.palette[0]);
    applyVar("--forge",      t.palette[1]);
    applyVar("--bone",       t.palette[2]);
  }, [t.palette]);

  // Ember
  useEffect(() => { applyVar("--ember", t.emberColor); }, [t.emberColor]);

  // Display font
  useEffect(() => {
    ensureFont(t.displayFont, DISPLAY_FONT_FAMILIES);
    applyVar("--font-display", `"${t.displayFont}", "Times New Roman", serif`);
  }, [t.displayFont]);

  // UI font
  useEffect(() => {
    ensureFont(t.uiFont, UI_FONT_FAMILIES);
    applyVar("--font-ui", `"${t.uiFont}", "Helvetica Neue", Helvetica, Arial, sans-serif`);
  }, [t.uiFont]);

  // Headline weight
  useEffect(() => { applyVar("--headline-weight", String(t.headlineWeight)); }, [t.headlineWeight]);

  // Hero
  useEffect(() => { applyVar("--hero-video-scale", String(t.heroVideoScale)); }, [t.heroVideoScale]);
  useEffect(() => { applyVar("--hero-overlay-base", String(t.heroOverlay / 100)); }, [t.heroOverlay]);
  useEffect(() => { applyVar("--hero-text-gradient", String(t.heroTextGradient / 100)); }, [t.heroTextGradient]);
  useEffect(() => { applyAttr("heroLayout", t.heroLayout); }, [t.heroLayout]);

  // Spacing
  useEffect(() => { applyVar("--section-pad-y", `${t.sectionPadding}px`); }, [t.sectionPadding]);

  // Transitions
  useEffect(() => {
    applyVar("--transition-height", t.showTransitions ? `${t.transitionHeight}px` : "0px");
  }, [t.showTransitions, t.transitionHeight]);
  useEffect(() => { applyAttr("transitionStyle", t.showTransitions ? t.transitionStyle : "sharp"); }, [t.showTransitions, t.transitionStyle]);

  // Components
  useEffect(() => { applyAttr("cardStyle", t.cardStyle); }, [t.cardStyle]);
  useEffect(() => {
    const map = { square: "2px", soft: "10px", pill: "999px" };
    applyVar("--button-radius", map[t.buttonShape] || "2px");
  }, [t.buttonShape]);
  useEffect(() => { applyAttr("eyebrowStyle", t.eyebrowStyle); }, [t.eyebrowStyle]);

  // Motion
  useEffect(() => { applyVar("--spark-duration", `${t.sparkSpeed}s`); }, [t.sparkSpeed]);
  useEffect(() => { applyAttr("fieldDrift", t.fieldDrift ? "on" : "off"); }, [t.fieldDrift]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakColor
        label="Brand"
        value={t.palette}
        options={PALETTES}
        onChange={(v) => setTweak("palette", v)}
      />
      <TweakColor
        label="Ember accent"
        value={t.emberColor}
        options={EMBER_OPTIONS}
        onChange={(v) => setTweak("emberColor", v)}
      />

      <TweakSection label="Typography" />
      <TweakSelect
        label="Display font"
        value={t.displayFont}
        options={Object.keys(DISPLAY_FONT_FAMILIES)}
        onChange={(v) => setTweak("displayFont", v)}
      />
      <TweakSelect
        label="UI font"
        value={t.uiFont}
        options={Object.keys(UI_FONT_FAMILIES)}
        onChange={(v) => setTweak("uiFont", v)}
      />
      <TweakRadio
        label="Headline weight"
        value={String(t.headlineWeight)}
        options={["200", "300", "400"]}
        onChange={(v) => setTweak("headlineWeight", Number(v))}
      />

      <TweakSection label="Hero" />
      <TweakRadio
        label="Layout"
        value={t.heroLayout}
        options={["split", "centered"]}
        onChange={(v) => setTweak("heroLayout", v)}
      />
      <TweakSlider
        label="Video crop"
        value={t.heroVideoScale}
        min={1} max={1.6} step={0.05}
        onChange={(v) => setTweak("heroVideoScale", v)}
        unit="×"
      />
      <TweakSlider
        label="Video overlay"
        value={t.heroOverlay}
        min={0} max={50} step={1}
        onChange={(v) => setTweak("heroOverlay", v)}
        unit="%"
      />
      <TweakSlider
        label="Text gradient"
        value={t.heroTextGradient}
        min={0} max={60} step={1}
        onChange={(v) => setTweak("heroTextGradient", v)}
        unit="%"
      />

      <TweakSection label="Spacing" />
      <TweakSlider
        label="Section padding"
        value={t.sectionPadding}
        min={80} max={220} step={10}
        onChange={(v) => setTweak("sectionPadding", v)}
        unit="px"
      />

      <TweakSection label="Section transitions" />
      <TweakToggle
        label="Show curves"
        value={t.showTransitions}
        onChange={(v) => setTweak("showTransitions", v)}
      />
      <TweakRadio
        label="Style"
        value={t.transitionStyle}
        options={["wave", "diagonal", "sharp"]}
        onChange={(v) => setTweak("transitionStyle", v)}
      />
      <TweakSlider
        label="Height"
        value={t.transitionHeight}
        min={20} max={120} step={4}
        onChange={(v) => setTweak("transitionHeight", v)}
        unit="px"
      />

      <TweakSection label="Components" />
      <TweakSelect
        label="Card style"
        value={t.cardStyle}
        options={["default", "outlined", "ghost", "lifted"]}
        onChange={(v) => setTweak("cardStyle", v)}
      />
      <TweakRadio
        label="Buttons"
        value={t.buttonShape}
        options={["square", "soft", "pill"]}
        onChange={(v) => setTweak("buttonShape", v)}
      />
      <TweakRadio
        label="Eyebrow"
        value={t.eyebrowStyle}
        options={["rule", "dot", "bare"]}
        onChange={(v) => setTweak("eyebrowStyle", v)}
      />

      <TweakSection label="Motion" />
      <TweakSlider
        label="Spark speed"
        value={t.sparkSpeed}
        min={1.4} max={4.5} step={0.1}
        onChange={(v) => setTweak("sparkSpeed", v)}
        unit="s"
      />
      <TweakToggle
        label="Field drift"
        value={t.fieldDrift}
        onChange={(v) => setTweak("fieldDrift", v)}
      />
    </TweaksPanel>
  );
}

const mountEl = document.getElementById("tweaks-root");
if (mountEl) {
  ReactDOM.createRoot(mountEl).render(<App />);
}