// ─────────────────────────────────────────────────────────────
// views.jsx — UI views for the diagnóstico
// Inicio · Encuesta · Resultados · Gracias
// ─────────────────────────────────────────────────────────────

const { useState, useEffect, useRef, useMemo } = React;

// ═════════ MINI RADAR (SVG, used in inicio preview) ═════════
function MiniRadar({ values, labels, color = "#009aba" }) {
  const cx = 240, cy = 190, r = 130;
  const n = values.length;
  const angle = (i) => -Math.PI/2 + i * (2*Math.PI/n);
  const ringPts = (v) => Array.from({length:n}, (_,i) => {
    const a = angle(i); const rr = (v/4)*r;
    return `${cx + Math.cos(a)*rr},${cy + Math.sin(a)*rr}`;
  }).join(' ');
  const valPts = values.map((v,i) => {
    const a = angle(i); const rr = (v/4)*r;
    return `${cx + Math.cos(a)*rr},${cy + Math.sin(a)*rr}`;
  }).join(' ');
  return (
    <svg viewBox="0 0 480 380">
      {[1,2,3,4].map(v => (
        <polygon key={v} points={ringPts(v)} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="1"/>
      ))}
      {labels.map((_,i) => {
        const a = angle(i);
        return <line key={i} x1={cx} y1={cy} x2={cx+Math.cos(a)*r} y2={cy+Math.sin(a)*r} stroke="rgba(255,255,255,0.05)" strokeWidth="1"/>;
      })}
      <polygon points={valPts} fill={color} fillOpacity="0.18" stroke={color} strokeWidth="2"/>
      {values.map((v,i) => {
        const a = angle(i); const rr = (v/4)*r;
        return <circle key={i} cx={cx+Math.cos(a)*rr} cy={cy+Math.sin(a)*rr} r="4" fill={color} stroke="#0c3c5b" strokeWidth="1.5"/>;
      })}
      {labels.map((lbl,i) => {
        const a = angle(i); const rr = r + 22;
        const x = cx + Math.cos(a)*rr, y = cy + Math.sin(a)*rr;
        const anchor = Math.abs(Math.cos(a)) < 0.2 ? 'middle' : Math.cos(a) > 0 ? 'start' : 'end';
        return <text key={i} x={x} y={y} fill="rgba(255,255,255,0.7)" fontSize="12" fontFamily="JetBrains Mono" textAnchor={anchor} dominantBaseline="middle">{lbl}</text>;
      })}
    </svg>
  );
}
window.MiniRadar = MiniRadar;

// ═════════ INICIO ═════════
function Inicio({ onStart }) {
  const previewValues = [3.2, 2.6, 2.1, 2.4, 1.8, 2.9];
  const previewLabels = AREAS.map(a => a.corto);

  return (
    <div className="inicio container">
      <div className="inicio-grid">
        <div className="left fade-up">
          <div className="eyebrow with-line" style={{marginBottom: 28}}>DIAGNÓSTICO · 36 AFIRMACIONES · 6 EJES</div>
          <h1 className="display-1">
            <span className="small">Madurez en</span>
            Talento<br/>Humano.
          </h1>
          <p className="lede">
            Un instrumento diseñado para que equipos directivos entiendan en qué nivel está la gestión de personas en su empresa y dónde priorizar los próximos 90 días.
          </p>
          <div className="cta-block">
            <button className="btn btn-primary btn-lg" onClick={onStart}>
              Iniciar diagnóstico
              <UIIcon name="arrow-right" size={16} strokeWidth={3}/>
            </button>
            <div style={{fontSize: 13, color: 'var(--ink-soft)'}}>
              8 minutos · Sin registro inicial
            </div>
          </div>

          <div className="meta-row">
            <div className="meta-item">
              <div className="meta-k">Tiempo</div>
              <div className="meta-v">8<small>min</small></div>
            </div>
            <div className="meta-item">
              <div className="meta-k">Formato</div>
              <div className="meta-v">PDF</div>
            </div>
            <div className="meta-item">
              <div className="meta-k">Costo</div>
              <div className="meta-v">Gratis</div>
            </div>
          </div>
        </div>

        <div className="right fade-up d-2">
          <div className="preview">
            <div className="preview-label">Vista previa del informe</div>
            <h3>Tu mapa de madurez por área</h3>
            <div className="radar-wrap"><MiniRadar values={previewValues} labels={previewLabels}/></div>
            <div className="area-list">
              {previewLabels.map((l,i) => (
                <div className="area-row" key={i}>
                  <span>{l}</span>
                  <span className="bar"><span className="fill" style={{width: `${(previewValues[i]/4)*100}%`}}></span></span>
                  <span className="lvl">{previewValues[i].toFixed(1)}/4.0</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* MÉTODO */}
      <div className="method-strip fade-up d-3">
        <div className="method-step">
          <div className="method-num">01</div>
          <h4>Responde con honestidad</h4>
          <p>36 afirmaciones agrupadas en 6 ejes. Te toma 8 minutos. Califica cada una según cómo está la empresa hoy, no como te gustaría que fuera.</p>
        </div>
        <div className="method-step">
          <div className="method-num">02</div>
          <h4>Recibe tu informe en PDF</h4>
          <p>Un análisis narrativo por cada área, tu nivel global de madurez y un set de acciones priorizadas para los próximos 90 días.</p>
        </div>
        <div className="method-step">
          <div className="method-num">03</div>
          <h4>Conversa, si tiene sentido</h4>
          <p>Si quieres profundizar en alguno de los resultados, conversemos. Te acompañamos a convertir el diagnóstico en un plan real.</p>
        </div>
      </div>

      {/* ÁREAS EVALUADAS */}
      <div className="areas-band fade-up d-4">
        <div className="eyebrow with-line">Ejes que vamos a medir</div>
        <h2 className="display-2">Las 6 áreas que definen la <span style={{color: 'var(--turquesa)'}}>madurez</span> de la gestión humana.</h2>
        <div className="areas-grid">
          {AREAS.map((a, i) => (
            <div className="area-cell" key={a.id}>
              <div className="num">EJE {String(i+1).padStart(2,'0')} · 6 afirmaciones</div>
              <div className="ico"><AreaIcon id={a.id} size={32}/></div>
              <h4>{a.nombre}</h4>
              <p>{a.descripcion}</p>
            </div>
          ))}
        </div>

        <div className="areas-cta">
          <div className="areas-cta-copy">
            <div className="eyebrow">¿Listo para empezar?</div>
            <h3>Descubre en qué nivel está tu gestión humana hoy.</h3>
          </div>
          <div className="areas-cta-action">
            <button className="btn btn-primary btn-lg" onClick={onStart}>
              Iniciar diagnóstico
              <UIIcon name="arrow-right" size={16} strokeWidth={3}/>
            </button>
            <div className="areas-cta-note">8 minutos · 36 afirmaciones · Sin registro inicial</div>
          </div>
        </div>
      </div>
    </div>
  );
}
window.Inicio = Inicio;

// ═════════ ENCUESTA ═════════
function Encuesta({ areaIdx, respuestas, onAnswer, onNext, onPrev }) {
  const area = AREAS[areaIdx];
  const totalAreas = AREAS.length;
  const [showAlert, setShowAlert] = useState(false);

  // count answered in this area
  const answeredInArea = Array.from({length:6}).filter((_,i) => respuestas[`${areaIdx}_${i}`]).length;
  const allAnswered = answeredInArea === 6;

  function handleNext() {
    if (!allAnswered) { setShowAlert(true); return; }
    setShowAlert(false);
    onNext();
  }
  function handleAnswer(qIdx, value) {
    setShowAlert(false);
    onAnswer(`${areaIdx}_${qIdx}`, value);
  }

  const isLast = areaIdx === totalAreas - 1;

  return (
    <div className="encuesta container-narrow" key={areaIdx}>
      <div className="area-hero fade-up">
        <div className="ico-wrap"><AreaIcon id={area.id} size={42}/></div>
        <div>
          <div className="area-num">EJE {String(areaIdx+1).padStart(2,'0')} DE {String(totalAreas).padStart(2,'0')}</div>
          <h1>{area.nombre}</h1>
          <div className="desc">{area.descripcion}</div>
        </div>
        <div className="right-meta">
          <div className="k">Progreso del eje</div>
          <div className="v">{answeredInArea}<small style={{fontSize:14,color:'var(--ink-soft)'}}>/6</small></div>
        </div>
      </div>

      {/* Scale legend */}
      <div className="scale-legend fade-up d-1">
        <div className="lbl">Califica cada afirmación según el estado real de tu empresa hoy</div>
        <div className="options-row">
          {OPCIONES.map(op => (
            <div className="legend-cell" key={op.valor}>
              <span className="code">{op.codigo}</span>
              {op.texto}
            </div>
          ))}
        </div>
      </div>

      {/* Afirmaciones */}
      <div className="afirmaciones-card">
        {area.afirmaciones.map((af, i) => {
          const key = `${areaIdx}_${i}`;
          const selected = respuestas[key];
          return (
            <div className="afirmacion fade-up" style={{animationDelay: `${0.1 + i * 0.05}s`}} key={i}>
              <div className="afirmacion-left">
                <div className="afirmacion-num">{String(areaIdx*6 + i + 1).padStart(2,'0')}</div>
                <div className="afirmacion-text">{af}</div>
              </div>
              <div className="opciones">
                {OPCIONES.map(op => (
                  <label className={`opcion l${op.valor}`} key={op.valor}>
                    <input type="radio" name={`q_${key}`} value={op.valor}
                      checked={selected == op.valor}
                      onChange={() => handleAnswer(i, op.valor)}/>
                    <div className="opcion-card">
                      <div className="opcion-dots">
                        <span/><span/><span/><span/>
                      </div>
                      <span>{op.texto}</span>
                    </div>
                  </label>
                ))}
              </div>
            </div>
          );
        })}
      </div>

      <div className="nav-buttons">
        {areaIdx > 0
          ? <button className="btn btn-ghost" onClick={onPrev}>
              <UIIcon name="arrow-left" size={14} strokeWidth={2.5}/>
              Eje anterior
            </button>
          : <span/>
        }
        <button className="btn btn-primary" onClick={handleNext}>
          {isLast ? 'Ver mis resultados' : 'Siguiente eje'}
          <UIIcon name="arrow-right" size={14} strokeWidth={3}/>
        </button>
      </div>

      {showAlert && (
        <div className="alert fade-up">
          <span className="ico"><UIIcon name="sparkle" size={16}/></span>
          Por favor responde las {6 - answeredInArea} afirmaciones restantes antes de continuar.
        </div>
      )}
    </div>
  );
}
window.Encuesta = Encuesta;

// ═════════ RESULTADOS ═════════
// Chart.js radar rendered into a canvas via ref
function ResultRadar({ values, labels }) {
  const canvasRef = useRef(null);
  const chartRef = useRef(null);
  useEffect(() => {
    if (!canvasRef.current) return;
    if (chartRef.current) chartRef.current.destroy();
    chartRef.current = new Chart(canvasRef.current, {
      type: 'radar',
      data: {
        labels,
        datasets: [{
          label: 'Tu empresa',
          data: values,
          backgroundColor: 'rgba(0,154,186,0.18)',
          borderColor: '#009aba',
          borderWidth: 2.5,
          pointBackgroundColor: '#009aba',
          pointBorderColor: '#0c3c5b',
          pointBorderWidth: 1.5,
          pointRadius: 5,
          pointHoverRadius: 7,
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: true,
        animation: { duration: 900, easing: 'easeOutCubic' },
        scales: {
          r: {
            min: 0, max: 4,
            ticks: { stepSize: 1, display: false, backdropColor: 'transparent' },
            pointLabels: {
              font: { size: 12, family: 'Be Vietnam Pro', weight: '500' },
              color: 'rgba(255,255,255,0.85)',
              padding: 8,
            },
            grid: { color: 'rgba(255,255,255,0.08)' },
            angleLines: { color: 'rgba(255,255,255,0.08)' },
          }
        },
        plugins: { legend: { display: false }, tooltip: { enabled: false } }
      }
    });
    return () => chartRef.current && chartRef.current.destroy();
  }, [JSON.stringify(values), JSON.stringify(labels)]);
  return <canvas ref={canvasRef}/>;
}

function Resultados({ resultados, onSubmit, leadFormError, isSubmitting }) {
  const nivelGlobal = resultados.global;
  const nivelData = NIVELES[nivelGlobal - 1];
  const radarValues = AREAS.map((_, i) => resultados[i+1].promedio);
  const radarLabels = AREAS.map(a => a.corto);

  const [form, setForm] = useState({ nombre: '', empresa: '', cargo: '', email: '' });
  function handleSubmit(e) {
    e.preventDefault();
    onSubmit(form);
  }

  // Ordered areas by score asc for prioritized recs (where to focus)
  const ordered = AREAS.map((a, i) => ({ ...a, ...resultados[i+1] }))
                       .sort((a,b) => a.promedio - b.promedio);
  const focoArea = ordered[0]; // lowest

  return (
    <div className="resultados container">
      {/* HERO RESULT */}
      <div className="result-hero fade-up">
        <div className="result-hero-grid">
          <div>
            <div className="eyebrow with-line result-level-label">Tu nivel global de madurez</div>
            <h1 className="result-level-name">{nivelData.nombre}.</h1>
            <p className="result-level-msg">{nivelData.mensaje}</p>
            <div className="result-score-block">
              <div>
                <div className="result-score-label">Puntaje global</div>
                <div className="result-score">
                  {resultados.globalProm.toFixed(2)}<small> / 4.00</small>
                </div>
              </div>
              <div style={{flex:1}}/>
              <div>
                <div className="result-score-label">Foco prioritario</div>
                <div style={{fontFamily:'var(--font-display)', fontSize: 18, fontWeight: 500, color: '#ffffff'}}>
                  {focoArea.corto}
                </div>
              </div>
            </div>
          </div>
          <div className="result-right">
            <div className="result-radar-card">
              <ResultRadar values={radarValues} labels={radarLabels}/>
            </div>
          </div>
        </div>
      </div>

      {/* AREAS RESULTS LIST */}
      <div className="section-heading fade-up d-1" style={{marginTop: 64}}>
        <div className="left">
          <div className="eyebrow with-line">Resultados por eje</div>
          <h2>Cómo se distribuye la madurez en cada área.</h2>
        </div>
      </div>
      <div className="areas-results fade-up d-2">
        {AREAS.map((a, i) => {
          const r = resultados[i+1];
          const nivel = NIVELES[r.nivel - 1];
          const fillPct = (r.promedio / 4) * 100;
          return (
            <div className="area-result" key={a.id}>
              <div className="ico-wrap"><AreaIcon id={a.id} size={22}/></div>
              <div className="name">
                {a.nombre}
                <small>EJE {String(i+1).padStart(2,'0')}</small>
              </div>
              <div className="bar-wrap">
                <span className="bar"><span className="fill" style={{width: `${fillPct}%`, background: nivel.color}}/></span>
              </div>
              <div className="score">{r.promedio.toFixed(2)}<small>/4</small></div>
              <div className="lvl-badge" style={{background: `${nivel.color}22`, color: nivel.color, border: `1px solid ${nivel.color}55`}}>
                {nivel.nombre}
              </div>
            </div>
          );
        })}
      </div>

      {/* LOCKED PREVIEW + LEAD FORM */}
      <div className="section-heading fade-up d-3">
        <div className="left">
          <div className="eyebrow with-line">Próximo paso</div>
          <h2>Tu informe completo te está esperando.</h2>
        </div>
      </div>

      <div className="lead-card fade-up d-3">
        <div className="lead-card-inner">
          <div className="lead-card-grid">
            <div className="lead-pitch">
              <p className="lede" style={{marginBottom: 24}}>
                Acabas de ver el resumen. El <strong style={{color:'#ffffff', fontWeight: 600}}>informe completo en PDF</strong> incluye el análisis detallado de cada uno de los 6 ejes con acciones priorizadas para empezar a actuar la próxima semana.
              </p>
              <ul>
                <li><span className="ico"><UIIcon name="check" size={18} strokeWidth={2.5}/></span><span>Diagnóstico narrativo personalizado para cada eje, escrito por consultoras de Alfa Psicología.</span></li>
                <li><span className="ico"><UIIcon name="check" size={18} strokeWidth={2.5}/></span><span>4 acciones priorizadas por área, accionables en los próximos 90 días.</span></li>
                <li><span className="ico"><UIIcon name="check" size={18} strokeWidth={2.5}/></span><span>Mapa visual de madurez con tu posición en cada eje.</span></li>
                <li><span className="ico"><UIIcon name="check" size={18} strokeWidth={2.5}/></span><span>Plan de foco prioritario basado en tus resultados.</span></li>
              </ul>
            </div>

            <form className="lead-form" onSubmit={handleSubmit}>
              <div style={{marginBottom: 20}}>
                <span className="eyebrow with-line" style={{marginBottom: 8, display: 'flex'}}>Recibe tu informe</span>
                <h3 className="h3" style={{color:'#ffffff', marginTop: 8}}>Déjanos tus datos.</h3>
              </div>
              <div className="form-grid">
                <div className="form-field">
                  <label className="form-label">Nombre *</label>
                  <input className="form-input" type="text" value={form.nombre} required
                    onChange={e => setForm({...form, nombre: e.target.value})}
                    placeholder="Cómo te llamas"/>
                </div>
                <div className="form-field">
                  <label className="form-label">Empresa *</label>
                  <input className="form-input" type="text" value={form.empresa} required
                    onChange={e => setForm({...form, empresa: e.target.value})}
                    placeholder="Tu organización"/>
                </div>
                <div className="form-field">
                  <label className="form-label">Cargo *</label>
                  <input className="form-input" type="text" value={form.cargo} required
                    onChange={e => setForm({...form, cargo: e.target.value})}
                    placeholder="Tu rol"/>
                </div>
                <div className="form-field">
                  <label className="form-label">Correo corporativo *</label>
                  <input className="form-input" type="email" value={form.email} required
                    onChange={e => setForm({...form, email: e.target.value})}
                    placeholder="tu@empresa.com"/>
                </div>
              </div>
              <div className="submit-row">
                <button type="submit" className="btn btn-primary btn-lg" disabled={isSubmitting}>
                  {isSubmitting ? 'Generando informe…' : 'Descargar mi informe en PDF'}
                  <UIIcon name="download" size={16} strokeWidth={2.5}/>
                </button>
                <div className="privacy">
                  <UIIcon name="lock" size={12} strokeWidth={2}/>
                  Confidencial. No compartimos tus datos.
                </div>
              </div>
              {leadFormError && (
                <div className="alert" style={{marginTop: 16}}>
                  <span className="ico"><UIIcon name="sparkle" size={16}/></span>
                  {leadFormError}
                </div>
              )}
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}
window.Resultados = Resultados;

// ═════════ GRACIAS ═════════
function Gracias({ onRedownload, lead }) {
  const waUrl = `https://wa.me/573013290047?text=Hola+Diana%2C+acabo+de+descargar+el+diagn%C3%B3stico+de+madurez+en+talento+humano+de+Alfa+Psicolog%C3%ADa+y+me+gustar%C3%ADa+conversar+sobre+los+resultados+de+mi+empresa.`;
  return (
    <div className="gracias container-narrow">
      <div className="gracias-hero fade-up">
        <div className="gracias-check"><UIIcon name="check" size={32} strokeWidth={2.5}/></div>
        <h1 className="display-2">Tu informe está listo, {lead?.nombre?.split(' ')[0] || ''}.</h1>
        <p>Si la descarga no comenzó automáticamente, haz clic en el botón. Te lo enviamos también al correo que registraste para que lo tengas a la mano.</p>
        <div style={{display:'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap'}}>
          <button className="btn btn-primary" onClick={onRedownload}>
            <UIIcon name="download" size={16} strokeWidth={2.5}/>
            Descargar de nuevo
          </button>
          <a href={waUrl} target="_blank" rel="noopener" className="btn btn-secondary">
            <UIIcon name="mail" size={16}/>
            Ya tengo mi informe
          </a>
        </div>
      </div>

      <div className="gracias-cta-card fade-up d-2">
        <div className="photo"/>
        <div className="right">
          <div className="eyebrow with-line" style={{marginBottom: 14}}>
            HABLEMOS
          </div>
          <h2 className="h2">¿Quieres profundizar en tus resultados?</h2>
          <p>Soy Diana Carolina Villegas, directora comercial de Alfa Psicología. Si los resultados resonaron con lo que estás viviendo, agendemos una conversación. Sin venta dura: Escuchamos tu contexto y te decimos honestamente por dónde te conviene empezar.</p>

          <div className="contact-grid">
            <div className="contact-item">
              <div className="k">WHATSAPP / MÓVIL</div>
              <div className="v">+57 301 329 0047</div>
            </div>
            <div className="contact-item">
              <div className="k">LÍNEA NACIONAL</div>
              <div className="v">01 8000 423 803</div>
            </div>
            <div className="contact-item">
              <div className="k">CORREO</div>
              <div className="v">hablemos@alfapsicologia.com</div>
            </div>
            <div className="contact-item">
              <div className="k">SITIO WEB</div>
              <div className="v">www.alfapsicologia.com</div>
            </div>
          </div>

          <div className="cta-row">
            <a href={waUrl} target="_blank" rel="noopener" className="btn btn-wa">
              <UIIcon name="whatsapp" size={18}/>
              Hablar con Diana por WhatsApp
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}
window.Gracias = Gracias;