const { useState: useObSt, useContext: useObCtx, useEffect: useObEff } = React;

/* Verifica se uma resposta está preenchida (não é '' nem null nem array vazio) */
const isAnswered = (val) => {
  if (val == null) return false;
  if (Array.isArray(val)) return val.length > 0;
  return String(val).trim().length > 0;
};

/* ── Campo individual ─────────────────────────────────────────────── */
const QuestionField = ({ q, value, onChange, onToggleMulti }) => {
  const baseInput = {
    width: '100%', height: 48,
    background: 'var(--card)', border: '1px solid var(--border)',
    borderRadius: 9, padding: '0 14px',
    fontSize: 15, color: 'var(--text)', fontFamily: 'inherit', outline: 'none',
    transition: 'border-color 0.15s',
  };

  /* Limita por quantidade de dígitos do max (anos = 4 chars, comprometimento = 2, etc.)
     Não clampa o min enquanto digita — senão "2018" virava "1950" na primeira tecla. */
  const setNum = (raw) => {
    if (raw === '') return onChange(q.id, '');
    let onlyDigits = String(raw).replace(/[^\d]/g, '');
    if (!onlyDigits) return onChange(q.id, '');

    const maxLen = q.max != null ? String(q.max).length : 10;
    if (onlyDigits.length > maxLen) onlyDigits = onlyDigits.slice(0, maxLen);

    let n = parseInt(onlyDigits, 10);
    if (q.max != null && n > q.max) n = q.max;
    onChange(q.id, String(n));
  };

  return (
    <div style={{ marginBottom: 22 }}>
      <label style={{
        display: 'block', fontSize: 13.5, fontWeight: 600, color: 'var(--text)',
        marginBottom: 9, lineHeight: 1.5,
      }}>
        {q.label}
      </label>

      {q.type === 'text' && (
        <input
          type="text"
          placeholder={q.placeholder}
          value={value || ''}
          onChange={e => onChange(q.id, e.target.value)}
          style={baseInput}
          onFocus={e => e.target.style.borderColor = 'var(--border-h)'}
          onBlur={e => e.target.style.borderColor = 'var(--border)'}
        />
      )}

      {q.type === 'textarea' && (
        <textarea
          placeholder={q.placeholder}
          value={value || ''}
          onChange={e => onChange(q.id, e.target.value)}
          rows={4}
          style={{ ...baseInput, height: 'auto', padding: '12px 14px', resize: 'vertical', minHeight: 96 }}
          onFocus={e => e.target.style.borderColor = 'var(--border-h)'}
          onBlur={e => e.target.style.borderColor = 'var(--border)'}
        />
      )}

      {q.type === 'number' && (
        <input
          type="text" inputMode="numeric" pattern="[0-9]*"
          placeholder={q.placeholder}
          value={value || ''}
          onChange={e => setNum(e.target.value)}
          style={baseInput}
          onFocus={e => e.target.style.borderColor = 'var(--border-h)'}
          onBlur={e => e.target.style.borderColor = 'var(--border)'}
        />
      )}

      {q.type === 'money' && (
        <div style={{ position: 'relative' }}>
          <span style={{
            position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)',
            color: 'var(--text2)', fontSize: 14, pointerEvents: 'none',
          }}>R$</span>
          <input
            type="text" inputMode="numeric" pattern="[0-9]*"
            placeholder={q.placeholder}
            value={value || ''}
            onChange={e => setNum(e.target.value)}
            style={{ ...baseInput, paddingLeft: 40 }}
            onFocus={e => e.target.style.borderColor = 'var(--border-h)'}
            onBlur={e => e.target.style.borderColor = 'var(--border)'}
          />
        </div>
      )}

      {q.type === 'radio' && (
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {q.options.map(opt => {
            const selected = value === opt;
            return (
              <button
                key={opt} type="button"
                onClick={() => onChange(q.id, opt)}
                style={{
                  padding: '10px 18px', borderRadius: 999,
                  background: selected ? 'var(--gold)' : 'var(--card)',
                  color: selected ? '#0A0A0A' : 'var(--text)',
                  border: `1px solid ${selected ? 'var(--gold)' : 'var(--border)'}`,
                  fontSize: 13, fontWeight: selected ? 600 : 500, fontFamily: 'inherit',
                  cursor: 'pointer', transition: 'all 0.15s',
                }}
              >
                {opt}
              </button>
            );
          })}
        </div>
      )}

      {q.type === 'multi' && (
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {q.options.map(opt => {
            const arr = Array.isArray(value) ? value : [];
            const selected = arr.includes(opt);
            return (
              <button
                key={opt} type="button"
                onClick={() => onToggleMulti(q.id, opt)}
                style={{
                  padding: '10px 18px', borderRadius: 999,
                  background: selected ? 'var(--gold)' : 'var(--card)',
                  color: selected ? '#0A0A0A' : 'var(--text)',
                  border: `1px solid ${selected ? 'var(--gold)' : 'var(--border)'}`,
                  fontSize: 13, fontWeight: selected ? 600 : 500, fontFamily: 'inherit',
                  cursor: 'pointer', transition: 'all 0.15s',
                }}
              >
                {selected ? '✓ ' : ''}{opt}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
};

/* ── OnboardingFlow ──────────────────────────────────────────────── */
const OnboardingFlow = ({ onComplete, onDismiss }) => {
  const { user } = useObCtx(UserCtx);
  /* welcomed = false mostra a tela "Bem-vinda" antes das perguntas */
  const [welcomed, setWelcomed] = useObSt(false);
  const [page, setPage] = useObSt(0);
  const [answers, setAnswers] = useObSt({});
  const [saving, setSaving] = useObSt(false);
  const [touched, setTouched] = useObSt(false); // marca se já tentou avançar (pra mostrar erro)

  const pages = (typeof ONBOARDING_PAGES !== 'undefined') ? ONBOARDING_PAGES : [];
  if (pages.length === 0) return null;

  /* Chave do rascunho — por user pra não vazar entre contas no mesmo browser */
  const draftKey = user?.id ? `dc_onb_draft_${user.id}` : null;

  /* Carrega rascunho do localStorage ao montar */
  useObEff(() => {
    if (!draftKey) return;
    try {
      const raw = localStorage.getItem(draftKey);
      if (raw) {
        const parsed = JSON.parse(raw);
        if (parsed && typeof parsed === 'object') {
          setAnswers(parsed.answers || {});
          if (typeof parsed.page === 'number') setPage(parsed.page);
          /* Se já tinha rascunho, pula a boas-vindas */
          if (parsed.answers && Object.keys(parsed.answers).length > 0) setWelcomed(true);
        }
      }
    } catch {}
  }, [draftKey]);

  /* Salva rascunho sempre que answers/page mudam */
  useObEff(() => {
    if (!draftKey || !welcomed) return;
    try {
      localStorage.setItem(draftKey, JSON.stringify({ answers, page }));
    } catch {}
  }, [answers, page, draftKey, welcomed]);

  const current = pages[page];
  const isLast = page === pages.length - 1;
  const progress = ((page + 1) / pages.length) * 100;

  /* Página tem todas as perguntas respondidas? */
  const pageComplete = current.questions.every(q => isAnswered(answers[q.id]));

  const setAnswer = (qId, val) => setAnswers(prev => ({ ...prev, [qId]: val }));

  const toggleMulti = (qId, opt) => {
    setAnswers(prev => {
      const cur = Array.isArray(prev[qId]) ? prev[qId] : [];
      return {
        ...prev,
        [qId]: cur.includes(opt) ? cur.filter(o => o !== opt) : [...cur, opt],
      };
    });
  };

  const goNext = async () => {
    /* Trava: precisa responder tudo da página atual antes de avançar/concluir */
    if (!pageComplete) {
      setTouched(true);
      window.scrollTo({ top: 0, behavior: 'smooth' });
      return;
    }
    setTouched(false);

    if (!isLast) {
      setPage(p => p + 1);
      window.scrollTo({ top: 0, behavior: 'smooth' });
      return;
    }
    /* Última tela — salva no Supabase e finaliza */
    setSaving(true);
    try {
      const { data, error } = await _supabase.from('profiles').upsert({
        id: user.id,
        email: user.email,
        name: user.name,
        onboarding: answers,
        onboarding_completed: true,
      }, { onConflict: 'id' }).select('id, onboarding_completed').single();

      if (error) throw error;
      if (!data?.onboarding_completed) {
        throw new Error('A confirmação não veio do banco');
      }

      /* Apaga rascunho — onboarding concluído com sucesso */
      try { if (draftKey) localStorage.removeItem(draftKey); } catch {}

      console.log('[onboarding] salvo com sucesso para', user.email);
      onComplete();
    } catch (e) {
      console.error('[onboarding] erro ao salvar:', e);
      alert(`Não foi possível salvar suas respostas.\n\n${e?.message || e}\n\nTente novamente.`);
    } finally {
      setSaving(false);
    }
  };

  const goPrev = () => {
    if (page > 0) {
      setPage(p => p - 1);
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  };

  /* ── Tela de boas-vindas (antes das perguntas) ── */
  if (!welcomed) {
    const firstName = (user?.name || '').split(' ')[0] || '';
    return (
      <div style={{
        position: 'fixed', inset: 0, zIndex: 999,
        background: 'var(--bg)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        padding: '24px',
        paddingTop: 'calc(env(safe-area-inset-top, 0px) + 24px)',
        paddingBottom: 'calc(env(safe-area-inset-bottom, 0px) + 24px)',
        textAlign: 'center',
      }}>
        <div style={{ maxWidth: 460 }}>
          {/* Decoração */}
          <div style={{
            width: 64, height: 64, borderRadius: '50%',
            background: 'var(--gold-bg)', border: '1px solid var(--border-h)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            margin: '0 auto 28px',
          }}>
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--gold)"
              strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
            </svg>
          </div>

          <p style={{
            fontSize: 11, fontWeight: 700, color: 'var(--gold)',
            letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 12,
          }}>
            Bem-vinda à Descomplicando a Clínica
          </p>
          <h1 style={{
            fontSize: 28, fontWeight: 700, color: 'var(--text)',
            lineHeight: 1.2, marginBottom: 14, letterSpacing: '-0.5px',
          }}>
            {firstName ? `Olá, ${firstName}!` : 'Olá!'}
          </h1>
          <p style={{
            fontSize: 15, color: 'var(--text2)', lineHeight: 1.6, marginBottom: 32,
          }}>
            Antes de você começar o curso, a Andreza quer te conhecer um pouco melhor.
            <br/><br/>
            São algumas perguntas rápidas sobre sua clínica, sua rotina e o que você espera dessa
            jornada. Leva uns 3 a 5 minutos — e se quiser, pode pausar e voltar depois.
          </p>

          <button
            onClick={() => setWelcomed(true)}
            style={{
              background: 'var(--gold)', color: '#0A0A0A',
              padding: '14px 32px', borderRadius: 10,
              fontSize: 14, fontWeight: 700, fontFamily: 'inherit',
              letterSpacing: '0.02em', cursor: 'pointer', marginBottom: 14,
            }}
          >
            Começar →
          </button>
          <br/>
          <button
            onClick={onDismiss}
            style={{
              background: 'none', color: 'var(--text2)', fontSize: 13,
              padding: '8px 14px', textDecoration: 'underline', textUnderlineOffset: 3,
              fontFamily: 'inherit',
            }}
          >
            Responder depois
          </button>
        </div>
      </div>
    );
  }

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 999,
      background: 'var(--bg)',
      display: 'flex', flexDirection: 'column',
    }}>

      {/* Progresso */}
      <div style={{
        height: 3, background: 'var(--border)',
        marginTop: 'env(safe-area-inset-top, 0px)',
        position: 'relative',
      }}>
        <div style={{
          width: `${progress}%`, height: '100%', background: 'var(--gold)',
          transition: 'width 0.35s ease',
        }}/>
      </div>

      {/* Header */}
      <div style={{
        padding: '24px 24px 8px', maxWidth: 600, margin: '0 auto', width: '100%',
      }}>
        <p style={{
          fontSize: 11, fontWeight: 700, color: 'var(--gold)',
          letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 8,
        }}>
          Passo {page + 1} de {pages.length}
        </p>
        <h1 style={{
          fontSize: 24, fontWeight: 700, color: 'var(--text)',
          lineHeight: 1.2, marginBottom: 6, letterSpacing: '-0.3px',
        }}>
          {current.title}
        </h1>
        <p style={{ fontSize: 14, color: 'var(--text2)', lineHeight: 1.5 }}>
          {current.description}
        </p>
      </div>

      {/* Perguntas (scroll) */}
      <div style={{
        flex: 1, overflowY: 'auto',
        padding: '20px 24px 140px',
        maxWidth: 600, margin: '0 auto', width: '100%',
      }}>
        {touched && !pageComplete && (
          <div style={{
            background: 'rgba(220,80,80,0.08)',
            border: '1px solid rgba(220,80,80,0.3)',
            borderRadius: 9, padding: '12px 16px', marginBottom: 18,
            fontSize: 13, color: '#E07070', lineHeight: 1.5,
          }}>
            ⚠️ Responda todas as perguntas dessa página antes de continuar.
          </div>
        )}
        {current.questions.map(q => (
          <QuestionField
            key={q.id}
            q={q}
            value={answers[q.id]}
            onChange={setAnswer}
            onToggleMulti={toggleMulti}
          />
        ))}
      </div>

      {/* Footer — navegação */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 2,
        background: 'var(--bg)',
        borderTop: '1px solid var(--border)',
        padding: '14px 24px calc(env(safe-area-inset-bottom, 0px) + 14px)',
      }}>
        <div style={{
          maxWidth: 600, margin: '0 auto',
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <button
            onClick={onDismiss}
            disabled={saving}
            style={{
              background: 'none', color: 'var(--text2)', fontSize: 12.5,
              padding: '12px 8px', textDecoration: 'underline', textUnderlineOffset: 3,
            }}
          >
            Responder depois
          </button>

          <div style={{ flex: 1 }}/>

          {page > 0 && (
            <button
              onClick={goPrev}
              disabled={saving}
              style={{
                background: 'var(--card)', color: 'var(--text2)',
                padding: '12px 18px', borderRadius: 9,
                fontSize: 13.5, fontWeight: 500,
                border: '1px solid var(--border)',
              }}
            >
              Voltar
            </button>
          )}

          <button
            onClick={goNext}
            disabled={saving}
            title={!pageComplete ? 'Responda todas as perguntas dessa página' : ''}
            style={{
              background: pageComplete ? 'var(--gold)' : 'var(--card)',
              color: pageComplete ? '#0A0A0A' : 'var(--text3)',
              border: pageComplete ? 'none' : '1px solid var(--border)',
              padding: '12px 24px', borderRadius: 9,
              fontSize: 13.5, fontWeight: 700,
              opacity: saving ? 0.65 : 1,
              cursor: saving ? 'wait' : (pageComplete ? 'pointer' : 'not-allowed'),
              display: 'flex', alignItems: 'center', gap: 7,
              fontFamily: 'inherit',
            }}
          >
            {saving ? (
              <>
                <span style={{
                  width: 13, height: 13, borderRadius: '50%',
                  border: '2px solid rgba(10,10,10,0.25)',
                  borderTopColor: '#0A0A0A',
                  animation: 'ob-spin 0.7s linear infinite',
                }}/>
                Salvando…
              </>
            ) : (isLast ? 'Concluir' : 'Próximo')}
          </button>
        </div>
      </div>

      <style>{`@keyframes ob-spin { to { transform: rotate(360deg); } }`}</style>
    </div>
  );
};

window.OnboardingFlow = OnboardingFlow;