// DASHBOARD CLIENTE
window.Dashboard = function Dashboard({ navigate, store }) {
  const BASE = window.API_BASE || '/simuladordocente/api';
  const NIVELES = (store.niveles && store.niveles.length) ? store.niveles : window.SD_SEED.NIVELES;
  const PRUEBAS = store.pruebas || window.SD_SEED.PRUEBAS;
  const [tab,         setTab]         = React.useState('materias');
  const [intentosData, setIntentosData] = React.useState(null);

  // Cargar contadores de intentos cuando hay sesión real
  React.useEffect(() => {
    const tok = localStorage.getItem('sd_token');
    if (!tok || !store.session) return;
    fetch(`${BASE}/me/intentos`, { headers: { Authorization: `Bearer ${tok}` } })
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (d) setIntentosData(d); })
      .catch(() => {});
  }, [store.session?.sub]);

  if (!store.session) { navigate('/login'); return null; }

  return (
    <div>
      <DashHeader navigate={navigate} store={store} />
      <div className="container" style={{ paddingTop: 36, paddingBottom: 80 }}>
        <div className="dash-welcome">
          <div>
            <span className="eyebrow">Mi panel</span>
            <h2 style={{ marginTop: 8 }}>Hola, {store.session.nombre.split(' ')[0]} 👋</h2>
            <p className="muted" style={{ fontSize: 15, marginTop: 8 }}>
              Practica con simuladores muestra (gratis) o desbloquea simuladores completos por materia.
            </p>
          </div>
          <div className="dash-stats">
            <div><strong>{store.premiumIds.length}</strong><span>simuladores premium</span></div>
          </div>
        </div>

        <div className="dash-tabs">
          <button className={`dash-tab ${tab==='materias'?'active':''}`}   onClick={()=>setTab('materias')}>Mis materias</button>
          <button className={`dash-tab ${tab==='resultados'?'active':''}`} onClick={()=>setTab('resultados')}>Mis resultados</button>
          <button className={`dash-tab ${tab==='compras'?'active':''}`}    onClick={()=>setTab('compras')}>Mis compras</button>
        </div>

        {tab === 'materias' && (
          <div className="dash-niveles">
            {NIVELES.map((n) => {
              const pruebaNivel = PRUEBAS.filter(p => (p.nivel || p.nivel_id) === n.id);
              // Agrupar por materiaKey
              const groups = {};
              pruebaNivel.forEach(p => {
                const key = p.materiaKey || p.materia_key || n.id;
                if (!groups[key]) groups[key] = [];
                groups[key].push(p);
              });
              const groupList = Object.values(groups);
              if (!groupList.length) return null;
              return (
                <section key={n.id} className="dash-nivel-section">
                  <div className="dash-nivel-head">
                    <h3>{n.nombre}</h3>
                    <span className="muted" style={{ fontSize: 13 }}>{groupList.length} {groupList.length === 1 ? 'materia' : 'materias'}</span>
                  </div>
                  <div className="dash-grid">
                    {groupList.map(group => (
                      <MateriaCard key={group[0].materiaKey || group[0].materia_key || group[0].id}
                        pruebas={group} store={store} navigate={navigate}
                        nivel={n}
                        intentosData={intentosData}
                        limiteMuestra={intentosData?.limite_muestra ?? 5}
                      />
                    ))}
                  </div>
                </section>
              );
            })}
          </div>
        )}

        {tab === 'resultados' && (
          <ResultadosTab store={store} navigate={navigate}
            limiteMuestra={intentosData?.limite_muestra ?? 5}
          />
        )}
        {tab === 'compras'    && <ComprasTable navigate={navigate} store={store} />}
      </div>
    </div>
  );
};

// ── Tarjeta de materia: 1 muestra + 3 completos ───────────────
function MateriaCard({ pruebas, store, navigate, nivel }) {
  // Datos compartidos de la materia
  const pRef   = pruebas.find(p => p.tipo === 'admision') || pruebas[0];
  const matNombre = pRef.materiaNombre || pRef.materia_nombre;
  // Para Kínder/Primaria (sin materia específica) usar el nombre del nivel
  const nombre = matNombre || (nivel ? nivel.nombre : pRef.nivel_id);
  const icono  = pRef.icono || '📘';
  const precio = pRef.precio || pRef.precio_mxn || 150;

  // Fallback de muestra: cualquier prueba de esta materia que tenga muestra subida
  const fallbackMuestra = pruebas.find(p => p.muestra) || null;
  const tieneMuestra    = !!fallbackMuestra;
  // ¿Al menos un proceso es premium?
  const algunoPremium = pruebas.some(p => store.hasPremium(p.id));

  const TIPOS = [
    { id: 'admision',           label: 'Admisión' },
    { id: 'promocion_vertical', label: 'Horas Adicionales' },
    { id: 'promocion_horizontal',     label: 'Promoción Horizontal' },
  ];

  return (
    <div className={`prueba-card ${algunoPremium ? 'is-premium' : ''}`}>
      {/* Cabecera */}
      <div className="row" style={{ justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
        <div className="prueba-icono" style={{ fontSize: 28 }}>{icono}</div>
        {algunoPremium
          ? <span className="pill pill-amber">★ Acceso parcial</span>
          : tieneMuestra
            ? <span className="pill pill-teal">Diagnóstico gratis</span>
            : <span className="pill" style={{ background: 'var(--bg-2)' }}>Próximamente</span>}
      </div>

      <h4 style={{ fontSize: 15, fontWeight: 700, marginBottom: 2 }}>{nombre}</h4>
      <p className="muted" style={{ fontSize: 12, marginBottom: 14 }}>
        {window.formatPrice(precio)} por proceso · acceso permanente
      </p>

      {/* 3 procesos: cada uno independiente */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 8 }}>
        {TIPOS.map(tipo => {
          const p = pruebas.find(pr => pr.tipo === tipo.id);
          if (!p) return null;
          const esPremium  = store.hasPremium(p.id);
          const enCarrito  = store.cart.includes(p.id);
          const hasCompleto = !!p.completo;
          const pMuestra   = p.muestra ? p : fallbackMuestra;
          const hasMuestra = !!pMuestra;
          const precioProceso = p.precio || p.precio_mxn || 150;

          return (
            <div key={tipo.id} style={{ border: `1px solid ${esPremium ? 'var(--amber)' : 'var(--border)'}`, borderRadius: 10, padding: '10px 12px', background: esPremium ? 'var(--amber-soft)' : 'var(--bg-2)' }}>
              {/* Encabezado del proceso */}
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: hasMuestra || esPremium ? 8 : 0 }}>
                <span style={{ fontSize: 12, fontWeight: 700, color: esPremium ? '#92400E' : 'var(--ink)' }}>
                  {esPremium ? '★ ' : ''}{tipo.label}
                </span>
                {/* Acción principal */}
                {esPremium ? (
                  hasCompleto ? (
                    <button className="btn btn-sm" style={{ fontSize: 11, padding: '3px 10px', background: 'var(--amber)', color: '#fff', border: 'none' }}
                      onClick={() => { window.sdTrack && window.sdTrack('abrir_completo', p.id); navigate(`/simulador/${p.id}/completo`); }}>
                      Abrir completo
                    </button>
                  ) : (
                    <span className="muted" style={{ fontSize: 11 }}>Completo próximamente</span>
                  )
                ) : enCarrito ? (
                  <button className="btn btn-ghost btn-sm" style={{ fontSize: 11 }}
                    onClick={() => navigate('/checkout')}>
                    En carrito →
                  </button>
                ) : hasCompleto ? (
                  <button className="btn btn-sm" style={{ fontSize: 11, padding: '3px 10px', background: 'var(--teal-2)', color: '#fff', border: 'none' }}
                    onClick={() => { window.sdTrack && window.sdTrack('click_comprar', p.id); store.addToCart(p.id); navigate('/checkout'); }}>
                    ★ {window.formatPrice(precioProceso)}
                  </button>
                ) : (
                  <span className="muted" style={{ fontSize: 11 }}>Próximamente</span>
                )}
              </div>
              {/* Botón diagnóstico */}
              {hasMuestra && !esPremium && (
                <button className="btn btn-ghost btn-sm" style={{ fontSize: 11, width: '100%', textAlign: 'left', padding: '4px 0' }}
                  title={!p.muestra ? `Muestra de otro proceso` : ''}
                  onClick={() => { window.sdTrack && window.sdTrack('abrir_muestra', pMuestra.id); navigate(`/simulador/${pMuestra.id}/muestra`); }}>
                  {p.muestra ? '→ Diagnóstico gratuito' : '→ Diagnóstico (otro proceso)'}
                </button>
              )}
              {/* PDFs del proceso (solo si premium) */}
              {esPremium && (
                <MaterialesList pruebaId={p.id} isPremium={true} />
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ── Lista de PDFs por proceso (solo para usuarios premium de ese proceso) ──
function MaterialesList({ pruebaId, isPremium }) {
  const BASE = window.API_BASE || '/simuladordocente/api';
  const [mats, setMats] = React.useState(null);

  React.useEffect(() => {
    const tok = localStorage.getItem('sd_token');
    if (!tok || !pruebaId) return;
    fetch(`${BASE}/materiales/${encodeURIComponent(pruebaId)}`, {
      headers: { Authorization: `Bearer ${tok}` },
    }).then(r => r.ok ? r.json() : { materiales: [] })
      .then(d => setMats(d.materiales || []))
      .catch(() => setMats([]));
  }, [pruebaId]);

  if (!mats || mats.length === 0) return null;

  const resolveUrl = url => url && (url.startsWith('/') || url.startsWith('http'))
    ? url : url ? `/simuladordocente/${url}` : null;

  return (
    <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 5 }}>
      <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--teal-2)', marginBottom: 2 }}>📄 Material de estudio</div>
      {mats.map(m => {
        const url = resolveUrl(m.archivo_url);
        return url ? (
          <a key={m.id} href={url} target="_blank" rel="noreferrer"
            style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11, color: 'var(--teal-2)', textDecoration: 'none', background: 'rgba(255,255,255,0.6)', borderRadius: 6, padding: '5px 8px' }}>
            <span>📄</span><span style={{ flex: 1 }}>{m.titulo}</span><span style={{ opacity: 0.6 }}>↗</span>
          </a>
        ) : null;
      })}
    </div>
  );
}

function PruebaCard({ prueba, store, navigate, intentosInfo, limiteMuestra = 5 }) {
  const isPremium     = store.hasPremium(prueba.id);
  const inCart        = store.cart.includes(prueba.id);
  const tieneMuestra  = !!prueba.muestra;
  const tieneCompleto = !!prueba.completo;
  const precio        = prueba.precio || prueba.precio_mxn || 150;

  // Datos de muestra (limitado para no-premium)
  const muestraInfo = intentosInfo?.muestra;
  const intentosM   = muestraInfo?.intentos ?? 0;
  const bonusM      = muestraInfo?.bonus ?? 0;
  const limEfM      = limiteMuestra + bonusM;
  const agotados    = !isPremium && tieneMuestra && intentosM >= limEfM;

  // Datos de completo (sin límite)
  const completoInfo = intentosInfo?.completo;
  const intentosC    = completoInfo?.intentos ?? 0;

  const tieneHistorial = (muestraInfo?.intentos ?? 0) > 0 || (completoInfo?.intentos ?? 0) > 0;
  const [modal,     setModal]     = React.useState(false);
  const [modalTab,  setModalTab]  = React.useState('muestra');

  // Pill de estado
  let pill;
  if (isPremium)         pill = <span className="pill pill-amber">★ Premium</span>;
  else if (tieneMuestra) pill = <span className="pill pill-teal">Muestra gratis</span>;
  else                   pill = <span className="pill" style={{ background:'var(--bg-2)' }}>Próximamente</span>;

  const fmtDur   = (s) => !s ? '—' : s < 60 ? `${s}s` : `${Math.floor(s/60)}m ${s%60}s`;
  const fmtFecha = (d) => new Date(d).toLocaleDateString('es-MX', { day:'numeric', month:'short' });
  const scoreColor = (v) => v >= 70 ? 'var(--green)' : v >= 50 ? 'var(--amber)' : 'var(--red)';

  // Qué info/límite mostrar en el modal según el tab activo
  const modalInfo  = modalTab === 'completo' ? completoInfo  : muestraInfo;
  const modalLimit = modalTab === 'completo' ? limEfC : limEfM;
  const modalUsed  = modalTab === 'completo' ? intentosC : intentosM;

  return (
    <>
      <div className={`prueba-card ${isPremium ? 'is-premium' : ''}`}>
        <div className="row" style={{ justifyContent: 'space-between' }}>
          <div className="prueba-icono">{prueba.icono || '📘'}</div>
          {pill}
        </div>
        <h4 style={{ marginTop: 14, fontSize: 16 }}>
          {prueba.materiaNombre || prueba.nombre.replace(/^[^·]+·\s*/, '')}
        </h4>
        <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{prueba.preguntas} preguntas</div>

        {/* ── Contador de intentos ── */}
        {tieneHistorial && (
          <button onClick={() => setModal(true)} style={{
            marginTop: 10, width: '100%', background: 'var(--bg-2)',
            border: '1px solid var(--border)', borderRadius: 8,
            padding: '7px 10px', cursor: 'pointer', textAlign: 'left',
          }}>
            {/* Muestra counter — solo si no es premium */}
            {!isPremium && intentosM > 0 && (
              <>
                <div className="row" style={{ justifyContent: 'space-between', marginBottom: 4 }}>
                  <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink-soft)', textTransform: 'uppercase', letterSpacing: 0.5 }}>
                    Muestra
                  </span>
                  <span style={{ fontSize: 12, fontWeight: 700, color: agotados ? 'var(--red)' : 'var(--teal-2)' }}>
                    {intentosM}/{limEfM}
                  </span>
                </div>
                <div style={{ display: 'flex', gap: 3, marginBottom: 6 }}>
                  {Array.from({ length: limEfM }).map((_, i) => (
                    <div key={i} style={{ flex: 1, height: 4, borderRadius: 2,
                      background: i < intentosM ? (agotados ? 'var(--red)' : 'var(--teal)') : 'var(--border)' }} />
                  ))}
                </div>
              </>
            )}
            {/* Completo — muestra conteo sin límite */}
            {isPremium && intentosC > 0 && (
              <div className="row" style={{ justifyContent: 'space-between', marginBottom: 6 }}>
                <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink-soft)', textTransform: 'uppercase', letterSpacing: 0.5 }}>
                  ★ Completo
                </span>
                <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--amber)' }}>
                  {intentosC} intento{intentosC !== 1 ? 's' : ''}
                </span>
              </div>
            )}
            {/* Mejor calificación */}
            {(muestraInfo?.calificacion_max != null || completoInfo?.calificacion_max != null) && (
              <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 2 }}>
                {muestraInfo?.calificacion_max != null &&
                  <>Mejor muestra: <strong style={{ color:'var(--ink)' }}>{muestraInfo.calificacion_max.toFixed(1)}%</strong></>}
                {muestraInfo?.calificacion_max != null && completoInfo?.calificacion_max != null && ' · '}
                {completoInfo?.calificacion_max != null &&
                  <>Mejor completo: <strong style={{ color:'var(--amber)' }}>{completoInfo.calificacion_max.toFixed(1)}%</strong></>}
                {' · '}ver historial →
              </div>
            )}
          </button>
        )}

        <div className="prueba-actions" style={{ marginTop: 12 }}>
          {tieneMuestra && !agotados ? (
            <button className="btn btn-ghost btn-sm btn-block"
              onClick={() => navigate(`/simulador/${prueba.id}/muestra`)}>
              ▷ Muestra gratis
            </button>
          ) : tieneMuestra && agotados ? (
            <button className="btn btn-ghost btn-sm btn-block" disabled style={{ opacity: 0.5 }}>
              Intentos muestra agotados
            </button>
          ) : (
            <button className="btn btn-ghost btn-sm btn-block" disabled>Sin muestra disponible</button>
          )}

          {isPremium ? (
            <button className="btn btn-amber btn-sm btn-block"
              onClick={() => navigate(`/simulador/${prueba.id}/completo`)}>
              ★ Lanzar simulador completo
            </button>
          ) : !tieneCompleto ? (
            <button className="btn btn-ghost btn-sm btn-block" disabled>Aún no disponible</button>
          ) : inCart ? (
            <button className="btn btn-teal btn-sm btn-block" onClick={() => navigate('/checkout')}>
              ✓ En carrito · ir a pagar
            </button>
          ) : (
            <button className="btn btn-primary btn-sm btn-block"
              onClick={() => store.addToCart(prueba.id)}>
              Desbloquear · {window.formatPrice(precio)}
            </button>
          )}
        </div>
      </div>

      {/* ── Mini modal de resultados ── */}
      {modal && (
        <div className="modal-bg" onClick={() => setModal(false)}>
          <div className="modal-box" onClick={e => e.stopPropagation()} style={{ maxWidth: 440 }}>
            <div className="row" style={{ justifyContent: 'space-between', marginBottom: 12 }}>
              <div>
                <h4 style={{ fontSize: 16 }}>
                  {prueba.icono} {prueba.materiaNombre || prueba.nombre.replace(/^[^·]+·\s*/, '')}
                </h4>
                <div className="muted" style={{ fontSize: 12, marginTop: 3 }}>Historial de intentos</div>
              </div>
              <button className="btn btn-link" onClick={() => setModal(false)}>✕</button>
            </div>

            {/* Tabs muestra / completo */}
            {(muestraInfo || completoInfo) && (
              <div className="dash-tabs" style={{ marginBottom: 14 }}>
                {muestraInfo && (
                  <button className={`dash-tab ${modalTab==='muestra'?'active':''}`}
                    onClick={() => setModalTab('muestra')}>
                    Muestra ({intentosM})
                  </button>
                )}
                {completoInfo && (
                  <button className={`dash-tab ${modalTab==='completo'?'active':''}`}
                    onClick={() => setModalTab('completo')}>
                    ★ Completo ({intentosC})
                  </button>
                )}
              </div>
            )}

            {/* Resumen */}
            <div style={{ display: 'flex', gap: 12, marginBottom: 14 }}>
              <div style={{ flex: 1, background: 'var(--bg-2)', borderRadius: 8, padding: '10px 14px', textAlign: 'center' }}>
                <div style={{ fontSize: 22, fontWeight: 700, fontFamily: 'Fraunces, serif', color: 'var(--ink)' }}>
                  {modalUsed}<span style={{ fontSize: 13, color: 'var(--muted)' }}>/{modalLimit}</span>
                </div>
                <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 2 }}>intentos usados</div>
              </div>
              {modalInfo?.calificacion_max != null && (
                <div style={{ flex: 1, background: 'var(--teal-soft)', borderRadius: 8, padding: '10px 14px', textAlign: 'center' }}>
                  <div style={{ fontSize: 22, fontWeight: 700, fontFamily: 'Fraunces, serif', color: 'var(--teal-2)' }}>
                    {modalInfo.calificacion_max.toFixed(1)}%
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--teal-2)', marginTop: 2 }}>mejor calificación</div>
                </div>
              )}
            </div>

            <table style={{ width:'100%', borderCollapse:'collapse', tableLayout:'fixed', fontSize:13 }}>
              <colgroup>
                <col style={{ width:'28px' }} />
                <col style={{ width:'76px' }} />
                <col />
                <col style={{ width:'64px' }} />
                <col style={{ width:'56px' }} />
              </colgroup>
              <thead>
                <tr style={{ borderBottom:'1px solid var(--border)' }}>
                  <th style={{ padding:'6px 4px', textAlign:'left', fontSize:11, color:'var(--muted)', fontWeight:700, textTransform:'uppercase', letterSpacing:.4 }}>#</th>
                  <th style={{ padding:'6px 4px', textAlign:'left', fontSize:11, color:'var(--muted)', fontWeight:700, textTransform:'uppercase', letterSpacing:.4 }}>Calif.</th>
                  <th style={{ padding:'6px 4px', textAlign:'left', fontSize:11, color:'var(--muted)', fontWeight:700, textTransform:'uppercase', letterSpacing:.4 }}>Habilidad</th>
                  <th style={{ padding:'6px 4px', textAlign:'left', fontSize:11, color:'var(--muted)', fontWeight:700, textTransform:'uppercase', letterSpacing:.4 }}>Tiempo</th>
                  <th style={{ padding:'6px 4px', textAlign:'left', fontSize:11, color:'var(--muted)', fontWeight:700, textTransform:'uppercase', letterSpacing:.4 }}>Fecha</th>
                </tr>
              </thead>
              <tbody>
                {(modalInfo?.resultados || []).map((r, i) => {
                  const hab = r.analisis_pct != null
                    ? { label:'Análisis',    pct: r.analisis_pct,    bg:'#FEF3C7', color:'#92400E' }
                    : r.comprension_pct != null
                      ? { label:'Comprensión', pct: r.comprension_pct, bg:'var(--teal-soft)', color:'var(--teal-2)' }
                      : null;
                  return (
                    <tr key={i} style={{ borderBottom:'1px solid var(--border)' }}>
                      <td style={{ padding:'8px 4px', color:'var(--muted)' }}>{i + 1}</td>
                      <td style={{ padding:'8px 4px', fontFamily:'monospace', fontWeight:600 }}>
                        {r.calificacion != null
                          ? <span style={{ color: scoreColor(r.calificacion) }}>{r.calificacion.toFixed(1)}%</span>
                          : <span className="muted">—</span>}
                      </td>
                      <td style={{ padding:'8px 4px' }}>
                        {hab
                          ? <span style={{
                              display:'inline-block', padding:'2px 7px', borderRadius:4,
                              background: hab.bg, color: hab.color,
                              fontSize:11, fontWeight:700, lineHeight:1.6,
                            }}>
                              {hab.label} · {hab.pct.toFixed(0)}%
                            </span>
                          : <span className="muted">—</span>}
                      </td>
                      <td style={{ padding:'8px 4px', color:'var(--muted)', fontSize:12 }}>{fmtDur(r.duracion_seg)}</td>
                      <td style={{ padding:'8px 4px', color:'var(--muted)', fontSize:11 }}>{fmtFecha(r.creado_en)}</td>
                    </tr>
                  );
                })}
                {(!modalInfo?.resultados || modalInfo.resultados.length === 0) && (
                  <tr><td colSpan="5" style={{ textAlign:'center', padding:20, color:'var(--muted)' }}>Sin resultados registrados</td></tr>
                )}
              </tbody>
            </table>

            {!isPremium && tieneCompleto && (
              <div style={{ marginTop: 14, padding: '12px 14px', background: 'var(--amber-soft)', borderRadius: 8 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: '#92400E' }}>¿Listo para el simulador completo?</div>
                <div style={{ fontSize: 12, color: '#92400E', marginTop: 3 }}>
                  Pago único {window.formatPrice(precio)}.
                </div>
                <button className="btn btn-amber btn-sm" style={{ marginTop: 10 }}
                  onClick={() => { setModal(false); store.addToCart(prueba.id); navigate('/checkout'); }}>
                  ★ Desbloquear simulador completo
                </button>
              </div>
            )}

            <button className="btn btn-ghost btn-block" style={{ marginTop: 12 }} onClick={() => setModal(false)}>
              Cerrar
            </button>
          </div>
        </div>
      )}
    </>
  );
}

// ── Mis Resultados ─────────────────────────────────────────────
function ResultadosTab({ store, navigate }) {
  const BASE = window.API_BASE || '/simuladordocente/api';
  const PRUEBAS = store.pruebas || window.SD_SEED.PRUEBAS;
  const [resultados, setResultados] = React.useState([]);
  const [loading,    setLoading]    = React.useState(true);

  React.useEffect(() => {
    const tok = localStorage.getItem('sd_token');
    if (!tok) { setLoading(false); return; }
    fetch(`${BASE}/me/resultados`, { headers: { Authorization: `Bearer ${tok}` } })
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (d?.resultados) setResultados(d.resultados); setLoading(false); })
      .catch(() => setLoading(false));
  }, []);

  const fmtDur   = s => !s ? '—' : s < 60 ? `${s}s` : `${Math.floor(s/60)}m ${s%60}s`;
  const fmtFecha = d => new Date(d).toLocaleDateString('es-MX', { day:'numeric', month:'short', year:'numeric' });
  const scoreColor = v => v == null ? 'var(--muted)' : v >= 70 ? 'var(--green)' : v >= 50 ? 'var(--amber)' : 'var(--red)';
  const TIPO_LABEL = { admision: 'Admisión', promocion_vertical: 'Horas Adicionales', promocion_horizontal: 'Promoción Horizontal' };

  if (loading) return <div className="muted" style={{ padding: 40, textAlign: 'center' }}>Cargando resultados…</div>;

  if (resultados.length === 0) {
    return (
      <div className="card" style={{ textAlign: 'center', padding: 48 }}>
        <div style={{ fontSize: 40 }}>📊</div>
        <h3 style={{ marginTop: 12 }}>Sin resultados todavía</h3>
        <p className="muted" style={{ marginTop: 8, fontSize: 14 }}>
          Completa un diagnóstico o simulador completo para ver tu historial aquí.
        </p>
        <button className="btn btn-primary" style={{ marginTop: 20 }} onClick={() => navigate('/dashboard')}>
          Ver mis materias
        </button>
      </div>
    );
  }

  // Agrupar por materia_key (para mostrar juntos los 3 tipos)
  const porMateria = {};
  resultados.forEach(r => {
    const mKey = r.materia_key || r.prueba_id;
    const prueba = PRUEBAS.find(p => p.id === r.prueba_id);
    if (!porMateria[mKey]) {
      porMateria[mKey] = {
        icono: r.icono || prueba?.icono || '📘',
        materiaNombre: r.materia_nombre || prueba?.materiaNombre || r.prueba_nombre,
        intentos: [],
      };
    }
    porMateria[mKey].intentos.push(r);
  });

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      {Object.entries(porMateria).map(([mKey, { icono, materiaNombre, intentos }]) => {
        const muestras  = intentos.filter(i => i.modo === 'muestra');
        const completos = intentos.filter(i => i.modo === 'completo');
        const califs    = intentos.map(i => i.calificacion).filter(v => v != null);
        const mejor     = califs.length ? Math.max(...califs) : null;
        const promedio  = califs.length ? califs.reduce((a, b) => a + b, 0) / califs.length : null;

        return (
          <div className="card" key={mKey} style={{ padding: 0 }}>
            {/* Cabecera materia */}
            <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8 }}>
              <div className="row gap-3" style={{ alignItems: 'center' }}>
                <span style={{ fontSize: 22 }}>{icono}</span>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 15 }}>{materiaNombre}</div>
                  <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>
                    {muestras.length} diagnóstico{muestras.length !== 1 ? 's' : ''}{' '}
                    {completos.length > 0 && `· ${completos.length} completo${completos.length !== 1 ? 's' : ''}`}
                    {' · '}{intentos.length} total
                  </div>
                </div>
              </div>
              {califs.length > 0 && (
                <div className="row gap-3" style={{ fontSize: 13 }}>
                  {mejor != null && (
                    <div style={{ textAlign: 'center' }}>
                      <div style={{ fontWeight: 700, color: scoreColor(mejor), fontSize: 18 }}>{mejor.toFixed(0)}%</div>
                      <div className="muted" style={{ fontSize: 11 }}>Mejor</div>
                    </div>
                  )}
                  {promedio != null && (
                    <div style={{ textAlign: 'center' }}>
                      <div style={{ fontWeight: 700, color: scoreColor(promedio), fontSize: 18 }}>{promedio.toFixed(0)}%</div>
                      <div className="muted" style={{ fontSize: 11 }}>Promedio</div>
                    </div>
                  )}
                </div>
              )}
            </div>

            {/* Tabla de intentos */}
            <table className="data-table" style={{ marginBottom: 0 }}>
              <thead>
                <tr>
                  <th>Tipo</th>
                  <th>Proceso</th>
                  <th>Dificultad</th>
                  <th>Calificación</th>
                  <th>Duración</th>
                  <th>Fecha</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {intentos.map(i => {
                  const tipoLabel = TIPO_LABEL[i.tipo] || i.tipo || '—';
                  const pct = i.calificacion;
                  // Normalizar dificultad: puede venir como 'comprension', 'Comprensión', 'analisis', 'Análisis'
                  const difRaw = (i.dificultad || '').toLowerCase()
                    .normalize('NFD').replace(/[̀-ͯ]/g, '');
                  const esComp = difRaw.includes('comprens');
                  const esAnal = difRaw.includes('analis');
                  return (
                    <tr key={i.id}>
                      <td>
                        {i.modo === 'completo'
                          ? <span className="pill pill-amber" style={{ fontSize: 11 }}>★ Completo</span>
                          : <span className="pill pill-teal"  style={{ fontSize: 11 }}>Diagnóstico</span>}
                      </td>
                      <td style={{ fontSize: 13 }}>{tipoLabel}</td>
                      <td>
                        {esComp
                          ? <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--teal-2)' }}>🟢 Comprensión</span>
                          : esAnal
                            ? <span style={{ fontSize: 12, fontWeight: 600, color: '#92400E' }}>🟠 Análisis</span>
                            : <span className="muted" style={{ fontSize: 12 }}>—</span>}
                      </td>
                      <td>
                        {pct != null
                          ? <strong style={{ color: scoreColor(pct), fontSize: 15 }}>{pct.toFixed(1)}%</strong>
                          : <span className="muted" style={{ fontSize: 13 }}>Sin calificar</span>}
                      </td>
                      <td className="muted" style={{ fontSize: 13 }}>{fmtDur(i.duracion_seg)}</td>
                      <td className="muted" style={{ fontSize: 13 }}>{fmtFecha(i.creado_en)}</td>
                      <td>
                        <button className="btn btn-ghost btn-sm" style={{ fontSize: 11 }}
                          onClick={() => navigate(`/simulador/${i.prueba_id}/${i.modo}`)}>
                          Repetir
                        </button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        );
      })}
    </div>
  );
}

function ComprasTable({ navigate, store }) {
  const BASE    = window.API_BASE || '/simuladordocente/api';
  const PRUEBAS = store.pruebas || window.SD_SEED.PRUEBAS;
  const [compras, setCompras] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [recibo,  setRecibo]  = React.useState(null);

  React.useEffect(() => {
    const tok = localStorage.getItem('sd_token');
    if (!tok) { setLoading(false); return; }
    fetch(`${BASE}/me/compras`, { headers: { Authorization: `Bearer ${tok}` } })
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (d?.compras) setCompras(d.compras); setLoading(false); })
      .catch(() => setLoading(false));
  }, []);

  const fmtFecha = iso => new Date(iso).toLocaleDateString('es-MX', {
    day: 'numeric', month: 'short', year: 'numeric'
  });

  const resolverConcepto = ids => ids.map(id => {
    const p = PRUEBAS.find(p => p.id === id);
    return p ? (p.materiaNombre || p.nombre.replace(/^[^·]+·\s*/, '')) : id;
  }).join(' + ');

  const estadoPill = estado => {
    if (estado === 'acreditado') return <span className="pill pill-green">Pagado</span>;
    if (estado === 'pendiente')  return <span style={{ display:'inline-block', padding:'2px 10px', borderRadius:99, background:'#FEF9C3', color:'#854D0E', fontSize:12, fontWeight:600 }}>Pendiente</span>;
    return <span style={{ display:'inline-block', padding:'2px 10px', borderRadius:99, background:'var(--bg-2)', color:'var(--muted)', fontSize:12, fontWeight:600 }}>Expirado</span>;
  };

  if (loading) return (
    <div className="muted" style={{ textAlign: 'center', padding: 48 }}>Cargando compras…</div>
  );

  return (
    <div className="card">
      <div style={{ marginBottom: 18 }}>
        <h3 style={{ fontFamily: 'Inter', fontSize: 18, fontWeight: 700 }}>Historial de compras</h3>
      </div>

      {compras.length === 0 ? (
        <div style={{ textAlign: 'center', padding: '32px 0', color: 'var(--muted)' }}>
          <div style={{ fontSize: 40 }}>🧾</div>
          <p style={{ marginTop: 10, fontSize: 15 }}>Aún no tienes compras registradas.</p>
          <button className="btn btn-primary btn-sm" style={{ marginTop: 16 }} onClick={() => navigate('/dashboard')}>
            Ver materias disponibles
          </button>
        </div>
      ) : (
        <>
          {compras.some(c => c.estado === 'pendiente') && (
            <div style={{ background: '#FEF9C3', border: '1px solid #FDE047', borderRadius: 8,
              padding: '10px 14px', marginBottom: 14, fontSize: 13, color: '#713F12', display: 'flex', gap: 8 }}>
              <span>⏳</span>
              <span>Tienes pagos OXXO pendientes. Tu acceso se activará automáticamente al acreditarse (1–48 h).</span>
            </div>
          )}
          <table className="data-table">
            <thead>
              <tr><th>Fecha</th><th>Concepto</th><th>Método</th><th>Monto</th><th>Estado</th><th></th></tr>
            </thead>
            <tbody>
              {compras.map(c => (
                <tr key={c.id}>
                  <td style={{ whiteSpace: 'nowrap' }}>{fmtFecha(c.creado_en)}</td>
                  <td>{resolverConcepto(c.prueba_ids)} (Simulador completo)</td>
                  <td><span className="pay-chip">{c.metodo === 'mercadopago' ? 'Mercado Pago' : 'Oxxo Pay'}</span></td>
                  <td className="mono">${c.monto} MXN</td>
                  <td>{estadoPill(c.estado)}</td>
                  <td>
                    {c.estado === 'acreditado' && (
                      <button className="btn btn-link" style={{ fontSize: 12, whiteSpace: 'nowrap' }}
                        onClick={() => setRecibo(c)}>
                        Ver recibo →
                      </button>
                    )}
                    {c.estado === 'pendiente' && c.metodo === 'oxxo' && c.external_id && (
                      <a href={`https://www.mercadopago.com.mx/payments/${c.external_id}/ticket`}
                        target="_blank" rel="noreferrer"
                        className="btn btn-link" style={{ fontSize: 12, whiteSpace: 'nowrap' }}>
                        Ver ficha ↗
                      </a>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </>
      )}

      {recibo && (
        <ReciboModal pago={recibo} pruebas={PRUEBAS} onClose={() => setRecibo(null)} />
      )}
    </div>
  );
}

function ReciboModal({ pago, pruebas, onClose }) {
  const fmtFechaLarga = iso => new Date(iso).toLocaleDateString('es-MX', {
    day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit'
  });
  const items = (pago.prueba_ids || []).map(id => pruebas.find(p => p.id === id)).filter(Boolean);
  const ref   = pago.id.slice(-10).toUpperCase();

  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal-box" onClick={e => e.stopPropagation()} style={{ maxWidth: 460 }}>
        {/* Encabezado */}
        <div className="row" style={{ justifyContent: 'space-between', marginBottom: 20 }}>
          <div>
            <div className="eyebrow">Recibo de compra</div>
            <h3 style={{ marginTop: 4, fontSize: 20 }}>Simulador Docente</h3>
          </div>
          <button className="btn btn-link" onClick={onClose}>✕</button>
        </div>

        {/* Meta */}
        <div style={{ background: 'var(--bg-2)', borderRadius: 10, padding: '14px 16px', marginBottom: 18 }}>
          {[
            ['Referencia',  `#${ref}`],
            ['Fecha',       fmtFechaLarga(pago.creado_en)],
            ['Método',      pago.metodo === 'mercadopago' ? 'Mercado Pago' : 'Oxxo Pay'],
          ].map(([k, v]) => (
            <div key={k} className="row" style={{ justifyContent: 'space-between', padding: '5px 0' }}>
              <span className="muted" style={{ fontSize: 13 }}>{k}</span>
              <span className="mono" style={{ fontSize: 13 }}>{v}</span>
            </div>
          ))}
        </div>

        {/* Artículos */}
        <div style={{ fontWeight: 600, fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--muted)', marginBottom: 10 }}>
          Artículos
        </div>
        {items.map(p => (
          <div key={p.id} className="row" style={{ justifyContent: 'space-between', padding: '9px 0', borderBottom: '1px solid var(--border)' }}>
            <span style={{ fontSize: 14 }}>
              {p.icono} {p.materiaNombre || p.nombre.replace(/^[^·]+·\s*/, '')}
              <span className="muted" style={{ fontSize: 12, marginLeft: 6 }}>Simulador completo</span>
            </span>
            <span className="mono" style={{ fontSize: 14 }}>${p.precio ?? pago.monto}</span>
          </div>
        ))}
        {items.length === 0 && (
          <div className="muted" style={{ fontSize: 13, padding: '8px 0' }}>
            {(pago.prueba_ids || []).join(', ')}
          </div>
        )}

        {/* Total */}
        <div className="row" style={{ justifyContent: 'space-between', fontWeight: 700, fontSize: 17, margin: '16px 0 22px' }}>
          <span>Total pagado</span>
          <span className="mono">${pago.monto} MXN</span>
        </div>

        <div className="row gap-2" style={{ justifyContent: 'flex-end' }}>
          <button className="btn btn-ghost" onClick={onClose}>Cerrar</button>
          <button className="btn btn-primary" onClick={() => window.print()}>Imprimir recibo</button>
        </div>
      </div>
    </div>
  );
}

window.DashHeader = function DashHeader({ navigate, store }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const initials = store.session.nombre.split(' ').map(s => s[0]).slice(0, 2).join('');
  const premium  = store.premiumIds.length;

  const logout = () => { store.logout(); navigate('/'); };

  return (
    <header className="header">
      <div className="container header-inner">
        {/* Logo */}
        <a href="#/" onClick={e => { e.preventDefault(); navigate('/'); }}>
          <window.Logo size={32} />
        </a>

        {/* Nav */}
        <nav className="nav nav-desktop">
          <a href="#" onClick={e => { e.preventDefault(); navigate('/dashboard'); }}>Mis materias</a>
        </nav>

        {/* Derecha */}
        <div className="row gap-2" style={{ alignItems:'center' }}>
          {store.cart.length > 0 && (
            <button className="btn btn-ghost btn-sm" onClick={() => navigate('/checkout')}
              style={{ display:'flex', alignItems:'center', gap:5 }}>
              🛒 <span style={{ fontWeight:700 }}>{store.cart.length}</span>
            </button>
          )}

          {/* User chip con dropdown */}
          <div style={{ position:'relative' }}>
            <div className="user-chip" onClick={() => setMenuOpen(o => !o)}
              style={{ cursor:'pointer', userSelect:'none' }}>
              <div className="user-avatar">{initials}</div>
              <div style={{ fontSize:13 }}>
                <div style={{ fontWeight:600 }}>{store.session.nombre}</div>
                <div className="muted" style={{ fontSize:11 }}>{store.session.email}</div>
              </div>
              <span style={{ fontSize:11, color:'var(--muted)', marginLeft:4, lineHeight:1 }}>▾</span>
            </div>

            {menuOpen && (
              <>
                {/* Overlay para cerrar */}
                <div style={{ position:'fixed', inset:0, zIndex:99 }} onClick={() => setMenuOpen(false)} />
                <div style={{ position:'absolute', right:0, top:'calc(100% + 8px)',
                  background:'var(--surface)', border:'1px solid var(--border)',
                  borderRadius:12, boxShadow:'0 8px 28px rgba(0,0,0,0.13)',
                  minWidth:210, zIndex:100, overflow:'hidden' }}>
                  {/* Cabecera dropdown */}
                  <div style={{ padding:'14px 16px', borderBottom:'1px solid var(--border)', background:'var(--bg-2)' }}>
                    <div style={{ fontWeight:700, fontSize:14 }}>{store.session.nombre}</div>
                    <div style={{ fontSize:12, color:'var(--muted)', marginTop:2 }}>{store.session.email}</div>
                    {premium > 0 && (
                      <div style={{ fontSize:11, color:'var(--amber)', fontWeight:600, marginTop:5 }}>
                        ★ {premium} simulador{premium !== 1 ? 'es' : ''} premium
                      </div>
                    )}
                  </div>
                  {/* Acciones */}
                  <div style={{ padding:'6px 0' }}>
                    <button className="btn btn-link" style={{ width:'100%', textAlign:'left',
                      padding:'9px 16px', fontSize:13, borderRadius:0, color:'var(--ink)' }}
                      onClick={() => { setMenuOpen(false); navigate('/dashboard'); }}>
                      Mis materias
                    </button>
                    <button className="btn btn-link" style={{ width:'100%', textAlign:'left',
                      padding:'9px 16px', fontSize:13, borderRadius:0, color:'var(--red)' }}
                      onClick={logout}>
                      Cerrar sesión
                    </button>
                  </div>
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    </header>
  );
};