/* global React, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakSlider, TweakSelect */
const { useEffect: useTwEffect } = React;

const KalviTweaks = () => {
  const [t, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "accent": "#7A0E1F",
    "marble_intensity": 0.5,
    "serif": "Cormorant Garamond",
    "sans": "Manrope",
    "ink": "#1A1614",
    "bg": "#F4F0E9"
  }/*EDITMODE-END*/);

  // Apply CSS variables live
  useTwEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", t.accent);
    r.style.setProperty("--accent-soft", hexToRGBA(t.accent, 0.08));
    r.style.setProperty("--accent-2", lighten(t.accent, 0.12));
    r.style.setProperty("--ink", t.ink);
    r.style.setProperty("--bg", t.bg);
    r.style.setProperty("--ff-serif", `"${t.serif}", "EB Garamond", Garamond, serif`);
    r.style.setProperty("--ff-sans", `"${t.sans}", -apple-system, BlinkMacSystemFont, system-ui, sans-serif`);

    // Marble intensity → adjust pseudo opacity via class
    document.querySelectorAll(".marble").forEach((el) => {
      el.style.setProperty("--marble-strength", t.marble_intensity);
    });
  }, [t]);

  // Inject CSS-overrides for marble strength
  useTwEffect(() => {
    let style = document.getElementById("__kalvi_marble_override");
    if (!style) {
      style = document.createElement("style");
      style.id = "__kalvi_marble_override";
      document.head.appendChild(style);
    }
    style.textContent = `
      .marble::before { opacity: ${0.25 + 0.5 * t.marble_intensity} !important; }
      .marble::after { opacity: ${0.15 + 0.4 * t.marble_intensity} !important; }
      .marble-veins { opacity: ${0.2 + 0.6 * t.marble_intensity} !important; }
    `;
  }, [t.marble_intensity]);

  // Load Google fonts dynamically
  useTwEffect(() => {
    const families = [t.serif, t.sans].filter(Boolean);
    const id = "__kalvi_gf";
    let link = document.getElementById(id);
    if (!link) {
      link = document.createElement("link");
      link.id = id;
      link.rel = "stylesheet";
      document.head.appendChild(link);
    }
    const q = families.map((f) => `family=${f.replace(/\s+/g, "+")}:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500`).join("&");
    link.href = `https://fonts.googleapis.com/css2?${q}&display=swap`;
  }, [t.serif, t.sans]);

  return (
    <TweaksPanel title="Tweaks" defaultOpen={false}>
      <TweakSection title="Accent">
        <TweakColor
          label="Rouge éditorial"
          value={t.accent}
          onChange={(v) => setTweak("accent", v)}
          options={["#7A0E1F", "#9B1B1B", "#C8102E", "#E63946", "#D7263D", "#5C0A18"]}
        />
        <TweakColor
          label="Encre"
          value={t.ink}
          onChange={(v) => setTweak("ink", v)}
          options={["#1A1614", "#0A0A0A", "#2B2522", "#3A2A22"]}
        />
        <TweakColor
          label="Fond marbre"
          value={t.bg}
          onChange={(v) => setTweak("bg", v)}
          options={["#F4F0E9", "#F8F5F1", "#EFE9DF", "#F6F2E8", "#EEE7DA"]}
        />
      </TweakSection>

      <TweakSection title="Marbre">
        <TweakSlider
          label="Intensité du veinage"
          value={t.marble_intensity}
          onChange={(v) => setTweak("marble_intensity", v)}
          min={0}
          max={1}
          step={0.05}
        />
      </TweakSection>

      <TweakSection title="Typographie">
        <TweakSelect
          label="Serif (titres)"
          value={t.serif}
          onChange={(v) => setTweak("serif", v)}
          options={["Cormorant Garamond", "EB Garamond", "Playfair Display", "DM Serif Display", "Fraunces", "Lora"]}
        />
        <TweakSelect
          label="Sans (texte)"
          value={t.sans}
          onChange={(v) => setTweak("sans", v)}
          options={["Manrope", "DM Sans", "Inter", "Geist", "Schibsted Grotesk", "Plus Jakarta Sans"]}
        />
      </TweakSection>
    </TweaksPanel>
  );
};

function hexToRGBA(hex, a) {
  const m = hex.replace("#", "");
  const r = parseInt(m.slice(0, 2), 16);
  const g = parseInt(m.slice(2, 4), 16);
  const b = parseInt(m.slice(4, 6), 16);
  return `rgba(${r},${g},${b},${a})`;
}
function lighten(hex, amt) {
  const m = hex.replace("#", "");
  const r = Math.min(255, parseInt(m.slice(0, 2), 16) + Math.round(255 * amt));
  const g = Math.min(255, parseInt(m.slice(2, 4), 16) + Math.round(255 * amt));
  const b = Math.min(255, parseInt(m.slice(4, 6), 16) + Math.round(255 * amt));
  return `#${[r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("")}`;
}

window.KalviTweaks = KalviTweaks;