// Diploma — printable certificate
const Diploma = ({ profile, onClose }) => {
  const t = window.MP_I18N.t;
  const lang = window.MP_I18N.getLang();
  const lvl = window.MP_DATA.levelFor(profile.points || 0);
  const date = new Date().toLocaleDateString(lang === 'es' ? 'es-MX' : 'en-US', { year: 'numeric', month: 'long', day: 'numeric' });

  return (
    <>
      <div className="topbar no-print">
        <button className="btn btn-ghost btn-icon" onClick={onClose}>
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="M15 18l-6-6 6-6" /></svg>
        </button>
        <div className="brand">📜 {t('print_diploma')}</div>
        <div className="spacer" />
        <button className="btn btn-yellow" onClick={() => window.print()}>🖨 {t('print')}</button>
      </div>

      <div className="diploma-print" style={{
        background: 'linear-gradient(135deg, #fffaf0 0%, #ffe9d6 100%)',
        color: '#3d2670',
        borderRadius: 'var(--r-xl)',
        padding: '40px 32px',
        textAlign: 'center',
        border: '8px double #d99761',
        boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
        position: 'relative'
      }}>
        <div style={{ position: 'absolute', top: 12, left: 12, fontSize: 32 }}>★</div>
        <div style={{ position: 'absolute', top: 12, right: 12, fontSize: 32 }}>★</div>
        <div style={{ position: 'absolute', bottom: 12, left: 12, fontSize: 32 }}>★</div>
        <div style={{ position: 'absolute', bottom: 12, right: 12, fontSize: 32 }}>★</div>

        <div style={{ fontFamily: 'var(--font-display)', fontSize: 14, letterSpacing: 4, color: '#d91c6c' }}>
          ★ MULTIPLIER ★
        </div>
        <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 36, margin: '12px 0', color: '#7a3dff' }}>
          {t('diploma_title')}
        </h1>
        <div style={{ fontSize: 14, marginTop: 8 }}>{t('diploma_text')}</div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 44, margin: '16px 0', color: '#1a0b2e' }}>
          {profile.firstName} {profile.lastInitial}.
        </div>
        <div style={{ fontSize: 14, maxWidth: 420, margin: '0 auto', lineHeight: 1.5 }}>
          {t('diploma_for')}
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-around', margin: '32px 0 16px', flexWrap: 'wrap', gap: 12 }}>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, color: '#d91c6c' }}>{profile.points}</div>
            <div style={{ fontSize: 12, opacity: 0.7 }}>{t('total_points')}</div>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, color: '#7a3dff' }}>{lvl.curr.name[lang]}</div>
            <div style={{ fontSize: 12, opacity: 0.7 }}>{t('level')}</div>
          </div>
          <div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, color: '#f59e0b' }}>{(profile.badges||[]).length}</div>
            <div style={{ fontSize: 12, opacity: 0.7 }}>{t('badges')}</div>
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 24, fontSize: 13, gap: 16, flexWrap: 'wrap' }}>
          <div style={{ textAlign: 'left' }}>
            <div style={{ borderTop: '2px solid #3d2670', paddingTop: 4, minWidth: 140 }}>{t('diploma_school')}</div>
            <strong>{profile.schoolName || profile.schoolCode || '—'}</strong>
          </div>
          <div style={{ textAlign: 'center' }}>
            <div style={{ fontFamily: 'cursive', fontSize: 22, color: '#d91c6c' }}>~ Multiplier ~</div>
            <div style={{ borderTop: '2px solid #3d2670', paddingTop: 4 }}>{t('diploma_signature')}</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ borderTop: '2px solid #3d2670', paddingTop: 4, minWidth: 140 }}>{t('diploma_date')}</div>
            <strong>{date}</strong>
          </div>
        </div>
      </div>
    </>
  );
};

window.Diploma = Diploma;