/* ============================================================
   APP — entry point
   Mounts: HeroChat, ParcelleCanvas with step state, Tweaks.
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#F2FF1F"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  { value: "#FF6A1F", label: "Orange fluo" },
  { value: "#F2FF1F", label: "Jaune fluo" },
  { value: "#1B3A78", label: "Désactivé (marine)" }
];

function applyAccent(color) {
  document.documentElement.style.setProperty("--accent", color);
  // soft variant
  const m = color.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
  if (m) {
    const [r, g, b] = [parseInt(m[1], 16), parseInt(m[2], 16), parseInt(m[3], 16)];
    document.documentElement.style.setProperty("--accent-soft", `rgba(${r}, ${g}, ${b}, 0.18)`);
    document.documentElement.style.setProperty("--accent-strong", `rgba(${r}, ${g}, ${b}, 0.55)`);
  }
}

/* ----- TWEAKS PANEL ----- */
function UrbaTweaks() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

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

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection label="Couleur d'accent">
        <window.TweakColor
          value={t.accent}
          options={ACCENT_OPTIONS.map(o => o.value)}
          onChange={(v) => setTweak("accent", v)}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

/* ----- HOW IT WORKS — sync step ----- */
function HowSection() {
  const [step, setStep] = React.useState(0);

  React.useEffect(() => {
    const steps = document.querySelectorAll(".how-step");
    const handlers = [];
    steps.forEach((el) => {
      const idx = parseInt(el.getAttribute("data-step"), 10);
      const onClick = () => setStep(idx);
      const onEnter = () => setStep(idx);
      el.addEventListener("click", onClick);
      el.addEventListener("mouseenter", onEnter);
      handlers.push([el, onClick, onEnter]);
    });

    // Auto-advance when section is visible
    const section = document.querySelector(".how-section");
    let interval;
    let visible = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        visible = e.isIntersecting;
        if (visible) {
          interval = setInterval(() => {
            setStep((prev) => (prev + 1) % 4);
          }, 3500);
        } else {
          if (interval) clearInterval(interval);
        }
      });
    }, { threshold: 0.4 });
    if (section) io.observe(section);

    return () => {
      handlers.forEach(([el, c, e]) => {
        el.removeEventListener("click", c);
        el.removeEventListener("mouseenter", e);
      });
      if (interval) clearInterval(interval);
      io.disconnect();
    };
  }, []);

  // Sync DOM .active class
  React.useEffect(() => {
    document.querySelectorAll(".how-step").forEach((el) => {
      const idx = parseInt(el.getAttribute("data-step"), 10);
      el.classList.toggle("active", idx === step);
    });
  }, [step]);

  return <window.ParcelleCanvas step={step} />;
}

/* ----- MOUNT ----- */
const heroMount = document.getElementById("chat-mount");
if (heroMount) {
  ReactDOM.createRoot(heroMount).render(<window.HeroChat />);
}

const canvasMount = document.getElementById("how-canvas-inner");
if (canvasMount) {
  ReactDOM.createRoot(canvasMount).render(<HowSection />);
}

// Apply default accent (yellow, fixed — Tweaks disabled)
applyAccent(TWEAK_DEFAULTS.accent);