// Tweaks panel app for LotusBite Website
const { useEffect } = React;

const PALETTES = {
  midnight: {
    label: "Midnight + Ivory",
    "--ink": "#0c1f33",
    "--ink-2": "#1a3553",
    "--paper": "#f3ede2",
    "--paper-2": "#ece4d4",
    "--paper-3": "#fdfaf3",
    "--accent": "#2d7eaa",
    "--accent-2": "#4ea3c9",
    "--accent-soft": "#c8dde8",
    "--line": "#d9cfbc",
    "--line-2": "#c4b89f",
  },
  porcelain: {
    label: "Porcelain + Lotus",
    "--ink": "#16263a",
    "--ink-2": "#2a4868",
    "--paper": "#f8f7f4",
    "--paper-2": "#eef0f2",
    "--paper-3": "#ffffff",
    "--accent": "#3a8fbf",
    "--accent-2": "#62b3da",
    "--accent-soft": "#d6e9f3",
    "--line": "#dedfdf",
    "--line-2": "#c9c9c9",
  },
  slate: {
    label: "Slate + Steel",
    "--ink": "#1c2530",
    "--ink-2": "#374252",
    "--paper": "#e8eaee",
    "--paper-2": "#dde0e6",
    "--paper-3": "#f5f6f8",
    "--accent": "#1f4f6e",
    "--accent-2": "#3e7c9d",
    "--accent-soft": "#b8cdda",
    "--line": "#c9cdd3",
    "--line-2": "#a8adb5",
  },
};

const FONTS = {
  "Instrument Serif": "'Instrument Serif', 'Times New Roman', serif",
  "Cormorant Garamond": "'Cormorant Garamond', 'Times New Roman', serif",
  "DM Serif Display": "'DM Serif Display', 'Times New Roman', serif",
  "Playfair Display": "'Playfair Display', 'Times New Roman', serif",
};

const FONT_IMPORTS = {
  "Cormorant Garamond": "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&display=swap",
  "DM Serif Display": "https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap",
  "Playfair Display": "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap",
};

function applyPalette(name) {
  const p = PALETTES[name];
  if (!p) return;
  const root = document.documentElement;
  Object.entries(p).forEach(([k,v]) => {
    if (k.startsWith("--")) root.style.setProperty(k, v);
  });
}

function loadFont(name) {
  if (!FONT_IMPORTS[name]) return;
  const id = "tweak-font-" + name.replace(/\s+/g, "-");
  if (document.getElementById(id)) return;
  const link = document.createElement("link");
  link.id = id;
  link.rel = "stylesheet";
  link.href = FONT_IMPORTS[name];
  document.head.appendChild(link);
}

function applyDisplayFont(name) {
  loadFont(name);
  document.documentElement.style.setProperty("--font-display", FONTS[name]);
}

function applyHeroVariant(v) {
  const portrait = document.querySelector('.hero__portrait');
  const sticker = document.querySelector('.hero__sticker');
  if (!portrait) return;
  if (v === "no-sticker") {
    if (sticker) sticker.style.display = "none";
  } else if (v === "sticker") {
    if (sticker) sticker.style.display = "";
  }
}

function TweaksApp() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "palette": "midnight",
    "displayFont": "Instrument Serif",
    "heroSticker": true,
    "showMarquee": true,
    "trustBarDark": true
  }/*EDITMODE-END*/;

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

  useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  useEffect(() => { applyDisplayFont(t.displayFont); }, [t.displayFont]);
  useEffect(() => {
    const s = document.querySelector('.hero__sticker');
    if (s) s.style.display = t.heroSticker ? "" : "none";
  }, [t.heroSticker]);
  useEffect(() => {
    const m = document.querySelector('.marquee');
    if (m) m.style.display = t.showMarquee ? "" : "none";
  }, [t.showMarquee]);
  useEffect(() => {
    const trust = document.querySelector('.trust');
    if (!trust) return;
    if (t.trustBarDark) {
      trust.style.background = "var(--ink)";
      trust.style.color = "var(--paper-3)";
    } else {
      trust.style.background = "var(--paper-3)";
      trust.style.color = "var(--ink)";
    }
  }, [t.trustBarDark]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Farbpalette" />
      <TweakRadio
        label="Palette"
        value={t.palette}
        onChange={v => setTweak('palette', v)}
        options={[
          { value: "midnight", label: "Midnight" },
          { value: "porcelain", label: "Porcelain" },
          { value: "slate", label: "Slate" },
        ]}
      />

      <TweakSection label="Display-Schrift" />
      <TweakSelect
        label="Headline"
        value={t.displayFont}
        onChange={v => setTweak('displayFont', v)}
        options={Object.keys(FONTS).map(name => ({ value: name, label: name }))}
      />

      <TweakSection label="Layout" />
      <TweakToggle
        label="Hero-Sticker"
        value={t.heroSticker}
        onChange={v => setTweak('heroSticker', v)}
      />
      <TweakToggle
        label="Marquee-Band"
        value={t.showMarquee}
        onChange={v => setTweak('showMarquee', v)}
      />
      <TweakToggle
        label="Trust-Bar dunkel"
        value={t.trustBarDark}
        onChange={v => setTweak('trustBarDark', v)}
      />
    </TweaksPanel>
  );
}

// Mount
const container = document.createElement("div");
container.id = "tweaks-root";
document.body.appendChild(container);
ReactDOM.createRoot(container).render(<TweaksApp />);