---
import { getCollection } from 'astro:content';
import Layout from '../../_components/sub-page-layout.astro';
import type { HeaderProps } from '../../_components/header';
import { getCraftRecords } from '../../_lib/catalog';
import {
  PREFIXED_LOCALES,
  getCopy,
  isLocale,
  localizeCategory,
  type Locale,
} from '../../_lib/i18n';
import '../../globals.css';
import '../../sub-pages.css';

// Localized routing only generates the `craft` and `blog` listing pages.
// Detail pages (individual posts, craft items, …) stay at canonical
// English URLs to keep the static build bounded; the localized chrome
// links straight to those canonical detail URLs.
export async function getStaticPaths() {
  // The skills / systems / templates catalogs moved under `/plugins/*`.
  // Their old localized listings are now 301'd by `public/_redirects`,
  // so this catch-all only renders the localized `craft` and `blog`
  // listings. Plugins itself is generated via short-code wrappers under
  // `app/pages/[locale]/plugins/`, so it does NOT participate here.
  const paths = ['craft', 'blog'];

  return PREFIXED_LOCALES.flatMap((locale) =>
    paths.map((path) => ({
      params: { locale, path },
    })),
  );
}

const localeParam = Astro.params.locale;
const locale: Locale = isLocale(localeParam) ? localeParam : 'en';
const copy = getCopy(locale);
const pathParam = Astro.params.path ?? '';
const segments = pathParam.split('/').filter(Boolean);

const [craft, posts] = await Promise.all([
  getCraftRecords(),
  getCollection('blog'),
]);
// All cross-locale subpage links resolve to canonical (English) URLs.
const href = (path: string) => path;
const titleSuffix = 'Open Design';
const routeRoot = segments[0] ?? '';

const sortedPosts = posts.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());

const pageTitle = routeRoot === 'craft'
  ? `${copy.craftTitle} — ${craft.length} | ${titleSuffix}`
  : `${copy.blog} — ${titleSuffix}`;

const pageDescription = `Open Design ${routeRoot || 'landing'} page.`;
---

<Layout title={pageTitle} description={pageDescription} active={routeRoot as HeaderProps['active']}>
    {routeRoot === 'blog' && (
      <>
        <header class='catalog-head'>
          <span class='label'>{copy.blog}</span>
          <h1 class='display'>{copy.blog}<span class='dot'>.</span></h1>
          <p class='lead'>Notes to help you understand, explore, and build with Open Design.</p>
        </header>
        <section class='catalog-grid'>
          <ol>
            {sortedPosts.map((post, index) => (
              <li class='catalog-row'>
                <a href={href(`/blog/${post.id}/`)}>
                  <span class='row-index'>{String(index + 1).padStart(2, '0')}</span>
                  <span class='row-body'>
                    <span class='row-name'>{post.data.title}</span>
                    <span class='row-desc'>{post.data.summary}</span>
                  </span>
                  <span class='meta-tag'>{localizeCategory(post.data.category, locale)}</span>
                </a>
              </li>
            ))}
          </ol>
        </section>
      </>
    )}

    {routeRoot === 'craft' && (
      <>
        <header class='catalog-head'><span class='label'>{copy.catalog} · Nº 03</span><h1 class='display'><em>{copy.craftTitle}</em> — {craft.length} rendering principles<span class='dot'>.</span></h1><p class='lead'>Quality rules for accessibility, motion, color, type, and state coverage.</p></header>
        <section class='catalog-grid'><ol>{craft.map((item, index) => <li class='catalog-row'><a href={href(`/craft/${item.slug}/`)}><span class='row-index'>{String(index + 1).padStart(2, '0')}</span><span class='row-body'><span class='row-name'>{item.name}</span><span class='row-desc'>{item.summary}</span></span></a></li>)}</ol></section>
      </>
    )}

  </Layout>