/* ===========================================================
   App entry — Orbi landing
   =========================================================== */

const BASE_COUNT = 250;

const WAITLIST_PLAN_OPTIONS = ['deudas', 'starter', 'control', 'pymes', 'undecided'];

function normalizeWaitlistPayload({ name, email, plan_interest }) {
  return {
    email: (email || '').trim().toLowerCase(),
    name: name && name.trim() ? name.trim() : undefined,
    plan_interest: plan_interest || undefined
  };
}

window.waitlistAdd = async function (payload) {
  if (!window.zod) return 'error';

  const schema = window.zod.object({
    email: window.zod.string().trim().email('Ese email no parece válido.'),
    name: window.zod.string().trim().min(2, 'Escribí tu nombre.').optional(),
    plan_interest: window.zod.enum(WAITLIST_PLAN_OPTIONS).optional()
  });
  const parsed = schema.safeParse(normalizeWaitlistPayload(payload || {}));
  if (!parsed.success) {
    return {
      status: 'validation_error',
      message: parsed.error.issues[0]?.message || 'Revisá los datos e intentá de nuevo.'
    };
  }

  try {
    const response = await fetch('/api/waitlist', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({
        name: parsed.data.name || null,
        email: parsed.data.email,
        plan_interest: parsed.data.plan_interest || null
      })
    });
    const result = await response.json().catch(() => ({ status: 'error' }));

    if (result.status === 'duplicate') return 'duplicate';
    if (result.status === 'validation_error') return result;
    if (!response.ok || result.status !== 'ok') return 'error';
  } catch {
    return 'error';
  }

  window.dispatchEvent(new Event('orbi:waitlist-changed'));
  return 'ok';
};

/* ----------- Tweak defaults ---------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "fontFamily": "Roboto",
  "density": "compact",
  "accent": "#4B4EE8",
  "headlineWeight": 700,
  "showTrustStrip": true,
  "cardStyle": "modern"
}/*EDITMODE-END*/;

const FONT_STACKS = {
  Roboto: "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif",
  Inter:  "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif",
  System: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
};

const DENSITY_VARS = {
  compact:  { '--section-pad-y': 'clamp(32px, 4vw, 56px)', '--section-gap': 'clamp(20px, 2.5vw, 32px)' },
  regular:  { '--section-pad-y': 'clamp(48px, 6vw, 80px)', '--section-gap': 'clamp(32px, 4vw, 48px)' },
  spacious: { '--section-pad-y': 'clamp(64px, 9vw, 120px)', '--section-gap': 'clamp(40px, 5vw, 64px)' }
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [count, setCount] = React.useState(BASE_COUNT);
  const [prefill, setPrefill] = React.useState('');
  const waitRef = React.useRef(null);

  React.useEffect(() => {
    let cancelled = false;

    async function refreshCount() {
      try {
        const response = await fetch('/api/waitlist-count');
        const result = await response.json();
        if (!cancelled && response.ok && typeof result.count === 'number') {
          setCount(BASE_COUNT + result.count);
        }
      } catch {
        if (!cancelled) setCount(BASE_COUNT);
      }
    }

    const onChange = () => refreshCount();
    refreshCount();
    window.addEventListener('orbi:waitlist-changed', onChange);
    return () => {
      cancelled = true;
      window.removeEventListener('orbi:waitlist-changed', onChange);
    };
  }, []);

  /* Apply tweaks to :root */
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--font-sans', FONT_STACKS[t.fontFamily] || FONT_STACKS.Roboto);
    root.style.setProperty('--brand', t.accent);
    const d = DENSITY_VARS[t.density] || DENSITY_VARS.compact;
    Object.entries(d).forEach(([k, v]) => root.style.setProperty(k, v));
    root.style.setProperty('--headline-weight', String(t.headlineWeight));
    root.dataset.card = t.cardStyle;
  }, [t]);

  function scrollToWaitlist(prefillEmail) {
    if (prefillEmail) setPrefill(prefillEmail);
    setTimeout(() => {
      const el = document.getElementById('waitlist');
      if (el) {
        const y = el.getBoundingClientRect().top + window.pageYOffset - 60;
        window.scrollTo({ top: y, behavior: 'smooth' });
      }
    }, 50);
  }

  return (
    <>
      <Nav onJoin={() => scrollToWaitlist()} />
      <Hero count={count} onJoinScroll={scrollToWaitlist} />
      {t.showTrustStrip && <TrustStrip />}
      <Problem />
      <Products />
      <Features />
      <WaitlistCTA ref={waitRef} prefillEmail={prefill} />
      <FAQ />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Tipografía" />
        <TweakRadio label="Familia" value={t.fontFamily}
          options={['Roboto', 'Inter', 'System']}
          onChange={(v) => setTweak('fontFamily', v)} />
        <TweakSlider label="Peso de título" value={t.headlineWeight}
          min={400} max={900} step={100}
          onChange={(v) => setTweak('headlineWeight', v)} />

        <TweakSection label="Espaciado" />
        <TweakRadio label="Densidad" value={t.density}
          options={['compact', 'regular', 'spacious']}
          onChange={(v) => setTweak('density', v)} />

        <TweakSection label="Tema" />
        <TweakColor label="Acento" value={t.accent}
          options={['#4B4EE8', '#1B1F6E', '#0E9F6E', '#D97757', '#7B2D8E']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSelect label="Estilo de tarjetas" value={t.cardStyle}
          options={[
            {value: 'modern', label: 'Moderno (borde + acento)'},
            {value: 'minimal', label: 'Minimal (sin acento)'},
            {value: 'flat', label: 'Plano (sin sombra)'}
          ]}
          onChange={(v) => setTweak('cardStyle', v)} />

        <TweakSection label="Secciones" />
        <TweakToggle label="Mostrar trust strip" value={t.showTrustStrip}
          onChange={(v) => setTweak('showTrustStrip', v)} />
      </TweaksPanel>
    </>
  );
}

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