/* App — wizard state + Tweaks panel + frame */

const { useState: useStateApp, useMemo: useMemoApp, useEffect: useEffectApp } = React;

/* Palettes — vary bg/accent harmoniously */
const PALETTES = {
  navy: {
    label: 'Marino + Naranja',
    '--bg': '#0A2540',
    '--bg-2': '#0d2d4d',
    '--fg': '#F5EFE6',
    '--fg-soft': 'rgba(245,239,230,0.82)',
    '--fg-mute': 'rgba(245,239,230,0.62)',
    '--accent': '#FF5B3A',
    '--accent-ink': '#1a0500',
    '--card': 'rgba(255,255,255,0.04)',
    '--card-line': 'rgba(255,255,255,0.10)',
    bodyBg: '#07182b',
    stageGrad: 'radial-gradient(1200px 600px at 80% -10%, rgba(255,91,58,0.10), transparent 60%), radial-gradient(900px 500px at -10% 100%, rgba(255,91,58,0.06), transparent 60%), #07182b',
    logoBg: '#F5EFE6',
  },
  cream: {
    label: 'Crema + Tinta',
    '--bg': '#F5EFE5',
    '--bg-2': '#EDE5D6',
    '--fg': '#1A1A1A',
    '--fg-soft': 'rgba(26,26,26,0.8)',
    '--fg-mute': 'rgba(26,26,26,0.62)',
    '--accent': '#1A1A1A',
    '--accent-ink': '#F5EFE5',
    '--card': 'rgba(26,26,26,0.04)',
    '--card-line': 'rgba(26,26,26,0.12)',
    bodyBg: '#E9E1D0',
    stageGrad: 'radial-gradient(1200px 600px at 80% -10%, rgba(0,0,0,0.05), transparent 60%), #E9E1D0',
    logoBg: '#1A1A1A',
  },
  sage: {
    label: 'Salvia + Bosque',
    '--bg': '#EFEAD8',
    '--bg-2': '#E5DEC8',
    '--fg': '#1F2D1A',
    '--fg-soft': 'rgba(31,45,26,0.82)',
    '--fg-mute': 'rgba(31,45,26,0.62)',
    '--accent': '#2D4A2B',
    '--accent-ink': '#EFEAD8',
    '--card': 'rgba(31,45,26,0.04)',
    '--card-line': 'rgba(31,45,26,0.14)',
    bodyBg: '#DCD4BC',
    stageGrad: 'radial-gradient(1000px 600px at 90% 10%, rgba(45,74,43,0.10), transparent 60%), #DCD4BC',
    logoBg: '#2D4A2B',
  },
  noir: {
    label: 'Noir + Lima',
    '--bg': '#0D0D0F',
    '--bg-2': '#141416',
    '--fg': '#F2F2F0',
    '--fg-soft': 'rgba(242,242,240,0.82)',
    '--fg-mute': 'rgba(242,242,240,0.6)',
    '--accent': '#D4FF3A',
    '--accent-ink': '#0D0D0F',
    '--card': 'rgba(255,255,255,0.04)',
    '--card-line': 'rgba(255,255,255,0.10)',
    bodyBg: '#000',
    stageGrad: 'radial-gradient(1200px 700px at 80% 0%, rgba(212,255,58,0.08), transparent 60%), #000',
    logoBg: '#F2F2F0',
  },
};

const FONT_PAIRS = {
  bricolage: {
    label: 'Bricolage + Manrope',
    display: "'Bricolage Grotesque', system-ui, sans-serif",
    body: "'Manrope', system-ui, sans-serif",
  },
  instrument: {
    label: 'Instrument Serif + Geist',
    display: "'Instrument Serif', Georgia, serif",
    body: "'Geist', system-ui, sans-serif",
  },
  geist: {
    label: 'Geist + Geist',
    display: "'Geist', system-ui, sans-serif",
    body: "'Geist', system-ui, sans-serif",
  },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "navy",
  "tono": "tu",
  "font": "bricolage",
  "btnShape": "pill",
  "progress": true
}/*EDITMODE-END*/;

const STEPS = ['pain1', 'pain2', 'capture', 'q_areas', 'q_scale', 'q_yesno', 'q_revenue'];

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

  const [stepIdx, setStepIdx] = useStateApp(0);
  const [done, setDone] = useStateApp(false);
  const [state, setState] = useStateApp({
    areas: [],
    scale: null,
    yesno: [null, null, null, null],
    revenue: 2,
    contact: null,
  });

  /* Reset yesno length when copy tone changes (4 items always but be safe) */
  useEffectApp(() => {
    const len = (COPY_VARIANTS[t.tono]?.q3?.items || []).length;
    setState((s) => {
      if (s.yesno.length === len) return s;
      const next = Array(len).fill(null).map((_, i) => s.yesno[i] ?? null);
      return { ...s, yesno: next };
    });
  }, [t.tono]);

  const copy = COPY_VARIANTS[t.tono] || COPY_VARIANTS.tu;
  const palette = PALETTES[t.palette] || PALETTES.navy;
  const fonts = FONT_PAIRS[t.font] || FONT_PAIRS.bricolage;

  /* Apply palette + font as CSS variables on document root */
  useEffectApp(() => {
    const root = document.documentElement;
    Object.entries(palette).forEach(([k, v]) => {
      if (k.startsWith('--')) root.style.setProperty(k, v);
    });
    root.style.setProperty('--font-display', fonts.display);
    root.style.setProperty('--font-body', fonts.body);
    document.body.style.background = palette.bodyBg;
    document.documentElement.style.setProperty('--stage-grad', palette.stageGrad);
    document.documentElement.style.setProperty('--logo-bg', palette.logoBg);
  }, [palette, fonts]);

  const goNext = () => {
    if (stepIdx < STEPS.length - 1) setStepIdx(stepIdx + 1);
    else finish();
  };
  const goBack = () => {
    if (stepIdx > 0) setStepIdx(stepIdx - 1);
    else if (done) setDone(false);
  };
  const restart = () => {
    setStepIdx(0);
    setDone(false);
    setState({ areas: [], scale: null, yesno: [null, null, null, null], revenue: 2, contact: null });
  };

  /* Captura (paso 3): guarda contacto y lo manda a Make AL INSTANTE
     (el lead es nuestro aunque no termine), luego sigue a las preguntas. */
  const onSubmitCapture = (contact) => {
    setState((s) => ({ ...s, contact }));
    const I = window.Integrations;
    if (I) {
      I.sendLead({ name: contact.name, phone: contact.phone, consent: contact.consent, ts: contact.ts });
      I.trackEvent('lead_captured', { step: 'capture' });
    }
    goNext();
  };

  /* Fin del wizard: manda TODAS las respuestas + informe y muestra el informe. */
  const finish = () => {
    const I = window.Integrations;
    if (I) {
      const report = window.Diagnosis ? window.Diagnosis.buildReport(state) : null;
      I.sendCompletion({
        contact: state.contact,
        answers: { areas: state.areas, scale: state.scale, yesno: state.yesno, revenue: state.revenue },
        report: report ? { score: report.score, band: report.band.name } : null,
        ts: new Date().toISOString(),
      });
      I.trackEvent('wizard_completed', { score: window.Diagnosis ? window.Diagnosis.buildReport(state).score : null });
    }
    setDone(true);
  };

  /* Analítica: registra cada pantalla vista (para medir el embudo en GA/Meta). */
  useEffectApp(() => {
    const I = window.Integrations;
    if (!I) return;
    if (done) I.trackEvent('report_view', {});
    else I.trackEvent('step_view', { step: STEPS[stepIdx], index: stepIdx + 1 });
  }, [stepIdx, done]);

  const progress = done ? 100 : ((stepIdx + 1) / STEPS.length) * 100;
  const step = STEPS[stepIdx];
  const btnShape = t.btnShape === 'rect' ? 'btn-shape-rect' : '';

  const S = window.Screens;

  let screenEl = null;
  if (done) {
    screenEl = <window.ScreenReport contact={state.contact} state={state} btnShape={btnShape} onRestart={restart} />;
  } else if (step === 'pain1') {
    screenEl = <S.ScreenPain1 copy={copy.s1} onNext={goNext} btnShape={btnShape} />;
  } else if (step === 'pain2') {
    screenEl = <S.ScreenPain2 copy={copy.s2} onNext={goNext} onBack={goBack} btnShape={btnShape} />;
  } else if (step === 'capture') {
    screenEl = <S.ScreenCapture copy={copy.capture} contact={state.contact}
      onSubmit={onSubmitCapture} onBack={goBack} btnShape={btnShape} />;
  } else if (step === 'q_areas') {
    screenEl = <S.ScreenAreas copy={copy.q1} value={state.areas}
      onChange={(v) => setState((s) => ({ ...s, areas: v }))}
      onNext={goNext} onBack={goBack} btnShape={btnShape} />;
  } else if (step === 'q_scale') {
    screenEl = <S.ScreenScale copy={copy.q2} value={state.scale}
      onChange={(v) => setState((s) => ({ ...s, scale: v }))}
      onNext={goNext} onBack={goBack} btnShape={btnShape} />;
  } else if (step === 'q_yesno') {
    screenEl = <S.ScreenYesNo copy={copy.q3} value={state.yesno}
      onChange={(v) => setState((s) => ({ ...s, yesno: v }))}
      onNext={goNext} onBack={goBack} btnShape={btnShape} />;
  } else if (step === 'q_revenue') {
    screenEl = <S.ScreenRevenue copy={copy.q4} value={state.revenue}
      onChange={(v) => setState((s) => ({ ...s, revenue: v }))}
      onNext={goNext} onBack={goBack} btnShape={btnShape} />;
  }

  return (
    <div className="stage" style={{ background: palette.stageGrad }}>
      <div className="frame">
        <header className="app-header">
          <div className="brand">
            <div className="brand-name">
              <span>Consultoría </span><span>Método</span>
            </div>
          </div>
          {done ? (
            <button className="step-pill" onClick={restart} style={{ cursor: 'pointer', background: 'transparent' }}>
              Reiniciar
            </button>
          ) : (
            <div className="step-pill">{stepIdx + 1} / {STEPS.length}</div>
          )}
        </header>

        {t.progress && !done && (
          <div className="progress">
            <div className="progress-fill" style={{ width: `${progress}%` }}></div>
          </div>
        )}

        <div className="screen-wrap">
          <div className="screen-slot" key={done ? 'done' : step}>
            {screenEl}
          </div>
        </div>
      </div>

      <TweaksPanel>
        <TweakSection label="Estética" />
        <TweakRow label="Paleta">
          <PaletteSwatches value={t.palette} onChange={(v) => setTweak('palette', v)} />
        </TweakRow>
        <TweakSelect
          label="Tipografía"
          value={t.font}
          options={Object.keys(FONT_PAIRS).map((k) => ({ value: k, label: FONT_PAIRS[k].label }))}
          onChange={(v) => setTweak('font', v)}
        />
        <TweakRadio
          label="Botones"
          value={t.btnShape}
          options={[{ value: 'pill', label: 'Pill' }, { value: 'rect', label: 'Rect' }]}
          onChange={(v) => setTweak('btnShape', v)}
        />

        <TweakSection label="Copy" />
        <TweakRadio
          label="Tono"
          value={t.tono}
          options={[
            { value: 'tu', label: 'Tú a tú' },
            { value: 'pro', label: 'Profesional' },
            { value: 'retador', label: 'Retador' },
          ]}
          onChange={(v) => setTweak('tono', v)}
        />

        <TweakSection label="Wizard" />
        <TweakToggle
          label="Mostrar progreso"
          value={t.progress}
          onChange={(v) => setTweak('progress', v)}
        />
        <TweakButton label="Empezar de cero" onClick={restart} />
        <TweakButton label="Saltar al CTA" onClick={() => setStepIdx(STEPS.length - 1)} secondary />
      </TweaksPanel>
    </div>
  );
}

/* Custom palette swatch component override — the TweakColor expects hex codes,
   but we want named palettes. Render a small custom group that calls setTweak. */
/* (Using TweakSelect would work too — keeping TweakColor but adapting via wrapper) */

/* Actually TweakColor only accepts colors. Replace with TweakRadio for palette. */
function PaletteSwatches({ value, onChange }) {
  return (
    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', padding: '4px 0' }}>
      {Object.entries(PALETTES).map(([k, p]) => {
        const active = value === k;
        return (
          <button
            key={k}
            type="button"
            onClick={() => onChange(k)}
            title={p.label}
            style={{
              width: 44, height: 30, borderRadius: 8, cursor: 'pointer',
              border: active ? '2px solid #fff' : '1px solid rgba(255,255,255,0.2)',
              background: p['--bg'], position: 'relative', padding: 0,
              outline: active ? '2px solid rgba(0,0,0,0.5)' : 'none',
              outlineOffset: 0,
            }}
          >
            <span style={{
              position: 'absolute', right: 4, bottom: 4,
              width: 12, height: 12, borderRadius: '50%',
              background: p['--accent'],
            }}></span>
          </button>
        );
      })}
    </div>
  );
}

window.App = App;
window.PaletteSwatches = PaletteSwatches;