// Open Labbook Dapp — git-style research collaboration.
// Layout: file tree / commit history + paper viewer / metadata sidebar.

function LabbookDapp() {
  const sidebar = (
    <>
      <div style={{ padding: '0 16px 12px', borderBottom: `1px solid ${UB.rule2}`, marginBottom: 14 }}>
        <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.18em', color: UB.ink3, marginBottom: 6 }}>NOTEBOOK</div>
        <div style={{ fontWeight: 600, fontSize: 13, marginBottom: 4 }}>NB-219 / Glia–Neuron Pruning</div>
        <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>main · 142 commits</div>
        <div style={{ display: 'flex', gap: 4, marginTop: 8 }}>
          <Tag tone="ok">PREPRINT</Tag>
          <Tag>OPEN</Tag>
        </div>
      </div>
      <NavGroup label="Stages">
        <NavItem icon={Icon.flask} label="Hypothesis" />
        <NavItem icon={Icon.book} label="Protocols" badge="8" />
        <NavItem icon={Icon.cpu} label="Experiments" badge="14" active />
        <NavItem icon={Icon.storage} label="Data & Results" />
        <NavItem icon={Icon.doc} label="Draft paper" />
        <NavItem icon={Icon.branch} label="Issues" badge="3" />
      </NavGroup>
      <NavGroup label="Network">
        <NavItem icon={Icon.user} label="Contributors" badge="7" />
        <NavItem icon={Icon.cube} label="Forks" badge="4" />
        <NavItem icon={Icon.bank} label="Funding" />
      </NavGroup>
      <NavGroup label="Other notebooks">
        <NavItem label="NB-204 Reproduction · Lin" />
        <NavItem label="NB-231 Dendritic plasticity" />
        <NavItem label="NB-187 2P Imaging dataset" />
      </NavGroup>
    </>
  );

  return (
    <Dapp>
      <ChromeBar dapp="LABBOOK" code="OLD·v0.6" />
      <Layout rail={sidebar}>
        <PageHead
          eyebrow="Open Labbook · NB-219 · branch: main"
          title="Glia-mediated synaptic pruning in early cortex"
          sub="A reproducible, on-chain investigation. 7 contributors · funded 14,200 UBR · 142 commits · stage Preprint draft."
          actions={<>
            <Btn small icon={Icon.branch}>Fork</Btn>
            <Btn small>Watch · 28</Btn>
            <Btn small primary icon={Icon.plus}>New experiment</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'grid', gridTemplateColumns: '1fr 320px', gap: 16 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {/* Commit graph */}
            <Card title="Commit history" code="MAIN · LAST 24H" action={<Tag tone="accent">3 PENDING REVIEW</Tag>}>
              {[
                { h: '8f2a91c', who: 'malcolm.h', msg: 'fit: re-fit hierarchical model w/ updated covariates', t: '12m', tags: ['ANALYSIS'] },
                { h: '4b18e7d', who: 'a.mwangi', msg: 'data: add cohort 4 (n=18) raw 2P stacks', t: '1h', tags: ['DATA', 'IPFS'] },
                { h: '01c9a3f', who: 'r.tanaka', msg: 'protocol: revise tissue clearing step 4 → 30min', t: '3h', tags: ['PROTOCOL'] },
                { h: 'aa7f42e', who: 'malcolm.h', msg: 'fig: regenerate Figure 3 with new color map', t: '6h', tags: ['FIGURE'] },
                { h: 'c0e4d12', who: 'k.iyer', msg: 'review: respond to issue #14 — multiple comparisons', t: '1d', tags: ['REVIEW'] },
                { h: '7d3b890', who: 'a.mwangi', msg: 'merge: pull request #11 from astro-cohort-4', t: '1d', tags: ['MERGE'] },
              ].map((c, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '60px 1fr 90px 50px', gap: 12, alignItems: 'center', padding: '8px 0', borderBottom: i < 5 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{c.h}</span>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 12, color: UB.ink, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.msg}</div>
                    <div style={{ display: 'flex', gap: 4, marginTop: 3 }}>
                      <span style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3 }}>{c.who}</span>
                      {c.tags.map(t => <Tag key={t}>{t}</Tag>)}
                    </div>
                  </div>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink4 }}>{c.t}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.accent, textAlign: 'right' }}>+0.{Math.floor(Math.random()*9)}</span>
                </div>
              ))}
            </Card>

            <Card title="Open experiments / bounties" code="14 OPEN" action={<Btn small icon={Icon.plus}>Add bounty</Btn>}>
              {[
                { id: 'EXP-22', t: 'Replicate astrocyte ablation in P14 mice', who: 'OPEN — 320 UBR', prog: 0.6, st: 'Running · cohort 3/5', tone: 'info' },
                { id: 'EXP-21', t: 'Wet-lab: GFAP staining of fixed slices', who: 'a.mwangi · 240 UBR', prog: 0.9, st: 'Awaiting review', tone: 'warn' },
                { id: 'EXP-20', t: 'Re-run analysis pipeline on cohort 4', who: 'r.tanaka · 80 UBR', prog: 1.0, st: 'Complete · merged', tone: 'ok' },
                { id: 'EXP-19', t: 'Translation: Mandarin abstract', who: 'OPEN — 60 UBR', prog: 0, st: 'Bounty open', tone: 'accent' },
              ].map(e => (
                <div key={e.id} style={{ padding: '10px 0', borderBottom: `1px solid ${UB.rule3}`, display: 'grid', gridTemplateColumns: '60px 1fr 130px', gap: 12, alignItems: 'center' }}>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{e.id}</span>
                  <div>
                    <div style={{ fontSize: 12, fontWeight: 500 }}>{e.t}</div>
                    <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginTop: 2 }}>{e.who}</div>
                    <div style={{ height: 2, background: UB.paperDeep, marginTop: 6, position: 'relative' }}>
                      <div style={{ position: 'absolute', inset: 0, width: `${e.prog * 100}%`, background: UB.ink }} />
                    </div>
                  </div>
                  <Tag tone={e.tone}>{e.st}</Tag>
                </div>
              ))}
            </Card>
          </div>

          {/* Right rail */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <Card title="Contributors" code="7 · CRediT">
              {[
                ['malcolm.h', 'Conceptualization · Writing', 38],
                ['a.mwangi', 'Investigation · Data curation', 24],
                ['r.tanaka', 'Methodology · Protocols', 18],
                ['k.iyer', 'Formal analysis · Software', 12],
                ['j.osei', 'Validation · Visualization', 6],
                ['l.park (anon)', 'Peer review', 2],
              ].map((c, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0', borderBottom: i < 5 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <div style={{ width: 22, height: 22, background: UB.ink, color: UB.paper, fontFamily: UB.mono, fontSize: 9, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{c[0][0].toUpperCase()}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: UB.mono, fontSize: 11 }}>{c[0]}</div>
                    <div style={{ fontSize: 10, color: UB.ink3 }}>{c[1]}</div>
                  </div>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.accent }}>{c[2]}%</span>
                </div>
              ))}
            </Card>

            <Card title="Funding" code="14,200 / 18,000 UBR">
              <div style={{ height: 4, background: UB.paperDeep, position: 'relative', marginBottom: 12 }}>
                <div style={{ position: 'absolute', inset: 0, width: '78%', background: UB.accent }} />
              </div>
              {[
                ['NIH BRAIN Init.', 9000, 'ok'],
                ['UCSF Internal Grant', 4000, 'ok'],
                ['VitaDAO co-fund', 1200, 'ok'],
                ['Public bounty pool', 3800, 'warn'],
              ].map((f, i) => (
                <Row key={i} cells={[
                  { v: f[0] },
                  { v: <Tag tone={f[2]}>{f[2] === 'ok' ? 'COMMITTED' : 'PENDING'}</Tag>, w: '110px' },
                  { v: f[1].toLocaleString(), style: { textAlign: 'right' }, w: '60px' },
                ]} />
              ))}
            </Card>

            <Card title="Reproducibility" code="BOUNTY POOL">
              <div style={{ fontFamily: UB.serif, fontSize: 32, lineHeight: 1, marginBottom: 4 }}>1,420 <span style={{ fontFamily: UB.mono, fontSize: 12, color: UB.ink3 }}>UBR</span></div>
              <div style={{ fontSize: 11, color: UB.ink3, marginBottom: 10 }}>Auto-funded from publication & access fees. Claimable by any verified researcher who supports or refutes the result.</div>
              <Btn small style={{ width: '100%' }} icon={Icon.flask}>Claim a reproduction</Btn>
            </Card>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

window.LabbookDapp = LabbookDapp;