/* tweaks.jsx — Carla Salvat theme editor (palette + per-level fonts).
   Runs on every page that loads it. Choices persist via localStorage
   ('cs_tweaks_v1') and a small inline boot script in every page <head>
   applies them on load so the rest of the site reflects the user's choices.
   Exposes window.__csOpenTweaks() so a header button can open the panel. */

// ----- Palettes (10) -----  [bg-primary, bg-secondary, ivory, sand, accent]
const PALETTES = {
  'Forest noir'      : ['#0F1410', '#1C2620', '#F5F2EC', '#B8AC9B', '#EFE7DA'],
  'Pure mono'        : ['#0A0A0A', '#161616', '#F5F5F5', '#999999', '#FFFFFF'],
  'Warm earth'       : ['#1A1410', '#2A2218', '#F5EDDE', '#B8A582', '#D9A87A'],
  'Cool slate'       : ['#0E1216', '#1A1F26', '#E8ECF0', '#8A95A5', '#C5D0E0'],
  'Ocean depth'      : ['#0A1818', '#142828', '#EDF4F2', '#9FB3B0', '#C8D9D5'],
  'Champagne noir'   : ['#0A0A0A', '#161616', '#F5EFE0', '#C5A572', '#D4AF7A'],
  'Olivier sauvage'  : ['#15170F', '#20231A', '#F0EAD9', '#A8A07D', '#BF9E5F'],
  'Velours rouge'    : ['#1A0E0F', '#2A1518', '#F5EBE7', '#B89F95', '#A4544F'],
  'Terre cuite'      : ['#1A100B', '#2A1A12', '#F5EBE0', '#BFA68C', '#C97D4B'],
  'Lavande nuit'     : ['#110F18', '#1B1827', '#EFEBF5', '#A39CB8', '#8E7CB5'],
};

const FONT_OPTIONS = {
  display: [
    'EB Garamond',
    'Cormorant Garamond',
    'Playfair Display',
    'DM Serif Display',
    'Italiana',
    'Marcellus',
    'Cinzel',
    'Anton',
    'Bebas Neue',
    'Archivo Black',
    'Big Shoulders Display',
    'Oswald',
  ],
  body: [
    'Manrope',
    'Inter',
    'DM Sans',
    'Outfit',
    'Karla',
    'Work Sans',
    'Lato',
    'Source Sans 3',
  ],
  tag: [
    'Permanent Marker',
    'Caveat Brush',
    'Reenie Beanie',
    'Shadows Into Light Two',
    'Rubik Mono One',
    'Indie Flower',
    'Dancing Script',
    'Great Vibes',
    'Sacramento',
  ],
};

const TWEAK_DEFAULTS = {
  palette: PALETTES['Forest noir'],
  paletteName: 'Forest noir',
  fontH1:   'EB Garamond',
  fontH2:   'EB Garamond',
  fontH3:   'EB Garamond',
  fontBody: 'Manrope',
  fontTag:  'Permanent Marker',
};

// ----- Apply tweaks to CSS vars + meta -----
function applyTweaks(t) {
  const r = document.documentElement;
  if (t.palette && t.palette.length === 5) {
    r.style.setProperty('--bg-primary',   t.palette[0]);
    r.style.setProperty('--bg-secondary', t.palette[1]);
    r.style.setProperty('--ivory',        t.palette[2]);
    r.style.setProperty('--sand',         t.palette[3]);
    r.style.setProperty('--accent',       t.palette[4]);
    r.style.setProperty('--accent-hover', t.palette[4]);
    r.style.setProperty('--accent-soft',  hexToRgba(t.palette[4], 0.06));
    r.style.setProperty('--border',       hexToRgba(t.palette[2], 0.10));
    r.style.setProperty('--border-strong',hexToRgba(t.palette[2], 0.22));
    r.style.setProperty('--surface-deep', darken(t.palette[0], 0.4));
  }
  if (t.fontH1)   r.style.setProperty('--font-h1',   '"' + t.fontH1 + '", serif');
  if (t.fontH2)   r.style.setProperty('--font-h2',   '"' + t.fontH2 + '", serif');
  if (t.fontH3)   r.style.setProperty('--font-h3',   '"' + t.fontH3 + '", serif');
  if (t.fontBody) r.style.setProperty('--font-body', '"' + t.fontBody + '", system-ui, sans-serif');
  if (t.fontTag)  r.style.setProperty('--font-tag',  '"' + t.fontTag + '", cursive');
}

function hexToRgba(hex, a) {
  if (!hex || hex[0] !== '#') return hex;
  let h = hex.slice(1);
  if (h.length === 3) h = h.split('').map(c => c+c).join('');
  const r = parseInt(h.slice(0,2),16), g = parseInt(h.slice(2,4),16), b = parseInt(h.slice(4,6),16);
  return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
}
function darken(hex, ratio) {
  if (!hex || hex[0] !== '#') return hex;
  let h = hex.slice(1);
  if (h.length === 3) h = h.split('').map(c => c+c).join('');
  let r = parseInt(h.slice(0,2),16), g = parseInt(h.slice(2,4),16), b = parseInt(h.slice(4,6),16);
  r = Math.max(0, Math.round(r * (1 - ratio)));
  g = Math.max(0, Math.round(g * (1 - ratio)));
  b = Math.max(0, Math.round(b * (1 - ratio)));
  return '#' + [r,g,b].map(n => n.toString(16).padStart(2,'0')).join('');
}

// Expose for the inline boot script on other pages and for header button
window.__csApplyTweaks = applyTweaks;
window.__csPalettes = PALETTES;
window.__csOpenTweaks = function() {
  window.postMessage({ type: '__activate_edit_mode' }, '*');
};

// ----- React App -----
function App() {
  const [t, setTweak] = useTweaks(loadInitialTweaks());

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

  React.useEffect(() => {
    try { localStorage.setItem('cs_tweaks_v1', JSON.stringify(t)); } catch (e) {}
  }, [t]);

  const paletteOptions = Object.entries(PALETTES).map(([name, arr]) => arr);
  const paletteNames = Object.keys(PALETTES);

  const fontSelect = (label, value, key, options) => (
    <div style={{ marginBottom: 12 }}>
      <div style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#6F665C', marginBottom: 6 }}>{label}</div>
      <select
        value={value}
        onChange={(e) => setTweak(key, e.target.value)}
        style={{
          width: '100%',
          padding: '10px 12px',
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.12)',
          color: 'inherit',
          fontFamily: '"' + value + '", sans-serif',
          fontSize: 16,
          cursor: 'pointer',
          outline: 'none',
          borderRadius: 4,
        }}
      >
        {options.map((o) => (
          <option key={o} value={o} style={{ fontFamily: o }}>{o}</option>
        ))}
      </select>
    </div>
  );

  return (
    <TweaksPanel title="Personnaliser">
      <TweakSection label="Palette" />
      <TweakColor
        label="Palette de couleurs"
        value={t.palette}
        options={paletteOptions}
        onChange={(v) => {
          const idx = paletteOptions.findIndex(p => p.join('|') === v.join('|'));
          setTweak({ palette: v, paletteName: idx >= 0 ? paletteNames[idx] : '' });
        }}
      />
      <div style={{ fontSize: 12, color: '#888', textAlign: 'center', marginBottom: 16 }}>
        {t.paletteName ? t.paletteName : 'Custom'}
      </div>

      <TweakSection label="Typographies" />
      {fontSelect('Titres H1 (hero, page titles)',     t.fontH1,   'fontH1',   FONT_OPTIONS.display)}
      {fontSelect('Titres H2 (sections)',              t.fontH2,   'fontH2',   FONT_OPTIONS.display)}
      {fontSelect('Titres H3 (sub-sections)',          t.fontH3,   'fontH3',   FONT_OPTIONS.display)}
      {fontSelect('Texte courant (body, UI)',          t.fontBody, 'fontBody', FONT_OPTIONS.body)}
      {fontSelect('Tag (logo + écriture manuscrite)',  t.fontTag,  'fontTag',  FONT_OPTIONS.tag)}

      <TweakSection label="Reset" />
      <TweakButton onClick={() => {
        Object.entries(TWEAK_DEFAULTS).forEach(([k,v]) => setTweak(k, v));
      }}>
        Réinitialiser
      </TweakButton>
    </TweaksPanel>
  );
}

function loadInitialTweaks() {
  try {
    const raw = localStorage.getItem('cs_tweaks_v1');
    if (raw) {
      const saved = JSON.parse(raw);
      return Object.assign({}, TWEAK_DEFAULTS, saved);
    }
  } catch (e) {}
  return TWEAK_DEFAULTS;
}

const root = ReactDOM.createRoot(document.getElementById('tweaks-root'));
root.render(<App />);
