// provider-quiz.jsx — Inline intake quiz for healthcare providers.
// Submits to /provider-submit.php which emails the lead to elena@medicya.com.

const PROVIDER_STEPS = [
  {
    id: 'specialty', kind: 'choice',
    q: '¿Cuál es tu especialidad principal?',
    sub: 'Esto nos ayuda a curar las guías clínicas y los productos correctos para ti.',
    options: [
      { v: 'endo',     l: 'Endocrinología' },
      { v: 'internal', l: 'Medicina interna' },
      { v: 'longev',   l: 'Medicina de longevidad / antiaging' },
      { v: 'gyn',      l: 'Ginecología' },
      { v: 'urol',     l: 'Urología / Andrología' },
      { v: 'aesth',    l: 'Medicina estética' },
      { v: 'gp',       l: 'Médico general' },
      { v: 'other',    l: 'Otra' },
    ],
  },
  {
    id: 'country', kind: 'choice',
    q: '¿En qué país practicas?',
    sub: 'Operamos hoy en estos países.',
    options: [
      { v: 'mx', l: '🇲🇽 México' },
      { v: 'co', l: '🇨🇴 Colombia' },
      { v: 'do', l: '🇩🇴 República Dominicana' },
      { v: 'ar', l: '🇦🇷 Argentina' },
      { v: 'cl', l: '🇨🇱 Chile' },
      { v: 'pe', l: '🇵🇪 Perú' },
      { v: 'es', l: '🇪🇸 España' },
      { v: 'us', l: '🇺🇸 EE.UU.' },
    ],
  },
  {
    id: 'city', kind: 'text',
    q: '¿En qué ciudad está tu consultorio?',
    sub: 'Conectamos pacientes con médicos cercanos.',
    placeholder: 'Ciudad',
  },
  {
    id: 'experience', kind: 'choice',
    q: '¿Tienes experiencia prescribiendo péptidos, GLP-1 u hormonas?',
    sub: 'Cualquier nivel está bien. Ofrecemos capacitación continua.',
    options: [
      { v: 'expert',  l: 'Sí, soy especialista' },
      { v: 'some',    l: 'Sí, ocasionalmente' },
      { v: 'curious', l: 'Aún no, pero me interesa aprender' },
    ],
  },
  {
    id: 'volume', kind: 'choice',
    q: '¿Cuántos pacientes atiendes al mes?',
    sub: 'Aproximado, no necesita ser exacto.',
    options: [
      { v: 'lt30',  l: 'Menos de 30' },
      { v: '30-100', l: '30 a 100' },
      { v: '100-300', l: '100 a 300' },
      { v: 'gt300',  l: 'Más de 300' },
    ],
  },
  {
    id: 'interest', kind: 'multi',
    q: '¿Qué te interesa más de aliarte con Medicya?',
    sub: 'Selecciona todas las que apliquen.',
    options: [
      { v: 'patients',  l: 'Pacientes calificados que ya buscan estos protocolos' },
      { v: 'products',  l: 'Productos de calidad farmacéutica trazables' },
      { v: 'clinical',  l: 'Soporte clínico y guías basadas en evidencia' },
      { v: 'training',  l: 'Capacitación en peptidoterapia y longevidad' },
      { v: 'community', l: 'Comunidad de médicos especializados' },
      { v: 'logistics', l: 'Logística y reposiciones automáticas' },
    ],
  },
  {
    id: 'name', kind: 'text',
    q: '¿Cuál es tu nombre completo?',
    sub: 'Como aparece en tu cédula o licencia profesional.',
    placeholder: 'Dr. / Dra. Nombre Apellidos',
  },
  {
    id: 'license', kind: 'text',
    q: '¿Cuál es tu cédula o licencia profesional?',
    sub: 'Necesitamos validar tu credencial antes de conectarte con pacientes.',
    placeholder: 'Número de cédula / licencia',
  },
  {
    id: 'email', kind: 'email',
    q: '¿A qué correo te contactamos?',
    sub: 'Te escribimos en menos de 48 horas para coordinar la siguiente etapa.',
  },
  {
    id: 'phone', kind: 'phone',
    q: '¿Tu WhatsApp profesional?',
    sub: 'Para coordinación rápida de pacientes y reposiciones.',
    placeholder: 'Tu número con código de país',
  },
];

const PROV_COUNTRY_CODES = {
  mx: '+52', co: '+57', do: '+1', ar: '+54', cl: '+56', pe: '+51', es: '+34', us: '+1',
};

function ProviderQuiz() {
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState({});
  const [done, setDone] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [hp, setHp] = React.useState('');

  React.useEffect(() => {
    const cur = PROVIDER_STEPS[step];
    if (cur?.kind === 'phone' && !answers.phone && answers.country) {
      const code = PROV_COUNTRY_CODES[answers.country];
      if (code) setAnswers(prev => ({ ...prev, phone: code + ' ' }));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [step]);

  const s = PROVIDER_STEPS[step];
  const total = PROVIDER_STEPS.length;
  const pct = Math.round(((step + (done ? 1 : 0)) / total) * 100);

  const setAns = (v) => setAnswers({ ...answers, [s.id]: v });
  const next = async () => {
    if (step < total - 1) { setStep(step + 1); return; }
    setSubmitting(true);
    try {
      await fetch('/provider-submit.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...answers, website: hp }),
      });
    } catch (e) { /* fail open */ }
    setSubmitting(false);
    setDone(true);
  };
  const canNext = (() => {
    const v = answers[s?.id];
    if (v === undefined) return false;
    if (s.kind === 'multi') return Array.isArray(v) && v.length > 0;
    if (['text', 'phone', 'email'].includes(s.kind)) return typeof v === 'string' && v.trim().length > 1;
    return true;
  })();

  return (
    <div style={{
      width: '100%', maxWidth: 720, margin: '0 auto', background: '#fff',
      borderRadius: 24, overflow: 'hidden',
      border: `1px solid ${M.rule}`, boxShadow: '0 30px 60px rgba(6,58,51,0.10)',
      fontFamily: POPPINS,
    }}>
      <div style={{
        padding: '20px 28px', display: 'flex', alignItems: 'center',
        justifyContent: 'space-between', borderBottom: `1px solid ${M.rule}`,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '5px 10px', borderRadius: 999, background: 'rgba(14,122,101,0.08)',
            color: M.primary, fontSize: 11, fontWeight: 600, letterSpacing: '0.06em',
            textTransform: 'uppercase',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: M.primary }}/>
            Para médicos aliados
          </span>
        </div>
        {!done && <span style={{ fontSize: 12, color: M.ink3 }}>Paso {step + 1} de {total}</span>}
      </div>

      <div style={{ height: 3, background: M.ruleSoft }}>
        <div style={{
          width: `${pct}%`, height: '100%',
          background: `linear-gradient(90deg, ${M.primary}, ${M.primaryHi})`,
          transition: 'width .4s ease',
        }}/>
      </div>

      {!done ? (
        <div key={step} style={{ padding: 40, animation: 'fadeUp .3s ease' }}>
          <h3 style={{
            fontFamily: POPPINS, fontSize: 30, fontWeight: 600,
            letterSpacing: '-0.025em', lineHeight: 1.1, margin: '0 0 8px', color: M.ink,
            textWrap: 'balance',
          }}>{s.q}</h3>
          <p style={{ fontSize: 15, color: M.ink2, margin: '0 0 28px', lineHeight: 1.5 }}>{s.sub}</p>

          {s.kind === 'choice' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {s.options.map(o => {
                const sel = answers[s.id] === o.v;
                return (
                  <button key={o.v} onClick={() => setAns(o.v)} style={{
                    padding: '16px 20px', borderRadius: 14, textAlign: 'left',
                    background: sel ? 'rgba(14,122,101,0.08)' : '#fff',
                    border: `1.5px solid ${sel ? M.primary : M.rule}`,
                    cursor: 'pointer', fontFamily: POPPINS, fontSize: 16,
                    color: M.ink, fontWeight: 500,
                    display: 'flex', alignItems: 'center', gap: 14,
                    transition: 'all .15s ease',
                  }}>
                    <span style={{ flex: 1 }}>{o.l}</span>
                    <span style={{
                      width: 22, height: 22, borderRadius: 99,
                      background: sel ? M.primary : 'transparent',
                      border: sel ? 'none' : `1.5px solid ${M.rule}`,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>{sel && React.cloneElement(Icon.check('#fff'), { width: 14, height: 14 })}</span>
                  </button>
                );
              })}
            </div>
          )}

          {s.kind === 'multi' && (
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {s.options.map(o => {
                const arr = answers[s.id] || [];
                const sel = arr.includes(o.v);
                return (
                  <button key={o.v} onClick={() => {
                    const nextArr = sel ? arr.filter(x => x !== o.v) : [...arr, o.v];
                    setAns(nextArr);
                  }} style={{
                    padding: '14px 18px', borderRadius: 14, textAlign: 'left',
                    background: sel ? 'rgba(14,122,101,0.08)' : '#fff',
                    border: `1.5px solid ${sel ? M.primary : M.rule}`,
                    cursor: 'pointer', fontFamily: POPPINS, fontSize: 14,
                    color: M.ink, fontWeight: 500, lineHeight: 1.4,
                    display: 'flex', alignItems: 'center', gap: 10,
                  }}>
                    <span style={{
                      flexShrink: 0, width: 20, height: 20, borderRadius: 5,
                      background: sel ? M.primary : 'transparent',
                      border: sel ? 'none' : `1.5px solid ${M.rule}`,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>{sel && React.cloneElement(Icon.check('#fff'), { width: 12, height: 12 })}</span>
                    <span>{o.l}</span>
                  </button>
                );
              })}
            </div>
          )}

          {(s.kind === 'text' || s.kind === 'phone') && (
            <input
              type={s.kind === 'phone' ? 'tel' : 'text'}
              inputMode={s.kind === 'phone' ? 'tel' : 'text'}
              placeholder={s.placeholder || ''}
              autoFocus
              value={answers[s.id] || ''}
              onChange={e => setAns(e.target.value)}
              style={{
                width: '100%', padding: '18px 20px', borderRadius: 14,
                border: `1.5px solid ${M.rule}`, fontFamily: POPPINS,
                fontSize: 18, color: M.ink, outline: 'none', boxSizing: 'border-box',
              }}
              onFocus={e => e.currentTarget.style.borderColor = M.primary}
              onBlur={e => e.currentTarget.style.borderColor = M.rule}/>
          )}

          {s.kind === 'email' && (
            <div>
              <input type="email" placeholder="tu@correo.com" autoFocus
                value={answers[s.id] || ''}
                onChange={e => setAns(e.target.value)}
                style={{
                  width: '100%', padding: '18px 20px', borderRadius: 14,
                  border: `1.5px solid ${M.rule}`, fontFamily: POPPINS,
                  fontSize: 18, color: M.ink, outline: 'none', boxSizing: 'border-box',
                }}
                onFocus={e => e.currentTarget.style.borderColor = M.primary}
                onBlur={e => e.currentTarget.style.borderColor = M.rule}/>
              <input type="text" tabIndex={-1} autoComplete="off" name="website"
                value={hp} onChange={e => setHp(e.target.value)}
                style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }}
                aria-hidden="true"/>
              <div style={{
                marginTop: 14, padding: 14, borderRadius: 12,
                background: M.creamSoft, fontSize: 12, color: M.ink2, lineHeight: 1.5,
                display: 'flex', gap: 10,
              }}>
                {Icon.lock(M.primary)}
                <span>Tu información se guarda cifrada y no se comparte con terceros.</span>
              </div>
            </div>
          )}
        </div>
      ) : (
        <div style={{ padding: 48, textAlign: 'center' }}>
          <div style={{
            width: 72, height: 72, borderRadius: 99, margin: '0 auto 24px',
            background: `linear-gradient(135deg, ${M.primary}, ${M.primaryHi})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            animation: 'pop .4s cubic-bezier(.2,.9,.3,1.4)',
          }}>{React.cloneElement(Icon.check('#fff'), { width: 36, height: 36 })}</div>
          <h3 style={{
            fontFamily: POPPINS, fontSize: 32, fontWeight: 600,
            letterSpacing: '-0.025em', lineHeight: 1.1, margin: '0 0 12px', color: M.ink,
          }}>Gracias, {(answers.name || 'doctor/doctora').split(' ')[0]}.</h3>
          <p style={{
            fontFamily: POPPINS, fontSize: 16, color: M.ink2,
            lineHeight: 1.55, margin: '0 0 28px', maxWidth: 480, marginInline: 'auto',
          }}>
            Recibimos tu solicitud. Nuestro equipo de partnerships revisará tu información
            y te contactará en menos de 48 horas a{' '}
            <strong style={{ color: M.ink }}>{answers.email || 'tu correo'}</strong>{' '}
            para coordinar los siguientes pasos.
          </p>
          <div style={{
            display: 'flex', flexDirection: 'column', gap: 12, padding: '24px 28px',
            background: M.creamSoft, borderRadius: 16, marginBottom: 28,
            fontFamily: POPPINS, textAlign: 'left', maxWidth: 460, marginInline: 'auto',
          }}>
            {[
              'Validamos tu cédula y verificamos credenciales',
              'Coordinamos una llamada para alinear protocolos y suministro',
              'Te damos acceso a la plataforma, guías clínicas y primeros pacientes',
            ].map((step, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <div style={{
                  flexShrink: 0, width: 22, height: 22, borderRadius: 99,
                  background: M.primary, color: '#fff',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 11, fontWeight: 600, marginTop: 1,
                }}>{i + 1}</div>
                <span style={{ fontSize: 14, color: M.ink, lineHeight: 1.5 }}>{step}</span>
              </div>
            ))}
          </div>
          <a href="/" style={{
            display: 'inline-block', padding: '14px 28px', borderRadius: 999,
            background: M.forest, color: '#fff', textDecoration: 'none',
            fontFamily: POPPINS, fontSize: 15, fontWeight: 600,
          }}>Volver al sitio</a>
        </div>
      )}

      {!done && (
        <div style={{
          padding: '20px 28px', display: 'flex', justifyContent: 'space-between',
          alignItems: 'center', borderTop: `1px solid ${M.rule}`, background: M.creamSoft,
        }}>
          <button onClick={() => step > 0 && setStep(step - 1)} style={{
            padding: '12px 18px', borderRadius: 99, border: 'none',
            background: 'transparent', cursor: step > 0 ? 'pointer' : 'not-allowed',
            fontFamily: POPPINS, fontSize: 14, fontWeight: 500,
            color: step > 0 ? M.ink : M.ink3,
          }}>← Atrás</button>
          <Btn kind="dark" size="md" onClick={(canNext && !submitting) ? next : undefined}
            style={{ opacity: (canNext && !submitting) ? 1 : 0.4, pointerEvents: (canNext && !submitting) ? 'auto' : 'none' }}>
            {submitting ? 'Enviando…' : (step === total - 1 ? 'Enviar solicitud' : 'Continuar')} →
          </Btn>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ProviderQuiz });