// Matched Reviews — directory of papers under review that match your domain
// + reviewer fit. Drops into the main Ecosystem page (UBP) but is also a
// standalone screen.

function MatchedRail({ 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 }}>REVIEWER · YOU</div>
        <div style={{ fontFamily: UB.serif, fontSize: 18, lineHeight: 1.1 }}>malcolm.harriot.eth</div>
        <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginTop: 4 }}>κ 0.84 · 142 reviews · neuro · glia</div>
      </div>
      <NavGroup label="Match feed">
        <NavItem icon={Icon.flask}  label="Matched · all"        badge="22" active={active === 'matched'} />
        <NavItem icon={Icon.shield} label="Best fit · ≥0.85"     badge="6" />
        <NavItem icon={Icon.bell}   label="Closing in 48h"       badge="4" />
        <NavItem icon={Icon.bank}   label="High bounty"          badge="8" />
        <NavItem icon={Icon.cube}   label="Saved · later"        badge="3" />
      </NavGroup>
      <NavGroup label="Filters">
        <NavItem icon={Icon.cog} label="Domains · 4 active" />
        <NavItem icon={Icon.cog} label="Methods · 6 active" />
        <NavItem icon={Icon.cog} label="Conflicts · 14 listed" />
      </NavGroup>
    </>
  );
}

function MatchBars({ scores }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
      {scores.map((s, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, width: 70, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{s[0]}</span>
          <div style={{ flex: 1, height: 4, background: UB.paperDeep, position: 'relative' }}>
            <div style={{ position: 'absolute', inset: 0, width: `${s[1] * 100}%`, background: s[1] > 0.8 ? UB.accent : s[1] > 0.5 ? 'oklch(0.66 0.13 240)' : UB.ink3 }} />
          </div>
          <span style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink2, width: 30, textAlign: 'right' }}>{s[1].toFixed(2)}</span>
        </div>
      ))}
    </div>
  );
}

function MatchedReviewsDapp() {
  const matches = [
    {
      paper: 'Astrocytic GAT-3 modulators preserve LTP under chronic inflammation',
      authors: 'Park S., Lin C., Tanaka M.', cls: 'Cell Reports', state: 'OPEN',
      due: '4d 14h', bounty: '$1,840', reviewers: '1 / 4', fit: 0.94,
      scores: [['Domain', 0.96], ['Methods', 0.92], ['Citations', 0.88], ['Recency', 0.84]],
      reasons: ['You co-authored 4 papers on astrocyte GABA reuptake', 'Cited by 8 in your reading list', 'No conflict detected'],
    },
    {
      paper: 'A reproducibility-weighted index for systems-neuroscience replications',
      authors: 'Tanaka M., Osei J.',          cls: 'eLife',       state: 'OPEN',
      due: '6d 02h', bounty: '$8,420 (capped)', reviewers: '3 / 4', fit: 0.88,
      scores: [['Domain', 0.86], ['Methods', 0.94], ['Citations', 0.78], ['Recency', 0.92]],
      reasons: ['Your TRID work on κ overlaps directly', 'Editor t.alvarez requested you'],
    },
    {
      paper: 'Open imaging benchmark for two-photon glia kinetics',
      authors: 'Open Glia Consortium',        cls: 'Nature Methods', state: 'OPEN',
      due: '8d 18h', bounty: '$4,210', reviewers: '2 / 4', fit: 0.84,
      scores: [['Domain', 0.92], ['Methods', 0.88], ['Citations', 0.74], ['Recency', 0.84]],
      reasons: ['You authored Glia heterogeneity atlas (cited)', 'No conflict detected'],
    },
    {
      paper: 'Cortical microcircuit motifs across primate species',
      authors: 'Alvarez T., Shah A., +6',     cls: 'Cell',         state: 'PRE-OPEN',
      due: '12d 04h', bounty: '$2,240', reviewers: '0 / 4', fit: 0.79,
      scores: [['Domain', 0.84], ['Methods', 0.82], ['Citations', 0.68], ['Recency', 0.82]],
      reasons: ['Author T. Alvarez has co-reviewed with you 3×'],
      conflict: true,
    },
    {
      paper: 'Tau aggregation inhibitor · seedless library screen',
      authors: 'Park J., Kim T.',             cls: 'PNAS',         state: 'OPEN',
      due: '14d', bounty: '$1,180', reviewers: '0 / 3', fit: 0.72,
      scores: [['Domain', 0.62], ['Methods', 0.86], ['Citations', 0.74], ['Recency', 0.66]],
      reasons: ['Adjacent domain · methods overlap with your patch-clamp work'],
    },
    {
      paper: 'Senolytic small-molecule · selectivity panel across 14 cell types',
      authors: 'AgeX Discovery DAO',          cls: 'Nat Aging',    state: 'OPEN',
      due: '6d 12h', bounty: '$3,180', reviewers: '1 / 3', fit: 0.68,
      scores: [['Domain', 0.58], ['Methods', 0.82], ['Citations', 0.62], ['Recency', 0.78]],
      reasons: ['You hold $AGEX · disclosure required, not blocking'],
    },
  ];

  return (
    <Dapp>
      <ChromeBar dapp="ECOSYSTEM" code="MATCHED REVIEWS · 22 OPEN" />
      <Layout rail={<MatchedRail active="matched" />}>
        <PageHead
          eyebrow={<span>Ecosystem · Reviewer hub</span>}
          title="Matched review requests"
          sub="Live, editor-curated under-review papers ranked by domain, method, citation, and recency overlap with your TRID profile. Claim by signing — bounty pays out when the editor releases."
          actions={<>
            <Btn small icon={Icon.cog}>Match preferences</Btn>
            <Btn small icon={Icon.bell}>Daily digest · ON</Btn>
            <Btn small primary icon={Icon.shield}>Open my reviewer SBT</Btn>
          </>}
        />

        <div style={{ flex: 1, padding: 24, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Top KPIs */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
            <Card><Stat label="Matched · open" value="22" sub="6 best fit · 4 closing 48h" /></Card>
            <Card><Stat label="Combined bounty" value="$48,210" sub="median $1,840" /></Card>
            <Card><Stat label="Your fit · median" value="0.84" sub="across 22 papers" /></Card>
            <Card><Stat label="Earned · TTM" value="$22,440" sub="142 reviews paid" /></Card>
            <Card><Stat label="Streak · κ" value="0.84" sub="14-review rolling" /></Card>
          </div>

          {/* Why these match — a transparency banner */}
          <Card pad={false}>
            <div style={{ padding: 16, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
              <div>
                <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginBottom: 6 }}>YOUR PROFILE · TRID</div>
                <div style={{ fontSize: 12, color: UB.ink2, lineHeight: 1.55 }}>You're matched against 22 open papers using your domain map (neuro · glia), method graph (electrophysiology · 2-photon), citation network, and conflict graph. No paper from a co-author within 36 months is shown.</div>
              </div>
              <div>
                <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginBottom: 6 }}>WEIGHTS</div>
                <MatchBars scores={[['Domain', 0.40], ['Methods', 0.30], ['Citations', 0.18], ['Recency', 0.12]]} />
              </div>
              <div>
                <div style={{ fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.18em', marginBottom: 6 }}>CONFLICTS · AUTO-EXCLUDED</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
                  {['c.lin.eth', 's.park.eth', 'glia-init.dao', '+ 11 more'].map(t => <Tag key={t}>{t}</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 }}>FILTER</span>
            {['All · 22', 'Best fit ≥0.85 · 6', 'Closing 48h · 4', 'Bounty ≥ $2K · 8', 'No conflict · 18'].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>
            {['Best fit', 'Highest bounty', 'Closing soonest'].map((d, i) => <Tag key={d} tone={i === 0 ? 'ink' : 'default'}>{d}</Tag>)}
          </div>

          {/* Match cards */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {matches.map((m, i) => (
              <div key={i} style={{ background: '#fff', border: `1px solid ${UB.rule2}`, padding: '16px 18px', display: 'grid', gridTemplateColumns: '1fr 220px 200px', gap: 18, alignItems: 'center' }}>
                <div style={{ minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
                    <Tag tone={m.state === 'OPEN' ? 'accent' : 'warn'}>{m.state}</Tag>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{m.cls}</span>
                    <span style={{ color: UB.ink4 }}>·</span>
                    <span style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>closes in {m.due}</span>
                    {m.conflict && <Tag tone="warn">⚠ check conflicts</Tag>}
                  </div>
                  <div style={{ fontFamily: UB.serif, fontSize: 17, lineHeight: 1.2, marginBottom: 4, textWrap: 'pretty' }}>{m.paper}</div>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, marginBottom: 8 }}>{m.authors}</div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
                    {m.reasons.map((r, j) => (
                      <span key={j} style={{ fontSize: 11, color: UB.ink2, background: UB.paperDeep, padding: '3px 8px' }}>↳ {r}</span>
                    ))}
                  </div>
                </div>

                <div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: UB.mono, fontSize: 9, color: UB.ink3, letterSpacing: '0.16em', marginBottom: 6 }}>
                    <span>FIT · {m.fit.toFixed(2)}</span>
                    <span style={{ color: m.fit > 0.85 ? UB.accent : m.fit > 0.75 ? 'oklch(0.66 0.13 240)' : UB.ink3 }}>
                      {m.fit > 0.85 ? 'BEST' : m.fit > 0.75 ? 'GOOD' : 'OK'}
                    </span>
                  </div>
                  <MatchBars scores={m.scores} />
                </div>

                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end' }}>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>BOUNTY</div>
                  <div style={{ fontFamily: UB.mono, fontSize: 18, fontWeight: 600 }}>{m.bounty}</div>
                  <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3 }}>{m.reviewers} reviewers signed</div>
                  <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
                    <Btn small ghost>Save</Btn>
                    <Btn small primary={m.fit > 0.8}>Claim · sign</Btn>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div style={{ fontFamily: UB.mono, fontSize: 10, color: UB.ink3, textAlign: 'center', padding: 8 }}>
            ↳ 16 more matches · scroll to load · or refine your match preferences
          </div>
        </div>
      </Layout>
    </Dapp>
  );
}

window.MatchedReviewsDapp = MatchedReviewsDapp;