/* global React, LIcons */
// Quiz "Começar grátis" — 5 perguntas → resultado com plano recomendado → pagamento.

const { useState: useQzState, useEffect: useQzEffect, useRef: useQzRef } = React;

const QZ_STEPS = [
  {
    q: 'Quantos celulares você usa hoje para postar?',
    sub: 'Escolha a opção mais próxima da sua operação atual.',
    opts: [
      { t: '1 celular' },
      { t: '2 a 3 celulares' },
      { t: '4 a 5 celulares' },
      { t: 'Mais de 5 celulares' },
    ],
  },
  {
    q: 'Como você posta hoje?',
    sub: 'Isso ajuda a calcular quanto tempo você pode economizar.',
    opts: [
      { t: 'Faço tudo manual', d: 'Abro conta por conta e posto no tempo livre.' },
      { t: 'Uso algumas automações', d: 'Agendo no PC ou uso alguma ferramenta básica.' },
      { t: 'Nunca usei nenhuma automação', d: 'Todo o meu processo hoje é 100% manual.' },
    ],
  },
  {
    q: 'Quanto tempo você gasta por dia postando?',
    sub: 'Conte o tempo somando todos os celulares e contas.',
    opts: [
      { t: 'Menos de 30 minutos' },
      { t: '30 min a 1 hora' },
      { t: '1 a 3 horas' },
      { t: 'Mais de 3 horas' },
    ],
  },
  {
    q: 'Quantas contas você opera atualmente?',
    sub: 'Some todas as contas TikTok que você gerencia hoje.',
    opts: [
      { t: 'Até 3 contas' },
      { t: '4 a 12 contas' },
      { t: '13 a 32 contas' },
      { t: 'Mais de 32 contas' },
    ],
  },
  {
    q: 'Quanto você quer lucrar por mês com suas contas?',
    sub: 'Sua meta define o plano que recomendamos no final.',
    opts: [
      { t: 'Até R$ 200' },
      { t: 'R$ 500 a R$ 2.000' },
      { t: 'R$ 2.000 a R$ 10.000' },
      { t: 'Mais de R$ 10.000' },
    ],
  },
];

const QZ_PLANS = [
  { name: 'Inicial', m: 29, q: 23, qTotal: 69, desc: 'Até 5 celulares · Contas ilimitadas', pot: 'Potencial: R$ 6.000/mês' },
  { name: 'Escalando', m: 59, q: 50, qTotal: 149, desc: 'Até 20 celulares · Contas ilimitadas', pot: 'Potencial: R$ 24.000/mês', popular: true },
  { name: 'Avançado', m: 119, q: 100, qTotal: 299, desc: 'Celulares ilimitados · Contas ilimitadas', pot: 'O céu é o seu limite' },
];

// nome do plano + ciclo (m|q) → código do plano no backend (bate com index/assinar).
const QZ_CODES = {
  'Inicial':   { m: 'monthly',          q: 'quarterly' },
  'Escalando': { m: 'scaling_monthly',  q: 'scaling_quarterly' },
  'Avançado':  { m: 'advanced_monthly', q: 'advanced_quarterly' },
};

// Religa o quiz ao checkout REAL do site (login-first + from=quiz, igual à landing
// atual). method: 'card' (assinatura c/ 3 dias grátis) | 'pix' (pagamento único).
function qzGoCheckout(planName, cycle, method) {
  const code = (QZ_CODES[planName] || {})[cycle] || 'monthly';
  const go = async () => {
    const s = window.aqSession ? await window.aqSession() : null;
    if (!s || !s.user) {
      try {
        localStorage.setItem('aq_pending_plan', JSON.stringify({
          code: code, label: planName, method: method, from: 'quiz',
        }));
      } catch (e) {}
      if (window.aqLogin) window.aqLogin(); else location.href = '/login';
      return;
    }
    location.href = '/assinar?plan=' + encodeURIComponent(code) +
      '&label=' + encodeURIComponent(planName) +
      '&method=' + encodeURIComponent(method) + '&from=quiz';
  };
  go();
}

// horas/dia (ponto médio) por resposta da pergunta 3
const QZ_HOURS = [0.4, 0.75, 2, 3.5];

function qzRecommend(a) {
  // a = [celulares, método, tempo, contas, meta]
  let score = (a[0] || 0);
  if ((a[3] || 0) >= 2) score += a[3] - 1;
  if ((a[4] || 0) >= 2) score += a[4] - 1;
  if (score >= 4) return 2; // Avançado
  if (score >= 2) return 1; // Escalando
  return 0;                 // Inicial
}

/* contador animado 0 → alvo */
function QzCounter({ target }) {
  const [n, setN] = useQzState(0);
  useQzEffect(() => {
    let raf; const t0 = performance.now(); const dur = 1300;
    const tick = now => {
      const p = Math.min(1, (now - t0) / dur);
      setN(Math.round(target * (1 - Math.pow(1 - p, 3))));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target]);
  return <span>{n}h</span>;
}

function QuizOverlay({ state, onClose }) {
  const open = !!state;
  const [step, setStep] = useQzState(0);          // 0..4
  const [answers, setAnswers] = useQzState([]);   // índices
  const [view, setView] = useQzState('quiz');     // quiz | result | pay
  const [cycle, setCycle] = useQzState('m');      // m | q
  const [sel, setSel] = useQzState(null);         // plano selecionado no resultado
  const [flash, setFlash] = useQzState(null);     // opção recém-clicada
  const cardRef = useQzRef(null);

  // reset ao abrir
  useQzEffect(() => {
    if (!open) return;
    if (state.start === 'pay') {
      setView('pay');
      setSel(Math.max(0, QZ_PLANS.findIndex(p => p.name === state.plan)));
      setCycle(state.cycle || 'm');
    } else {
      setView('quiz'); setStep(0); setAnswers([]); setSel(null); setCycle('m');
    }
    setFlash(null);
  }, [state]);

  // trava o scroll + esc
  useQzEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = e => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => { document.body.style.overflow = prev; window.removeEventListener('keydown', onKey); };
  }, [open]);

  useQzEffect(() => { if (cardRef.current) cardRef.current.scrollTop = 0; }, [view, step]);

  if (!open) return null;

  const pick = i => {
    if (flash !== null) return;
    setFlash(i);
    const next = answers.slice(); next[step] = i;
    setAnswers(next);
    setTimeout(() => {
      setFlash(null);
      if (step < QZ_STEPS.length - 1) setStep(step + 1);
      else { setSel(qzRecommend(next)); setView('result'); }
    }, 260);
  };

  const back = () => {
    if (view === 'pay') { setView(state.start === 'pay' ? 'pay' : 'result'); if (state.start === 'pay') onClose(); return; }
    if (view === 'result') { setView('quiz'); setStep(QZ_STEPS.length - 1); return; }
    if (step > 0) setStep(step - 1); else onClose();
  };

  const s = QZ_STEPS[step];
  const rec = qzRecommend(answers);
  const hoursMonth = Math.round((QZ_HOURS[answers[2]] ?? 1) * 30 * 0.9);
  const plan = QZ_PLANS[sel ?? rec] || QZ_PLANS[0];
  const price = cycle === 'q' ? plan.q : plan.m;
  const tri = cycle === 'q';

  return (
    <div className="qz-overlay" data-screen-label="Quiz começar grátis">
      <div className="qz-scrim" onClick={onClose}></div>

      <div className={`qz-card ${view !== 'quiz' ? 'wide' : ''}`} ref={cardRef}>

        {/* topo */}
        <div className="qz-top">
          <button className="qz-back" onClick={back} aria-label="Voltar">
            <LIcons.ArrowRight size={14} style={{ transform: 'rotate(180deg)' }}/> Voltar
          </button>
          {view === 'quiz' && (
            <span className="qz-progress mono">
              <b>{String(step + 1).padStart(2, '0')}</b> / {String(QZ_STEPS.length).padStart(2, '0')}
            </span>
          )}
          <button className="qz-close" onClick={onClose} aria-label="Fechar"><LIcons.Close size={16}/></button>
        </div>
        {view === 'quiz' && (
          <div className="qz-bar"><span style={{ width: `${((step + (flash !== null ? 1 : 0)) / QZ_STEPS.length) * 100}%` }}></span></div>
        )}

        {/* ===== perguntas ===== */}
        {view === 'quiz' && (
          <div className="qz-body" key={step}>
            <h2 className="qz-q">{s.q}</h2>
            <p className="qz-sub">{s.sub}</p>
            <div className="qz-opts">
              {s.opts.map((o, i) => (
                <button
                  key={o.t}
                  className={`qz-opt ${answers[step] === i && flash === null ? 'sel' : ''} ${flash === i ? 'flash' : ''}`}
                  onClick={() => pick(i)}
                >
                  <span className="qz-opt-radio"></span>
                  <span className="qz-opt-text">
                    <span className="qz-opt-t">{o.t}</span>
                    {o.d && <span className="qz-opt-d">{o.d}</span>}
                  </span>
                  <LIcons.ArrowRight size={15} className="qz-opt-arrow"/>
                </button>
              ))}
            </div>
          </div>
        )}

        {/* ===== resultado ===== */}
        {view === 'result' && (
          <div className="qz-body">
            <span className="qz-eyebrow mono">// Resultado · 3 dias grátis</span>
            <h2 className="qz-q">Montamos o plano ideal para <em>a sua escala</em>.</h2>

            <div className="qz-chips">
              <span className="qz-chip">{QZ_STEPS[0].opts[answers[0]]?.t}</span>
              <span className="qz-chip">{QZ_STEPS[3].opts[answers[3]]?.t}</span>
              <span className="qz-chip">{`${QZ_STEPS[2].opts[answers[2]]?.t} por dia`}</span>
            </div>

            <div className="qz-stat">
              <div className="qz-stat-n mono"><QzCounter target={hoursMonth}/></div>
              <div className="qz-stat-l">
                <b>economizadas por mês</b> com o aquecimento e os posts no automático.
                Equivale a <b>{hoursMonth * 3}h por trimestre</b>.
              </div>
            </div>

            <div className="qz-plans-head">
              <span className="qz-plans-title">Ative seu teste de 3 dias no plano ideal:</span>
              <div className="bill-toggle">
                <button className={`bill-opt ${!tri ? 'on' : ''}`} onClick={() => setCycle('m')}>Mensal</button>
                <button className={`bill-opt ${tri ? 'on' : ''}`} onClick={() => setCycle('q')}>
                  Trimestral <span className="bill-save">economize</span>
                </button>
              </div>
            </div>

            <div className="qz-plans">
              {QZ_PLANS.map((p, i) => (
                <button key={p.name} className={`qz-plan ${(sel ?? rec) === i ? 'sel' : ''}`} onClick={() => setSel(i)}>
                  <span className="qz-opt-radio"></span>
                  <span className="qz-plan-text">
                    <span className="qz-plan-name">
                      {`Plano ${p.name}`}
                      {i === rec && <span className="qz-plan-rec">Recomendado</span>}
                    </span>
                    <span className="qz-plan-desc">{p.desc}</span>
                    <span className="qz-plan-pot mono">{p.pot}</span>
                  </span>
                  <span className="qz-plan-price">
                    <small>3 dias grátis, depois</small>
                    <span className="mono"><b>R$ {tri ? p.q : p.m}</b> / mês</span>
                    {tri && <small className="qz-plan-tri">cobrado R$ {p.qTotal} a cada 3 meses</small>}
                  </span>
                </button>
              ))}
            </div>

            <button className="btn btn-primary qz-cta" onClick={() => setView('pay')}>
              Ativar 3 dias grátis <LIcons.ArrowRight size={16}/>
            </button>
            <div className="qz-foot">
              <a href="#precos" onClick={onClose}>Ver todos os planos e preços</a>
              <span>Sem cobrança nos 3 primeiros dias. Cancele quando quiser, direto no painel.</span>
            </div>
          </div>
        )}

        {/* ===== pagamento ===== */}
        {view === 'pay' && (
          <div className="qz-body">
            <span className="qz-eyebrow mono">// Pagamento</span>
            <h2 className="qz-q">Escolha como pagar</h2>
            <p className="qz-sub">
              Plano <b style={{ color: 'var(--text)' }}>{plan.name}</b> · 3 dias grátis, depois R$ {price}/mês
              {tri && ` (cobrado R$ ${plan.qTotal} por trimestre)`}.
            </p>

            <div className="qz-opts">
              <button type="button" className="qz-opt" onClick={() => qzGoCheckout(plan.name, cycle, 'card')}>
                <span className="qz-pay-ic"><LIcons.Card size={18}/></span>
                <span className="qz-opt-text">
                  <span className="qz-opt-t">Cartão de crédito</span>
                  <span className="qz-opt-d">Assinatura · cancele quando quiser</span>
                </span>
                <LIcons.ArrowRight size={15} className="qz-opt-arrow"/>
              </button>
              <button type="button" className="qz-opt" onClick={() => qzGoCheckout(plan.name, cycle, 'pix')}>
                <span className="qz-pay-ic"><LIcons.Pix size={18}/></span>
                <span className="qz-opt-text">
                  <span className="qz-opt-t">Pix</span>
                  <span className="qz-opt-d">Pagamento único · acesso na hora</span>
                </span>
                <LIcons.ArrowRight size={15} className="qz-opt-arrow"/>
              </button>
            </div>

            <div className="qz-foot" style={{ marginTop: 18 }}>
              <span><LIcons.Shield size={13} style={{ verticalAlign: '-2px', marginRight: 6 }}/>Pagamento processado com segurança pela AbacatePay.</span>
            </div>
          </div>
        )}

      </div>
    </div>
  );
}

Object.assign(window, { QuizOverlay });