// UB Chain Explorer — block / network / consensus visibility.

function ChainDapp() {
  const sidebar = (
    <>
      <NavGroup label="Explorer">
        <NavItem icon={Icon.cube} label="Blocks" active />
        <NavItem icon={Icon.doc} label="Transactions" />
        <NavItem icon={Icon.user} label="Validators" badge="142" />
        <NavItem icon={Icon.shield} label="Cerberus shards" badge="8" />
      </NavGroup>
      <NavGroup label="Modules">
        <NavItem icon={Icon.cpu} label="Compute layer" />
        <NavItem icon={Icon.storage} label="Storage layer" />
        <NavItem icon={Icon.book} label="Identity layer" />
      </NavGroup>
      <NavGroup label="Tools">
        <NavItem icon={Icon.search} label="Lookup" />
        <NavItem icon={Icon.bank} label="UBR analytics" />
      </NavGroup>
    </>
  );

  return (
    <Dapp dark>
      <ChromeBar dapp="UB-CHAIN" code="EXPLORER" />
      <Layout dark rail={sidebar}>
        <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', background: UB.ink, color: '#EAE9E2' }}>
          <div style={{ padding: '20px 28px 18px', borderBottom: '1px solid rgba(255,255,255,.08)', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontFamily: UB.mono, fontSize: 10, letterSpacing: '0.2em', color: '#8A8990', textTransform: 'uppercase', marginBottom: 6 }}>UB-Chain · L1 · Cerberus consensus</div>
              <h1 style={{ margin: 0, fontFamily: UB.serif, fontWeight: 400, fontSize: 32, letterSpacing: '-0.02em' }}>Block 8,419,206 <span style={{ color: '#8A8990' }}>· just now</span></h1>
              <div style={{ marginTop: 6, color: '#A8A7A0' }}>500 ms blocks · 980 ms finality · 8 active shards · 142 validators · 99.97% 30-day uptime</div>
            </div>
            <Btn small primary>Run a node</Btn>
          </div>

          <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 14, alignContent: 'flex-start' }}>
            {[
              ['BLOCKS / SEC', '1.98', UB.accent],
              ['TPS · CURRENT', '42,180', '#EAE9E2'],
              ['TPS · 24H AVG', '38,902', '#EAE9E2'],
              ['GAS · MEDIAN', '0.00021', '#EAE9E2'],
            ].map(([l, v, c], i) => (
              <div key={i} style={{ border: '1px solid rgba(255,255,255,.10)', padding: 14, background: '#161617' }}>
                <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.18em', color: '#8A8990', marginBottom: 6 }}>{l}</div>
                <div style={{ fontFamily: UB.mono, fontSize: 22, fontWeight: 500, color: c, letterSpacing: '-0.02em' }}>{v}</div>
              </div>
            ))}

            {/* Latest blocks */}
            <div style={{ gridColumn: 'span 2', border: '1px solid rgba(255,255,255,.10)', background: '#161617' }}>
              <div style={{ padding: '10px 14px', borderBottom: '1px solid rgba(255,255,255,.06)', display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ fontWeight: 600, fontSize: 12 }}>Latest blocks</span>
                <Tag tone="accent">LIVE</Tag>
              </div>
              {[
                ['8,419,206', '0x7a91…', 412, 'shard-3', '0.42s'],
                ['8,419,205', '0x44e2…', 388, 'shard-1', '0.49s'],
                ['8,419,204', '0xc019…', 502, 'shard-7', '0.48s'],
                ['8,419,203', '0x182f…', 290, 'shard-4', '0.51s'],
                ['8,419,202', '0xff14…', 612, 'shard-2', '0.43s'],
                ['8,419,201', '0x9c00…', 184, 'shard-6', '0.50s'],
                ['8,419,200', '0x3a8e…', 442, 'shard-3', '0.47s'],
              ].map((r, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '110px 1fr 70px 80px 60px', gap: 12, padding: '8px 14px', fontFamily: UB.mono, fontSize: 11, borderTop: '1px solid rgba(255,255,255,.04)' }}>
                  <span style={{ color: UB.accent }}>{r[0]}</span>
                  <span style={{ color: '#A8A7A0' }}>{r[1]}</span>
                  <span style={{ color: '#A8A7A0', textAlign: 'right' }}>{r[2]} tx</span>
                  <span style={{ color: '#A8A7A0', textAlign: 'right' }}>{r[3]}</span>
                  <span style={{ color: '#A8A7A0', textAlign: 'right' }}>{r[4]}</span>
                </div>
              ))}
            </div>

            {/* Shards visualization */}
            <div style={{ gridColumn: 'span 2', border: '1px solid rgba(255,255,255,.10)', background: '#161617', padding: 14 }}>
              <div style={{ fontWeight: 600, fontSize: 12, marginBottom: 12 }}>Cerberus shards · parallel consensus</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8, 1fr)', gap: 6 }}>
                {Array.from({ length: 8 }).map((_, i) => {
                  const load = [0.8, 0.6, 0.92, 0.7, 0.5, 0.85, 0.42, 0.78][i];
                  return (
                    <div key={i} style={{ background: '#0A0A0B', border: '1px solid rgba(255,255,255,.08)', padding: 8 }}>
                      <div style={{ fontFamily: UB.mono, fontSize: 9, color: '#8A8990', letterSpacing: '0.1em', marginBottom: 4 }}>SHARD-{i + 1}</div>
                      <MiniBars values={Array.from({ length: 12 }).map(() => Math.random() * load + 0.2)} h={28} color={load > 0.85 ? UB.accent : '#A8A7A0'} />
                      <div style={{ fontFamily: UB.mono, fontSize: 10, marginTop: 4, color: load > 0.85 ? UB.accent : '#EAE9E2' }}>{Math.round(load * 100)}%</div>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Validator stake */}
            <div style={{ gridColumn: 'span 2', border: '1px solid rgba(255,255,255,.10)', background: '#161617' }}>
              <div style={{ padding: '10px 14px', borderBottom: '1px solid rgba(255,255,255,.06)', fontWeight: 600, fontSize: 12 }}>Top validators · by stake</div>
              {[
                ['ucsf-weill-01', 'university', '4.2M', 99.98],
                ['mit-csail-04', 'university', '3.8M', 99.94],
                ['eth-zurich-02', 'university', '3.1M', 99.97],
                ['nih-distributed', 'institution', '2.9M', 99.91],
                ['anon-7c91', 'individual', '1.4M', 99.82],
              ].map((r, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 90px 80px 60px', gap: 12, padding: '7px 14px', fontFamily: UB.mono, fontSize: 11, borderTop: '1px solid rgba(255,255,255,.04)' }}>
                  <span>{r[0]}</span>
                  <span style={{ color: '#8A8990' }}>{r[1]}</span>
                  <span style={{ textAlign: 'right', color: UB.accent }}>{r[2]} UBR</span>
                  <span style={{ textAlign: 'right', color: r[3] > 99.9 ? UB.ok : '#A8A7A0' }}>{r[3]}%</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

window.ChainDapp = ChainDapp;