// HealthcoinPanel — HCR earning summary.
// `balance` and `today` come from /api/v1/healthcoin/wallet.  Pass null
// for either when the wallet has not been provisioned (e.g. a brand-new
// account that hasn't logged any axis-lifting actions yet) so the panel
// can render the explanatory empty state instead of fake numbers.
const HealthcoinPanel = ({ balance, today }) => {
  const card = { padding: 22, borderRadius: 12, background: 'linear-gradient(180deg, rgba(232,201,122,0.12), rgba(232,201,122,0.02))', border: '1px solid rgba(232,201,122,0.3)' };
  const top = { display: 'flex', alignItems: 'center', gap: 14 };
  const num = { fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 44, color: 'var(--accent-halo)', lineHeight: 1, marginTop: 12, letterSpacing: '-0.02em' };
  const lbl = { fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--accent-halo)' };
  const meta = { fontSize: 12, color: 'var(--fg-2)' };

  const hasWallet = balance != null && !Number.isNaN(Number(balance));

  return (
    <div style={card}>
      <div style={top}>
        <img src="../../assets/healthcoin.svg" style={{ width: 56, height: 56 }} alt=""/>
        <div>
          <div style={lbl}>HEALTHCOIN™ Wallet</div>
          <div style={meta}>{hasWallet ? 'The digital commodity that rewards healthy behavior.' : 'Provisioned the moment you log your first axis-lifting action.'}</div>
        </div>
      </div>
      {hasWallet ? (
        <React.Fragment>
          <div style={num}>{Number(balance).toLocaleString(undefined, { maximumFractionDigits: 2 })}<span style={{ fontSize: 16, color: 'var(--fg-3)', marginLeft: 8 }}>HC</span></div>
          {today != null && (
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent-guardian)', letterSpacing: '0.1em' }}>
              +{Number(today).toFixed(2)} earned today
            </div>
          )}
        </React.Fragment>
      ) : (
        <div style={{ marginTop: 18, fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--fg-2)', fontSize: 14, lineHeight: 1.5 }}>
          No HEALTHCOIN™ activity yet. Log a meal, a walk, a meditation, or a journal entry to activate the wallet — every accepted action mints HCR.
        </div>
      )}
    </div>
  );
};
window.HealthcoinPanel = HealthcoinPanel;