/* global React */
// Bataj-specific Tweaks panel — pluggable styles via CSS variables.

const FONT_PAIRS = {
  editorial: { label: 'Editorial', display: '"Instrument Serif", serif',     sans: '"Geist", system-ui, sans-serif' },
  classico:  { label: 'Clásica',   display: '"Cormorant Garamond", serif',   sans: '"Geist", system-ui, sans-serif' },
  fraunces:  { label: 'Romántica', display: '"Fraunces", serif',             sans: '"Geist", system-ui, sans-serif' },
  moderna:   { label: 'Moderna',   display: '"Bricolage Grotesque", sans-serif', sans: '"Geist", system-ui, sans-serif' },
  neutra:    { label: 'Neutra',    display: '"Geist", system-ui, sans-serif',     sans: '"Geist", system-ui, sans-serif' },
};

const TONES = {
  bone:    { label: 'Bone',    bg: '#F2ECE2', paper: '#F7F2E9', cream: '#E9E1D3', ink: '#0E0D0B' },
  snow:    { label: 'Snow',    bg: '#F4F1EB', paper: '#FAF7F1', cream: '#ECE4D3', ink: '#0E0D0B' },
  stone:   { label: 'Stone',   bg: '#E9E1D3', paper: '#F2ECE2', cream: '#DCD2BE', ink: '#0E0D0B' },
  linen:   { label: 'Linen',   bg: '#EDE7DA', paper: '#F4EFE3', cream: '#E1D8C5', ink: '#181613' },
  lavanda: { label: 'Lavanda', bg: '#EBE7F0', paper: '#F4F0FA', cream: '#D8D2E2', ink: '#211D2A' },
  salmon:  { label: 'Salmón',  bg: '#F4E6E0', paper: '#FAF1ED', cream: '#E8D2C8', ink: '#241917' },
  mist:    { label: 'Mist',    bg: '#E7E9EE', paper: '#F1F2F6', cream: '#D7DAE2', ink: '#161A23' },
};

const ACCENTS = [
  '#7D78A3', // lavanda
  '#A29CBB', // lavanda clara
  '#F1B2AC', // salón
  '#C7502B', // terracota
  '#5F7A52', // sage
  '#2C5F7A', // cobalto
  '#7A3F66', // ciruela
  '#B8893B', // miel
  '#0E0D0B', // ink
];

// Full palettes — first is primary accent, second/third are secondary used for
// animated bg orbs and accent-tinted surfaces.
const PALETTES = [
  ['#7D78A3', '#A29CBB', '#F1B2AC'], // Lavanda · requested
  ['#C7502B', '#B8893B', '#5F7A52'], // Tierra
  ['#2C5F7A', '#F1B2AC', '#A29CBB'], // Cobalto + coral
  ['#5F7A52', '#7A3F66', '#B8893B'], // Sage + plum
  ['#0E0D0B', '#6B665C', '#C7502B'], // Mono + clay
  ['#7A3F66', '#F1B2AC', '#7D78A3'], // Ciruela + salón
];

function applyTheme(t) {
  const root = document.documentElement;
  const fp = FONT_PAIRS[t.fontPair] || FONT_PAIRS.editorial;
  const tone = TONES[t.tone] || TONES.bone;
  root.style.setProperty('--bataj-display', fp.display);
  root.style.setProperty('--bataj-sans',    fp.sans);
  root.style.setProperty('--bataj-bg',      tone.bg);
  root.style.setProperty('--bataj-paper',   tone.paper);
  root.style.setProperty('--bataj-cream',   tone.cream);
  root.style.setProperty('--bataj-ink',     tone.ink);
  root.style.setProperty('--bataj-accent',  t.accent  || '#7D78A3');
  root.style.setProperty('--bataj-accent2', t.accent2 || t.accent || '#A29CBB');
  root.style.setProperty('--bataj-accent3', t.accent3 || t.accent || '#F1B2AC');
}

function BatajTweaks({ t, setTweak, showProductStyle = true }) {
  const fontOptions = Object.keys(FONT_PAIRS);
  const toneOptions = Object.keys(TONES);

  return (
    <TweaksPanel title="Tweaks · Bataj">
      <TweakSection label="Tipografía" />
      <TweakSelect
        label="Pareja"
        value={t.fontPair}
        options={fontOptions.map((k) => ({ value: k, label: FONT_PAIRS[k].label }))}
        onChange={(v) => setTweak('fontPair', v)}
      />
      <div className="twk-row">
        <div className="twk-lbl"><span>Preview</span></div>
        <div style={{
          padding: '10px 12px',
          borderRadius: 8,
          background: 'rgba(255,255,255,.55)',
          border: '.5px solid rgba(0,0,0,.08)',
          fontFamily: (FONT_PAIRS[t.fontPair] || FONT_PAIRS.editorial).display,
          fontSize: 26,
          lineHeight: 1,
          letterSpacing: '-0.01em',
        }}>
          Software <em style={{ color: t.accent }}>con identidad.</em>
        </div>
      </div>

      <TweakSection label="Acento" />
      <TweakColor
        label="Paleta"
        value={[t.accent, t.accent2, t.accent3]}
        options={PALETTES}
        onChange={(v) => setTweak({ accent: v[0], accent2: v[1], accent3: v[2] })}
      />
      <TweakColor
        label="Principal"
        value={t.accent}
        options={ACCENTS}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakColor
        label="Secundario"
        value={t.accent2}
        options={ACCENTS}
        onChange={(v) => setTweak('accent2', v)}
      />
      <TweakColor
        label="Terciario"
        value={t.accent3}
        options={ACCENTS}
        onChange={(v) => setTweak('accent3', v)}
      />

      <TweakSection label="Tono de fondo" />
      <TweakSelect
        label="Paleta"
        value={t.tone}
        options={toneOptions.map((k) => ({ value: k, label: TONES[k].label }))}
        onChange={(v) => setTweak('tone', v)}
      />
      <div className="twk-row">
        <div className="twk-lbl"><span>Muestras</span></div>
        <div style={{ display: 'flex', gap: 6 }}>
          {[TONES[t.tone].bg, TONES[t.tone].paper, TONES[t.tone].cream, TONES[t.tone].ink, t.accent].map((c, i) => (
            <div key={i} style={{
              flex: 1, height: 28, borderRadius: 6,
              background: c, border: '.5px solid rgba(0,0,0,.1)',
            }} />
          ))}
        </div>
      </div>

      {showProductStyle && (
        <>
          {/* productStyle toggle removed per request — v1 stays on editorial */}
        </>
      )}

      <TweakSection label="Acciones" />
      <TweakButton
        label="Restablecer · Lavanda + Editorial"
        onClick={() => setTweak({
          fontPair: 'editorial',
          accent:  '#7D78A3', accent2: '#A29CBB', accent3: '#F1B2AC',
          tone: 'lavanda',
        })}
        secondary
      />
    </TweaksPanel>
  );
}

// Eagerly apply defaults at script-eval time so colors/fonts are correct on first paint.
if (window.TWEAK_DEFAULTS) applyTheme(window.TWEAK_DEFAULTS);

Object.assign(window, { BatajTweaks, applyTheme, FONT_PAIRS, TONES, ACCENTS });