// Bounties — open paper-bounties: anyone funds drafts, reviewers claim
// after review, only the editor releases on publish or cancel.

function BountyRail({ 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 }}>BOUNTIES · OVERVIEW</div>
        <div style={{ fontFamily: UB.mono, fontSize: 22, color: UB.ink, lineHeight: 1.05 }}>$418K</div>
        <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginTop: 4 }}>open · 184 papers</div>
      </div>
      <NavGroup label="Browse">
        <NavItem icon={Icon.flask}  label="Open · all"            badge="184" active={active === 'open'} />
        <NavItem icon={Icon.doc}    label="Drafts · accepting funds" badge="92" />
        <NavItem icon={Icon.shield} label="Under review · claimable" badge="56" />
        <NavItem icon={Icon.check}  label="Published · releasing" badge="28"  />
        <NavItem icon={Icon.cube}   label="Cancelled · refunding" badge="8"  />
      </NavGroup>
      <NavGroup label="Your activity">
        <NavItem icon={Icon.bank}   label="Funded · 14"        badge="$8.4K" />
        <NavItem icon={Icon.user}   label="Claimed · 6"        badge="$2.1K" />
        <NavItem icon={Icon.bell}   label="Editor releases · 2" badge="DUE" />
      </NavGroup>
      <NavGroup label="Tools">
        <NavItem icon={Icon.cog} label="Settings" />
      </NavGroup>
    </>
  );
}

function BountiesDapp() {
  return (
    <Dapp>
      <ChromeBar dapp="BOUNTIES" code="OPEN · 184 PAPERS" />
      <Layout rail={<BountyRail active="open" />}>
        <PageHead
          eyebrow={<span>Bounties · Open</span>}
          title="Paper bounties"
          sub="Anyone can fund a bounty on a draft to attract reviewers and accelerate review. Reviewers claim after a signed review. Only the assigned editor releases payment — on publish, or refunds it on cancel."
          actions={<>
            <Btn small icon={Icon.search}>Filter · 12</Btn>
            <Btn small icon={Icon.bell}>Following · 22</Btn>
            <Btn small primary icon={Icon.plus}>Fund a bounty</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* KPIs */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
            <Card><Stat label="Open bounties" value="184" sub="92 draft · 56 review · 36 published" /></Card>
            <Card><Stat label="Pool · combined" value="$418,210" sub="2,840 funders" /></Card>
            <Card><Stat label="Released · TTM" value="$1.84M" sub="3,420 reviewers paid" /></Card>
            <Card><Stat label="Median bounty" value="$840" sub="ranges $40 → $42K" /></Card>
            <Card><Stat label="Avg time-to-review" value="6.2d" sub="−42% vs. baseline" /></Card>
          </div>

          {/* Lifecycle banner */}
          <Card pad={false}>
            <div style={{ padding: 16 }}>
              <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginBottom: 10 }}>BOUNTY LIFECYCLE</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
                {[
                  { n: '1', t: 'DRAFT · funded',    sub: 'Anyone can add UBR / USDC. Pool grows until review opens.', col: UB.accent, who: 'Anyone' },
                  { n: '2', t: 'UNDER REVIEW · claimable', sub: 'Reviewers stake reputation, write & sign a review, attach claim.', col: 'oklch(0.66 0.13 240)', who: 'SBT REVIEWER' },
                  { n: '3', t: 'PUBLISHED · release', sub: 'Editor signs release. Pool splits across signed reviewers + author.', col: UB.ok, who: 'SBT EDITOR' },
                  { n: '4', t: 'CANCELLED · refund', sub: 'Editor or 2/3 funders. Pro-rata refund minus reviewer-paid portion.', col: UB.warn, who: 'EDITOR · 2/3 funders' },
                ].map((s, i, arr) => (
                  <div key={i} style={{ padding: '0 14px', borderRight: i < arr.length - 1 ? `1px dashed ${UB.rule2}` : 'none' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                      <div style={{ width: 22, height: 22, background: s.col, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: UB.mono, fontSize: 11, fontWeight: 700 }}>{s.n}</div>
                      <span style={{ fontFamily: UB.mono, fontSize: 10, fontWeight: 700, letterSpacing: '0.06em' }}>{s.t}</span>
                    </div>
                    <div style={{ fontSize: 11, color: UB.ink2, lineHeight: 1.45, marginBottom: 6 }}>{s.sub}</div>
                    <Tag>{s.who}</Tag>
                  </div>
                ))}
              </div>
            </div>
          </Card>

          {/* Filters */}
          <div style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
            <span style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginRight: 4 }}>STATE</span>
            {['All · 184', 'Draft · accepting · 92', 'Under review · 56', 'Released · 28', 'Cancelled · 8'].map((c, i) => (
              <span key={c} style={{ padding: '4px 10px', border: `1px solid ${i === 0 ? UB.ink : UB.rule2}`, background: i === 0 ? UB.ink : '#fff', color: i === 0 ? UB.paper : UB.ink2, fontFamily: UB.mono, fontSize: 10, letterSpacing: '0.04em', cursor: 'pointer' }}>{c}</span>
            ))}
            <span style={{ flex: 1 }} />
            <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>Sort:</span>
            {['Largest pool', 'Closing soon', 'Most-funded'].map((d, i) => <Tag key={d} tone={i === 0 ? 'ink' : 'default'}>{d}</Tag>)}
          </div>

          {/* Featured cards */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
            {[
              {
                state: 'DRAFT · ACCEPTING', stateTone: 'accent',
                title: 'Astrocytic GAT-3 modulators preserve LTP under chronic inflammation',
                authors: 'Harriot M., Lin C., Park S. · Glia Init.', funders: 84, pool: '$4,210', goal: '$8,000',
                progress: 0.52, ts: '14d active · funding closes when editor opens review',
                cta: 'Add funds · UBR/USDC',
              },
              {
                state: 'UNDER REVIEW · CLAIMABLE', stateTone: 'info',
                title: 'A reproducibility-weighted index for systems-neuroscience replications',
                authors: 'Tanaka M., Osei J. · MIT', funders: 142, pool: '$8,420', goal: '$8,420 · capped',
                progress: 1.0, ts: '3 of 4 reviewers signed · 6d to bid window close',
                cta: 'Claim · stake REVIEWER SBT',
              },
              {
                state: 'PUBLISHED · RELEASE PENDING', stateTone: 'ok',
                title: 'Open imaging benchmark for two-photon glia kinetics',
                authors: 'Open Glia Consortium · 12 authors', funders: 312, pool: '$22,420', goal: 'released by editor',
                progress: 1.0, ts: 'editor t.alvarez.eth signs in 2d · auto-release fallback',
                cta: 'View release schedule',
              },
            ].map((c, i) => (
              <div key={i} style={{ background: '#fff', border: `1px solid ${UB.rule2}`, padding: 16, display: 'flex', flexDirection: 'column' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
                  <Tag tone={c.stateTone}>{c.state}</Tag>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{c.funders} funders</span>
                </div>
                <div style={{ fontFamily: UB.serif, fontSize: 17, lineHeight: 1.2, marginBottom: 6, textWrap: 'pretty' }}>{c.title}</div>
                <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginBottom: 14 }}>{c.authors}</div>
                <div style={{ marginTop: 'auto' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 11, marginBottom: 4 }}>
                    <span style={{ fontWeight: 600 }}>{c.pool}</span>
                    <span style={{ color: UB.ink3 }}>{c.goal}</span>
                  </div>
                  <div style={{ height: 4, background: UB.paperDeep, position: 'relative', marginBottom: 8 }}>
                    <div style={{ position: 'absolute', inset: 0, width: `${c.progress * 100}%`, background: UB.accent }} />
                  </div>
                  <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, marginBottom: 10 }}>{c.ts}</div>
                  <Btn primary={i !== 2} style={{ width: '100%', justifyContent: 'center' }}>{c.cta}</Btn>
                </div>
              </div>
            ))}
          </div>

          {/* Big table */}
          <Card title="All bounties · 184" code="LIVE · 17:08 UTC" pad={false}>
            <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 90px 80px 110px 90px 90px 100px', 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>Paper</span><span>State</span><span>Pool</span><span>Reviewers</span><span>Funders</span><span>Editor</span><span></span>
            </div>
            {[
              { t: 'GAT-3 modulators · LTP under inflammation',          s: 'DRAFT',     st: 'accent', pool: '$4,210',  rev: '0 / 0',  fnd: 84,  ed: '—',          act: 'Fund' },
              { t: 'Reproducibility-weighted index · sys-neuro',         s: 'REVIEW',    st: 'info',   pool: '$8,420',  rev: '3 / 4',  fnd: 142, ed: 't.alvarez',  act: 'Claim' },
              { t: 'Open imaging benchmark · 2-photon glia',             s: 'PUBLISHED', st: 'ok',     pool: '$22,420', rev: '4 / 4',  fnd: 312, ed: 't.alvarez',  act: 'Release' },
              { t: 'Tau aggregation inhibitor · seedless screen',         s: 'DRAFT',    st: 'accent', pool: '$1,840',  rev: '0 / 0',  fnd: 36,  ed: '—',          act: 'Fund' },
              { t: 'Senolytic small-molecule · selectivity panel',       s: 'REVIEW',    st: 'info',   pool: '$3,180',  rev: '1 / 3',  fnd: 64,  ed: 'k.olsen',    act: 'Claim' },
              { t: 'mRNA scaffold · cold-chain stability',                s: 'REVIEW',   st: 'info',   pool: '$1,420',  rev: '2 / 3',  fnd: 28,  ed: 'k.olsen',    act: 'Claim' },
              { t: 'Off-target Crispr filter · in-silico → in-vitro',    s: 'PUBLISHED', st: 'ok',     pool: '$11,840', rev: '4 / 4',  fnd: 218, ed: 'a.shah',     act: 'Release' },
              { t: 'BCI electrode array · long-term stability',           s: 'DRAFT',    st: 'accent', pool: '$420',    rev: '0 / 0',  fnd: 14,  ed: '—',          act: 'Fund' },
              { t: 'Photonic adder · sub-fJ logic',                       s: 'REVIEW',   st: 'info',   pool: '$6,180',  rev: '1 / 3',  fnd: 92,  ed: 'r.gupta',    act: 'Claim' },
              { t: 'Microbiome diagnostic · ROC curves on cohort C',     s: 'CANCELLED', st: 'warn',   pool: '$1,140',  rev: '0 / 3',  fnd: 22,  ed: 'a.shah',     act: 'Refund' },
            ].map((r, i, arr) => {
              const cta = r.act === 'Fund' ? <Btn small primary>Fund</Btn>
                : r.act === 'Claim' ? <Btn small primary>Claim · stake</Btn>
                : r.act === 'Release' ? <Btn small primary={r.ed === 't.alvarez'}>{r.ed === 't.alvarez' ? 'Release' : 'View'}</Btn>
                : <Btn small ghost>View refund</Btn>;
              return (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.4fr 90px 80px 110px 90px 90px 100px', gap: 10, padding: '11px 16px', alignItems: 'center', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <span style={{ fontSize: 12 }}>{r.t}</span>
                  <Tag tone={r.st}>{r.s}</Tag>
                  <span style={{ fontFamily: UB.mono, fontSize: 11, fontWeight: 600 }}>{r.pool}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 11, color: UB.ink2 }}>{r.rev}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{r.fnd}</span>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: r.ed === '—' ? UB.ink4 : UB.ink2 }}>{r.ed}</span>
                  {cta}
                </div>
              );
            })}
          </Card>

          {/* Editor release queue + your funded */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <Card title="Editor release queue · 2 due to you" code="t.alvarez.eth · EDITOR SBT" pad={false}>
              {[
                {
                  paper: 'Open imaging benchmark · 2-photon glia',
                  pool: '$22,420 USDC · pool', state: 'PUBLISHED 2d ago', auto: 'auto-release in 2d',
                  split: [['4 reviewers', '$13,452', 0.60], ['Author wallet', '$5,605', 0.25], ['Reviewer pool · TRID', '$2,242', 0.10], ['Protocol fee', '$1,121', 0.05]],
                },
                {
                  paper: 'Off-target Crispr filter · in-silico → in-vitro',
                  pool: '$11,840 USDC · pool', state: 'PUBLISHED 6d ago', auto: 'auto-release in 8h',
                  split: [['4 reviewers', '$7,104', 0.60], ['Author wallet', '$2,960', 0.25], ['Reviewer pool · TRID', '$1,184', 0.10], ['Protocol fee', '$592', 0.05]],
                },
              ].map((r, i, arr) => (
                <div key={i} style={{ padding: '14px 16px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                    <span style={{ fontSize: 13 }}>{r.paper}</span>
                    <Tag tone="ok">{r.state}</Tag>
                  </div>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginBottom: 10 }}>{r.pool} · {r.auto}</div>
                  {r.split.map((s, j) => (
                    <div key={j} style={{ marginBottom: 4 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 11 }}>
                        <span>{s[0]} · {(s[2] * 100).toFixed(0)}%</span>
                        <span>{s[1]}</span>
                      </div>
                      <div style={{ height: 3, background: UB.paperDeep, position: 'relative' }}>
                        <div style={{ position: 'absolute', inset: 0, width: `${s[2] * 100}%`, background: UB.accent }} />
                      </div>
                    </div>
                  ))}
                  <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
                    <Btn small ghost style={{ flex: 1, justifyContent: 'center' }}>Cancel · refund all</Btn>
                    <Btn small primary style={{ flex: 1, justifyContent: 'center' }} icon={Icon.shield}>Sign &amp; release</Btn>
                  </div>
                </div>
              ))}
            </Card>

            <Card title="Your funded bounties · 14" code="$8,420 STAKED" pad={false}>
              {[
                ['GAT-3 modulators · LTP',           '$1,400', 'DRAFT',    'accent',  '+$0 expected'],
                ['Reproducibility-weighted index',    '$2,200', 'REVIEW',   'info',    'pending'],
                ['Open imaging benchmark',            '$840',   'PUBLISHED','ok',      '+$268 due in 2d'],
                ['Tau aggregation inhibitor',         '$420',   'DRAFT',    'accent',  '+$0 expected'],
                ['Senolytic selectivity panel',       '$1,840', 'REVIEW',   'info',    'pending'],
                ['mRNA scaffold · cold-chain',        '$240',   'REVIEW',   'info',    'pending'],
                ['Off-target Crispr filter',          '$1,180', 'PUBLISHED','ok',      '+$378 due in 8h'],
                ['Microbiome diagnostic',             '$300',   'CANCELLED','warn',    '+$300 refunded'],
              ].map((r, i, arr) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.4fr 80px 100px 1fr', gap: 10, padding: '8px 16px', borderBottom: i < arr.length - 1 ? `1px solid ${UB.rule3}` : 'none', alignItems: 'center', fontSize: 11 }}>
                  <span>{r[0]}</span>
                  <span style={{ fontFamily: UB.mono, fontWeight: 600 }}>{r[1]}</span>
                  <Tag tone={r[3]}>{r[2]}</Tag>
                  <span style={{ fontFamily: UB.mono, fontSize: 10, color: r[4].includes('+$0') ? UB.ink3 : r[4].includes('refunded') ? UB.warn : r[4].includes('due') ? UB.ok : UB.ink3, textAlign: 'right' }}>{r[4]}</span>
                </div>
              ))}
            </Card>
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

window.BountiesDapp = BountiesDapp;