/* Tweaks panel for Playbook Plateforme Agentique */
/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSelect, TweakColor, TweakToggle */

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "recommended",
  "accent": "#7E1F2F",
  "corpsVariant": "anatomy",
  "circulationVariant": "vertical",
  "underlineHeadline": true,
  "showProgressTicks": true
}/*EDITMODE-END*/;

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

  useEffect(() => {
    if (window.__playbook?.setHeadline) {
      window.__playbook.setHeadline(t.headline);
    }
  }, [t.headline]);

  useEffect(() => {
    const u = document.querySelector('.hero h1 .underline-doodle');
    if (u) u.style.display = t.underlineHeadline ? '' : 'none';
  }, [t.underlineHeadline]);

  useEffect(() => {
    document.documentElement.style.setProperty('--bordeaux', t.accent);
    // Compute deeper version
    document.documentElement.style.setProperty('--bordeaux-deep', shade(t.accent, -0.18));
    document.documentElement.style.setProperty('--bordeaux-ink',  shade(t.accent, -0.32));
    document.documentElement.style.setProperty('--bordeaux-soft', tint(t.accent, 0.75));
    document.documentElement.style.setProperty('--bordeaux-wash', t.accent + '14');
    // Re-render the doodles so they pick up the new ink/accent
    if (window.Doodles) {
      document.querySelectorAll('svg[data-doodle]').forEach(s => { s.dataset.rendered = ''; });
      window.Doodles.renderAll();
    }
  }, [t.accent]);

  useEffect(() => {
    document.querySelectorAll('.chapter-ticks').forEach(el => {
      el.style.display = t.showProgressTicks ? '' : 'none';
    });
  }, [t.showProgressTicks]);

  useEffect(() => {
    document.body.dataset.corpsVariant = t.corpsVariant;
    if (window.Doodles) {
      const corps = document.querySelector('svg[data-doodle="corps"]');
      if (corps) { corps.dataset.rendered = ''; window.Doodles.renderAll(); }
    }
  }, [t.corpsVariant]);

  useEffect(() => {
    document.body.dataset.circulationVariant = t.circulationVariant;
    if (window.Doodles) {
      const c = document.querySelector('svg[data-doodle="circulation"]');
      if (c) { c.dataset.rendered = ''; window.Doodles.renderAll(); }
    }
  }, [t.circulationVariant]);

  return (
    <TweaksPanel title="Tweaks">

      <TweakSection label="Accroche du hero">
        <TweakSelect
          label="Variante"
          value={t.headline}
          options={[
            { value: 'recommended', label: '1M€/an avec agents IA (actuelle)' },
            { value: 'original', label: 'Plateforme agentique vendable' },
            { value: 'differentiation', label: 'Ne deviens pas une agence IA' },
            { value: 'pain', label: 'Prison opérationnelle' },
          ]}
          onChange={v => setTweak('headline', v)}
        />
        <TweakToggle
          label="Soulignement doodle"
          value={t.underlineHeadline}
          onChange={v => setTweak('underlineHeadline', v)}
        />
      </TweakSection>

      <TweakSection label="Couleur d'accent">
        <TweakColor
          label="Accent"
          value={t.accent}
          options={['#7E1F2F', '#5A1622', '#A02B3F', '#C2410C', '#1F4E5F']}
          onChange={v => setTweak('accent', v)}
        />
      </TweakSection>

      <TweakSection label="Schéma · Corps agentique">
        <TweakRadio
          label="Variante"
          value={t.corpsVariant}
          options={[
            { value: 'anatomy', label: 'Anatomie' },
            { value: 'orbit', label: 'Orbital' },
            { value: 'machine', label: 'Machine' },
          ]}
          onChange={v => setTweak('corpsVariant', v)}
        />
      </TweakSection>

      <TweakSection label="Schéma · Circulation">
        <TweakRadio
          label="Variante"
          value={t.circulationVariant}
          options={[
            { value: 'vertical', label: 'Vertical' },
            { value: 'radial', label: 'Radial' },
          ]}
          onChange={v => setTweak('circulationVariant', v)}
        />
      </TweakSection>

      <TweakSection label="Navigation">
        <TweakToggle
          label="Rail de chapitres (gauche)"
          value={t.showProgressTicks}
          onChange={v => setTweak('showProgressTicks', v)}
        />
      </TweakSection>

    </TweaksPanel>
  );
}

// Color helpers
function hexToRgb(h) {
  const m = h.replace('#', '');
  const n = parseInt(m, 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}
function rgbToHex(r, g, b) {
  return '#' + [r, g, b].map(v => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('');
}
function shade(hex, pct) {
  const { r, g, b } = hexToRgb(hex);
  if (pct < 0) {
    const k = 1 + pct;
    return rgbToHex(r * k, g * k, b * k);
  }
  return rgbToHex(r + (255 - r) * pct, g + (255 - g) * pct, b + (255 - b) * pct);
}
function tint(hex, pct) { return shade(hex, pct); }

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