---
import Base from '../../layouts/Base.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
import { getCollection } from 'astro:content';
import SECTIONS from '../../../../config/sections.json';

const allEntries = await getCollection('entries');

const bySection: Record<string, typeof allEntries> = Object.fromEntries(SECTIONS.map(s => [s.slug, []]));
const uncategorized: typeof allEntries = [];
const docEntries = allEntries
  .filter(e => e.id.startsWith('_docs/'))
  .sort((a, b) => a.data.title.localeCompare(b.data.title));

for (const entry of allEntries) {
  if (entry.id.startsWith('_')) continue;
  const sec = SECTIONS.find(s => entry.id.startsWith(s.slug + '/'));
  if (sec) bySection[sec.slug].push(entry);
  else uncategorized.push(entry);
}

for (const key of Object.keys(bySection)) {
  bySection[key].sort((a, b) => a.data.title.localeCompare(b.data.title));
}
---

<Base title={`Pagine — ${SITE_TITLE}`} description={SITE_DESCRIPTION}>
  <div class="max-w-3xl mx-auto">
    <div class="flex items-center justify-between mb-8">
      <h1 class="text-3xl font-bold" style="color: var(--text-primary)">Pagine</h1>
      <button
        id="new-page-btn"
        class="text-xs text-zinc-400 hover:text-white transition-colors px-2 py-1 rounded border border-zinc-700 hover:border-zinc-500"
      >+ Nuova pagina</button>
    </div>

    {SECTIONS.map(sec => bySection[sec.slug].length > 0 && (
      <section class="mb-8">
        <h2 class="text-lg font-semibold mb-1" style="color: var(--text-2)">{sec.label}</h2>
        <p class="text-xs mb-3" style="color: var(--text-5)">{sec.desc}</p>
        <ul class="space-y-2">
          {bySection[sec.slug].map(entry => (
            <li>
              <a
                href={`/entries/${entry.id}/`}
                class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-zinc-800 transition-colors group"
                style="background: var(--bg-card)"
              >
                <span class="text-sm font-medium group-hover:text-white transition-colors" style="color: var(--text-2)">
                  {entry.data.title}
                </span>
              </a>
            </li>
          ))}
        </ul>
      </section>
    ))}

    {uncategorized.length > 0 && (
      <section class="mb-8">
        <h2 class="text-lg font-semibold mb-3" style="color: var(--text-2)">Senza categoria</h2>
        <ul class="space-y-2">
          {uncategorized.map(entry => (
            <li>
              <a
                href={`/entries/${entry.id}/`}
                class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-zinc-800 transition-colors group"
                style="background: var(--bg-card)"
              >
                <span class="text-sm font-medium group-hover:text-white transition-colors" style="color: var(--text-2)">
                  {entry.data.title}
                </span>
              </a>
            </li>
          ))}
        </ul>
      </section>
    )}

    {docEntries.length > 0 && (
      <section>
        <h2 class="text-lg font-semibold mb-1" style="color: var(--text-2)">Documentazione</h2>
        <p class="text-xs mb-3" style="color: var(--text-5)">Come funziona questo wiki</p>
        <ul class="space-y-2">
          {docEntries.map(entry => (
            <li>
              <a
                href={`/entries/${entry.id}/`}
                class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-zinc-800 transition-colors group"
                style="background: var(--bg-card)"
              >
                <span class="text-sm font-medium group-hover:text-white transition-colors" style="color: var(--text-4)">
                  {entry.data.title}
                </span>
              </a>
            </li>
          ))}
        </ul>
      </section>
    )}
  </div>
</Base>

<script>
  document.getElementById('new-page-btn')?.addEventListener('click', () => {
    window.dispatchEvent(new CustomEvent('open-editor', { detail: {} }));
  });
</script>
