/* ══════════════════════════════════════════════════════
   CV TWEAKS — panneau de variantes pour les sections CV
   Nécessite React + Babel + tweaks-panel.jsx
   ══════════════════════════════════════════════════════ */
const { useEffect } = React;

const CV_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "expLayout": "Timeline",
  "detail": "Complet",
  "eduMode": "Séparée",
  "skLayout": "Onglets",
  "levels": "Langues seules",
  "position": "Après Projets",
  "showExtras": true
}/*EDITMODE-END*/;

const CV_MAPS = {
  expLayout: { 'Timeline': 'timeline', 'Cartes dépliables': 'cards', 'Liste détaillée': 'list' },
  detail: { 'Complet': 'full', 'Synthétique': 'key' },
  eduMode: { 'Séparée': 'separate', 'Intégrée au parcours': 'integrated' },
  skLayout: { 'Onglets': 'tabs', 'Grilles séparées': 'grids', 'Fusion dans Stack': 'stack' },
  levels: { 'Aucun': 'none', 'Barres partout': 'bars', 'Langues seules': 'langs' },
  position: { 'Avant Projets': 'before', 'Après Projets': 'after' },
};

function CVTweaksApp() {
  const [t, setTweak] = useTweaks(CV_TWEAK_DEFAULTS);

  useEffect(() => {
    if (!window.applyCVTweaks) return;
    window.applyCVTweaks({
      expLayout: CV_MAPS.expLayout[t.expLayout] || 'timeline',
      detail: CV_MAPS.detail[t.detail] || 'full',
      eduMode: CV_MAPS.eduMode[t.eduMode] || 'separate',
      skLayout: CV_MAPS.skLayout[t.skLayout] || 'tabs',
      levels: CV_MAPS.levels[t.levels] || 'langs',
      position: CV_MAPS.position[t.position] || 'before',
      showExtras: !!t.showExtras,
    });
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Expériences" />
      <TweakSelect label="Layout" value={t.expLayout}
        options={['Timeline', 'Cartes dépliables', 'Liste détaillée']}
        onChange={(v) => setTweak('expLayout', v)} />
      <TweakRadio label="Missions" value={t.detail}
        options={['Complet', 'Synthétique']}
        onChange={(v) => setTweak('detail', v)} />
      <TweakRadio label="Position" value={t.position}
        options={['Avant Projets', 'Après Projets']}
        onChange={(v) => setTweak('position', v)} />

      <TweakSection label="Éducation" />
      <TweakRadio label="Présentation" value={t.eduMode}
        options={['Séparée', 'Intégrée au parcours']}
        onChange={(v) => setTweak('eduMode', v)} />

      <TweakSection label="Compétences" />
      <TweakSelect label="Layout" value={t.skLayout}
        options={['Onglets', 'Grilles séparées', 'Fusion dans Stack']}
        onChange={(v) => setTweak('skLayout', v)} />
      <TweakSelect label="Niveaux" value={t.levels}
        options={['Aucun', 'Barres partout', 'Langues seules']}
        onChange={(v) => setTweak('levels', v)} />
      <TweakToggle label="Soft skills & intérêts" value={!!t.showExtras}
        onChange={(v) => setTweak('showExtras', v)} />
    </TweaksPanel>
  );
}

const cvTweaksRoot = document.getElementById('cv-tweaks-root');
if (cvTweaksRoot) {
  ReactDOM.createRoot(cvTweaksRoot).render(<CVTweaksApp />);
}