// Premium top bar — sharp, light, high-contrast.
// Shows REAL data:
//   • CH score + bracket (from CHVault.axes())
//   • HCR balance (from /api/v1/healthcoin/wallet)
//   • HCC balance (from /api/v1/hcc/wallet)
//   • Member identity + sign-out
//
// No glassmorphism over a light body, no fake random-walk ticker — three
// crisp metric pills, bold display typography, single hairline divider.
const Topbar = ({ onSignOut, user }) => {
  const ctx = (window.useChData && window.useChData()) || null;
  const ready = ctx && ctx.phase === 'ready';

  const ch = ready && ctx.bundle.axes ? ctx.bundle.axes.ch : null;
  const wallet = ready ? ctx.bundle.wallet : null;
  const [hccWallet, setHccWallet] = React.useState(null);

  React.useEffect(() => {
    let dead = false;
    (async () => {
      try {
        const r = await fetch(window.CHVault.apiRoot + '/api/v1/hcc/wallet', { credentials: 'include', headers: { 'Accept': 'application/json' } });
        if (!r.ok) return;
        const j = await r.json();
        if (!dead) setHccWallet(j);
      } catch {}
    })();
    return () => { dead = true; };
  }, []);

  const num = (x, d = 2) => {
    const n = Number(x);
    return Number.isFinite(n) ? n.toLocaleString(undefined, { maximumFractionDigits: d }) : '—';
  };
  const hcr     = wallet     ? (wallet.balance     ?? wallet.hcr_balance ?? wallet.amount)            : null;
  const hcrUsd  = wallet     ? (wallet.balance_usd ?? wallet.usd_value)                                : null;
  const hcc     = hccWallet  ? (hccWallet.balance_hcc ?? (hccWallet.balance_pulses != null ? hccWallet.balance_pulses / 100_000_000 : null)) : null;

  const initials = ((user && (user.display_name || user.email || '?')) + '')
    .split(/\s+|@|\./).filter(Boolean).slice(0, 2)
    .map(s => s[0].toUpperCase()).join('') || 'U';

  const bracket = ch == null ? '—'
    : ch >= 76 ? 'EXCELLENT'
    : ch >= 60 ? 'GOOD'
    : ch >= 40 ? 'EMERGING'
    : ch >= 20 ? 'AT-RISK'
    : 'CRITICAL';
  const bracketTint = ch == null ? '#9AA7B5'
    : ch >= 76 ? '#117A4D'
    : ch >= 60 ? '#2F9E6B'
    : ch >= 40 ? '#B08D3C'
    : ch >= 20 ? '#B23A2E'
    : '#7A1F18';

  // ── Styles (sharp, no glassmorphism) ──
  const wrap = {
    display: 'grid',
    gridTemplateColumns: 'auto 1fr auto',
    alignItems: 'center',
    gap: 24,
    padding: '14px 32px',
    background: '#FFFFFF',
    borderBottom: '1px solid #E5E2DA',
    boxShadow: '0 1px 0 rgba(8,12,18,0.02), 0 4px 12px -8px rgba(8,12,18,0.08)',
    position: 'sticky', top: 0, zIndex: 50,
  };
  const brand = {
    display: 'flex', alignItems: 'center', gap: 10,
    fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16, color: '#0E1424',
    letterSpacing: '-0.01em',
  };
  const search = {
    display: 'flex', alignItems: 'center', gap: 10,
    maxWidth: 380, justifySelf: 'center', width: '100%',
    background: '#FAF7F1',
    border: '1px solid #E5E2DA',
    borderRadius: 10,
    padding: '9px 14px',
    color: '#7A8290',
    fontFamily: 'var(--font-mono)', fontSize: 12,
  };
  const right = { display: 'flex', alignItems: 'center', gap: 10 };

  // Premium metric pill — sharp, high-contrast.
  const metric = (label, value, value2, tint, href) => {
    const inner = (
      <React.Fragment>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: tint, lineHeight: 1, marginBottom: 4 }}>{label}</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: '#0E1424', lineHeight: 1, letterSpacing: '-0.01em' }}>{value}</div>
          {value2 && <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, color: '#5A6473', letterSpacing: '0.04em' }}>{value2}</div>}
        </div>
      </React.Fragment>
    );
    const style = {
      display: 'inline-flex', flexDirection: 'column',
      padding: '8px 14px',
      borderRadius: 10,
      background: '#FFFFFF',
      border: '1px solid #E5E2DA',
      boxShadow: '0 1px 0 rgba(8,12,18,0.02)',
      cursor: href ? 'pointer' : 'default',
      textDecoration: 'none',
    };
    return href
      ? <a href={href} style={style}>{inner}</a>
      : <div style={style}>{inner}</div>;
  };

  const avatar = {
    display: 'flex', alignItems: 'center', gap: 10,
    padding: '6px 6px 6px 12px',
    background: '#FFFFFF',
    border: '1px solid #E5E2DA',
    borderRadius: 999,
    cursor: 'pointer',
  };
  const avatarDot = {
    width: 32, height: 32, borderRadius: '50%',
    background: 'linear-gradient(135deg, #117A4D, #2F9E6B)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 12.5, color: '#FFFFFF',
    letterSpacing: '0.02em',
    boxShadow: '0 1px 4px rgba(17,122,77,0.35)',
  };
  const avatarLabel = {
    fontFamily: 'var(--font-sans)', fontSize: 12.5, fontWeight: 500, color: '#0E1424',
    maxWidth: 120, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
  };

  const displayName = (user && (user.display_name || user.first_name || (user.email && user.email.split('@')[0]))) || 'Member';

  return (
    <div style={wrap}>
      {/* Left — brand mark */}
      <div style={brand}>
        <img src="../../assets/logo-mark.svg?v=20260520-a3b" style={{ width: 26, height: 26 }} alt="" />
        <span>Guardian Orb<span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#7A8290', marginLeft: 6, letterSpacing: '0.08em', textTransform: 'uppercase' }}>· Live</span></span>
      </div>

      {/* Center — search */}
      <div style={search}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3-3"/></svg>
        <span>Search axes, labs, journal entries…</span>
        <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-mono)', fontSize: 10, padding: '2px 6px', border: '1px solid #E5E2DA', borderRadius: 4, color: '#7A8290' }}>⌘K</span>
      </div>

      {/* Right — three premium metric pills + avatar */}
      <div style={right}>
        {metric(
          'CH Score',
          ch == null ? '—' : ch.toFixed(1),
          ch == null ? null : bracket,
          bracketTint,
          '#'
        )}
        {metric(
          'HCR · Reserve',
          hcr == null ? '—' : num(hcr, 2),
          hcrUsd != null ? `$${num(hcrUsd, 2)}` : 'HC',
          '#117A4D',
          'https://hc.exchange/'
        )}
        {metric(
          'HCC · Healthcare Coin',
          hcc == null ? '—' : num(hcc, 4),
          hcc == null ? 'HCC' : 'HCC',
          '#6B4A7E',
          'https://hc.exchange/'
        )}
        <div style={avatar} onClick={onSignOut} title={(user && (user.display_name || user.email)) || 'Sign out'}>
          <div style={avatarLabel}>{displayName}</div>
          <div style={avatarDot}>{initials}</div>
        </div>
      </div>
    </div>
  );
};
window.Topbar = Topbar;