// Admin · SBT issuance + permissions for Publishers and Institutions

function AdminRail({ active }) {
  return (
    <>
      <div style={{ padding: '0 16px 14px', borderBottom: `1px solid ${UB.rule2}`, marginBottom: 14 }}>
        <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginBottom: 6 }}>ADMIN ROLE</div>
        <div style={{ fontFamily: UB.serif, fontSize: 18, lineHeight: 1.1, marginBottom: 4 }}>Cell Press · Editorial</div>
        <div style={{ display: 'flex', gap: 4, marginTop: 6 }}>
          <Tag tone="ink">PUBLISHER</Tag>
          <Tag tone="accent">VERIFIED</Tag>
        </div>
      </div>
      <NavGroup label="SBT issuance">
        <NavItem icon={Icon.shield} label="Issue · roles"        badge="3"    active={active === 'issue'} />
        <NavItem icon={Icon.user}   label="Holders · directory"  badge="248"  active={active === 'holders'} />
        <NavItem icon={Icon.doc}    label="Templates"             badge="14"   />
        <NavItem icon={Icon.bell}   label="Pending · approvals"   badge="6"    />
      </NavGroup>
      <NavGroup label="Permissions">
        <NavItem icon={Icon.cog}    label="Roles · matrix"        active={active === 'perms'} />
        <NavItem icon={Icon.shield} label="Policies"               badge="22" />
        <NavItem icon={Icon.doc}    label="Audit log"              badge="4.2K" />
      </NavGroup>
      <NavGroup label="Editorial">
        <NavItem icon={Icon.flask}  label="Submissions"            badge="42" />
        <NavItem icon={Icon.user}   label="Reviewer pool"          badge="184" />
        <NavItem icon={Icon.bank}   label="Bounties · open"        badge="14" />
      </NavGroup>
    </>
  );
}

const SBT_TEMPLATES = [
  { tag: 'EDITOR',           name: 'Editor · Cell Press',          dur: '24m',     scope: 'Editorial · all titles', issued: 14, pending: 1, col: UB.ink, perms: ['accept submissions', 'assign reviewers', 'release bounties', 'reject manuscripts'] },
  { tag: 'REVIEWER',         name: 'Trusted reviewer',             dur: '18m',     scope: 'Domain · neuroscience',  issued: 184, pending: 4, col: UB.accent, perms: ['claim review tasks', 'sign reviews', 'redeem bounties'] },
  { tag: 'POSTDOC · MIT',    name: 'MIT · postdoc credential',     dur: '36m',     scope: 'Affiliation',             issued: 42, pending: 0, col: 'oklch(0.66 0.13 240)', perms: ['publish under affiliation', 'access compute pool', 'apply for grants'] },
  { tag: 'PI · MIT',         name: 'MIT · principal investigator', dur: 'no exp.', scope: 'Affiliation',             issued: 28, pending: 1, col: 'oklch(0.66 0.13 240)', perms: ['issue postdoc SBTs', 'spend lab treasury', 'sign protocols'] },
  { tag: 'GRANTEE · NIH',    name: 'NIH · grantee · R01',          dur: '60m',     scope: 'Funding',                 issued: 8,  pending: 0, col: UB.ok, perms: ['claim NIH disbursements', 'file progress reports'] },
  { tag: 'AUDITOR',          name: 'Reproducibility auditor',      dur: '12m',     scope: 'TRID network',            issued: 22, pending: 0, col: UB.warn, perms: ['attest replications', 'flag papers'] },
];

function AdminSBTIssueDapp() {
  return (
    <Dapp>
      <ChromeBar dapp="ADMIN" code="SBT ISSUANCE · CELL PRESS" />
      <Layout rail={<AdminRail active="issue" />}>
        <PageHead
          eyebrow={<span>Admin · SBT issuance</span>}
          title="Issue soulbound credentials"
          sub="Issue role-based SBTs to researchers, reviewers, and editors. Soulbound — non-transferable, but revocable by the issuing org. Every grant produces an immutable on-chain record."
          actions={<>
            <Btn small icon={Icon.doc}>Audit log</Btn>
            <Btn small icon={Icon.cog}>Templates · 14</Btn>
            <Btn small primary icon={Icon.plus}>New SBT template</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
          {/* Left — issue form + recent grants */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Card title="Issue · single grant" code="STEP 1 OF 3" pad={false}>
              <div style={{ padding: 18 }}>
                <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginBottom: 8 }}>RECIPIENT · DID OR TRID</div>
                <div style={{ background: '#fff', border: `1px solid ${UB.ink}`, padding: '10px 12px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
                  <span style={{ fontFamily: UB.mono, fontSize: 13, color: UB.ink }}>chen.lin.eth</span>
                  <Tag tone="accent">VERIFIED · κ 0.84</Tag>
                </div>
                <div style={{ display: 'flex', gap: 6, fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginBottom: 16 }}>
                  <span>↳ Resolved to MIT postdoc · 22 publications · ORCID linked</span>
                </div>

                <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginBottom: 8 }}>TEMPLATE</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 14 }}>
                  {SBT_TEMPLATES.slice(0, 4).map((s, i) => (
                    <div key={i} style={{ padding: '10px 12px', border: `1px solid ${i === 1 ? UB.ink : UB.rule2}`, background: i === 1 ? UB.accentDim : '#fff', cursor: 'pointer' }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <span style={{ fontFamily: UB.mono, fontSize: 10, fontWeight: 700, color: s.col }}>{s.tag}</span>
                        {i === 1 && <span style={{ width: 8, height: 8, background: UB.ink }} />}
                      </div>
                      <div style={{ fontSize: 11, marginTop: 4 }}>{s.name}</div>
                    </div>
                  ))}
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 14 }}>
                  <div>
                    <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginBottom: 6 }}>SCOPE</div>
                    <div style={{ background: '#fff', border: `1px solid ${UB.rule2}`, padding: '8px 10px', fontFamily: UB.mono, fontSize: 11 }}>
                      Domain · neuroscience · glia ▾
                    </div>
                  </div>
                  <div>
                    <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginBottom: 6 }}>EXPIRES</div>
                    <div style={{ background: '#fff', border: `1px solid ${UB.rule2}`, padding: '8px 10px', fontFamily: UB.mono, fontSize: 11 }}>
                      18 months · 12 May 2027
                    </div>
                  </div>
                </div>

                <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginBottom: 6 }}>CAPABILITIES GRANTED</div>
                <div style={{ background: UB.paperDeep, padding: '10px 12px', marginBottom: 14 }}>
                  {SBT_TEMPLATES[1].perms.map((p, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '3px 0', fontSize: 11 }}>
                      <span style={{ color: UB.ok }}>{Icon.check}</span>
                      <span>{p}</span>
                    </div>
                  ))}
                </div>

                <div style={{ display: 'flex', gap: 8 }}>
                  <Btn ghost style={{ flex: 1, justifyContent: 'center' }}>Save as draft</Btn>
                  <Btn style={{ flex: 1, justifyContent: 'center' }}>Bulk · CSV</Btn>
                  <Btn primary style={{ flex: 1, justifyContent: 'center' }} icon={Icon.shield}>Sign &amp; issue</Btn>
                </div>
              </div>
            </Card>

            <Card title="Recently issued · 14" code="LAST 30 DAYS" pad={false}>
              <div style={{ display: 'grid', gridTemplateColumns: '110px 1fr 100px 90px 70px 70px', gap: 10, padding: '10px 16px', fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.14em', textTransform: 'uppercase', borderBottom: `1px solid ${UB.rule2}`, background: UB.paperDeep }}>
                <span>Type</span><span>Recipient</span><span>Scope</span><span>Issued</span><span>Status</span><span></span>
              </div>
              {[
                ['REVIEWER',     'chen.lin.eth',          'neuro · glia',     '2d',  'ACTIVE',  'ok'],
                ['POSTDOC · MIT','park.s.eth',            'wet-lab',          '4d',  'ACTIVE',  'ok'],
                ['EDITOR',       't.alvarez.eth',         'all titles',       '6d',  'ACTIVE',  'ok'],
                ['REVIEWER',     'm.tanaka.eth',          'neuro',            '8d',  'ACTIVE',  'ok'],
                ['REVIEWER',     'anon-payload-44…',      'neuro · glia',     '12d', 'REVOKED', 'bad'],
                ['POSTDOC · MIT','j.osei.eth',            'comp · neuro',     '14d', 'ACTIVE',  'ok'],
              ].map((r, i, arr) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '110px 1fr 100px 90px 70px 70px', gap: 10, padding: '11px 16px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none', alignItems: 'center', fontFamily: UB.mono, fontSize: 11 }}>
                  <Tag tone="ink">{r[0]}</Tag>
                  <span>{r[1]}</span>
                  <span style={{ color: UB.ink3 }}>{r[2]}</span>
                  <span style={{ color: UB.ink3 }}>{r[3]}</span>
                  <Tag tone={r[5]}>{r[4]}</Tag>
                  <Btn small ghost>view</Btn>
                </div>
              ))}
            </Card>
          </div>

          {/* Right — templates and stats */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Card>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                <Stat label="Total issued" value="248" sub="all-time · across roles" />
                <Stat label="Active" value="232" sub="14 expired · 2 revoked" />
                <Stat label="Pending" value="6" sub="awaiting committee" />
                <Stat label="Templates" value="14" sub="6 used this month" />
              </div>
            </Card>

            <Card title="Templates · 6" code="ACTIVE" pad={false}>
              {SBT_TEMPLATES.map((s, i, arr) => (
                <div key={i} style={{ padding: '11px 16px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none', display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 4, height: 32, background: s.col }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                      <span style={{ fontFamily: UB.mono, fontSize: 10, fontWeight: 700, color: s.col }}>{s.tag}</span>
                      <span style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3 }}>{s.dur}</span>
                    </div>
                    <div style={{ fontSize: 12 }}>{s.name}</div>
                    <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, marginTop: 2 }}>{s.scope} · {s.issued} issued · {s.pending} pending</div>
                  </div>
                  <Btn small ghost>edit</Btn>
                </div>
              ))}
            </Card>

            <Card title="Pending approvals · 6" code="COMMITTEE GATE" pad={false}>
              {[
                ['EDITOR',  'a.shah.eth',     '2 of 3 sigs', UB.warn],
                ['PI · MIT','l.alvarez.eth',  '1 of 3 sigs', UB.warn],
                ['REVIEWER','q.park.eth',     '3 of 3 sigs · ready', UB.ok],
                ['REVIEWER','y.tan.eth',      '2 of 3 sigs', UB.warn],
              ].map((p, i, arr) => (
                <div key={i} style={{ padding: '10px 16px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div>
                    <Tag tone="ink">{p[0]}</Tag>
                    <div style={{ fontFamily: UB.mono, fontSize: 11, marginTop: 4 }}>{p[1]}</div>
                    <div style={{ fontFamily: UB.mono, fontSize: 9, color: p[3], marginTop: 2 }}>{p[2]}</div>
                  </div>
                  <Btn small primary={p[2].includes('ready')}>{p[2].includes('ready') ? 'Sign' : 'Review'}</Btn>
                </div>
              ))}
            </Card>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

function AdminPermissionsDapp() {
  const roles = ['EDITOR', 'REVIEWER', 'AUTHOR', 'AUDITOR', 'PI'];
  const perms = [
    ['Accept submissions',          [1,0,0,0,0]],
    ['Assign reviewers',            [1,0,0,0,0]],
    ['Sign reviews',                [0,1,0,0,0]],
    ['Release bounties',            [1,0,0,0,0]],
    ['Reject manuscripts',          [1,0,0,0,0]],
    ['Submit revisions',            [0,0,1,0,0]],
    ['Submit a draft',              [0,0,1,0,1]],
    ['Mint patent token',           [0,0,1,0,1]],
    ['Attest replication',          [0,0,0,1,0]],
    ['Flag misconduct',             [1,1,0,1,1]],
    ['Issue postdoc SBT',           [0,0,0,0,1]],
    ['Open editorial appeal',       [0,0,1,0,1]],
  ];
  return (
    <Dapp>
      <ChromeBar dapp="ADMIN" code="ROLES · MATRIX" />
      <Layout rail={<AdminRail active="perms" />}>
        <PageHead
          eyebrow={<span>Admin · Permissions</span>}
          title="Roles &amp; permissions"
          sub="Capability matrix — each row is a verb, each column a role-SBT. Edits are policy proposals; they go through 2-of-3 multisig before deployment."
          actions={<>
            <Btn small icon={Icon.doc}>Export · JSON</Btn>
            <Btn small icon={Icon.shield}>Policies · 22</Btn>
            <Btn small primary icon={Icon.plus}>Propose policy change</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          <Card title="Capability matrix" code="14 VERBS · 5 ROLES" pad={false}>
            <div style={{ display: 'grid', gridTemplateColumns: `1.6fr repeat(${roles.length}, 1fr) 80px`, gap: 0, fontFamily: UB.mono, fontSize: 11 }}>
              <div style={{ padding: '12px 16px', fontSize: 9, letterSpacing: '0.16em', color: UB.ink3, background: UB.paperDeep, borderBottom: `1px solid ${UB.rule2}` }}>VERB</div>
              {roles.map(r => (
                <div key={r} style={{ padding: '12px 12px', fontSize: 9, letterSpacing: '0.16em', color: UB.ink3, background: UB.paperDeep, borderBottom: `1px solid ${UB.rule2}`, textAlign: 'center' }}>{r}</div>
              ))}
              <div style={{ padding: '12px 12px', fontSize: 9, letterSpacing: '0.16em', color: UB.ink3, background: UB.paperDeep, borderBottom: `1px solid ${UB.rule2}`, textAlign: 'center' }}>POLICY</div>
              {perms.map((row, i) => (
                <React.Fragment key={i}>
                  <div style={{ padding: '11px 16px', borderBottom: i < perms.length - 1 ? `1px solid ${UB.rule3}` : 'none', fontSize: 12, fontFamily: UB.sans }}>{row[0]}</div>
                  {row[1].map((v, j) => (
                    <div key={j} style={{ padding: '11px 12px', borderBottom: i < perms.length - 1 ? `1px solid ${UB.rule3}` : 'none', textAlign: 'center' }}>
                      {v ? <span style={{ display: 'inline-block', width: 16, height: 16, background: UB.accent, color: UB.ink, lineHeight: '16px', fontSize: 11 }}>{Icon.check}</span> : <span style={{ color: UB.ink4 }}>—</span>}
                    </div>
                  ))}
                  <div style={{ padding: '11px 12px', borderBottom: i < perms.length - 1 ? `1px solid ${UB.rule3}` : 'none', textAlign: 'center', fontFamily: UB.mono, fontSize: 9, color: UB.ink3 }}>P-{14 + i}</div>
                </React.Fragment>
              ))}
            </div>
          </Card>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}>
            <Card title="Open policy proposals · 3" code="MULTISIG" pad={false}>
              {[
                ['P-118', 'Allow REVIEWER to release bounties on under-review papers', '2/3'],
                ['P-117', 'Add new role · DATA-CURATOR',                                '1/3'],
                ['P-116', 'Increase reviewer pool fee from 3% → 4%',                    '3/3 · ready to deploy'],
              ].map((p, i, arr) => (
                <div key={i} style={{ padding: '11px 16px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, fontWeight: 700 }}>{p[0]}</span>
                    <Tag tone={p[2].includes('ready') ? 'ok' : 'warn'}>{p[2]}</Tag>
                  </div>
                  <div style={{ fontSize: 11, color: UB.ink2 }}>{p[1]}</div>
                </div>
              ))}
            </Card>
            <Card title="Audit log · last 24h" code="42 EVENTS" pad={false}>
              {[
                ['SBT.issue',     'REVIEWER → chen.lin.eth',  '14:08'],
                ['SBT.revoke',    'anon-44 (misconduct)',     '11:42'],
                ['POLICY.sign',   'P-117 · sig 1/3',          '08:14'],
                ['SBT.issue',     'POSTDOC → park.s.eth',     'yesterday'],
                ['POLICY.deploy', 'P-115',                    'yesterday'],
              ].map((r, i, arr) => (
                <div key={i} style={{ padding: '8px 16px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none', fontFamily: UB.mono, fontSize: 10, display: 'flex', justifyContent: 'space-between' }}>
                  <span style={{ color: UB.accent }}>{r[0]}</span>
                  <span style={{ color: UB.ink2, flex: 1, textAlign: 'left', paddingLeft: 10 }}>{r[1]}</span>
                  <span style={{ color: UB.ink3 }}>{r[2]}</span>
                </div>
              ))}
            </Card>
            <Card title="Coverage · who has what" code="248 HOLDERS">
              {[
                ['EDITOR',     14, 248, UB.ink],
                ['REVIEWER',   184, 248, UB.accent],
                ['POSTDOC · MIT', 42, 248, 'oklch(0.66 0.13 240)'],
                ['PI · MIT',   28, 248, 'oklch(0.66 0.13 240)'],
                ['AUDITOR',    22, 248, UB.warn],
              ].map((r, i) => (
                <div key={i} style={{ marginBottom: 10 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 3 }}>
                    <span style={{ fontFamily: UB.mono, fontSize: 10 }}>{r[0]}</span>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{r[1]} / {r[2]}</span>
                  </div>
                  <div style={{ height: 4, background: UB.paperDeep, position: 'relative' }}>
                    <div style={{ position: 'absolute', inset: 0, width: `${(r[1] / r[2]) * 100}%`, background: r[3] }} />
                  </div>
                </div>
              ))}
            </Card>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

window.AdminSBTIssueDapp = AdminSBTIssueDapp;
window.AdminPermissionsDapp = AdminPermissionsDapp;