// TRID — Trust + Reputation + Identity profile.
// Editorial-style profile page with verified credentials, contribution log,
// SBT/POAP collection, and impact composition.

function TRIDDapp() {
  const sidebar = (
    <>
      <NavGroup label="Profile">
        <NavItem icon={Icon.user} label="Public profile" active />
        <NavItem icon={Icon.shield} label="Identity & DIDs" />
        <NavItem icon={Icon.cube} label="SBTs / POAPs" badge="42" />
        <NavItem icon={Icon.doc} label="Contributions" />
      </NavGroup>
      <NavGroup label="Manage">
        <NavItem icon={Icon.plus} label="Add credential" />
        <NavItem icon={Icon.check} label="Pending verifications" badge="2" />
        <NavItem icon={Icon.bell} label="Endorsements" />
      </NavGroup>
      <NavGroup label="Privacy">
        <NavItem icon={Icon.shield} label="ZK proofs" />
        <NavItem icon={Icon.branch} label="Linked wallets" />
      </NavGroup>
    </>
  );

  const pillars = [
    { name: 'Knowledge creation', w: 22, score: 0.83, items: 'Papers · Patents · Novelty index' },
    { name: 'Peer & societal impact', w: 18, score: 0.72, items: 'Citations · Altmetrics · Coverage' },
    { name: 'Peer review', w: 12, score: 0.78, items: 'Reviews · Editorial · Reproductions' },
    { name: 'Leadership & collaboration', w: 18, score: 0.69, items: 'Lab contribs · Trainees · Events' },
    { name: 'Recognition & funding', w: 18, score: 0.81, items: 'Awards · Grants · Bounties' },
    { name: 'Adaptability & ethics', w: 12, score: 0.74, items: 'Degrees · Skills · Penalties' },
  ];

  return (
    <Dapp>
      <ChromeBar dapp="TRID" code="REPUTATION·v3.0" />
      <Layout rail={sidebar}>
        <PageHead
          eyebrow="Trust · Reputation · Identity"
          title="Dr. Malcolm Harriot"
          sub="Computational neuroscience · UCSF Weill Institute · h-index 24 · ORCID 0000-0002-1825-0097"
          actions={<>
            <Btn small icon={Icon.shield}>Generate ZK proof</Btn>
            <Btn small primary>Share profile</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 16 }}>
          {/* Identity column */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Corners>
              <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.2em', color: UB.ink3, marginBottom: 8 }}>UNBLOCK BLOCKCHAIN IDENTITY</div>
              <div style={{ display: 'flex', gap: 14 }}>
                <div style={{ width: 80, height: 80, background: UB.ink, color: UB.paper, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: UB.serif, fontSize: 48, flexShrink: 0 }}>M</div>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, letterSpacing: '0.08em', marginBottom: 2 }}>UBID</div>
                  <div style={{ fontFamily: UB.mono, fontSize: 12, wordBreak: 'break-all', marginBottom: 8 }}>did:ub:0x7a91f2c3…b8f2a3fc2</div>
                  <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
                    <Tag tone="ok">VERIFIED</Tag>
                    <Tag>ORCID LINKED</Tag>
                    <Tag>UCSF AFFIL.</Tag>
                  </div>
                </div>
              </div>
              <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid ${UB.rule2}`, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                <Stat label="True Impact" value="85.8" sub="↑1.4 this month" />
                <Stat label="h-index" value="24" sub="g 38 · i10 41" />
                <Stat label="Citations" value="3,841" sub="all-time" />
                <Stat label="Active fields" value="3" sub="neuro · ml · biophys" />
              </div>

              {/* Inactivity penalty timer */}
              <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid ${UB.rule2}` }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
                  <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.18em', color: UB.ink3 }}>INACTIVITY PENALTY</div>
                  <div style={{ fontFamily: UB.mono, fontSize: 9, letterSpacing: '0.1em', color: UB.warn || '#b8761d' }}>−2.5% TIS / YR AFTER</div>
                </div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 8 }}>
                  <div style={{ fontFamily: UB.serif, fontSize: 36, lineHeight: 0.9, letterSpacing: '-0.02em' }}>184</div>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, letterSpacing: '0.12em' }}>DAYS · 06 MO · 03 DA</div>
                </div>
                {/* Segmented timer bar — last activity → grace → penalty */}
                <div style={{ position: 'relative', height: 6, background: UB.paperDeep, marginBottom: 6 }}>
                  <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: '64%', background: UB.ink }} />
                  <div style={{ position: 'absolute', left: '64%', top: -2, bottom: -2, width: 1, background: UB.accent }} />
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.08em' }}>
                  <span>LAST CONTRIB · 2025-09-12</span>
                  <span>PENALTY · 2026-11-05</span>
                </div>
                <div style={{ marginTop: 10, padding: '8px 10px', background: UB.paperDeep, fontFamily: UB.mono, fontSize: 10, color: UB.ink2, lineHeight: 1.5 }}>
                  Submit a paper, review, or attestation before the deadline to reset the inactivity counter and preserve your TIS multiplier.
                </div>
              </div>
            </Corners>

            <Card title="Verified credentials" code="9">
              {[
                ['Ph.D. Neuroscience', 'Stanford · 2017', 'ok'],
                ['M.S. Computer Science', 'Stanford · 2014', 'ok'],
                ['B.S. Bioengineering', 'Rice · 2012', 'ok'],
                ['Sloan Research Fellow', 'Sloan Foundation · 2022', 'ok'],
                ['NIH BRAIN Init. PI', 'NIH · 2024', 'ok'],
                ['Patent US-11,028,492', 'Granted · 2023', 'ok'],
              ].map((c, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '7px 0', borderBottom: i < 5 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 12, fontWeight: 500 }}>{c[0]}</div>
                    <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{c[1]}</div>
                  </div>
                  <Tag tone="ok">SBT</Tag>
                </div>
              ))}
            </Card>

            <Card title="ZK access gates" code="ACTIVE">
              {[
                ['Affiliation ≥ R1 university', 'used 14×'],
                ['Reviewed ≥ 5 neuro papers', 'used 6×'],
                ['IRB-certified human subjects', 'used 3×'],
              ].map((g, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '6px 0', borderBottom: i < 2 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ width: 8, height: 8, background: UB.accent }} />
                    <span style={{ fontSize: 12 }}>{g[0]}</span>
                  </div>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{g[1]}</span>
                </div>
              ))}
            </Card>
          </div>

          {/* Right column */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Card title="Impact composition" code="TIS·v3 BREAKDOWN">
              <div style={{ display: 'flex', alignItems: 'flex-end', gap: 16, marginBottom: 18 }}>
                <div>
                  <div style={{ fontFamily: UB.serif, fontSize: 76, lineHeight: 0.9, letterSpacing: '-0.03em' }}>85.8</div>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, letterSpacing: '0.12em' }}>OUT OF 100 · 96TH PCTILE</div>
                </div>
                <div style={{ flex: 1, paddingBottom: 8 }}>
                  <MiniBars values={[62, 65, 64, 68, 72, 74, 76, 78, 80, 82, 84, 85.8]} h={48} />
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 9, color: UB.ink3, marginTop: 4, letterSpacing: '0.1em' }}>
                    <span>2014</span><span>2026</span>
                  </div>
                </div>
              </div>
              <div style={{ borderTop: `1px solid ${UB.rule2}`, paddingTop: 12 }}>
                {pillars.map((p) => (
                  <div key={p.name} style={{ display: 'grid', gridTemplateColumns: '1.2fr 50px 1fr 60px', gap: 14, alignItems: 'center', padding: '8px 0', borderBottom: `1px solid ${UB.rule3}` }}>
                    <div>
                      <div style={{ fontSize: 12, fontWeight: 500 }}>{p.name}</div>
                      <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3 }}>{p.items}</div>
                    </div>
                    <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>w {p.w}%</div>
                    <div style={{ height: 4, background: UB.paperDeep, position: 'relative' }}>
                      <div style={{ position: 'absolute', inset: 0, width: `${p.score * 100}%`, background: UB.ink }} />
                    </div>
                    <div style={{ fontFamily: UB.mono, fontSize: 12, textAlign: 'right' }}>{p.score.toFixed(2)}</div>
                  </div>
                ))}
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 10, padding: '8px 0' }}>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, letterSpacing: '0.1em' }}>PENALTY · 0 INACTIVE YEARS</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 12 }}>×1.000</span>
                </div>
              </div>
            </Card>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <Card title="Recent contributions" code="ON-CHAIN">
                {[
                  ['+0.4', 'Paper accepted · J.Neuro'],
                  ['+0.2', 'Review (anon) · Cell'],
                  ['+0.1', 'Notebook fork merged'],
                  ['+0.3', 'Grant milestone hit'],
                  ['+0.1', 'Trainee defended'],
                  ['+0.2', 'Reproduction confirmed'],
                ].map((c, i) => (
                  <Row key={i} cells={[
                    { v: c[0], style: { color: UB.ok }, w: '40px' },
                    { v: c[1] },
                  ]} />
                ))}
              </Card>
              <Card title="Soulbound collection" code="42 SBTs">
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 6 }}>
                  {Array.from({ length: 15 }).map((_, i) => (
                    <div key={i} style={{
                      aspectRatio: '1', border: `1px solid ${UB.rule}`,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: UB.mono, fontSize: 8, color: UB.ink2,
                      background: i % 4 === 0 ? UB.ink : (i % 4 === 1 ? UB.accent : '#fff'),
                      color: i % 4 === 0 ? UB.paper : (i % 4 === 1 ? UB.ink : UB.ink2),
                    }}>
                      {['PHD', 'NIH', 'CELL', 'NSF', 'PI', 'MIT', 'NEU', 'IRB', 'ML', '2024', 'PAT', 'REV', 'CIT', 'TRA', 'OPN'][i]}
                    </div>
                  ))}
                </div>
              </Card>
            </div>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

window.TRIDDapp = TRIDDapp;