---
import { getCollection } from 'astro:content';
import BaseLayout from '../layouts/BaseLayout.astro';
import reviewStylesheet from '../../legacy/styles/skills-review.css?url';
import changeLensStylesheet from '../../legacy/styles/change-lens.css?url';

const reviews = await getCollection('reviews');
const reviewOrder = [
  'code-style-review',
  'sql-injection-audit',
  'confectionary-skill-hub',
  'angular-access-modifiers',
  'codebase-map',
  'angular-accessibility-root',
  'angular-accessibility',
  'copy-quote-info-to-payload',
  'generated-code-explanation',
  'ndo-repro',
  'duplicate-code-check',
  'am-i-free',
  'back-to-work',
  'long-day-start',
  'lunch-time',
  'backend-code-reviewer',
  'gfiber-logging',
  'confluence-page',
  'diagram-plantuml',
  'page-reviewer',
  'unslop',
  'spanish-naturalizer',
  'draft-mr',
  'semantic-diff-review',
];
const reviewPosition = new Map(reviewOrder.map((id, index) => [id, index]));
const catalog = reviews
  .sort((left, right) => reviewPosition.get(left.id)! - reviewPosition.get(right.id)!)
  .map((review) => ({
    ...review.data,
    improved: review.body,
  }));
const serializedCatalog = JSON.stringify(catalog).replace(/</g, '\\u003c');
---

<BaseLayout
  title="Submitted Skills — Review Desk"
  description="Friendly reviews and improved drafts for submitted Agent Skills."
>
  <link slot="styles" rel="stylesheet" href={reviewStylesheet} />
  <link slot="styles" rel="stylesheet" href={changeLensStylesheet} />
  <main>
    <header class="topbar">
      <a href={import.meta.env.BASE_URL} class="back">← field guide</a><span
        >SUBMITTED SKILLS / REVIEW DESK</span
      ><a href="#catalog" id="submission-count">submissions</a>
    </header>
    <section class="hero">
      <p class="eyebrow">A friendly path from draft to dependable</p>
      <h1>Every skill deserves<br /><em>a clear job.</em></h1>
      <p>
        Read the original, understand what already works, and compare a safer, leaner draft. Nothing
        here overwrites a submission; revisions live in their own review output.
      </p>
    </section>
    <section class="principles" aria-label="Review principles">
      <article>
        <b>01</b><strong>Discoverable</strong><span
          >A precise description tells an agent when to load the skill.</span
        >
      </article>
      <article>
        <b>02</b><strong>Useful in context</strong><span
          >Core workflow stays short; conditional detail loads only when needed.</span
        >
      </article>
      <article>
        <b>03</b><strong>Safe by design</strong><span
          >Commands, secrets, and shared systems have explicit boundaries.</span
        >
      </article>
      <article>
        <b>04</b><strong>Proven in use</strong><span
          >Real prompts and observable checks turn a draft into a reliable tool.</span
        >
      </article>
    </section>
    <section class="method">
      <div>
        <p class="eyebrow">How to use this desk</p><h2>Compare.<br /><em>Then choose.</em></h2>
      </div>
      <ol>
        <li>Select a submission, or open an author URL.</li><li>
          Read the gentle review before judging the draft.
        </li><li>
          Choose <strong>Preview Markdown</strong> in the file toolbar to render either version.
        </li><li>Copy or download the version you want, then vote for the draft you would ship.</li>
      </ol>
    </section>
    <section class="catalog" id="catalog">
      <aside>
        <p class="eyebrow">The catalog</p><label for="skill-filter">Find a skill</label><input
          id="skill-filter"
          type="search"
          placeholder="author, skill, topic"
          autocomplete="off"
        /><p class="count" id="count"></p><div
          id="skill-list"
          role="listbox"
          aria-label="Submitted skills"
        >
        </div>
      </aside>
      <article class="detail" id="detail" aria-live="polite"></article>
    </section>
    <section class="research">
      <p class="eyebrow">Why these reviews look this way</p>
      <p>
        The recommendations follow the open Agent Skills format: valid frontmatter for discovery,
        progressive disclosure for context economy, deterministic scripts for fragile repeated
        mechanics, and behavioral evaluation rather than a checklist of pretty headings.
      </p>
      <div>
        <a href="https://agentskills.io/specification" target="_blank" rel="noreferrer"
          >Format specification ↗</a
        ><a
          href="https://agentskills.io/skill-creation/best-practices"
          target="_blank"
          rel="noreferrer">Writing practices ↗</a
        ><a
          href="https://agentskills.io/skill-creation/evaluating-skills"
          target="_blank"
          rel="noreferrer">Evaluation loop ↗</a
        ><a
          href="https://agentskills.io/skill-creation/using-scripts"
          target="_blank"
          rel="noreferrer">Scripts guide ↗</a
        >
      </div>
    </section>
    <footer>
      Share an author with <code>?author=Name</code>, or one review with <code
        >?author=Name&amp;skill=skill-id&amp;view=improved</code
      >. To add a submission later: drop a package under <code>submitted-skills/</code>, add an
      entry under <code>src/content/reviews/{'{'}new-id{'}'}.md</code> (and mirror it into <code
        >skills-review/catalog.js</code
      > which the desk still reads), then run <code>node scripts/build-skill-review.mjs</code>.
      Votes call a separate service — see <code>vote-service/</code> — one per visitor, tracked by network
      source.
    </footer>
  </main>
  <script is:inline define:vars={{ serializedCatalog }}>
    window.SKILLS_REVIEW_VOTE_API = 'https://ai-for-dummies-vote.marcospaulo.dev.br';
    window.__SKILLS_REVIEW_CATALOG = JSON.parse(serializedCatalog);
  </script>
  <script>
    import '../../legacy/skills-review/app.js';
  </script>
</BaseLayout>
