// UBP sub-page: Mining Nodes
// Operator console — run validators / compute / storage nodes, earn UBR.
// Treated as an "instrument console" — half paper, half dark monitoring strip.

function MiningRail({ active }) {
  return (
    <>
      <div style={{ padding: '0 16px 14px', borderBottom: `1px solid ${UB.rule2}`, marginBottom: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <div style={{ width: 28, height: 28, background: UB.ink, color: UB.paper, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: UB.serif, fontSize: 16 }}>M</div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontWeight: 600, fontSize: 12, lineHeight: 1.1 }}>M. Harriot</div>
            <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.06em' }}>UBID·0x7a91…3fc2</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 4 }}>
          <Tag tone="accent">TIS 85.8</Tag>
          <Tag tone="ok">3 NODES UP</Tag>
        </div>
      </div>
      <NavGroup label="Workspace">
        <NavItem icon={Icon.home} label="Overview" />
        <NavItem icon={Icon.user} label="TRID Profile" />
        <NavItem icon={Icon.flask} label="AI Twin" />
        <NavItem icon={Icon.search} label="Discovery" />
      </NavGroup>
      <NavGroup label="Contribute">
        <NavItem icon={Icon.cpu} label="Mining Nodes" badge="3" active={active === 'mining'} />
        <NavItem icon={Icon.storage} label="Storage Hosting" />
        <NavItem icon={Icon.shield} label="Validator Stake" />
      </NavGroup>
      <NavGroup label="Account">
        <NavItem icon={Icon.bank} label="Wallet" />
        <NavItem icon={Icon.cog} label="Settings" />
      </NavGroup>
    </>
  );
}

function MiningCrumb({ items }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: UB.mono, fontSize: 10, color: UB.ink3, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6 }}>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          <span style={{ color: i === items.length - 1 ? UB.ink : UB.ink3 }}>{it}</span>
          {i < items.length - 1 && <span style={{ color: UB.ink4 }}>›</span>}
        </React.Fragment>
      ))}
    </div>
  );
}

function MiningNodesDapp() {
  // Live-ish utilization sparkline values (10-min window)
  const utilA = [62, 68, 71, 74, 70, 76, 81, 78, 84, 88, 91, 87, 92, 89, 94, 91, 88, 92, 95, 93];
  const utilB = [44, 46, 48, 52, 49, 51, 53, 55, 58, 56, 60, 58, 62, 64, 61, 63, 66, 64, 68, 67];
  const utilC = [22, 21, 24, 23, 25, 22, 21, 19, 20, 22, 23, 21, 24, 22, 20, 21, 23, 24, 22, 20];

  const nodes = [
    {
      id: 'node-ucsf-glia-01',
      kind: 'COMPUTE',
      hw: '8 × H100 SXM · NVLink · 96 vCPU · 1.5 TB RAM',
      loc: 'Berkeley, US-W',
      uptime: '99.94%',
      jobs: 184,
      earn30d: 1842,
      epoch: '+12.4',
      status: 'WORKING',
      tone: 'ok',
      util: utilA,
      assigned: 'NB-219 · Astrocyte calcium MRC sweep',
      power: '4.2 kW',
    },
    {
      id: 'node-storage-eu-04',
      kind: 'STORAGE',
      hw: '12 × 22 TB HDD · 4 × 4 TB NVMe cache · 25 Gbps',
      loc: 'Frankfurt, EU-C',
      uptime: '99.99%',
      jobs: 4218,
      earn30d: 612,
      epoch: '+4.1',
      status: 'WORKING',
      tone: 'ok',
      util: utilB,
      assigned: '482 GB pinned · 14 datasets',
      power: '0.41 kW',
    },
    {
      id: 'node-val-pacific-02',
      kind: 'VALIDATOR',
      hw: 'Bare-metal · 32 vCPU · 256 GB · TPM-2.0',
      loc: 'Singapore, AP-SE',
      uptime: '100.00%',
      jobs: 8419,
      earn30d: 412,
      epoch: '+2.8',
      status: 'PROPOSING',
      tone: 'accent',
      util: utilC,
      assigned: 'Block 8,419,206 · slot 12 / 64',
      power: '0.18 kW',
    },
    {
      id: 'node-attic-rtx-09',
      kind: 'COMPUTE',
      hw: '2 × RTX 4090 · 24 vCPU · 128 GB',
      loc: 'Home · UK-S',
      uptime: '94.21%',
      jobs: 22,
      earn30d: 84,
      epoch: '−0.4',
      status: 'IDLE',
      tone: 'warn',
      util: [12, 14, 18, 20, 16, 12, 8, 6, 4, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      assigned: 'No job · awaiting bid',
      power: '0.0 kW',
    },
    {
      id: 'node-arch-east-12',
      kind: 'STORAGE',
      hw: 'Cold archive · 96 TB tape',
      loc: 'Reston, US-E',
      uptime: '—',
      jobs: 0,
      earn30d: 0,
      epoch: '—',
      status: 'OFFLINE',
      tone: 'bad',
      util: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
      assigned: 'Last seen 2d 14h ago · review logs',
      power: '—',
    },
  ];

  const recent = [
    ['+184.20', 'Block reward · slot 8,419,206',     '17:02', 'VALIDATOR', 'accent'],
    ['+22.40',  'Compute job · NB-219 / H100 ×8',    '16:51', 'COMPUTE',   'ok'],
    ['+8.10',   'Pin reward · QmZ7…91fe',             '16:48', 'STORAGE',   'ok'],
    ['+184.20', 'Block reward · slot 8,419,118',     '16:34', 'VALIDATOR', 'accent'],
    ['−2.80',   'Slashing · stale-prop slot 8,419,002', '16:18', 'PENALTY',  'bad'],
    ['+44.00',  'Compute job · DRAFT·092 / RTX-A6000','16:02', 'COMPUTE',   'ok'],
    ['+184.20', 'Block reward · slot 8,419,054',     '15:48', 'VALIDATOR', 'accent'],
    ['+8.10',   'Pin reward · QmA1…40bc',             '15:44', 'STORAGE',   'ok'],
  ];

  return (
    <Dapp>
      <ChromeBar dapp="PERSONAL" code="UBP / MINING NODES" />
      <Layout rail={<MiningRail active="mining" />}>
        <PageHead
          eyebrow={<MiningCrumb items={['Personal Dapp', 'Contribute', 'Mining Nodes']} />}
          title="Mining nodes"
          sub="Lend compute, storage and validation to UB-Chain. The network pays you in UBR for blocks proposed, jobs run, and bytes pinned — pro-rated by uptime and verified work."
          actions={<>
            <Btn small>Help me start</Btn>
            <Btn small icon={Icon.search}>Browse open jobs</Btn>
            <Btn small primary icon={Icon.plus}>Register new node</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>

          {/* OPERATOR CONSOLE — dark instrument strip */}
          <div style={{
            background: UB.ink, color: UB.paper,
            border: `1px solid ${UB.ink}`,
            display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1fr',
            position: 'relative',
          }}>
            {/* hero */}
            <div style={{ padding: 22, borderRight: '1px solid rgba(255,255,255,.08)' }}>
              <div style={{ fontFamily: UB.mono, fontSize: 10, letterSpacing: '0.2em', color: '#A8A7A0', marginBottom: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
                <Pulse /> OPERATOR CONSOLE · LIVE
              </div>
              <div style={{ fontFamily: UB.serif, fontSize: 56, lineHeight: 0.95, letterSpacing: '-0.03em', color: UB.accent }}>+18.2</div>
              <div style={{ fontFamily: UB.mono, fontSize: 11, color: '#A8A7A0', marginTop: 4 }}>UBR / hour · across 3 active nodes</div>
              <div style={{ marginTop: 14, display: 'flex', gap: 6 }}>
                <Tag tone="ink" style={{ background: 'rgba(255,255,255,.1)', color: UB.paper }}>EPOCH 14,294</Tag>
                <Tag style={{ background: UB.accent, color: UB.ink }}>NETWORK SHARE 0.41%</Tag>
              </div>
            </div>

            {[
              ['Earnings · 30d', '2,338', 'UBR · ↑ 22%'],
              ['Earnings · all-time', '38,440', '14 mo as operator'],
              ['Avg uptime', '98.42%', '5 nodes · 90d window'],
              ['Pending payouts', '184.20', 'next block · ~9s'],
            ].map((s, i) => (
              <div key={i} style={{ padding: 22, borderRight: i < 3 ? '1px solid rgba(255,255,255,.08)' : 'none' }}>
                <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.18em', color: '#A8A7A0', marginBottom: 6, textTransform: 'uppercase' }}>{s[0]}</div>
                <div style={{ fontFamily: UB.mono, fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em' }}>{s[1]}</div>
                <div style={{ fontFamily: UB.mono, fontSize: 10, color: '#A8A7A0', marginTop: 4 }}>{s[2]}</div>
              </div>
            ))}

            {/* corner instrument frame */}
            <span style={{ position: 'absolute', top: 6, right: 10, fontFamily: UB.mono, fontSize: 9, color: '#7C7B73', letterSpacing: '0.2em' }}>UB-OPS · v0.4.2-rc1</span>
          </div>

          {/* MIDDLE BAND: capacity meter + earning composition + payout schedule */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr', gap: 16 }}>
            <Card title="Network capacity & your share" code="UB-CHAIN · LIVE" action={<Tag tone="accent">0.41% NETWORK</Tag>}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, marginBottom: 14 }}>
                {[
                  ['Compute', '1,847', 'GPU nodes', '1.4%'],
                  ['Storage', '2.41', 'PB pinned',  '0.02%'],
                  ['Validators', '6,418', 'staking',  '0.05%'],
                ].map(([k, v, u, sh], i) => (
                  <div key={i}>
                    <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.18em', color: UB.ink3, marginBottom: 4, textTransform: 'uppercase' }}>{k}</div>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                      <div style={{ fontFamily: UB.mono, fontSize: 24, fontWeight: 500 }}>{v}</div>
                      <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{u}</div>
                    </div>
                    <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.accent, marginTop: 2 }}>your share · {sh}</div>
                  </div>
                ))}
              </div>
              <div style={{ borderTop: `1px solid ${UB.rule2}`, paddingTop: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 10, color: UB.ink3, letterSpacing: '0.12em', marginBottom: 6 }}>
                  <span>NETWORK UTILIZATION · 24H</span>
                  <span>peak 96% · trough 71%</span>
                </div>
                <MiniBars
                  values={[71, 74, 76, 78, 82, 84, 86, 88, 91, 92, 94, 96, 95, 93, 92, 91, 90, 88, 87, 85, 86, 88, 89, 90]}
                  h={48} color={UB.ink}
                />
                <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 9, color: UB.ink3, marginTop: 4, letterSpacing: '0.1em' }}>
                  <span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>NOW</span>
                </div>
              </div>
            </Card>

            <Card title="Earnings · 30d composition" code="UBR · 2,338">
              {[
                ['Block proposals',     0.46, '1,076', UB.accent],
                ['Compute jobs',        0.31, '724',   UB.ink],
                ['Storage pin rewards', 0.14, '328',   '#7CC4F2'],
                ['Attestations',        0.07, '164',   '#A8A7A0'],
                ['Slashing penalties', -0.02, '−46',   UB.bad],
              ].map(([k, v, n, c], i, arr) => (
                <div key={k} style={{ marginBottom: i < arr.length - 1 ? 10 : 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 3 }}>
                    <span>{k}</span>
                    <span style={{ fontFamily: UB.mono, color: v < 0 ? UB.bad : UB.ink2 }}>{n} UBR</span>
                  </div>
                  <div style={{ height: 4, background: UB.paperDeep, position: 'relative' }}>
                    <div style={{
                      position: 'absolute', top: 0, bottom: 0,
                      left: v < 0 ? 'auto' : 0, right: v < 0 ? 0 : 'auto',
                      width: `${Math.abs(v) * 100}%`,
                      background: c,
                    }} />
                  </div>
                </div>
              ))}
            </Card>

            <Card title="Next payout" code="AUTO" action={<Tag tone="ok">~9s</Tag>}>
              <div style={{ fontFamily: UB.serif, fontSize: 36, lineHeight: 1, color: UB.accent }}>184.20</div>
              <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginBottom: 12 }}>UBR · block 8,419,207 · slot 13</div>
              <div style={{ borderTop: `1px solid ${UB.rule2}`, paddingTop: 10, fontFamily: UB.mono, fontSize: 10, lineHeight: 1.7 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: UB.ink3 }}>BASE REWARD</span><span>180.00</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span style={{ color: UB.ink3 }}>FEE TIPS</span><span>4.20</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between', color: UB.bad }}><span>OPERATOR FEE (POOL)</span><span>−0.00</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between', borderTop: `1px solid ${UB.rule2}`, marginTop: 4, paddingTop: 4 }}><span style={{ color: UB.ink3 }}>NET</span><span style={{ color: UB.accent }}>184.20</span></div>
              </div>
              <div style={{ marginTop: 10, display: 'flex', gap: 6 }}>
                <Btn small ghost>Auto-stake off</Btn>
                <Btn small>Withdraw rule</Btn>
              </div>
            </Card>
          </div>

          {/* MY NODES — rich table */}
          <Card title="My nodes" code={`${nodes.length} REGISTERED · 3 ONLINE`} action={<div style={{ display: 'flex', gap: 6 }}><Btn small ghost>Filter</Btn><Btn small>Bulk update firmware</Btn></div>} pad={false}>
            <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr 130px 100px 100px 90px 90px 110px', gap: 12, padding: '10px 16px', fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.14em', textTransform: 'uppercase', borderBottom: `1px solid ${UB.rule2}` }}>
              <span>Node</span><span>Hardware · Assignment</span><span>Util · 10 min</span><span>Uptime</span><span style={{ textAlign: 'right' }}>Earn 30d</span><span style={{ textAlign: 'right' }}>Δ epoch</span><span>Status</span><span style={{ textAlign: 'right' }}>Action</span>
            </div>
            {nodes.map((n, i) => (
              <div key={n.id} style={{ display: 'grid', gridTemplateColumns: '180px 1fr 130px 100px 100px 90px 90px 110px', gap: 12, padding: '14px 16px', alignItems: 'center', borderBottom: i < nodes.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                <div>
                  <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginBottom: 3 }}>
                    <Tag tone={n.kind === 'VALIDATOR' ? 'accent' : n.kind === 'COMPUTE' ? 'info' : 'ok'}>{n.kind}</Tag>
                  </div>
                  <div style={{ fontFamily: UB.mono, fontSize: 11, fontWeight: 500 }}>{n.id}</div>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{n.loc}</div>
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 12 }}>{n.hw}</div>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginTop: 2 }}>↳ {n.assigned} · {n.power}</div>
                </div>
                <div>
                  <Sparkline values={n.util.length ? n.util : [0, 0]} w={120} h={28} color={n.tone === 'bad' ? UB.bad : UB.ink} />
                  <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, marginTop: 2 }}>peak {Math.max(...n.util)}%</div>
                </div>
                <span style={{ fontFamily: UB.mono, fontSize: 11, color: n.tone === 'bad' ? UB.bad : UB.ink2 }}>{n.uptime}</span>
                <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.accent, textAlign: 'right' }}>{n.earn30d.toLocaleString()}</span>
                <span style={{ fontFamily: UB.mono, fontSize: 11, textAlign: 'right', color: n.epoch.startsWith('−') ? UB.bad : UB.ok }}>{n.epoch}</span>
                <Tag tone={n.tone}>{n.status}</Tag>
                <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
                  <Btn small ghost>Logs</Btn>
                  <Btn small>Manage</Btn>
                </div>
              </div>
            ))}
          </Card>

          {/* BOTTOM ROW — recent rewards · how mining works · register flow */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr', gap: 16 }}>

            {/* Live reward feed */}
            <Card title="Reward feed" code="LIVE · LAST 30 MIN" pad={false}>
              <div style={{ display: 'grid', gridTemplateColumns: '110px 1fr 90px 100px', gap: 10, padding: '10px 16px', fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.14em', textTransform: 'uppercase', borderBottom: `1px solid ${UB.rule2}` }}>
                <span style={{ textAlign: 'right' }}>Δ UBR</span><span>Memo</span><span>When</span><span>Source</span>
              </div>
              {recent.map((r, i) => {
                const positive = r[0].startsWith('+');
                return (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: '110px 1fr 90px 100px', gap: 10, padding: '10px 16px', fontFamily: UB.mono, fontSize: 11, alignItems: 'center', borderBottom: i < recent.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                    <span style={{ textAlign: 'right', color: positive ? UB.accent : UB.bad, fontWeight: 600 }}>{r[0]}</span>
                    <span style={{ color: UB.ink2, fontFamily: UB.sans, fontSize: 12 }}>{r[1]}</span>
                    <span style={{ color: UB.ink3 }}>{r[2]}</span>
                    <Tag tone={r[4]}>{r[3]}</Tag>
                  </div>
                );
              })}
            </Card>

            {/* How mining works */}
            <Card title="How UB-Chain mining works" code="PROOF-OF-WORKLOAD">
              <div style={{ fontSize: 12, color: UB.ink2, lineHeight: 1.55, marginBottom: 12 }}>
                Three roles, one ledger. Each pays out per epoch, weighted by verified contribution.
              </div>
              {[
                { k: 'COMPUTE', t: 'Run research jobs', s: 'Containerized GPU/CPU jobs from Compute Marketplace. Paid per job + tip.', tone: 'info' },
                { k: 'STORAGE', t: 'Pin & host artifacts', s: 'Replicate datasets & papers. Paid per GB-day with proof-of-replication.', tone: 'ok' },
                { k: 'VALIDATOR', t: 'Order & seal blocks', s: 'PoS — stake UBR, propose blocks, attest peers. Misbehavior is slashed.', tone: 'accent' },
              ].map((r, i) => (
                <div key={r.k} style={{ display: 'grid', gridTemplateColumns: '90px 1fr', gap: 10, padding: '10px 0', borderBottom: i < 2 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <Tag tone={r.tone}>{r.k}</Tag>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 12 }}>{r.t}</div>
                    <div style={{ fontSize: 11, color: UB.ink3, marginTop: 2 }}>{r.s}</div>
                  </div>
                </div>
              ))}
              <div style={{ marginTop: 10, padding: 10, background: UB.paperDeep, fontFamily: UB.mono, fontSize: 10, color: UB.ink2, lineHeight: 1.6 }}>
                Block reward · 180 UBR · halves every 4y<br />
                Slash · 0.5% stake · per missed slot<br />
                Tip share · 100% to operator
              </div>
            </Card>

            {/* Register a node */}
            <Card title="Register a new node" code="WIZARD · 4 STEPS" pad={false}>
              {[
                ['1', 'Pick a role', 'Compute · Storage · Validator', 'done'],
                ['2', 'Provision hardware', 'Bare-metal · cloud · home rig', 'active'],
                ['3', 'Stake & sign', 'Min 1,000 UBR for validator', 'pending'],
                ['4', 'Healthcheck', 'UB-OPS verifies attestation key', 'pending'],
              ].map(([n, t, s, st], i) => (
                <div key={n} style={{ display: 'grid', gridTemplateColumns: '32px 1fr 80px', gap: 10, padding: '12px 14px', alignItems: 'center', borderBottom: i < 3 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <div style={{
                    width: 26, height: 26,
                    border: `1px solid ${st === 'pending' ? UB.rule2 : UB.ink}`,
                    background: st === 'done' ? UB.ink : st === 'active' ? UB.accent : '#fff',
                    color: st === 'done' ? UB.accent : UB.ink,
                    fontFamily: UB.mono, fontSize: 11, fontWeight: 600,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>{st === 'done' ? '✓' : n}</div>
                  <div>
                    <div style={{ fontSize: 12, fontWeight: 500 }}>{t}</div>
                    <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginTop: 1 }}>{s}</div>
                  </div>
                  <Tag tone={st === 'done' ? 'ok' : st === 'active' ? 'accent' : 'default'}>{st.toUpperCase()}</Tag>
                </div>
              ))}
              <div style={{ padding: 14, display: 'flex', gap: 6 }}>
                <Btn small ghost>Save & exit</Btn>
                <Btn small primary style={{ flex: 1 }}>Continue · stake UBR</Btn>
              </div>
            </Card>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

window.MiningNodesDapp = MiningNodesDapp;