// Institution / Grant DAO Dapp — universities and funders running on-chain grant programs.

function InstitutionDapp() {
  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: 4 }}>INSTITUTION</div>
        <div style={{ fontWeight: 600, fontSize: 13 }}>UCSF Weill Institute</div>
        <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>GRID·grid.266102.1</div>
      </div>
      <NavGroup label="Programs">
        <NavItem icon={Icon.bank} label="Grant pools" badge="6" active />
        <NavItem icon={Icon.flask} label="Funded research" badge="42" />
        <NavItem icon={Icon.check} label="Milestones" badge="9" />
        <NavItem icon={Icon.cube} label="IP-NFTs" badge="11" />
      </NavGroup>
      <NavGroup label="Governance">
        <NavItem icon={Icon.user} label="Council" />
        <NavItem icon={Icon.doc} label="Proposals" badge="4" />
        <NavItem icon={Icon.shield} label="Treasury" />
      </NavGroup>
      <NavGroup label="Infra">
        <NavItem icon={Icon.cpu} label="Compute nodes" />
        <NavItem icon={Icon.storage} label="Storage nodes" />
      </NavGroup>
    </>
  );

  return (
    <Dapp>
      <ChromeBar dapp="INSTITUTION" code="UCSF·DAO" />
      <Layout rail={sidebar}>
        <PageHead
          eyebrow="Grant DAO · UCSF Weill Institute"
          title="Active grant programs"
          sub="Reputation-weighted governance over a 4.2M UBR treasury. Disbursements release on verifiable milestone completion."
          actions={<>
            <Btn small icon={Icon.plus}>New pool</Btn>
            <Btn small primary>Sign milestone</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Treasury overview */}
          <Card pad={false}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', borderBottom: `1px solid ${UB.rule2}` }}>
              {[
                ['Treasury', '4.21M', 'UBR'],
                ['Committed', '2.84M', '67%'],
                ['Open pools', '6', '38 grantees'],
                ['Avg cycle', '14d', 'milestone → release'],
                ['Repro return', '94%', 'reproducible papers'],
              ].map((s, i) => (
                <div key={i} style={{ padding: 18, borderRight: i < 4 ? `1px solid ${UB.rule2}` : 'none' }}>
                  <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.18em', color: UB.ink3, marginBottom: 6 }}>{s[0].toUpperCase()}</div>
                  <div style={{ fontFamily: UB.mono, fontSize: 22, fontWeight: 500 }}>{s[1]}</div>
                  <div style={{ fontSize: 11, color: UB.ink3 }}>{s[2]}</div>
                </div>
              ))}
            </div>
          </Card>

          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
            <Card title="Grant pools" code="6 OPEN" pad={false}>
              {[
                { id: 'P-018', t: 'Computational neuroscience · 2026', size: '1.2M', filled: 0.62, slots: '12 / 18', cycle: 'Q2 cycle · open 4d' },
                { id: 'P-017', t: 'Open-data infrastructure · year-round', size: '480K', filled: 0.85, slots: '6 / 8', cycle: 'rolling' },
                { id: 'P-016', t: 'Negative results & reproductions', size: '320K', filled: 0.40, slots: '8 / 20', cycle: 'rolling' },
                { id: 'P-015', t: 'Early-career fellowships · cohort III', size: '900K', filled: 0.95, slots: '14 / 14', cycle: 'closed · in delivery' },
                { id: 'P-014', t: 'Translational neuro × industry', size: '1.4M', filled: 0.71, slots: '5 / 7', cycle: 'matched 1:1' },
              ].map((p, i) => (
                <div key={p.id} style={{ display: 'grid', gridTemplateColumns: '60px 1fr 110px 90px 90px', gap: 12, alignItems: 'center', padding: '14px 16px', borderBottom: i < 4 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{p.id}</span>
                  <div>
                    <div style={{ fontSize: 12, fontWeight: 500 }}>{p.t}</div>
                    <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginTop: 2 }}>{p.cycle}</div>
                  </div>
                  <div>
                    <div style={{ fontFamily: UB.mono, fontSize: 12 }}>{p.size}</div>
                    <div style={{ height: 2, background: UB.paperDeep, marginTop: 4, position: 'relative' }}>
                      <div style={{ position: 'absolute', inset: 0, width: `${p.filled * 100}%`, background: UB.ink }} />
                    </div>
                  </div>
                  <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink3 }}>{p.slots}</span>
                  <Btn small ghost>Manage →</Btn>
                </div>
              ))}
            </Card>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <Card title="Milestones · ready to release" code="4">
                {[
                  ['NB-219', 'M3 · Cohort 4 imaging complete', '8,400'],
                  ['NB-204', 'M2 · Independent reproduction', '3,000'],
                  ['NB-114', 'M5 · Final manuscript dPID', '12,000'],
                  ['NB-066', 'M2 · Open dataset release', '2,400'],
                ].map((m, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '7px 0', borderBottom: i < 3 ? `1px solid ${UB.rule3}` : 'none' }}>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{m[0]}</div>
                      <div style={{ fontSize: 12 }}>{m[1]}</div>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.accent }}>+{m[2]}</span>
                      <Btn small primary>Sign</Btn>
                    </div>
                  </div>
                ))}
              </Card>

              <Card title="Council vote · open" code="P-024">
                <div style={{ fontSize: 12, fontWeight: 500, marginBottom: 6 }}>Allocate 600K UBR to a new "Open Brain Atlas" pool?</div>
                <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginBottom: 10 }}>quorum 38 / 40 · closes in 1d 14h</div>
                <div style={{ display: 'flex', gap: 4, height: 18, marginBottom: 10 }}>
                  <div style={{ width: '72%', background: UB.ink, color: UB.paper, fontFamily: UB.mono, fontSize: 10, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>FOR 72%</div>
                  <div style={{ width: '18%', background: UB.paperDeep, color: UB.ink2, fontFamily: UB.mono, fontSize: 10, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>18%</div>
                  <div style={{ width: '10%', background: UB.paperDeep, color: UB.ink3, fontFamily: UB.mono, fontSize: 10, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>10%</div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
                  <Btn small primary>Vote FOR</Btn>
                  <Btn small>Against</Btn>
                  <Btn small>Abstain</Btn>
                </div>
              </Card>
            </div>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

window.InstitutionDapp = InstitutionDapp;