// Achievements — streak + badges grid + subject progress.

function Achievements() {
  const { ACHIEVEMENTS, SUBJECTS, MATERIALS } = window.ECC_DATA;
  const unlocked = ACHIEVEMENTS.filter(a => a.unlocked);
  const locked = ACHIEVEMENTS.filter(a => !a.unlocked);

  return (
    <main style={{ maxWidth: 'var(--w-page)', margin: '0 auto', padding: '32px var(--pad-page) 64px' }}>

      <div style={{ marginBottom: 32 }}>
        <Label>logros</Label>
        <h1 style={{ font: 'var(--type-h1)', letterSpacing: 'var(--tracking-tight)', margin: '6px 0 4px' }}>
          Tu progreso
        </h1>
        <p style={{ font: 'var(--type-body)', color: 'var(--ink-2)', margin: 0 }}>
          {unlocked.length} de {ACHIEVEMENTS.length} logros desbloqueados.
        </p>
      </div>

      {/* Top row: streak + total */}
      <section style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 40 }}>
        <StatCard
          icon="flame" iconColor="var(--terracotta)"
          value="7" label="días de racha"
          hint="Tu mejor racha hasta ahora."
        />
        <StatCard
          icon="book" iconColor="var(--forest)"
          value={MATERIALS.length} label="materiales abiertos"
          hint="De 8 disponibles."
        />
        <StatCard
          icon="star" iconColor="var(--amber)"
          value={unlocked.length} label="logros conseguidos"
          hint={`Te quedan ${locked.length}.`}
        />
      </section>

      {/* Subject progress */}
      <section style={{ marginBottom: 40 }}>
        <h3 style={{ font: 'var(--type-h3)', margin: '0 0 14px', paddingBottom: 10, borderBottom: '1px solid var(--line)' }}>
          Por asignatura
        </h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          {SUBJECTS.filter(s => MATERIALS.some(m => m.subject === s.id)).map(s => {
            const total = MATERIALS.filter(m => m.subject === s.id).length;
            const done  = MATERIALS.filter(m => m.subject === s.id && m.status === 'done').length;
            const pct = total ? done / total : 0;
            return (
              <div key={s.id} style={{
                background: 'var(--bg-surface)',
                border: '1px solid var(--line)',
                borderRadius: 'var(--r-lg)',
                padding: '14px 18px',
                display: 'flex', flexDirection: 'column', gap: 8,
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <Chip subject={s.id} />
                  <span style={{ font: 'var(--type-meta)', color: 'var(--ink-3)' }}>{done} / {total}</span>
                </div>
                <div style={{ height: 6, background: 'var(--bg-muted)', borderRadius: 4, overflow: 'hidden' }}>
                  <div style={{ width: `${pct * 100}%`, height: '100%', background: s.color }}/>
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* Achievements grid */}
      <section>
        <h3 style={{ font: 'var(--type-h3)', margin: '0 0 14px', paddingBottom: 10, borderBottom: '1px solid var(--line)' }}>
          Logros
        </h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {ACHIEVEMENTS.map(a => <AchievementCard key={a.id} a={a} />)}
        </div>
      </section>

    </main>
  );
}

function StatCard({ icon, iconColor, value, label, hint }) {
  return (
    <div style={{
      background: 'var(--bg-surface)',
      border: '1px solid var(--line)',
      borderRadius: 'var(--r-lg)',
      padding: '18px 20px',
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      <Icon name={icon} size={22} color={iconColor} strokeWidth={1.75} />
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
        <span style={{ font: 'var(--fw-medium) 32px/1 var(--font-mono)', color: 'var(--ink)' }}>{value}</span>
        <span style={{ font: 'var(--type-ui-sm)', color: 'var(--ink-2)' }}>{label}</span>
      </div>
      <div style={{ font: 'var(--type-meta)', color: 'var(--ink-3)' }}>{hint}</div>
    </div>
  );
}

function AchievementCard({ a }) {
  return (
    <div style={{
      background: a.unlocked ? 'var(--bg-surface)' : 'var(--bg-canvas)',
      border: a.unlocked ? '1px solid var(--line)' : '1px dashed var(--line-strong)',
      borderRadius: 'var(--r-lg)',
      padding: '16px 18px',
      display: 'flex', gap: 14, alignItems: 'flex-start',
      opacity: a.unlocked ? 1 : 0.55,
    }}>
      <div style={{
        width: 40, height: 40, borderRadius: 8,
        background: a.unlocked ? 'var(--terracotta-soft)' : 'var(--bg-muted)',
        border: `1px solid ${a.unlocked ? 'var(--terracotta)' : 'var(--line)'}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        <Icon name={a.unlocked ? a.icon : 'lock'} size={20}
          color={a.unlocked ? 'var(--terracotta-deep)' : 'var(--ink-3)'}
          strokeWidth={1.75}/>
      </div>
      <div>
        <div style={{ font: 'var(--type-h4)', color: 'var(--ink)', marginBottom: 4 }}>{a.title}</div>
        <p style={{ font: 'var(--type-body-sm)', color: 'var(--ink-2)', margin: 0 }}>{a.desc}</p>
      </div>
    </div>
  );
}

window.Achievements = Achievements;