---
import { getCollection } from 'astro:content';
import Base from '../../layouts/Base.astro';
import '../../styles/sub-pages.css';
import {
  SKILL_CATEGORIES,
  CATEGORY_ORDER,
  CATEGORY_LABELS,
  CATEGORY_DESCRIPTIONS,
} from '../../data/sub-pages-data';

const entries = await getCollection('skills');

const grouped: Record<string, typeof entries> = {};
for (const cat of CATEGORY_ORDER) {
  grouped[cat] = entries
    .filter(e => SKILL_CATEGORIES[e.id] === cat)
    .sort((a, b) => a.id.localeCompare(b.id));
}

const allCommands = entries.map(e => ({
  slug: e.id,
  category: SKILL_CATEGORIES[e.id] || 'system',
}));

const sidebarGroups: Record<string, { slug: string }[]> = {};
for (const cat of CATEGORY_ORDER) {
  sidebarGroups[cat] = allCommands
    .filter(c => c.category === cat)
    .sort((a, b) => a.slug.localeCompare(b.slug));
}
---

<Base
  title="Docs | Impeccable"
  description="23 commands for design fluency. Browse the full reference for every /impeccable sub-command."
  activeNav="docs"
  canonicalPath="/docs"
  bodyClass="sub-page skills-layout-page"
>
  <div class="skills-layout">
    <aside class="skills-sidebar" aria-label="Commands">
      <button class="skills-sidebar-toggle" type="button" aria-expanded="false" aria-controls="skills-sidebar-inner">
        <span class="skills-sidebar-toggle-label">Commands</span>
        <svg class="skills-sidebar-toggle-chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
      </button>
      <div class="skills-sidebar-inner" id="skills-sidebar-inner">
        <p class="skills-sidebar-label">Commands</p>
        {CATEGORY_ORDER.map(cat => (
          <div class="skills-sidebar-group">
            <span class="skills-sidebar-category">{CATEGORY_LABELS[cat]}</span>
            <ul class="skills-sidebar-list">
              {sidebarGroups[cat].map(cmd => (
                <li>
                  <a href={`/docs/${cmd.slug}`}>
                    <span>{cmd.slug}</span>
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </aside>

    <div class="skills-main">
      <div class="docs-index">
        <header class="docs-index-header">
          <h1 class="sub-page-title">Commands</h1>
          <p class="sub-page-lede">23 commands for design fluency. One skill, six categories, from shaping a new feature to hardening it for production.</p>
        </header>

        {CATEGORY_ORDER.map(cat => (
          <section class="docs-category-section" id={`category-${cat}`}>
            <header class="docs-category-header">
              <h2 class="docs-category-title">{CATEGORY_LABELS[cat]}</h2>
              <p class="docs-category-desc">{CATEGORY_DESCRIPTIONS[cat]}</p>
            </header>
            <div class="docs-card-grid">
              {grouped[cat].map(entry => (
                <a href={`/docs/${entry.id}`} class="docs-command-card">
                  <h3 class="docs-command-name">/impeccable {entry.id}</h3>
                  <p class="docs-command-tagline">{entry.data.tagline}</p>
                </a>
              ))}
            </div>
          </section>
        ))}
      </div>
    </div>
  </div>

  <script is:inline>
    document.addEventListener('click', (e) => {
      const toggle = e.target.closest('.skills-sidebar-toggle');
      if (!toggle) return;
      const expanded = toggle.getAttribute('aria-expanded') === 'true';
      toggle.setAttribute('aria-expanded', String(!expanded));
    });
  </script>

  <style>
    .docs-index { padding: 2rem 0 4rem; }
    .docs-index-header { margin-bottom: 3rem; }
    .docs-category-section { margin-bottom: 2.5rem; }
    .docs-category-header { margin-bottom: 1rem; }
    .docs-category-title { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 0.25rem; }
    .docs-category-desc { color: var(--color-ash); font-size: 0.9375rem; margin: 0; }
    .docs-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
    .docs-command-card {
      display: block; padding: 1.25rem; border-radius: 8px;
      border: 1px solid var(--color-mist); text-decoration: none; color: inherit;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .docs-command-card:hover { border-color: var(--color-accent); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
    .docs-command-name { font-family: var(--font-mono); font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.375rem; }
    .docs-command-tagline { font-size: 0.8125rem; color: var(--color-ash); margin: 0; line-height: 1.5; }
  </style>
</Base>