---
const {
  currentEntry,
  allEntries = [],
} = Astro.props;

const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
const hrefOf = (entry) => `/glossaire/${slugOf(entry)}/`;

const collator = new Intl.Collator("fr", { sensitivity: "base", numeric: true });
const bySlug = new Map(allEntries.map((entry) => [slugOf(entry), entry]));
const currentSlug = slugOf(currentEntry);

const fondamentauxWanted = [
  "archicratie",
  "tension",
  "arcalite",
  "cratialite",
  "archicration",
  "co-viabilite",
];

const fondamentaux = fondamentauxWanted
  .map((slug) => bySlug.get(slug))
  .filter(Boolean);

function resolveList(slugs = []) {
  return slugs
    .map((slug) => bySlug.get(String(slug || "").trim()))
    .filter(Boolean);
}

function uniqueBySlug(entries) {
  const seen = new Set();
  const out = [];
  for (const entry of entries) {
    const slug = slugOf(entry);
    if (seen.has(slug)) continue;
    seen.add(slug);
    out.push(entry);
  }
  return out;
}

function sortByTerm(entries = []) {
  return [...entries].sort((a, b) => collator.compare(a.data.term, b.data.term));
}

function familyOf(entry) {
  return entry?.data?.family ?? "";
}

function kindOf(entry) {
  return entry?.data?.kind ?? "";
}

const relatedEntries = sortByTerm(
  uniqueBySlug(resolveList(currentEntry.data.related ?? []))
);

const opposedEntries = sortByTerm(
  uniqueBySlug(resolveList(currentEntry.data.opposedTo ?? []))
);

const seeAlsoEntries = sortByTerm(
  uniqueBySlug(resolveList(currentEntry.data.seeAlso ?? []))
);

const familyLabels = {
  "concept-fondamental": "Concept fondamental",
  scene: "Scène",
  dynamique: "Dynamique",
  pathologie: "Pathologie",
  topologie: "Topologie",
  "meta-regime": "Méta-régime",
  paradigme: "Paradigme",
  doctrine: "Doctrine",
  verbe: "Verbe",
  "dispositif-ia": "Dispositif IA",
  "tension-irreductible": "Tension irréductible",
};

const kindLabels = {
  concept: "Concept",
  diagnostic: "Diagnostic",
  topologie: "Topologie",
  verbe: "Verbe",
  paradigme: "Paradigme",
  doctrine: "Doctrine",
};

const domainLabels = {
  transversal: "Transversal",
  theorie: "Théorie",
  "cas-ia": "Cas IA",
};

const levelLabels = {
  fondamental: "Fondamental",
  intermediaire: "Intermédiaire",
  avance: "Avancé",
};

const currentFamily = familyOf(currentEntry);
const displayFamily =
  familyLabels[currentFamily] ??
  kindLabels[currentEntry.data.kind] ??
  "Fiche";

const displayDomain =
  domainLabels[currentEntry.data.domain] ??
  currentEntry.data.domain;

const displayLevel =
  levelLabels[currentEntry.data.level] ??
  currentEntry.data.level;

function entriesOfSameFamily(entry) {
  const family = familyOf(entry);

  if (!family) return [];

  if (family === "concept-fondamental") {
    return fondamentaux;
  }

  return sortByTerm(
    allEntries.filter((item) => familyOf(item) === family)
  );
}

const sameFamilyEntries = entriesOfSameFamily(currentEntry);

const familySectionTitles = {
  "concept-fondamental": "Noyau archicratique",
  scene: "Scènes archicratiques",
  dynamique: "Dynamiques archicratiques",
  pathologie: "Pathologies archicratiques",
  topologie: "Topologies voisines",
  "meta-regime": "Méta-régimes archicratiques",
  paradigme: "Paradigmes voisins",
  doctrine: "Doctrines fondatrices",
  verbe: "Verbes de la scène",
  "dispositif-ia": "Dispositifs IA",
  "tension-irreductible": "Tensions irréductibles",
};

const sameFamilyTitle =
  familySectionTitles[currentFamily] ?? "Même famille";

function isTheoryEntry(entry) {
  const family = familyOf(entry);
  const kind = kindOf(entry);

  return (
    family === "paradigme" ||
    family === "doctrine" ||
    kind === "paradigme" ||
    kind === "doctrine"
  );
}

function contextualTheoryFor(entry) {
  const fromRelations = uniqueBySlug([
    ...resolveList(entry.data.related ?? []),
    ...resolveList(entry.data.seeAlso ?? []),
    ...resolveList(entry.data.opposedTo ?? []),
  ])
    .filter((item) => slugOf(item) !== currentSlug)
    .filter((item) => isTheoryEntry(item));

  if (fromRelations.length > 0) {
    return sortByTerm(fromRelations).slice(0, 6);
  }

  if (familyOf(entry) === "paradigme") {
    const preferred = [
      "gouvernementalite",
      "gouvernementalite-algorithmique",
      "cybernetique",
      "biopolitique",
      "domination-legale-rationnelle",
      "democratie-deliberative",
      "gouvernance-des-communs",
      "agencement-machinique",
      "pharmacologie-technique",
      "preemption-algorithmique",
      "dissensus-politique",
      "lieu-vide-du-pouvoir",
      "habitus-et-violence-symbolique",
      "theorie-de-la-resonance",
      "conatus-et-multitude",
      "configuration-et-interdependance",
      "technodiversite-et-cosmotechnie",
      "grammatisation-et-proletarisation-cognitive",
    ];

    return uniqueBySlug(
      preferred
        .filter((slug) => slug !== currentSlug)
        .map((slug) => bySlug.get(slug))
        .filter(Boolean)
    ).slice(0, 8);
  }

  if (familyOf(entry) === "doctrine") {
    const preferred = [
      "contractualisme-hobbesien",
      "droit-naturel-et-propriete",
      "volonte-generale",
      "decisionnisme-souverain",
    ];

    return uniqueBySlug(
      preferred
        .filter((slug) => slug !== currentSlug)
        .map((slug) => bySlug.get(slug))
        .filter(Boolean)
    ).slice(0, 6);
  }

  return [];
}

const contextualTheory = contextualTheoryFor(currentEntry);

const showNoyau = currentFamily !== "concept-fondamental" && fondamentaux.length > 0;

const showSameFamily =
  sameFamilyEntries.length > 0 && currentFamily !== "concept-fondamental";

const relationSections = [
  {
    title: "Concepts liés",
    items: relatedEntries,
  },
  {
    title: "En tension avec",
    items: opposedEntries,
  },
  {
    title: "Voir aussi",
    items: seeAlsoEntries,
  },
].filter((section) => section.items.length > 0);
---

<nav class="glossary-aside" aria-label="Navigation du glossaire">
  <div class="glossary-aside__block glossary-aside__block--intro">
    <a class="glossary-aside__back" href="/glossaire/">← Retour au glossaire</a>
    <div class="glossary-aside__title">Glossaire archicratique</div>

    <div class="glossary-aside__pills" aria-label="Repères de lecture">
      <span class="glossary-aside__pill glossary-aside__pill--family">
        {displayFamily}
      </span>
      <span class="glossary-aside__pill">{displayDomain}</span>
      <span class="glossary-aside__pill">{displayLevel}</span>
    </div>
  </div>

  <section class="glossary-aside__block">
    <h2 class="glossary-aside__heading">Portails</h2>
    <ul class="glossary-aside__list">
      <li><a href="/glossaire/">Index général</a></li>
      <li><a href="/glossaire/archicrations/">Archicrations</a></li>
      <li><a href="/glossaire/paradigmes/">Paradigmes et doctrines</a></li>
    </ul>
  </section>

  {showNoyau && (
    <section class="glossary-aside__block">
      <h2 class="glossary-aside__heading">Noyau archicratique</h2>
      <ul class="glossary-aside__list">
        {fondamentaux.map((entry) => {
          const active = slugOf(entry) === currentSlug;
          return (
            <li>
              <a
                href={hrefOf(entry)}
                aria-current={active ? "page" : undefined}
                class={active ? "is-active" : undefined}
              >
                {entry.data.term}
              </a>
            </li>
          );
        })}
      </ul>
    </section>
  )}

  {showSameFamily && (
    <section class="glossary-aside__block">
      <h2 class="glossary-aside__heading">{sameFamilyTitle}</h2>
      <ul class="glossary-aside__list">
        {sameFamilyEntries.map((entry) => {
          const active = slugOf(entry) === currentSlug;
          return (
            <li>
              <a
                href={hrefOf(entry)}
                aria-current={active ? "page" : undefined}
                class={active ? "is-active" : undefined}
              >
                {entry.data.term}
              </a>
            </li>
          );
        })}
      </ul>
    </section>
  )}

  {relationSections.length > 0 && (
    <section class="glossary-aside__block">
      <h2 class="glossary-aside__heading">Autour de cette fiche</h2>

      {relationSections.map((section) => (
        <>
          <h3 class="glossary-aside__subheading">{section.title}</h3>
          <ul class="glossary-aside__list">
            {section.items.map((entry) => (
              <li><a href={hrefOf(entry)}>{entry.data.term}</a></li>
            ))}
          </ul>
        </>
      ))}
    </section>
  )}

  {contextualTheory.length > 0 && (
    <section class="glossary-aside__block">
      <h2 class="glossary-aside__heading">Paysage théorique</h2>
      <ul class="glossary-aside__list">
        {contextualTheory.map((entry) => (
          <li><a href={hrefOf(entry)}>{entry.data.term}</a></li>
        ))}
      </ul>
    </section>
  )}
</nav>

<style>
  .glossary-aside{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .glossary-aside__block{
    border: 1px solid rgba(127,127,127,0.22);
    border-radius: 16px;
    padding: 12px;
    background: rgba(127,127,127,0.05);
  }

  .glossary-aside__block--intro{
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .glossary-aside__back{
    display: inline-block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
  }

  .glossary-aside__title{
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.25;
  }

  .glossary-aside__pills{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }

  .glossary-aside__pill{
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border: 1px solid rgba(127,127,127,0.24);
    border-radius: 999px;
    background: rgba(127,127,127,0.04);
    font-size: 12px;
    line-height: 1.3;
    opacity: .9;
  }

  .glossary-aside__pill--family{
    border-color: rgba(127,127,127,0.38);
    font-weight: 800;
  }

  .glossary-aside__heading{
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 800;
    opacity: .9;
  }

  .glossary-aside__subheading{
    margin: 12px 0 8px;
    font-size: 12px;
    font-weight: 800;
    opacity: .8;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .glossary-aside__list{
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .glossary-aside__list li{
    margin: 6px 0;
  }

  .glossary-aside__list a{
    text-decoration: none;
    font-size: 13px;
    line-height: 1.3;
  }

  .glossary-aside__list a.is-active{
    font-weight: 800;
  }

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