// Progress.jsx — panel "Mi progreso": calificaciones + insignias. window.Progress
function notaStrP(score, total) {
  if (score === null || score === undefined) return '—';
  return ((Math.round((score / total) * 100) / 10).toFixed(1)).replace('.', ',');
}
const BADGE_GLYPH = { bolt: '⚡', star: '★', check: '✓', flame: '🔥', trophy: '🏆' };

function Progress({ user, onBack }) {
  const S = window.CourseStore;
  const units = S.units();
  const pr = S.getProgress();
  const earned = S.earnedBadges();
  const done = S.unitsCompletedCount();
  const pct = Math.round((done / units.length) * 100);

  // nota media de finales superados
  const finals = units.map(u => pr[u.slug].final).filter(f => f.passed && f.best != null);
  const media = finals.length ? (finals.reduce((s, f) => s + (f.best / S.FINAL.N) * 10, 0) / finals.length) : null;

  return (
    <main style={{ maxWidth: 920, margin: '0 auto', padding: '28px var(--pad-page) 80px' }}>
      <button onClick={onBack} style={{ background: 'transparent', border: 0, color: 'var(--terracotta-deep)', font: 'var(--type-ui-sm)', cursor: 'pointer', padding: 0, marginBottom: 12 }}>← Volver al curso</button>
      <h1 style={{ font: 'var(--type-h1)', letterSpacing: 'var(--tracking-tight)', margin: '0 0 4px' }}>Mi progreso</h1>
      <p style={{ font: 'var(--type-body)', color: 'var(--ink-2)', margin: '0 0 24px' }}>{user.name} · Matemáticas 4º ESO</p>

      {/* resumen */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginBottom: 28 }}>
        {[
          { k: 'Curso completado', v: pct + '%' },
          { k: 'Unidades superadas', v: done + ' / ' + units.length },
          { k: 'Nota media (finales)', v: media === null ? '—' : media.toFixed(1).replace('.', ',') },
        ].map(c => (
          <div key={c.k} style={{ background: 'var(--bg-surface)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', padding: '18px 20px' }}>
            <div style={{ font: 'var(--type-h2)', color: 'var(--ink)' }}>{c.v}</div>
            <div style={{ font: 'var(--type-meta)', color: 'var(--ink-3)' }}>{c.k}</div>
          </div>
        ))}
      </div>

      {/* insignias */}
      <h2 style={{ font: 'var(--type-h3)', margin: '0 0 12px' }}>Insignias</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))', gap: 12, marginBottom: 32 }}>
        {S.BADGES.map(b => {
          const has = !!earned[b.id];
          return (
            <div key={b.id} style={{ background: has ? 'var(--bg-surface)' : 'var(--bg-muted)', border: '1px solid', borderColor: has ? 'var(--amber)' : 'var(--line)', borderRadius: 'var(--r-lg)', padding: '14px 16px', opacity: has ? 1 : 0.6 }}>
              <div style={{ width: 36, height: 36, borderRadius: 'var(--r-md)', background: has ? 'var(--amber-soft)' : 'var(--bg-deep)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, marginBottom: 8 }}>{BADGE_GLYPH[b.icon] || '★'}</div>
              <div style={{ font: 'var(--type-h4)', color: 'var(--ink)' }}>{b.title}</div>
              <div style={{ font: 'var(--type-meta)', color: 'var(--ink-3)', marginTop: 2 }}>{b.desc}</div>
            </div>
          );
        })}
      </div>

      {/* calificaciones por unidad */}
      <h2 style={{ font: 'var(--type-h3)', margin: '0 0 12px' }}>Calificaciones</h2>
      <div style={{ background: 'var(--bg-surface)', border: '1px solid var(--line)', borderRadius: 'var(--r-lg)', overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr repeat(4, 1fr) 1fr', gap: 0, background: 'var(--bg-deep)', font: 'var(--type-ui-sm)', color: 'var(--ink-2)' }}>
          {['Unidad', 'P1', 'P2', 'P3', 'P4', 'Final'].map(h => <div key={h} style={{ padding: '10px 12px' }}>{h}</div>)}
        </div>
        {units.map(u => {
          const up = pr[u.slug];
          return (
            <div key={u.slug} style={{ display: 'grid', gridTemplateColumns: '1.6fr repeat(4, 1fr) 1fr', borderTop: '1px solid var(--line)', font: 'var(--type-body-sm)', color: 'var(--ink)', alignItems: 'center' }}>
              <div style={{ padding: '10px 12px' }}><span style={{ color: 'var(--ink-3)', font: 'var(--type-ui-sm)' }}>{u.ud}</span> {u.topic}</div>
              {[1, 2, 3, 4].map(n => (
                <div key={n} style={{ padding: '10px 12px', color: up.parts[n].passed ? 'var(--success)' : 'var(--ink-3)' }}>{notaStrP(up.parts[n].best, S.PARTIAL.N)}</div>
              ))}
              <div style={{ padding: '10px 12px', fontWeight: 600, color: up.final.passed ? 'var(--success)' : 'var(--ink-3)' }}>{notaStrP(up.final.best, S.FINAL.N)}</div>
            </div>
          );
        })}
      </div>

      <button onClick={() => { if (confirm('¿Seguro que quieres reiniciar TODO tu progreso y notas? No se puede deshacer.')) { S.resetProgress(); onBack(); } }}
        style={{ marginTop: 24, background: 'transparent', border: '1px solid var(--line)', color: 'var(--ink-3)', borderRadius: 'var(--r-md)', padding: '9px 16px', font: 'var(--type-ui-sm)', cursor: 'pointer' }}>
        Reiniciar mi progreso
      </button>
    </main>
  );
}

window.Progress = Progress;