---
import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
import GlossaryAside from "../../components/GlossaryAside.astro";
import { getCollection, render } from "astro:content";

export async function getStaticPaths() {
  const entries = await getCollection("glossaire");
  const paths = [];
  const seen = new Set();

  for (const entry of entries) {
    const canonicalSlug = String(entry.id || "")
      .trim()
      .replace(/^\/+|\/+$/g, "")
      .replace(/\.(md|mdx)$/i, "")
      .toLowerCase();

    if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(canonicalSlug)) continue;

    const addPath = (rawSlug) => {
      const requestedSlug = String(rawSlug || "")
        .trim()
        .replace(/^\/+|\/+$/g, "")
        .replace(/\.(md|mdx)$/i, "")
        .toLowerCase();

      if (!requestedSlug) return;
      if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(requestedSlug)) return;
      if (seen.has(requestedSlug)) return;

      seen.add(requestedSlug);
      paths.push({
        params: { slug: requestedSlug },
        props: {
          entry,
          requestedSlug,
          canonicalSlug,
        },
      });
    };

    addPath(canonicalSlug);

    for (const alias of entry.data.urlAliases ?? []) {
      addPath(alias);
    }
  }

  return paths;
}

const { entry, requestedSlug, canonicalSlug } = Astro.props;
const allEntries = await getCollection("glossaire");
const { Content } = await render(entry);

const isAliasRoute = requestedSlug !== canonicalSlug;
const canonicalHref = `/glossaire/${canonicalSlug}/`;
---

<GlossaryLayout
  title={entry.data.title}
  version={entry.data.version}
>
  <Fragment slot="aside">
    <GlossaryAside currentEntry={entry} allEntries={allEntries} />
  </Fragment>

  {isAliasRoute && (
    <p class="glossary-legacy-note">
      Cette entrée a été renommée. L’intitulé canonique est :
      <a href={canonicalHref}>{entry.data.term}</a>.
    </p>
  )}

  <h1>{entry.data.term}</h1>
  <p><em>{entry.data.definitionShort}</em></p>
  {(entry.data.mobilizedAuthors?.length > 0 || entry.data.comparisonTraditions) && (
    <div class="glossary-entry-meta">
      {entry.data.mobilizedAuthors?.length > 0 && (
        <p>
          <strong>Auteurs mobilisés :</strong> {entry.data.mobilizedAuthors.join(" / ")}
        </p>
      )}
      {entry.data.comparisonTraditions && (
        <p>
          <strong>Traditions de comparaison :</strong> {entry.data.comparisonTraditions.join(" / ")}
        </p>
      )}
    </div>
  )}
  <Content />
</GlossaryLayout>

<style>
  .glossary-legacy-note{
    padding: 10px 12px;
    border: 1px solid rgba(127,127,127,0.22);
    border-radius: 12px;
    background: rgba(127,127,127,0.05);
    font-size: 14px;
    line-height: 1.45;
  }

    .glossary-entry-meta{
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid rgba(127,127,127,0.18);
    border-radius: 12px;
    background: rgba(127,127,127,0.04);
  }

  .glossary-entry-meta p{
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
  }

  .glossary-entry-meta p + p{
    margin-top: 6px;
  }

  @media (prefers-color-scheme: dark){
    .glossary-entry-meta{
      background: rgba(255,255,255,0.03);
    }
  }

  @media (prefers-color-scheme: dark){
    .glossary-legacy-note{
      background: rgba(255,255,255,0.04);
    }
  }
</style>