// UBP — Personal Dapp dashboard. Researcher's "operating system".
// Layout: chrome bar / left rail / hero header / 3-col grid of working panels.

function UBPDapp() {
  const profileHeader = (
    <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>NEUROSCI</Tag>
      </div>
    </div>
  );

  const sectionRails = {
    workspace: (
      <>
        {profileHeader}
        <NavGroup label="Workspace">
          <NavItem icon={Icon.home} label="Overview" active />
          <NavItem icon={Icon.doc} label="Papers & Drafts" badge="14" />
          <NavItem icon={Icon.book} label="Notebooks" badge="3" />
          <NavItem icon={Icon.flask} label="Active Research" badge="6" />
        </NavGroup>
        <NavGroup label="Recent">
          <NavItem icon={Icon.doc} label="GABA-T uptake draft" />
          <NavItem icon={Icon.doc} label="Astrocyte calcium…" />
          <NavItem icon={Icon.doc} label="LTP rescue notes" />
        </NavGroup>
      </>
    ),
    identity: (
      <>
        {profileHeader}
        <NavGroup label="Identity">
          <NavItem icon={Icon.user} label="TRID Profile" />
          <NavItem icon={Icon.shield} label="Identity & Keys" />
          <NavItem icon={Icon.bank} label="Affiliations" />
          <NavItem icon={Icon.book} label="Publications" />
        </NavGroup>
        <NavGroup label="Reputation">
          <NavItem icon={Icon.check} label="Reviewer Hub" badge="3" />
          <NavItem icon={Icon.shield} label="Endorsements" />
          <NavItem icon={Icon.flask} label="AI Twin" />
        </NavGroup>
      </>
    ),
    lab: (
      <>
        {profileHeader}
        <NavGroup label="Lab">
          <NavItem icon={Icon.book} label="Open Labbook" />
          <NavItem icon={Icon.branch} label="Contributions" />
          <NavItem icon={Icon.flask} label="Project Pipeline" />
        </NavGroup>
        <NavGroup label="Pipeline">
          <NavItem icon={Icon.doc} label="Hypothesis" />
          <NavItem icon={Icon.bank} label="Grant" />
          <NavItem icon={Icon.flask} label="Protocol" />
          <NavItem icon={Icon.cube} label="Experiment" />
          <NavItem icon={Icon.doc} label="Drafting" />
          <NavItem icon={Icon.arrow} label="Submit" />
        </NavGroup>
      </>
    ),
    markets: (
      <>
        {profileHeader}
        <NavGroup label="Markets">
          <NavItem icon={Icon.cube} label="Patent Tokens" />
          <NavItem icon={Icon.shield} label="DAO Tokens" />
          <NavItem icon={Icon.arrow} label="Token Swap" />
          <NavItem icon={Icon.bank} label="Wallet" />
        </NavGroup>
        <NavGroup label="Funding">
          <NavItem icon={Icon.rocket} label="Launchpad" />
          <NavItem icon={Icon.bank} label="Institutions" />
          <NavItem icon={Icon.plus} label="Bounties" />
        </NavGroup>
      </>
    ),
    infra: (
      <>
        {profileHeader}
        <NavGroup label="Infrastructure">
          <NavItem icon={Icon.cpu} label="Compute" />
          <NavItem icon={Icon.storage} label="Storage" />
          <NavItem icon={Icon.chain} label="UB-Chain" />
          <NavItem icon={Icon.store} label="Dapp Store" />
        </NavGroup>
        <NavGroup label="Earn">
          <NavItem icon={Icon.cube} label="Mining Nodes" badge="2" />
          <NavItem icon={Icon.storage} label="Storage Hosting" />
          <NavItem icon={Icon.search} label="Discovery" />
        </NavGroup>
      </>
    ),
    admin: (
      <>
        {profileHeader}
        <NavGroup label="Account">
          <NavItem icon={Icon.cog} label="Settings" />
          <NavItem icon={Icon.shield} label="Roles & Permissions" />
          <NavItem icon={Icon.bell} label="Notifications" />
        </NavGroup>
        <NavGroup label="Editorial">
          <NavItem icon={Icon.shield} label="SBT Issuance" />
          <NavItem icon={Icon.check} label="Matched Reviews" />
          <NavItem icon={Icon.doc} label="Publisher Dashboard" />
        </NavGroup>
      </>
    ),
  };

  return (
    <Dapp>
      <ChromeBar dapp="PERSONAL" code="UBP·v0.4.2-rc1" />
      <Layout sectionRails={sectionRails} defaultSection="workspace">
        <PageHead
          eyebrow="Researcher Operating System · Tuesday, May 5"
          title={<>Good evening, <span style={{ fontStyle: 'italic' }}>Malcolm.</span></>}
          sub="Three review requests, one milestone payout, and a draft awaiting your sign-off."
          actions={<>
            <Btn icon={Icon.search} small>Search ecosystem</Btn>
            <Btn icon={Icon.plus} primary small>New notebook</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'grid', gridTemplateColumns: '1.1fr 1.1fr 0.9fr', gap: 16 }}>

          {/* True Impact Score card with breakdown */}
          <Card title="True Impact Score" code="TIS·v3" action={<Tag tone="accent">+1.4 / 30d</Tag>}>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 16, marginBottom: 14 }}>
              <div style={{ fontFamily: UB.serif, fontSize: 64, lineHeight: 0.95, letterSpacing: '-0.03em' }}>85.8</div>
              <div style={{ paddingBottom: 6 }}>
                <Sparkline values={[72, 74, 73, 76, 78, 80, 79, 82, 84, 85, 85.8]} w={140} h={36} />
                <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.12em', marginTop: 2 }}>11-MONTH TREND</div>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, fontSize: 11 }}>
              {[
                ['Knowledge creation', 0.83, '22%'],
                ['Peer & societal impact', 0.72, '18%'],
                ['Peer review', 0.78, '12%'],
                ['Leadership / collab', 0.69, '18%'],
                ['Recognition & funding', 0.81, '18%'],
                ['Adaptability & ethics', 0.74, '12%'],
              ].map(([k, v, w]) => (
                <div key={k} style={{ minWidth: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 3, color: UB.ink3, fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
                    <span>{k}</span><span>{w}</span>
                  </div>
                  <div style={{ height: 4, background: UB.paperDeep, position: 'relative' }}>
                    <div style={{ position: 'absolute', inset: 0, width: `${v * 100}%`, background: UB.ink }} />
                  </div>
                </div>
              ))}
            </div>
          </Card>

          {/* Wallet */}
          <Card title="Wallet" code="0x7a91…3fc2">
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
              <span style={{ fontFamily: UB.mono, fontSize: 32, fontWeight: 500, letterSpacing: '-0.02em' }}>12,840</span>
              <span style={{ fontFamily: UB.mono, fontSize: 13, color: UB.ink3 }}>UBR</span>
            </div>
            <div style={{ fontSize: 11, color: UB.ink3, marginBottom: 14 }}>≈ $4,212.16 · staked 4,000 · in escrow 280</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginBottom: 14 }}>
              <Btn small>Send</Btn><Btn small>Receive</Btn><Btn small>Stake</Btn>
            </div>
            <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.18em', color: UB.ink3, marginBottom: 6 }}>RECENT</div>
            {[
              ['+ 250.00', 'Review reward · J.NEURO #4811', '2m'],
              ['+ 1,200', 'Grant milestone · UCSF/NSF-1198', '4h'],
              ['– 18.40', 'Storage tier upgrade', '1d'],
              ['+ 84.20', 'Citation royalty · 7 papers', '2d'],
            ].map((r, i) => (
              <Row key={i} cells={[
                { v: r[0], style: { color: r[0].startsWith('+') ? UB.ok : UB.bad, fontWeight: 500 }, w: '70px' },
                { v: r[1] },
                { v: r[2], style: { color: UB.ink4, textAlign: 'right' }, w: '36px' },
              ]} />
            ))}
          </Card>

          {/* Inbox / actions */}
          <Card title="Action queue" code="3 PENDING">
            {[
              { icon: Icon.doc, t: 'Review request', s: 'Glial-mediated synaptic pruning', meta: 'J.NeuroSci · bounty 320 UBR', tone: 'accent' },
              { icon: Icon.flask, t: 'Milestone sign-off', s: 'Cortical organoid M3 — UCSF DAO', meta: 'releases 8,400 UBR', tone: 'ok' },
              { icon: Icon.branch, t: 'Notebook fork', s: 'A. Mwangi forked your protocol #P-219', meta: '12h ago', tone: 'info' },
              { icon: Icon.cube, t: 'IP-token vote', s: 'NeuroPlast IP-NFT royalty split', meta: 'closes in 2d 4h', tone: 'warn' },
            ].map((a, i) => (
              <div key={i} style={{
                padding: '10px 0',
                borderBottom: i < 3 ? `1px solid ${UB.rule3}` : 'none',
                display: 'flex', gap: 10, alignItems: 'flex-start',
              }}>
                <div style={{
                  width: 22, height: 22, flexShrink: 0,
                  border: `1px solid ${UB.rule}`, display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>{a.icon}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
                    <span style={{ fontWeight: 600, fontSize: 12 }}>{a.t}</span>
                    <Tag tone={a.tone}>{a.tone === 'accent' ? 'NEW' : a.tone === 'warn' ? 'CLOSING' : 'OPEN'}</Tag>
                  </div>
                  <div style={{ fontSize: 12, color: UB.ink2, marginTop: 1 }}>{a.s}</div>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink4, marginTop: 2 }}>{a.meta}</div>
                </div>
              </div>
            ))}
          </Card>

          {/* Active research */}
          <Card title="Active research" code="6 NOTEBOOKS" action={<Btn small ghost>Open Labbook →</Btn>} style={{ gridColumn: 'span 2' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {[
                { id: 'NB-219', name: 'Glia–neuron synaptic pruning in early cortex', stage: 'Preprint draft', prog: 0.78, contrib: 7, funds: '14,200', tone: 'ok' },
                { id: 'NB-204', name: 'Reproducing Lin et al. — astrocyte gating', stage: 'Reproduction', prog: 0.42, contrib: 3, funds: '3,600', tone: 'info' },
                { id: 'NB-231', name: 'In-silico model of dendritic plasticity', stage: 'Hypothesis', prog: 0.18, contrib: 12, funds: '0', tone: 'warn' },
                { id: 'NB-187', name: 'Open dataset · murine cortex 2P imaging', stage: 'Data release', prog: 0.95, contrib: 21, funds: '600', tone: 'accent' },
              ].map(n => (
                <div key={n.id} style={{ border: `1px solid ${UB.rule2}`, padding: 12 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, letterSpacing: '0.1em' }}>{n.id}</span>
                    <Tag tone={n.tone}>{n.stage.toUpperCase()}</Tag>
                  </div>
                  <div style={{ fontSize: 12, fontWeight: 500, marginBottom: 8, lineHeight: 1.3 }}>{n.name}</div>
                  <div style={{ height: 3, background: UB.paperDeep, position: 'relative', marginBottom: 8 }}>
                    <div style={{ position: 'absolute', inset: 0, width: `${n.prog * 100}%`, background: UB.ink }} />
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>
                    <span>{n.contrib} CONTRIB.</span>
                    <span>{n.funds} UBR</span>
                  </div>
                </div>
              ))}
            </div>
          </Card>

          {/* Network ticker */}
          <Card title="Ecosystem" code="UB-CHAIN">
            <div style={{ marginBottom: 12 }}>
              <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.18em', color: UB.ink3, marginBottom: 4 }}>BLOCK</div>
              <div style={{ fontFamily: UB.mono, fontSize: 18, fontWeight: 500 }}>8,419,206</div>
              <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>finality 980ms · 99.97% up</div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 12 }}>
              <Stat label="Researchers" value="48,210" sub="+312 wk" />
              <Stat label="Live notebooks" value="6,029" sub="+84 wk" />
              <Stat label="GPU nodes" value="1,847" sub="92.3% busy" />
              <Stat label="Storage" value="2.41 PB" sub="+18 TB wk" />
            </div>
            <div style={{ borderTop: `1px solid ${UB.rule2}`, paddingTop: 10 }}>
              <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.18em', color: UB.ink3, marginBottom: 6 }}>UBR / USD</div>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                <span style={{ fontFamily: UB.mono, fontSize: 16, fontWeight: 500 }}>$0.328</span>
                <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ok }}>+4.21%</span>
              </div>
              <Sparkline values={[0.30, 0.31, 0.30, 0.305, 0.32, 0.315, 0.325, 0.33, 0.328]} w={210} h={28} color={UB.ink3} />
            </div>
          </Card>
        </div>
      </Layout>
    </Dapp>
  );
}

window.UBPDapp = UBPDapp;