// Wallet — HCR + HCC balances + transaction history.
// Source: GET /api/v1/healthcoin/wallet  +  GET /api/v1/hcc/wallet
//         GET /api/v1/healthcoin/transactions?limit=200
const Wallet = () => {
  const [tab, setTab] = React.useState('all');
  const [hcr, setHcr]   = React.useState(undefined);  // undefined=loading, null=missing, object=loaded
  const [hcc, setHcc]   = React.useState(undefined);
  const [txns, setTxns] = React.useState(null);

  React.useEffect(() => {
    let dead = false;
    const get = async (path) => {
      try {
        const r = await fetch(window.CHVault.apiRoot + path, { credentials: 'include', headers: { 'Accept': 'application/json' } });
        if (r.status === 404) return null;
        if (!r.ok) throw 0;
        return await r.json();
      } catch { return null; }
    };
    (async () => {
      const [a, b, hcrTx, hccTx] = await Promise.all([
        get('/api/v1/healthcoin/wallet'),
        get('/api/v1/hcc/wallet'),
        get('/api/v1/healthcoin/transactions?limit=200'),
        get('/api/v1/hcc/transactions?limit=200'),
      ]);
      if (dead) return;
      setHcr(a);
      setHcc(b);
      // Normalize both streams into one list, tagged with coin.
      // HCR shape: { transactions: [{tx_hash, tx_type, amount, timestamp(float seconds), direction, reward_reason}], total }
      // HCC shape: { events: [{event_id, tier, final_pulses, final_hcc, era, created_at}], count }
      const hcrRows = hcrTx
        ? (Array.isArray(hcrTx) ? hcrTx : (hcrTx.transactions || hcrTx.items || []))
        : [];
      const hccRows = hccTx
        ? (Array.isArray(hccTx) ? hccTx : (hccTx.events || hccTx.transactions || hccTx.items || []))
        : [];
      const epochToISO = (sec) => {
        if (sec == null) return null;
        const n = Number(sec);
        if (!Number.isFinite(n)) return null;
        // Heuristic: if it's < 1e12 it's seconds, else already ms.
        return new Date(n < 1e12 ? n * 1000 : n).toISOString();
      };
      const merged = [].sort((x, y) => {
        const tx = new Date(x.recorded_at || 0).getTime();
        const ty = new Date(y.recorded_at || 0).getTime();
        return ty - tx;
      });
      setTxns(merged);
    })();
    return () => { dead = true; };
  }, []);

  // HCR (/api/v1/healthcoin/wallet) returns { balance, balance_usd, total_earned, … }
  // HCC (/api/v1/hcc/wallet) returns { balance_hcc, balance_pulses, total_mined_hcc, … }
  const toNum = (x) => {
    if (x == null) return null;
    const n = Number(x);
    return Number.isFinite(n) ? n : null;
  };
  const hcrBal      = hcr && toNum(hcr.balance      ?? hcr.hcr_balance ?? hcr.amount);
  const hcrUsd      = hcr && toNum(hcr.balance_usd  ?? hcr.usd_value);
  const hcrEarned   = hcr && toNum(hcr.total_earned);
  const hccBal      = hcc && toNum(hcc.balance_hcc  ?? hcc.balance ?? hcc.hcc_balance ?? hcc.amount);
  const hccPulses   = hcc && toNum(hcc.balance_pulses);
  const hccMined    = hcc && toNum(hcc.total_mined_hcc ?? hcc.total_mined);
  const hccUsd      = hcc && toNum(hcc.usd_value ?? hcc.amount_usd ?? hcc.balance_usd);

  const filtered = (txns || []).filter(t => {
    if (tab === 'all') return true;
    return (t.coin || t.currency || 'HCR').toLowerCase() === tab;
  });
  const kindColor = (k) => k === 'mint' ? 'var(--accent-clinical)' : k === 'hcc' ? 'var(--accent-plasma)' : k === 'redeem' ? 'var(--bracket-poor)' : 'var(--accent-coral)';
  const kindLabel = (k) => ({ mint: 'Mint', hcc: 'HCC', redeem: 'Redeem', reverse: 'Reverse' })[k] || k;

  return (
    <div data-screen-label="Wallet">
      <div style={{ marginBottom: 24 }}>
        <div className="k-eyebrow" style={{ color: 'var(--accent-clinical)' }}>Wallet</div>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 40, margin: '8px 0 0', letterSpacing: '-0.02em' }}>Your reserve and your data economy.</h1>
        <div style={{ fontSize: 14, color: 'var(--fg-2)', marginTop: 6, maxWidth: 640 }}>HCR is what you've earned through axis-lift. HCC is what researchers paid you to access opt-in records. Two coins. One wallet.</div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, marginBottom: 18 }}>
        <BalanceCard
          tint="var(--accent-clinical)"
          eyebrow="HCR · Reserve"
          subtitle={hcr && hcr.address ? `${String(hcr.address).slice(0, 8)}…` : 'Coverdell custody'}
          loading={hcr === undefined}
          value={hcrBal}
          unitLabel={hcrUsd != null
            ? `≈ $${Number(hcrUsd).toLocaleString(undefined, { maximumFractionDigits: 2 })} USD · HEALTHCOIN™ RESERVE`
            : 'HEALTHCOIN™ RESERVE · MINTED BY HEALTH'}
          secondary={hcrEarned != null ? `${Number(hcrEarned).toLocaleString(undefined, { maximumFractionDigits: 2 })} HC lifetime earned` : null}
          actions={[
            { label: 'Redeem', primary: true, href: 'https://hc.exchange/redeem' },
            { label: 'Send',    href: 'https://hc.exchange/wallet/send' },
            { label: 'Receive', href: 'https://hc.exchange/wallet/receive' },
          ]}
          emptyTitle="No HCR earnings yet."
          emptyDetail="Your reserve is minted when you log an axis-lifting action. Sleep, meals, focus blocks, meditation, journals — every accepted action mints HCR."
          ctaPrimary={{ label: '+ Log an action to start earning', onClick: () => window.openQuickLog && window.openQuickLog(null) }}
        />
        <BalanceCard
          tint="var(--accent-plasma)"
          eyebrow="HCC · Healthcare Coin"
          subtitle={hcc && hcc.address ? `${String(hcc.address).slice(0, 8)}…` : 'Floats · hc.exchange'}
          loading={hcc === undefined}
          value={hccBal}
          unitLabel={hccUsd != null
            ? `≈ $${Number(hccUsd).toLocaleString(undefined, { maximumFractionDigits: 2 })} USD · DATA-ECONOMY EARNINGS`
            : (hccPulses != null
                ? `${Number(hccPulses).toLocaleString()} PULSES · DATA-ECONOMY EARNINGS`
                : 'DATA-ECONOMY EARNINGS · hc.exchange')}
          secondary={hccMined != null && hccMined > 0 ? `${Number(hccMined).toLocaleString(undefined, { maximumFractionDigits: 6 })} HCC lifetime mined` : null}
          actions={[
            { label: 'Cash out',           primary: true, href: 'https://hc.exchange/redeem' },
            { label: 'Trade on hc.exchange',              href: 'https://hc.exchange' },
            { label: 'Mining stats',                       href: 'https://hc.exchange/mining' },
          ]}
          emptyTitle="No HCC yet."
          emptyDetail="HCC is paid out when you opt your records into a researcher cohort and the query is accepted. Browse offers under Research."
          ctaPrimary={{ label: 'Browse research offers', href: 'https://hc.exchange/research' }}
        />
      </div>

      <div className="k-card" style={{ padding: 18 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
          <div>
            <div className="k-eyebrow">Activity · last 200</div>
            <h3 className="k-h3" style={{ marginTop: 4 }}>Transaction history</h3>
          </div>
          <div style={{ display: 'flex', gap: 4, padding: 4, background: 'var(--bg-mist)', borderRadius: 8, border: '1px solid var(--border-1)' }}>
            {['all', 'hcr', 'hcc'].map(t => (
              <button key={t} onClick={() => setTab(t)} style={{ padding: '6px 14px', borderRadius: 6, background: tab === t ? 'var(--bg-parchment)' : 'transparent', border: 'none', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: tab === t ? 'var(--fg-1)' : 'var(--fg-3)', cursor: 'pointer', fontWeight: tab === t ? 600 : 500 }}>{t}</button>
            ))}
          </div>
        </div>
        {txns === null && (
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', padding: 24, textAlign: 'center' }}>Loading transactions…</div>
        )}
        {txns && filtered.length === 0 && txns.length === 0 && (
          <div style={{ padding: 24, textAlign: 'center' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 15, color: 'var(--fg-2)' }}>No transactions yet.</div>
            <div style={{ fontSize: 12.5, color: 'var(--fg-3)', marginTop: 6 }}>The first mint will appear here the moment your first signal event is accepted.</div>
          </div>
        )}
        {txns && txns.length > 0 && filtered.length === 0 && (
          <div style={{ padding: 24, textAlign: 'center', fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 14, color: 'var(--fg-2)' }}>
            No {tab.toUpperCase()} transactions in the last 200. Try the "All" or "{tab === 'hcr' ? 'HCC' : 'HCR'}" tab.
          </div>
        )}
        {filtered.map((t, i) => {
          const coin = (t.coin || t.currency || 'HCR').toUpperCase();
          const kind = t.kind || t.type || (Number(t.amount || 0) < 0 ? 'redeem' : 'mint');
          const amtNum  = Number(t.amount ?? t.value ?? 0);
          const when = t.recorded_at || t.created_at || (t.timestamp ? new Date((Number(t.timestamp) < 1e12 ? Number(t.timestamp) * 1000 : Number(t.timestamp))).toISOString() : null);
          const precision = coin === 'HCC' ? 6 : 2;
          return (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '70px 1fr auto auto', alignItems: 'center', gap: 16, padding: '14px 0', borderBottom: i < filtered.length - 1 ? '1px solid var(--border-1)' : 'none' }}>
              <div style={{ display: 'inline-flex', padding: '4px 10px', borderRadius: 999, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: kindColor(kind), background: 'var(--bg-mist)', border: `1px solid ${kindColor(kind)}40`, justifyContent: 'center' }}>{kindLabel(kind)}</div>
              <div>
                <div style={{ fontSize: 13.5, fontWeight: 500, color: 'var(--fg-1)' }}>{t.description || t.detail || (t.signal_id ? 'Signal · ' + t.signal_id : 'Transaction')}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-3)', marginTop: 3 }}>{when ? new Date(when).toLocaleString() : ''}{t.source ? ' · ' + t.source : ''}</div>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)' }}>{coin}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: amtNum < 0 ? 'var(--fg-1)' : kindColor(kind) }}>{amtNum > 0 ? '+' : ''}{amtNum.toLocaleString(undefined, { maximumFractionDigits: precision })}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

const BalanceCard = ({ tint, eyebrow, subtitle, value, unitLabel, secondary, actions, loading, emptyTitle, emptyDetail, ctaPrimary }) => {
  const hasBalance = !loading && value != null && !Number.isNaN(Number(value));
  const renderAction = (a, i) => {
    const style = { textDecoration: 'none', padding: '10px 16px', borderRadius: 8, background: a.primary ? tint : 'transparent', color: a.primary ? 'white' : 'var(--fg-1)', border: a.primary ? 'none' : '1px solid var(--border-1)', fontWeight: 600, fontSize: 13, cursor: 'pointer' };
    if (a.href)    return <a key={i} href={a.href} target={a.href.startsWith('http') ? '_blank' : undefined} rel="noopener" style={style}>{a.label}</a>;
    if (a.onClick) return <button key={i} type="button" onClick={a.onClick} style={style}>{a.label}</button>;
    return <button key={i} type="button" disabled style={{ ...style, cursor: 'not-allowed', opacity: 0.6 }}>{a.label}</button>;
  };
  return (
    <div className="k-card" style={{ padding: 22, background: `linear-gradient(140deg, ${tint}11 0%, var(--bg-parchment) 60%)` }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div className="k-eyebrow" style={{ color: tint }}>{eyebrow}</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{subtitle}</div>
      </div>
      {loading ? (
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', padding: '32px 0' }}>Loading wallet…</div>
      ) : hasBalance ? (
        <React.Fragment>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 64, lineHeight: 1, marginTop: 12, color: 'var(--fg-1)', letterSpacing: '-0.03em' }}>{Number(value).toLocaleString(undefined, { maximumFractionDigits: 6 })}</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', color: 'var(--fg-3)', marginTop: 6 }}>{unitLabel}</div>
          {secondary && <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.08em', color: 'var(--fg-3)', marginTop: 4 }}>{secondary}</div>}
        </React.Fragment>
      ) : (
        <React.Fragment>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, lineHeight: 1.25, marginTop: 14, color: 'var(--fg-1)' }}>{emptyTitle}</div>
          <div style={{ fontSize: 12.5, color: 'var(--fg-2)', marginTop: 8, lineHeight: 1.5 }}>{emptyDetail}</div>
        </React.Fragment>
      )}
      <div style={{ display: 'flex', gap: 8, marginTop: 18, flexWrap: 'wrap' }}>
        {hasBalance && (actions || []).map(renderAction)}
        {!hasBalance && ctaPrimary && renderAction({ ...ctaPrimary, primary: true }, 'cta')}
      </div>
    </div>
  );
};

window.Wallet = Wallet;