// frankline-tweaks.jsx · Three expressive tweaks for Frank'line:
//   ① Palette / mood     (TweakColor · 4 curated palettes as swatch chips)
//   ② Type pair          (TweakRadio · Maison / Parisien / Brutaliste)
//   ③ Rythme             (TweakRadio · Magazine vs Boutique)

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette":  ["#EBE2CC", "#DDC8A0", "#B7202E", "#1F3057"],
  "typePair": "Maison",
  "rhythm":   "Magazine"
}/*EDITMODE-END*/;

// ── Palettes ────────────────────────────────────────────────────────────────
// Each palette overrides the full set of --vars used by frankline.css.
// First 4 colors of `swatch` are what the tweak chip shows.
const PALETTES = [
  {
    name: 'Heritage',
    swatch: ['#EBE2CC', '#DDC8A0', '#B7202E', '#1F3057'],
    vars: {
      paper:    '#F4ECD9',
      ivory:    '#EBE2CC',
      'ivory-2':'#DDD3BD',
      'ivory-3':'#C9BFA8',
      ink:      '#1F3057',
      'ink-2':  '#2A3D6A',
      'ink-3':  '#3B4F7E',
      mute:     '#837C6B',
      'mute-2': '#ADA597',
      line:     '#C9BFA8',
      'line-2': '#DBD1BC',
      blush:    '#DDC8A0',
      'blush-2':'#E8D9B6',
      rose:     '#B7202E',
      'rose-2': '#8E1822',
    },
  },
  {
    name: 'Maison',
    swatch: ['#F4F1E8', '#E5B5A8', '#7A4A3E', '#15130F'],
    vars: {
      paper:    '#FBF8F1',
      ivory:    '#F4F1E8',
      'ivory-2':'#ECE7DA',
      'ivory-3':'#E0D9C5',
      ink:      '#15130F',
      'ink-2':  '#2A2620',
      'ink-3':  '#4A4239',
      mute:     '#87807A',
      'mute-2': '#B3AC9E',
      line:     '#D9D2C4',
      'line-2': '#EAE3D2',
      blush:    '#E5B5A8',
      'blush-2':'#F2D8CF',
      rose:     '#7A4A3E',
      'rose-2': '#5A3429',
    },
  },
  {
    name: 'Atelier',
    swatch: ['#EFE7D5', '#D9B07F', '#8B5A2B', '#2A2014'],
    vars: {
      paper:    '#F6EFDE',
      ivory:    '#EFE7D5',
      'ivory-2':'#E0D2B5',
      'ivory-3':'#D0BD96',
      ink:      '#2A2014',
      'ink-2':  '#3D3220',
      'ink-3':  '#5A4630',
      mute:     '#8B7A5A',
      'mute-2': '#B5A580',
      line:     '#CFBC95',
      'line-2': '#DBC8A4',
      blush:    '#D9B07F',
      'blush-2':'#E8C9A0',
      rose:     '#8B5A2B',
      'rose-2': '#6E4520',
    },
  },
  {
    name: 'Méditerranée',
    swatch: ['#F2EBD9', '#E89F7C', '#C04E2C', '#1E2940'],
    vars: {
      paper:    '#F8F3E5',
      ivory:    '#F2EBD9',
      'ivory-2':'#E5DCC5',
      'ivory-3':'#D5CAB0',
      ink:      '#1E2940',
      'ink-2':  '#2C3A55',
      'ink-3':  '#445574',
      mute:     '#7A8499',
      'mute-2': '#A8B0C0',
      line:     '#D0C9B5',
      'line-2': '#E2DBC6',
      blush:    '#E89F7C',
      'blush-2':'#F2BBA0',
      rose:     '#C04E2C',
      'rose-2': '#9A3D21',
    },
  },
  {
    name: 'Hivernale',
    swatch: ['#E9E8EC', '#B5A9C2', '#5A4A6E', '#1A1A1F'],
    vars: {
      paper:    '#F1F0F3',
      ivory:    '#E9E8EC',
      'ivory-2':'#D8D6DD',
      'ivory-3':'#C0BCC7',
      ink:      '#1A1A1F',
      'ink-2':  '#2A2A33',
      'ink-3':  '#454553',
      mute:     '#7A7686',
      'mute-2': '#A8A2B5',
      line:     '#CECAD3',
      'line-2': '#DCD8E0',
      blush:    '#B5A9C2',
      'blush-2':'#CFC5D6',
      rose:     '#5A4A6E',
      'rose-2': '#3D3450',
    },
  },
];

const findPaletteBySwatch = (sw) => {
  const k = JSON.stringify(sw).toLowerCase();
  return PALETTES.find((p) => JSON.stringify(p.swatch).toLowerCase() === k) || PALETTES[0];
};

// ── Type pairs ──────────────────────────────────────────────────────────────
const TYPE_PAIRS = {
  Maison: {
    serif: '"Cormorant Garamond", Garamond, "Times New Roman", serif',
    sans:  '"Manrope", -apple-system, sans-serif',
    google: 'Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Manrope:wght@300;400;500;600',
    serifWeight: '300',
  },
  Couture: {
    serif: '"Bodoni Moda", "Times New Roman", serif',
    sans:  '"Hanken Grotesk", -apple-system, sans-serif',
    google: 'Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400&family=Hanken+Grotesk:wght@300;400;500;600',
    serifWeight: '500',
  },
  Brutaliste: {
    serif: '"Instrument Serif", "Times New Roman", serif',
    sans:  '"Space Grotesk", -apple-system, sans-serif',
    google: 'Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@300;400;500;600',
    serifWeight: '400',
  },
};

const loadFontPair = (name) => {
  const tp = TYPE_PAIRS[name];
  if (!tp) return;
  const id = 'tweak-font-' + name;
  if (document.getElementById(id)) return;
  const link = document.createElement('link');
  link.id = id;
  link.rel = 'stylesheet';
  link.href = 'https://fonts.googleapis.com/css2?family=' + tp.google + '&display=swap';
  document.head.appendChild(link);
};

// ── Mount ───────────────────────────────────────────────────────────────────
function FranklineTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Palette → CSS vars
  React.useEffect(() => {
    const p = findPaletteBySwatch(t.palette);
    Object.entries(p.vars).forEach(([k, v]) => {
      document.documentElement.style.setProperty('--' + k, v);
    });
    document.documentElement.setAttribute('data-palette', p.name.toLowerCase());
  }, [t.palette]);

  // Type pair → CSS vars + dynamic Google Fonts
  React.useEffect(() => {
    const tp = TYPE_PAIRS[t.typePair] || TYPE_PAIRS.Maison;
    loadFontPair(t.typePair);
    document.documentElement.style.setProperty('--serif', tp.serif);
    document.documentElement.style.setProperty('--sans',  tp.sans);
    document.documentElement.style.setProperty('--serif-weight', tp.serifWeight);
    document.documentElement.setAttribute('data-type', t.typePair.toLowerCase());
  }, [t.typePair]);

  // Rhythm → body class
  React.useEffect(() => {
    document.body.classList.toggle('rhythm-boutique', t.rhythm === 'Boutique');
    document.body.classList.toggle('rhythm-magazine', t.rhythm === 'Magazine');
  }, [t.rhythm]);

  return (
    <TweaksPanel title="Tweaks · Frank'line">
      <TweakSection label="Humeur" />
      <TweakColor
        label="Palette"
        value={t.palette}
        options={PALETTES.map((p) => p.swatch)}
        onChange={(v) => setTweak('palette', v)}
      />

      <TweakSection label="Typographie" />
      <TweakRadio
        label="Accord"
        value={t.typePair}
        options={['Maison', 'Couture', 'Brutaliste']}
        onChange={(v) => setTweak('typePair', v)}
      />

      <TweakSection label="Voix éditoriale" />
      <TweakRadio
        label="Rythme"
        value={t.rhythm}
        options={['Magazine', 'Boutique']}
        onChange={(v) => setTweak('rhythm', v)}
      />
    </TweaksPanel>
  );
}

const __frmnt = document.createElement('div');
__frmnt.id = '__frankline_tweaks';
document.body.appendChild(__frmnt);
ReactDOM.createRoot(__frmnt).render(<FranklineTweaks />);