/* global React, Sticker, Star, Heart, Burst, Squiggle, PaperClip */
const { useState: useState_O, useEffect: useEffect_O } = React;

/* =========================================================
   OPEN SOURCE — merge receipts + git log
   ---------------------------------------------------------
   Replace CONTRIBS with your real PRs.
   status: 'merged' | 'open' | 'closed'
========================================================= */
const CONTRIBS = [
  {
    num: '83147',
    repo: 'openclaw/openclaw',
    stars: '373k ★',
    title: 'fix(plugins): default 15s timeout for before_agent_start hook (#48534)',
    status: 'merged',
    lang: 'TypeScript',
    added: 84,
    removed: 0,
    date: '2026-05-17',
    github: 'https://github.com/openclaw/openclaw',
    pr: 'https://github.com/openclaw/openclaw/pull/83147',
    commit: 'https://github.com/openclaw/openclaw/commit/1760881574a50ce636a87e2022fe6d5536d218ec',
    note: 'before_agent_start was the only legacy hook with no default timeout — a hung plugin could wedge every agent run with zero log output. dropped one map entry, 2 regression tests, automerge bot took it from there.',
  },
  {
    num: '27302',
    repo: 'NousResearch/hermes-agent',
    stars: '155k ★',
    title: 'fix(tests): mock keychain in TestReadClaudeCodeCredentials to prevent credential leakage',
    status: 'merged',
    lang: 'Python',
    added: 67,
    removed: 2,
    date: '2026-05-17',
    github: 'https://github.com/NousResearch/hermes-agent',
    pr: 'https://github.com/NousResearch/hermes-agent/pull/27302',
    commit: 'https://github.com/NousResearch/hermes-agent/commit/a52f014a',
    note: 'test was reading real OAuth tokens from macOS Keychain — and printing them in assertion errors. monkeypatched the reader, test is hermetic now.',
  },
  {
    num: '572',
    repo: 'ruvnet/RuView',
    stars: '59k ★',
    title: 'fix(ui): map sensing websocket port for docker',
    status: 'merged',
    lang: 'JavaScript',
    added: 56,
    removed: 8,
    date: '2026-05-17',
    github: 'https://github.com/ruvnet/RuView',
    pr: 'https://github.com/ruvnet/RuView/pull/572',
    commit: 'https://github.com/ruvnet/RuView/commit/4698f54fa084201e91377fdd6d395ed6407a91ab',
    note: 'docker mapped HTTP on 3000 but the UI sensing service hardcoded 3001 — the websocket connection died on every page load. mapped the port + guarded handlers against late lastActivity messages on stale connection records + added a LAN/Docker port-mapping regression test.',
  },
  {
    num: '1528',
    repo: 'MemPalace/mempalace',
    stars: '52k ★',
    title: 'fix(convo_miner): scope skip-check and drawer ids by extract_mode (#1505)',
    status: 'merged',
    lang: 'Python',
    added: 211,
    removed: 16,
    date: '2026-05-18',
    github: 'https://github.com/MemPalace/mempalace',
    pr: 'https://github.com/MemPalace/mempalace/pull/1528',
    commit: 'https://github.com/MemPalace/mempalace/commit/5c9a5e04b1b68f691117761cb7351f3933bd24f5',
    note: 'file_already_mined() keyed only on source_file, so re-mining a transcript under --extract general was silently skipped if --extract exchange had already run. scoped the skip-check and drawer ids by extract_mode — the two modes coexist now. unit + integration tests across 3 files.',
  },
  {
    num: '7743',
    repo: 'elizaOS/eliza',
    stars: '18.4k ★',
    title: 'fix: disable DFlash for M-RoPE catalog tiers',
    status: 'merged',
    lang: 'TypeScript',
    added: 188,
    removed: 8,
    date: '2026-03-30',
    github: 'https://github.com/elizaOS/eliza',
    pr: 'https://github.com/elizaOS/eliza/pull/7743',
    note: 'catalog-level disable metadata + target-only fallback + focused tests. one of those "obvious in hindsight" bugs.',
  },
  {
    num: '1807',
    repo: 'tinyhumansai/openhuman',
    stars: '14k ★',
    title: 'fix(tauri): disable Linux CEF GPU startup path',
    status: 'merged',
    lang: 'Rust',
    added: 65,
    removed: 27,
    date: '2026-04-22',
    github: 'https://github.com/tinyhumansai/openhuman',
    pr: 'https://github.com/tinyhumansai/openhuman/pull/1807',
    note: 'tauri/CEF was crashing on linux GPU init. flipped the startup path + added platform-specific coverage.',
  },
  {
    num: '0391',
    repo: 'rohitg00/agentmemory',
    stars: '11k ★',
    title: 'docs(readme): clarify MCP shim vs full server tool count (#233 gap 1)',
    status: 'merged',
    lang: 'Markdown',
    added: 3,
    removed: 1,
    date: '2026-05-15',
    github: 'https://github.com/rohitg00/agentmemory',
    pr: 'https://github.com/rohitg00/agentmemory/pull/391',
    note: 'closed one of six gaps in #233 — local fallback exposes 7 tools, full server 51. now it actually says that.',
  },
  {
    num: '4056',
    repo: 'LearningCircuit/local-deep-research',
    stars: '7.7k ★',
    title: 'fix(notifications): allow signal:// Apprise scheme (#4006)',
    status: 'merged',
    lang: 'Python',
    added: 16,
    removed: 0,
    date: '2026-05-15',
    github: 'https://github.com/LearningCircuit/local-deep-research',
    pr: 'https://github.com/LearningCircuit/local-deep-research/pull/4056',
    note: 'signal:// URLs were rejected even though Apprise supports them. added the scheme + 2 regression tests. full 89-test suite still green.',
  },
];

const STATUS_META = {
  merged: { label: 'MERGED',  glyph: '✔', color: 'var(--grape)' },
  open:   { label: 'OPEN',    glyph: '◯', color: 'var(--lime)' },
  closed: { label: 'CLOSED',  glyph: '✕', color: 'var(--tomato)' },
};

window.OssSection = function OssSection({ pal }) {
  const merged = CONTRIBS.filter(c => c.status === 'merged').length;
  const totalAdd = CONTRIBS.reduce((a, c) => a + c.added, 0);
  const totalDel = CONTRIBS.reduce((a, c) => a + c.removed, 0);
  const repos = new Set(CONTRIBS.map(c => c.repo.split('/')[0])).size;

  return (
    <section id="oss" className="oss-section">
      <div className="section-head">
        <div className="num">// 03</div>
        <h2>Open<br />Source<span className="swirl">gifts to the commons</span></h2>
        <div className="meta">{CONTRIBS.length} prs · {repos} orgs · ∞ rebases</div>
      </div>

      <div className="oss-grid">

        {/* LEFT — stats / contribution log */}
        <div className="oss-stats-col">
          <div className="oss-stats-card">
            <div className="oss-stats-eyebrow">─ contribution log · since 2024</div>
            <div className="oss-stats-title">git<br />log<span className="tm">.txt</span></div>

            <ul className="oss-stat-rows">
              <li>
                <span className="k">pulls opened</span>
                <span className="dots" aria-hidden="true" />
                <b>{CONTRIBS.length}</b>
              </li>
              <li>
                <span className="k">pulls merged</span>
                <span className="dots" aria-hidden="true" />
                <b>{merged}</b>
              </li>
              <li>
                <span className="k">orgs touched</span>
                <span className="dots" aria-hidden="true" />
                <b>{repos}</b>
              </li>
              <li>
                <span className="k">+ lines added</span>
                <span className="dots" aria-hidden="true" />
                <b className="add">+{totalAdd}</b>
              </li>
              <li>
                <span className="k">− lines removed</span>
                <span className="dots" aria-hidden="true" />
                <b className="del">−{totalDel}</b>
              </li>
              <li>
                <span className="k">rebases survived</span>
                <span className="dots" aria-hidden="true" />
                <b>∞</b>
              </li>
            </ul>

            <div className="oss-stats-foot">
              <span>SEC. OSS · ROW 07</span>
              <span>·····</span>
              <span>VALID 2026</span>
            </div>

            <div className="oss-stats-barcode" aria-hidden="true">
              {Array.from({ length: 36 }).map((_, i) => (
                <span key={i} style={{ width: [1,2,3,1,2,1,3,2][i % 8] + 'px' }} />
              ))}
            </div>

            <div className="oss-stamp" aria-hidden="true">
              <div className="oss-stamp-inner">
                <span>★</span>
                <span>OSS</span>
                <span>2026</span>
              </div>
            </div>
          </div>

          {/* handwritten footnote */}
          <div className="oss-postit">
            <div className="oss-postit-tape" aria-hidden="true" />
            <div className="oss-postit-eyebrow">// note to self</div>
            <p>
              every <i>good first issue</i> is a tiny door. i go through one, fix the
              hinge, write a test, leave the kitchen cleaner than i found it. that's the whole thing. ✿
            </p>
            <div className="oss-postit-sign">— rt</div>
          </div>
        </div>

        {/* RIGHT — receipts grid */}
        <div className="oss-receipts">
          {CONTRIBS.map((c, i) => {
            const s = STATUS_META[c.status];
            return (
              <article key={c.num} className={`oss-receipt oss-r-${c.status}`} style={{ '--stamp': s.color }}>
                <div className="oss-perf oss-perf-top" aria-hidden="true" />

                <header className="oss-receipt-head">
                  <span className="oss-r-eyebrow">PULL REQUEST</span>
                  <span className="oss-r-num">№ {c.num}</span>
                </header>

                <div className="oss-r-repo">
                  <span className="oss-r-org">{c.repo.split('/')[0]}/</span>
                  <span className="oss-r-name">{c.repo.split('/')[1]}</span>
                  {c.stars && <span className="oss-r-stars">{c.stars}</span>}
                </div>

                <div className="oss-r-title">"{c.title}"</div>

                <div className="oss-r-meta">
                  <span className="oss-r-date">{c.date}</span>
                  <span className="oss-r-dot">·</span>
                  <span className="oss-r-lang">{c.lang}</span>
                </div>

                <div className="oss-r-diff">
                  <span className="add">+{c.added}</span>
                  <span className="del">−{c.removed}</span>
                  <span className="oss-r-bar" aria-hidden="true">
                    <i style={{ width: (c.added / (c.added + c.removed) * 100) + '%' }} />
                  </span>
                </div>

                <div className="oss-r-note">{c.note}</div>

                <div className="oss-receipt-foot">
                  <div className="oss-r-links">
                    {c.github && (
                      <a href={c.github} target="_blank" rel="noreferrer" className="oss-r-link oss-r-link-github">
                        github ↗
                      </a>
                    )}
                    <a href={c.pr} target="_blank" rel="noreferrer" className="oss-r-link">
                      view pr ↗
                    </a>
                    {c.commit && (
                      <a href={c.commit} target="_blank" rel="noreferrer" className="oss-r-link oss-r-link-commit">
                        commit ↗
                      </a>
                    )}
                  </div>
                  <span className="oss-r-thanks">thank u, maintainers ♡</span>
                </div>

                <div className="oss-r-stamp" aria-hidden="true">
                  <span className="oss-r-stamp-glyph">{s.glyph}</span>
                  <span className="oss-r-stamp-label">{s.label}</span>
                </div>

                <div className="oss-perf oss-perf-bot" aria-hidden="true" />
              </article>
            );
          })}

          {/* call-to-action card at end of grid */}
          <article className="oss-receipt oss-receipt-cta">
            <div className="oss-perf oss-perf-top" aria-hidden="true" />
            <header className="oss-receipt-head">
              <span className="oss-r-eyebrow">// open invite</span>
              <span className="oss-r-num">№ ????</span>
            </header>
            <div className="oss-r-repo">
              <span className="oss-r-org">your-org/</span>
              <span className="oss-r-name">your-repo</span>
            </div>
            <div className="oss-cta-big">got a <em>good first issue</em>?</div>
            <div className="oss-cta-sub">
              i read every <code>CONTRIBUTING.md</code> i open. send the link — i'll send the PR.
            </div>
            <div className="oss-receipt-foot">
              <a href="#contact" className="oss-r-link oss-r-link-cta">tag me in ↗</a>
              <span className="oss-r-thanks">no PR too small</span>
            </div>
            <div className="oss-perf oss-perf-bot" aria-hidden="true" />
          </article>
        </div>

      </div>
    </section>
  );
};