// Tweaks for No Past, No Problem
// Three controls: theme treatment, palette accent, type pairing.

const { useEffect: useEffectT } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "editorial",
  "accent": "gold",
  "type": "editorial"
}/*EDITMODE-END*/;

// PALETTE OPTIONS — accent color triplets (glow, glow-soft, ember)
const ACCENT_PALETTES = {
  gold:   { glow: '#cfbf95', soft: '#b69f83', ember: '#a98456', veil: 'rgba(207,191,149,0.18)' },
  ember:  { glow: '#c89160', soft: '#a87650', ember: '#7e5638', veil: 'rgba(200,145,96,0.18)' },
  bronze: { glow: '#b69f83', soft: '#9a8167', ember: '#7d6448', veil: 'rgba(182,159,131,0.18)' },
  pearl:  { glow: '#e8dfc8', soft: '#cfbf95', ember: '#a98456', veil: 'rgba(232,223,200,0.18)' },
};

// TYPE PAIRINGS — display / prose
const TYPE_PAIRINGS = {
  editorial: {
    display: "'League Spartan', 'Nexa', system-ui, sans-serif",
    prose: "'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace",
    label: 'Editorial',
    note: 'League Spartan · JetBrains Mono',
  },
  typewriter: {
    display: "'JetBrains Mono', ui-monospace, monospace",
    prose: "'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace",
    label: 'Typewriter',
    note: 'JetBrains Mono throughout',
  },
  storybook: {
    display: "'Fraunces', 'Caslon', Georgia, serif",
    prose: "'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace",
    label: 'Storybook',
    note: 'Fraunces · JetBrains Mono',
  },
  literary: {
    display: "'EB Garamond', 'Caslon', Georgia, serif",
    prose: "'EB Garamond', Georgia, serif",
    label: 'Literary',
    note: 'EB Garamond throughout',
  },
};

// Inject a webfont link for the optional fonts
function ensureFontLink() {
  if (document.getElementById('npnp-extra-fonts')) return;
  const link = document.createElement('link');
  link.id = 'npnp-extra-fonts';
  link.rel = 'stylesheet';
  link.href = 'https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap';
  document.head.appendChild(link);
}

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

  // Apply tweaks to the document via CSS variables + body classes.
  useEffectT(() => {
    ensureFontLink();
    const root = document.documentElement;
    const body = document.body;

    // accent palette
    const pal = ACCENT_PALETTES[t.accent] || ACCENT_PALETTES.gold;
    root.style.setProperty('--glow', pal.glow);
    root.style.setProperty('--glow-soft', pal.soft);
    root.style.setProperty('--ember', pal.ember);
    root.style.setProperty('--glow-veil', pal.veil);
    root.style.setProperty('--luma-gold', pal.glow);
    root.style.setProperty('--luma-bronze', pal.soft);
    root.style.setProperty('--link-hover', pal.glow);

    // typography
    const tp = TYPE_PAIRINGS[t.type] || TYPE_PAIRINGS.editorial;
    root.style.setProperty('--font-display', tp.display);
    root.style.setProperty('--font-prose', tp.prose);
    root.style.setProperty('--font-ui', tp.prose);

    // theme — page treatment
    body.classList.remove('theme-editorial', 'theme-night', 'theme-dawn');
    body.classList.add('theme-' + (t.theme || 'editorial'));
  }, [t.theme, t.accent, t.type]);

  // For TweakColor: store accent as named key but show color swatches.
  const accentSwatch = (ACCENT_PALETTES[t.accent] || ACCENT_PALETTES.gold).glow;
  const accentSwatches = ['#cfbf95', '#c89160', '#b69f83', '#e8dfc8'];
  const HEX_TO_ACCENT = { '#cfbf95': 'gold', '#c89160': 'ember', '#b69f83': 'bronze', '#e8dfc8': 'pearl' };

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Treatment" />
      <TweakRadio
        label="Theme"
        value={t.theme}
        options={[
          { value: 'editorial', label: 'Editorial' },
          { value: 'night',     label: 'Night' },
          { value: 'dawn',      label: 'Dawn' },
        ]}
        onChange={(v) => setTweak('theme', v)}
      />
      <TweakColor
        label="Accent"
        value={accentSwatch}
        options={accentSwatches}
        onChange={(hex) => setTweak('accent', HEX_TO_ACCENT[hex.toLowerCase()] || 'gold')}
      />

      <TweakSection label="Typography" />
      <TweakSelect
        label="Pairing"
        value={t.type}
        options={[
          { value: 'editorial',  label: 'Editorial · League Spartan + Mono' },
          { value: 'typewriter', label: 'Typewriter · Mono throughout' },
          { value: 'storybook',  label: 'Storybook · Fraunces + Mono' },
          { value: 'literary',   label: 'Literary · EB Garamond throughout' },
        ]}
        onChange={(v) => setTweak('type', v)}
      />
    </TweaksPanel>
  );
}

window.NPNPTweaks = NPNPTweaks;