// MobileCerts.jsx — read-only cert display for mobile.
// Verification forms are desktop-only. This shows verified certs + boost stats.

const MOBILE_LEVEL_STYLES = {
  foundational: { border: '#BFBFBF', label: 'FOUNDATIONAL', bg: 'rgba(191,191,191,0.08)' },
  associate:    { border: '#00E5FF', label: 'ASSOCIATE',    bg: 'rgba(0,229,255,0.08)' },
  professional: { border: '#00FF41', label: 'PROFESSIONAL', bg: 'rgba(0,255,65,0.08)' },
  expert:       { border: '#FFD23F', label: 'EXPERT',       bg: 'rgba(255,210,63,0.08)' },
  master:       { border: '#FF3344', label: 'MASTER',       bg: 'rgba(255,51,68,0.08)' },
};

const MOBILE_CERT_BOOST_CAP = 100;

const getMobileLevelStyle = (level) => MOBILE_LEVEL_STYLES[level] || MOBILE_LEVEL_STYLES.foundational;

const MobileCerts = () => {
  const [myCerts, setMyCerts] = React.useState([]);
  const [totalPoints, setTotalPoints] = React.useState(0);
  const [certBoost, setCertBoost] = React.useState(0);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    window.OBC_API.getMyCerts()
      .then((res) => {
        if (res) {
          setMyCerts(res.certs || []);
          setTotalPoints(res.total_cert_points || 0);
          setCertBoost(res.cert_boost || 0);
        }
      })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  if (loading) {
    return (
      <div>
        <div style={{ fontSize: 16, color: '#BFBFBF', letterSpacing: '0.18em' }}>// loading certification data...</div>
      </div>
    );
  }

  return (
    <div>
      <div style={{ fontSize: 16, color: '#BFBFBF', letterSpacing: '0.18em', marginBottom: 14, lineHeight: 1.7 }}>
        // your verified credentials.<br />
        // earn points + permanent xp boost. cap: {MOBILE_CERT_BOOST_CAP}%.
      </div>

      {/* Boost stat bar */}
      {(certBoost > 0 || totalPoints > 0) && (
        <div style={{
          padding: '10px 12px', marginBottom: 14,
          background: 'rgba(0,255,65,0.04)', border: '1px solid rgba(0,255,65,0.22)',
          fontSize: 16, color: '#00FF41', letterSpacing: '0.08em', lineHeight: 1.8,
        }}>
          $ cert points: <span style={{ fontWeight: 800 }}>{totalPoints} pts</span>
          {certBoost > 0 && (
            <>
              <br />$ cert boost: <span style={{ fontWeight: 800, color: '#00E5FF' }}>+{certBoost}%</span> on all orders
              {certBoost >= MOBILE_CERT_BOOST_CAP && <span style={{ color: '#FFD23F' }}> (MAX)</span>}
            </>
          )}
        </div>
      )}

      {/* Cert cards */}
      {myCerts.length === 0 ? (
        <div style={{
          padding: 18, background: '#0A0A0A',
          border: '1px dashed rgba(255,255,255,0.22)',
          fontSize: 16, color: '#9A9A9A', letterSpacing: '0.06em', lineHeight: 1.7,
        }}>
          // no verified certifications yet.
        </div>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 10 }}>
          {myCerts.map((cert) => {
            const ls = getMobileLevelStyle(cert.level);
            return (
              <div key={cert.id} style={{
                display: 'flex', background: '#0A0A0A',
                border: '1px solid rgba(255,255,255,0.22)',
              }}>
                <div style={{ width: 4, background: ls.border, flexShrink: 0 }}></div>
                <div style={{ padding: '12px 14px', flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 6 }}>
                    <span style={{
                      fontSize: 16, fontWeight: 800, color: '#FFF', letterSpacing: '0.04em',
                      lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0,
                    }}>{cert.cert_name}</span>
                    <span style={{
                      padding: '2px 6px', fontSize: 14, fontWeight: 700, letterSpacing: '0.1em',
                      border: '1px solid ' + ls.border, color: ls.border, background: ls.bg,
                      whiteSpace: 'nowrap',
                    }}>{ls.label}</span>
                  </div>
                  <div style={{ marginTop: 6, fontSize: 15, color: '#9A9A9A', letterSpacing: '0.06em', lineHeight: 1.6 }}>
                    <div>{'>'} {cert.provider_name}</div>
                    <div>{'>'} +{cert.points_awarded} pts{(cert.boost_effective || cert.boost_percent) ? ' · +' + (cert.boost_effective || cert.boost_percent) + '% boost' : ''}</div>
                    <div>{'>'} verified: {cert.verified_at ? cert.verified_at.slice(0, 10) : '—'}</div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}

      {/* Desktop-only notice */}
      <div style={{
        marginTop: 14, padding: '10px 12px',
        background: 'rgba(255,255,255,0.02)', border: '1px dashed rgba(255,255,255,0.18)',
        fontSize: 15, color: '#9A9A9A', letterSpacing: '0.06em', lineHeight: 1.7,
      }}>
        // cert verification + catalog available on desktop only.
      </div>
    </div>
  );
};

window.MobileCerts = MobileCerts;