// DASHBOARD CLIENTE
window.Dashboard = function Dashboard({ navigate, store }) {
  const BASE = window.API_BASE || '/simuladordocente/api';
  const { NIVELES } = window.SD_SEED;
  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 pruebas = PRUEBAS.filter(p => (p.nivel || p.nivel_id) === n.id);
              return (
                <section key={n.id} className="dash-nivel-section">
                  <div className="dash-nivel-head">
                    <h3>{n.nombre}</h3>
                    <span className="muted" style={{ fontSize: 13 }}>{pruebas.length} {pruebas.length === 1 ? 'prueba' : 'pruebas'}</span>
                  </div>
                  <div className="dash-grid">
                    {pruebas.map(p => (
                      <PruebaCard key={p.id} prueba={p} store={store} navigate={navigate}
                        intentosInfo={intentosData?.por_prueba?.[p.id]}
                        limiteMuestra={intentosData?.limite_muestra ?? 5}
                        limiteCompleto={intentosData?.limite_completo ?? 3}
                      />
                    ))}
                  </div>
                </section>
              );
            })}
          </div>
        )}

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

function PruebaCard({ prueba, store, navigate, intentosInfo, limiteMuestra = 5, limiteCompleto = 3 }) {
  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 || 149;

  // Datos de muestra
  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
  const completoInfo   = intentosInfo?.completo;
  const intentosC      = completoInfo?.intentos ?? 0;
  const bonusC         = completoInfo?.bonus ?? 0;
  const limEfC         = limiteCompleto + bonusC;
  const completoAgotado = isPremium && tieneCompleto && intentosC >= limEfC;

  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 counter — solo si es premium */}
            {isPremium && intentosC > 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 }}>
                    Completo
                  </span>
                  <span style={{ fontSize: 12, fontWeight: 700, color: completoAgotado ? 'var(--amber)' : 'var(--teal-2)' }}>
                    {intentosC}/{limEfC}
                  </span>
                </div>
                <div style={{ display: 'flex', gap: 3, marginBottom: 6 }}>
                  {Array.from({ length: limEfC }).map((_, i) => (
                    <div key={i} style={{ flex: 1, height: 4, borderRadius: 2,
                      background: i < intentosC ? (completoAgotado ? 'var(--amber)' : 'var(--teal)') : 'var(--border)' }} />
                  ))}
                </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 && !completoAgotado ? (
            <button className="btn btn-amber btn-sm btn-block"
              onClick={() => navigate(`/simulador/${prueba.id}/completo`)}>
              ★ Lanzar simulador completo
            </button>
          ) : isPremium && completoAgotado ? (
            <button className="btn btn-amber btn-sm btn-block" disabled style={{ opacity: 0.5 }}>
              Intentos completo agotados
            </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>

            <div style={{ overflowX: 'auto' }}>
            <table className="data-table">
              <thead>
                <tr>
                  <th>#</th><th>Calificación</th>
                  <th style={{ fontSize: 11 }}>Habilidad</th>
                  <th>Duración</th><th>Fecha</th>
                </tr>
              </thead>
              <tbody>
                {(modalInfo?.resultados || []).map((r, i) => (
                  <tr key={i}>
                    <td className="muted" style={{ fontSize: 13 }}>{i + 1}</td>
                    <td className="mono" style={{ fontWeight: 600 }}>
                      {r.calificacion != null
                        ? <span style={{ color: scoreColor(r.calificacion) }}>{r.calificacion.toFixed(1)}%</span>
                        : <span className="muted">—</span>}
                    </td>
                    <td style={{ fontSize: 12 }}>
                      {r.analisis_pct != null
                        ? <span style={{ color: scoreColor(r.analisis_pct) }}>🟠 {r.analisis_pct.toFixed(1)}%</span>
                        : r.comprension_pct != null
                          ? <span style={{ color: scoreColor(r.comprension_pct) }}>🟢 {r.comprension_pct.toFixed(1)}%</span>
                          : <span className="muted">—</span>}
                    </td>
                    <td className="muted" style={{ fontSize: 13 }}>{fmtDur(r.duracion_seg)}</td>
                    <td className="muted" style={{ fontSize: 12 }}>{fmtFecha(r.creado_en)}</td>
                  </tr>
                ))}
                {(!modalInfo?.resultados || modalInfo.resultados.length === 0) && (
                  <tr><td colSpan="5" className="muted" style={{ textAlign:'center', padding:20 }}>Sin resultados registrados</td></tr>
                )}
              </tbody>
            </table>
            </div>

            {!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, limiteMuestra = 5, limiteCompleto = 3 }) {
  const BASE = window.API_BASE || '/simuladordocente/api';
  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));
  }, []);

  if (loading) return <div className="muted" style={{ padding: 40, textAlign: 'center' }}>Cargando…</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 una muestra o simulador completo para ver tu historial aquí.
        </p>
        <button className="btn btn-primary" style={{ marginTop: 20 }} onClick={() => navigate('/dashboard')}>
          Ir a mis materias
        </button>
      </div>
    );
  }

  // Agrupar por prueba
  const porPrueba = {};
  resultados.forEach(r => {
    if (!porPrueba[r.prueba_id]) porPrueba[r.prueba_id] = { nombre: r.prueba_nombre, icono: r.icono, intentos: [] };
    porPrueba[r.prueba_id].intentos.push(r);
  });

  const fmtDur = (seg) => {
    if (!seg) return '—';
    if (seg < 60) return `${seg}s`;
    return `${Math.floor(seg/60)}m ${seg%60}s`;
  };
  const fmtFecha = (d) => new Date(d).toLocaleDateString('es-MX', { day:'numeric', month:'short', year:'numeric' });

  return (
    <div className="stack" style={{ gap: 24 }}>
      {Object.entries(porPrueba).map(([pruebaId, { nombre, icono, intentos }]) => {
        const isPremium  = store.hasPremium(pruebaId);
        const muestras   = intentos.filter(i => i.modo === 'muestra');
        const completos  = intentos.filter(i => i.modo === 'completo');
        const mejorCalif = intentos
          .map(i => i.calificacion).filter(Boolean)
          .reduce((best, c) => c > best ? c : best, 0);

        return (
          <div className="card" key={pruebaId}>
            <div className="row" style={{ justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 8 }}>
              <div className="row gap-3">
                <span style={{ fontSize: 24 }}>{icono || '📘'}</span>
                <div>
                  <h4 style={{ fontSize: 16 }}>{nombre}</h4>
                  <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>
                    {muestras.length} intento{muestras.length!==1?'s':''} de muestra
                    {!isPremium && ` · ${Math.max(0, limiteMuestra - muestras.length)} restante${limiteMuestra-muestras.length!==1?'s':''}`}
                    {completos.length > 0 && ` · ${completos.length} simulador${completos.length!==1?'es':''} completo${completos.length!==1?'s':''}`}
                  </div>
                </div>
              </div>
              <div className="row gap-2">
                {mejorCalif > 0 && (
                  <span className="pill pill-teal" style={{ fontSize: 13 }}>
                    Mejor: {mejorCalif.toFixed(1)}%
                  </span>
                )}
                {!isPremium && muestras.length >= limiteMuestra && (
                  <button className="btn btn-amber btn-sm"
                    onClick={() => { store.addToCart(pruebaId); navigate('/checkout'); }}>
                    ★ Desbloquear completo
                  </button>
                )}
              </div>
            </div>

            {/* Barra de intentos muestra para no-premium */}
            {!isPremium && (
              <div style={{ marginBottom: 14 }}>
                <div className="row gap-2" style={{ marginBottom: 6 }}>
                  <span style={{ fontSize: 12, color: 'var(--ink-soft)', fontWeight: 600 }}>
                    Intentos de muestra
                  </span>
                  <span style={{ fontSize: 12, color: 'var(--muted)' }}>
                    {muestras.length} / {limiteMuestra} usados
                  </span>
                </div>
                <div style={{ display: 'flex', gap: 4 }}>
                  {Array.from({ length: limiteMuestra }).map((_, i) => (
                    <div key={i} style={{
                      flex: 1, height: 8, borderRadius: 4,
                      background: i < muestras.length ? 'var(--teal)' : 'var(--border)',
                    }} />
                  ))}
                </div>
              </div>
            )}

            <table className="data-table">
              <thead>
                <tr><th>Modo</th><th>Calificación</th><th>Duración</th><th>Fecha</th></tr>
              </thead>
              <tbody>
                {intentos.map(i => (
                  <tr key={i.id}>
                    <td>
                      {i.modo === 'completo'
                        ? <span className="pill pill-amber">★ Completo</span>
                        : <span className="pill pill-teal">Muestra</span>}
                    </td>
                    <td className="mono">
                      {i.calificacion != null ? `${i.calificacion.toFixed(1)}%` : <span className="muted">—</span>}
                    </td>
                    <td className="muted" style={{ fontSize: 13 }}>{fmtDur(i.duracion_seg)}</td>
                    <td className="muted" style={{ fontSize: 13 }}>{fmtFecha(i.creado_en)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        );
      })}
    </div>
  );
}

function ComprasTable({ navigate }) {
  const { COMPRAS_DEMO } = window.SD_SEED;
  return (
    <div className="card">
      <div className="row" style={{ justifyContent: 'space-between', marginBottom: 18 }}>
        <h3 style={{ fontFamily: 'Inter', fontSize: 18, fontWeight: 700 }}>Historial de compras</h3>
        <button className="btn btn-ghost btn-sm">Descargar todos los recibos</button>
      </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_DEMO.map((c) => (
            <tr key={c.id}>
              <td>{c.fecha}</td>
              <td>{c.concepto}</td>
              <td><span className="pay-chip">{c.metodo}</span></td>
              <td className="mono">{window.formatPrice(c.monto)}</td>
              <td><span className="pill pill-green">{c.estado}</span></td>
              <td><button className="btn btn-link" style={{ fontSize: 12 }}>Ver recibo →</button></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

window.DashHeader = function DashHeader({ navigate, store }) {
  return (
    <header className="header">
      <div className="container header-inner">
        <a href="#/" onClick={(e)=>{e.preventDefault();navigate('/');}}>
          <window.Logo size={26} color="var(--ink)" accent="var(--teal)" />
        </a>
        <nav className="nav nav-desktop">
          <a href="#" onClick={(e)=>{e.preventDefault();navigate('/dashboard');}}>Mis materias</a>
        </nav>
        <div className="row gap-2">
          {store.cart.length > 0 && (
            <button className="btn btn-ghost btn-sm" onClick={() => navigate('/checkout')}>🛒 {store.cart.length}</button>
          )}
          <div className="user-chip" onClick={() => { if (confirm('¿Cerrar sesión?')) { store.logout(); navigate('/'); } }}>
            <div className="user-avatar">{store.session.nombre.split(' ').map(s=>s[0]).slice(0,2).join('')}</div>
            <div style={{ fontSize: 13 }}>
              <div style={{ fontWeight: 600 }}>{store.session.nombre}</div>
              <div className="muted" style={{ fontSize: 11 }}>{store.session.email}</div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
};