const { Button: QzBtn } = window.MyxotoneDesignSystem_60a319;

const QZ_STEPS = [
{ id: 'quien', q: '¿Quién eres?', opts: ['Artista solista', 'Banda', 'Productor', 'Compositor', 'Creador de contenido', 'Empresa / Marca', 'Otro'] },
{ id: 'ayuda', q: '¿En qué podemos ayudarte?', sub: 'Puedes seleccionar varias opciones.', multi: true, opts: ['Producción musical', 'Composición', 'Grabación', 'Mezcla', 'Mastering', 'Diseño sonoro', 'Música para cine y medios', 'Audio para contenido', 'Podcast', 'Otro'] },
{ id: 'etapa', q: '¿En qué etapa se encuentra tu proyecto?', opts: ['Apenas es una idea', 'Tengo demos', 'Ya tengo las canciones escritas', 'Ya grabé el material', 'Está listo para lanzarse'] },
{ id: 'genero', q: '¿Qué género describe mejor tu proyecto?', text: true, ph: 'Ej. Indie Pop, R&B, Rock Alternativo, Electrónica...' },
{ id: 'objetivo', q: '¿Cuál es tu objetivo principal?', text: true, ph: 'Cuéntanos qué quieres lograr con este proyecto.' },
{ id: 'cuando', q: '¿Cuándo te gustaría comenzar?', opts: ['Lo antes posible', 'Este mes', 'En los próximos 3 meses', 'Solo estoy explorando opciones'] },
{ id: 'presupuesto', q: '¿Cuál es el presupuesto aproximado que tienes destinado para este proyecto?', opts: ['Menos de $10,000 MXN', 'Entre $10,000 y $25,000 MXN', 'Entre $25,000 y $50,000 MXN', 'Más de $50,000 MXN', 'Aún no estoy seguro'] },
{ id: 'productor', q: '¿Has trabajado antes con un productor musical?', opts: ['Sí', 'No'] },
{ id: 'conociste', q: '¿Cómo conociste Myxotone?', opts: ['Instagram', 'TikTok', 'YouTube', 'Google', 'Recomendación', 'Otro'] },
{ id: 'contacto', q: '¿Cómo podemos contactarte?', contact: true }];

const QZ_WEBHOOK = 'https://hooks.zapier.com/hooks/catch/28331035/44spsce/'; // Zapier → Notion

function MxQuiz() {
  const [open, setOpen] = React.useState(false);
  const [step, setStep] = React.useState(-1);
  const [ans, setAns] = React.useState({});
  React.useEffect(() => {
    const go = () => { setStep(-1); setAns({}); setOpen(true); };
    window.addEventListener('mx-quiz', go);
    return () => window.removeEventListener('mx-quiz', go);
  }, []);
  React.useEffect(() => {
    if (!open) return;
    document.body.style.overflow = 'hidden';
    const esc = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', esc);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', esc); };
  }, [open]);
  if (!open) return null;
  const N = QZ_STEPS.length;
  const q = step >= 0 && step < N ? QZ_STEPS[step] : null;
  const set = (id, v) => setAns((a) => ({ ...a, [id]: v }));
  const next = () => setStep((s) => {
    const n = s + 1;
    if (n >= N && QZ_WEBHOOK) { try { fetch(QZ_WEBHOOK, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ fecha: new Date().toISOString(), ...ans }) }); } catch (err) {} }
    return n;
  });
  const pick = (opt) => { set(q.id, opt); setTimeout(next, 300); };
  const togg = (opt) => { const c = ans[q.id] || []; set(q.id, c.includes(opt) ? c.filter((x) => x !== opt) : [...c, opt]); };
  const canNext = !q ? true : q.multi ? (ans[q.id] || []).length > 0 : q.text ? !!(ans[q.id] || '').trim() : q.contact ? !!(ans.nombre || '').trim() && /\S+@\S+\.\S+/.test(ans.correo || '') : !!ans[q.id];
  const mailto = () => {
    const lines = QZ_STEPS.filter((s) => !s.contact).map((s) => s.q + '\n' + (s.multi ? (ans[s.id] || []).join(', ') : ans[s.id] || '—'));
    lines.push('Nombre: ' + (ans.nombre || ''), 'Correo: ' + (ans.correo || ''), 'Instagram: ' + (ans.instagram || '—'));
    return 'mailto:music@myxotone.com?subject=' + encodeURIComponent('Discovery Call — ' + (ans.nombre || 'Nuevo proyecto')) + '&body=' + encodeURIComponent(lines.join('\n\n'));
  };
  const enterNext = (e) => { if (e.key === 'Enter' && canNext) next(); };
  return (
    <div className="qz" role="dialog" aria-modal="true" aria-label="Cuestionario Discovery Call">
      <div className="qz-top">
        <img src="assets/logo/mxtn-wordmark-white.png" alt="MXTN" />
        {q && <span className="qz-count">{String(step + 1).padStart(2, '0')} / {N}</span>}
        <button className="qz-x" aria-label="Cerrar" onClick={() => setOpen(false)}>✕</button>
      </div>
      <div className="qz-bar"><i style={{ '--p': (step < 0 ? 0 : Math.min(step + 1, N) / N * 100) + '%' }}></i></div>
      <div className="qz-body">
        {step === -1 &&
        <div className="qz-step qz-center" key="intro">
            <p className="eyebrow">Discovery Call</p>
            <h2>Conozcamos <span className="it">tu proyecto.</span></h2>
            <p className="sub">Antes de agendar tu Discovery Call, queremos entender un poco mejor en qué estás trabajando.</p>
            <p className="sub">Responder este cuestionario te tomará menos de 2 minutos y nos ayudará a preparar una llamada mucho más útil para ti.</p>
            <div className="qz-actions"><QzBtn variant="primary" size="lg" onClick={next}>Comenzar</QzBtn></div>
          </div>}
        {q && !q.contact &&
        <div className="qz-step" key={q.id}>
            <p className="eyebrow">Pregunta {step + 1}</p>
            <h2>{q.q}</h2>
            {q.sub && <p className="sub">{q.sub}</p>}
            {q.opts &&
          <div className="qz-cards">
              {q.opts.map((o) => {
              const sel = q.multi ? (ans[q.id] || []).includes(o) : ans[q.id] === o;
              return <button key={o} className={'qz-card' + (sel ? ' sel' : '')} onClick={() => q.multi ? togg(o) : pick(o)}><span className="k">✓</span>{o}</button>;
            })}
            </div>}
            {q.text && <input className="qz-input" autoFocus placeholder={q.ph} value={ans[q.id] || ''} onChange={(e) => set(q.id, e.target.value)} onKeyDown={enterNext} />}
            <div className="qz-nav">
              <button className="qz-back" onClick={() => setStep(step - 1)}>← Atrás</button>
              {(q.multi || q.text) && <QzBtn variant="primary" size="md" disabled={!canNext} onClick={() => canNext && next()}>Continuar</QzBtn>}
              {q.text && <span className="qz-hint">Enter ↵ para continuar</span>}
            </div>
          </div>}
        {q && q.contact &&
        <div className="qz-step" key="contacto">
            <p className="eyebrow">Pregunta {step + 1}</p>
            <h2>{q.q}</h2>
            <div className="qz-field"><label>Nombre</label><input className="qz-input" autoFocus placeholder="Tu nombre" value={ans.nombre || ''} onChange={(e) => set('nombre', e.target.value)} /></div>
            <div className="qz-field"><label>Correo electrónico</label><input className="qz-input" type="email" placeholder="nombre@email.com" value={ans.correo || ''} onChange={(e) => set('correo', e.target.value)} onKeyDown={enterNext} /></div>
            <div className="qz-field"><label>Instagram (opcional)</label><input className="qz-input" placeholder="@usuario" value={ans.instagram || ''} onChange={(e) => set('instagram', e.target.value)} onKeyDown={enterNext} /></div>
            <div className="qz-nav">
              <button className="qz-back" onClick={() => setStep(step - 1)}>← Atrás</button>
              <QzBtn variant="primary" size="md" disabled={!canNext} onClick={() => canNext && next()}>Continuar</QzBtn>
            </div>
          </div>}
        {step >= N &&
        <div className="qz-step qz-center" key="final">
            <p className="eyebrow">Gracias</p>
            <h2>¡Listo!</h2>
            <p className="sub">Gracias por compartir la información de tu proyecto.</p>
            <p className="sub">La revisaremos antes de la llamada para aprovechar al máximo nuestro tiempo y darte recomendaciones mucho más específicas desde el primer minuto.</p>
            <div className="qz-actions">
              <QzBtn variant="primary" size="lg" onClick={() => window.open('https://calendar.app.google/ttNashdsfuYduk367', '_blank')}>Agendar llamada de descubrimiento</QzBtn>
              <a href="#" onClick={(e) => { e.preventDefault(); location.href = mailto(); }} style={{ fontSize: 'var(--text-body-s)', fontWeight: 600, textDecoration: 'underline', textUnderlineOffset: 4 }}>Enviar mis respuestas por correo</a>
              <span className="microcopy">30 min · Sin compromiso · Propuesta personalizada</span>
            </div>
          </div>}
      </div>
    </div>);

}

window.mxQuizOpen = () => window.dispatchEvent(new Event('mx-quiz'));
Object.assign(window, { MxQuiz });