/* ==================================================================
   PROSPER FINANCE — TWEAKS APP
   Loaded after tweaks-panel.jsx (which globals: useTweaks, TweaksPanel,
   TweakSection, TweakRadio, TweakSelect, TweakToggle …)
================================================================== */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "green",
  "fontPair": "sora-inter",
  "headline": "B",
  "showFloaters": true
}/*EDITMODE-END*/;

const PALETTES = {
  blue:   { name: 'Default Blue',  accent: '#4F6FFF', accentDark: '#3554E8', accentLight: '#EEF1FF', glow: 'rgba(79,111,255,.22)',  soft: 'rgba(79,111,255,.08)' },
  green:  { name: 'Verde Prosper', accent: '#1A6B47', accentDark: '#0F5234', accentLight: '#E1F5EE', glow: 'rgba(26,107,71,.22)',   soft: 'rgba(26,107,71,.08)'  },
  plum:   { name: 'Plum Editorial',accent: '#7C3AED', accentDark: '#6326D6', accentLight: '#F1ECFD', glow: 'rgba(124,58,237,.22)',  soft: 'rgba(124,58,237,.08)' },
  amber:  { name: 'Amber Warm',    accent: '#D97706', accentDark: '#B45309', accentLight: '#FEF3C7', glow: 'rgba(217,119,6,.24)',   soft: 'rgba(217,119,6,.08)'  },
};

const FONT_PAIRS = {
  'sora-inter':  { name: 'Sora + Inter',         display: "'Sora', sans-serif",             body: "'Inter', sans-serif",             import: 'Sora:wght@500;600;700|Inter:wght@400;500;600' },
  'jakarta':     { name: 'Plus Jakarta',         display: "'Plus Jakarta Sans', sans-serif", body: "'Plus Jakarta Sans', sans-serif", import: 'Plus+Jakarta+Sans:wght@400;500;600;700' },
  'sora-dmsans': { name: 'Sora + DM Sans',       display: "'Sora', sans-serif",             body: "'DM Sans', sans-serif",           import: 'Sora:wght@500;600;700|DM+Sans:wght@400;500;600' },
  'instrument':  { name: 'Instrument + Inter',   display: "'Instrument Serif', serif",      body: "'Inter', sans-serif",             import: 'Instrument+Serif|Inter:wght@400;500;600' },
};

const HEADLINES = {
  A: { html: 'Seu dinheiro, <em>finalmente sob controle.</em>', sub: 'Saiba exatamente onde cada real vai — e o que fazer para sobrar mais no fim do mês.' },
  B: { html: 'Você merecia um assessor financeiro pessoal. <em>Agora tem.</em>', sub: 'O Prosper Finance organiza suas finanças e ainda te diz o que fazer com elas. Controle de gastos, análise por categoria e um agente de IA disponível 24h.' },
  C: { html: 'Planilha não basta. App básico não resolve. <em>É hora de evoluir.</em>', sub: 'Controle completo das suas finanças, com inteligência artificial trabalhando por você — em um app simples, rápido e direto ao ponto.' },
};

const loadedFontPairs = new Set();
function ensureFontPair(key) {
  if (loadedFontPairs.has(key)) return;
  loadedFontPairs.add(key);
  const cfg = FONT_PAIRS[key];
  if (!cfg || !cfg.import) return;
  const families = cfg.import.split('|').map(f => 'family=' + f).join('&');
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = `https://fonts.googleapis.com/css2?${families}&display=swap`;
  document.head.appendChild(link);
}

function applyTweaks(t) {
  const root = document.documentElement;
  const palette = PALETTES[t.palette] || PALETTES.blue;
  root.style.setProperty('--accent',       palette.accent);
  root.style.setProperty('--accent-dark',  palette.accentDark);
  root.style.setProperty('--accent-light', palette.accentLight);
  root.style.setProperty('--accent-glow',  palette.glow);
  root.style.setProperty('--accent-soft',  palette.soft);

  const pair = FONT_PAIRS[t.fontPair] || FONT_PAIRS['sora-inter'];
  ensureFontPair(t.fontPair);
  root.style.setProperty('--font-display', pair.display);
  root.style.setProperty('--font-body',    pair.body);

  const h1  = document.getElementById('hero-h');
  const sub = document.getElementById('hero-sub');
  if (h1  && HEADLINES[t.headline]) h1.innerHTML  = HEADLINES[t.headline].html;
  if (sub && HEADLINES[t.headline]) sub.textContent = HEADLINES[t.headline].sub;

  document.querySelectorAll('.floater').forEach(f => {
    f.style.display = t.showFloaters ? '' : 'none';
  });

  // Persist palette + font choice to localStorage so other pages (sobre,
  // privacidade, etc.) read the same theme via theme-bootstrap.js
  try {
    localStorage.setItem('prosper-theme', JSON.stringify({
      palette: t.palette,
      fontPair: t.fontPair
    }));
  } catch (e) { /* private mode / quota — non-fatal */ }
}

function ProsperTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Aparência" />
      <TweakSelect
        label="Paleta"
        value={t.palette}
        onChange={v => setTweak('palette', v)}
        options={Object.keys(PALETTES).map(k => ({ value: k, label: PALETTES[k].name }))}
      />
      <TweakSelect
        label="Tipografia"
        value={t.fontPair}
        onChange={v => setTweak('fontPair', v)}
        options={Object.keys(FONT_PAIRS).map(k => ({ value: k, label: FONT_PAIRS[k].name }))}
      />

      <TweakSection label="Hero (A/B)" />
      <TweakRadio
        label="Headline"
        value={t.headline}
        onChange={v => setTweak('headline', v)}
        options={['A', 'B', 'C']}
      />
      <TweakToggle
        label="Cards flutuantes"
        value={t.showFloaters}
        onChange={v => setTweak('showFloaters', v)}
      />
    </TweaksPanel>
  );
}

const tweaksRoot = document.createElement('div');
tweaksRoot.id = '__tweaks-root';
document.body.appendChild(tweaksRoot);
ReactDOM.createRoot(tweaksRoot).render(<ProsperTweaks />);
applyTweaks(TWEAK_DEFAULTS);