---
import GlossaryLayout from "../../layouts/GlossaryLayout.astro";
import GlossaryPortalAside from "../../components/GlossaryPortalAside.astro";
import GlossaryPortalHero from "../../components/GlossaryPortalHero.astro";
import GlossaryPortalSection from "../../components/GlossaryPortalSection.astro";
import GlossaryPortalStickySync from "../../components/GlossaryPortalStickySync.astro";
import GlossaryPortalPanel from "../../components/GlossaryPortalPanel.astro";
import { getCollection } from "astro:content";
import {
  buildGlossaryBySlug,
  hrefOfGlossaryEntry,
} from "../../lib/glossary";

const entries = await getCollection("glossaire");

const collator = new Intl.Collator("fr", {
  sensitivity: "base",
  numeric: true,
});

const bySlug = buildGlossaryBySlug(entries);
const hrefOf = hrefOfGlossaryEntry;

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

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

function resolveEntries(slugs = []) {
  return slugs
    .map((slug) => bySlug.get(slug))
    .filter(Boolean);
}

function uniqueBySlug(list = []) {
  const seen = new Set();
  const out = [];

  for (const entry of list) {
    const slug = slugOf(entry);
    if (seen.has(slug)) continue;
    seen.add(slug);
    out.push(entry);
  }

  return out;
}

const sceneDepreuve = bySlug.get("scene-depreuve");
const tension = bySlug.get("tension");
const archicration = bySlug.get("archicration");
const archicratie = bySlug.get("archicratie");

const structuralEntries = sortByTerm(
  [tension, archicration, archicratie].filter(Boolean)
);

const relatedEntries = sceneDepreuve
  ? sortByTerm(
      uniqueBySlug([
        ...resolveEntries(sceneDepreuve.data.related ?? []),
        ...resolveEntries(sceneDepreuve.data.seeAlso ?? []),
        ...resolveEntries(sceneDepreuve.data.opposedTo ?? []),
      ]).filter((entry) => slugOf(entry) !== "scene-depreuve")
    )
  : [];

const paradigmEntries = sortByTerm(
  relatedEntries.filter((entry) => entry.data.kind === "paradigme")
);

const otherEntries = sortByTerm(
  relatedEntries.filter((entry) => entry.data.kind !== "paradigme")
);

const mobilizedAuthors = sceneDepreuve?.data?.mobilizedAuthors ?? [];
const comparisonTraditions = sceneDepreuve?.data?.comparisonTraditions ?? [];

const structuralCount = structuralEntries.length;
const constellationCount = relatedEntries.length;
const otherCount = otherEntries.length;
const paradigmCount = paradigmEntries.length;

const pageItems = [
  { href: "#coeur-de-notion", label: "Cœur de notion" },
  ...(structuralEntries.length > 0
    ? [{ href: "#articulations-essentielles", label: "Articulations essentielles" }]
    : []),
  ...(relatedEntries.length > 0
    ? [{ href: "#constellation-theorique", label: "Constellation théorique" }]
    : []),
  { href: "#prolonger-la-lecture", label: "Prolonger la lecture" },
];

const usefulLinks = [
  { href: "/glossaire/tension/", label: "Tension" },
  { href: "/glossaire/archicration/", label: "Archicration" },
  { href: "/glossaire/archicratie/", label: "Archicratie" },
  { href: "/glossaire/concepts-fondamentaux/", label: "Concepts fondamentaux" },
  { href: "/glossaire/paradigmes/", label: "Paradigmes et doctrines" },
];

const prolongerLinks = [
  {
    href: "/glossaire/",
    title: "Accueil du glossaire",
    text: "Revenir à la cartographie générale du système archicratique.",
  },
  {
    href: "/glossaire/concepts-fondamentaux/",
    title: "Concepts fondamentaux",
    text:
      "Repartir du noyau conceptuel minimal : arcalité, cratialité, tension, archicration, co-viabilité, archicratie.",
  },
  {
    href: "/glossaire/paradigmes/",
    title: "Paradigmes et doctrines",
    text:
      "Situer la scène archicratique dans son paysage de comparaison théorique.",
  },
  {
    href: "/glossaire/index-complet/",
    title: "Index complet",
    text:
      "Retrouver toutes les entrées du glossaire dans l’ordre alphabétique.",
  },
];
---

<GlossaryLayout
  title="Scènes archicratiques"
  version="1.0"
  stickyMode="glossary-portal"
>
  <Fragment slot="aside">
    <GlossaryPortalAside
      ariaLabel="Navigation des scènes archicratiques"
      title="Scènes archicratiques"
      meta={sceneDepreuve ? "1 notion-pivot" : "Portail en cours de constitution"}
      pageItems={pageItems}
      usefulLinks={usefulLinks}
    />
  </Fragment>

  <section class="scene-page">
    <GlossaryPortalHero
      prefix="scene"
      kicker="Parcours du glossaire"
      title="Scènes archicratiques"
      intro="Les scènes archicratiques désignent les espaces de comparution, d’exposition, de contestation et de révision par lesquels une architecture régulatrice cesse d’être purement opaque pour devenir visible, discutable et transformable."
      moreParagraphs={[
        "Dans l’économie générale du paradigme, elles sont ce qui empêche la régulation de se refermer sur elle-même. Elles ouvrent un espace où les tensions peuvent apparaître, être qualifiées, disputées et réorganisées.",
      ]}
      introMaxWidth="76ch"
      followIntroMaxWidth="72ch"
      moreMaxHeight="18rem"
    />

    <GlossaryPortalSection
      id="coeur-de-notion"
      title="Cœur de notion"
      intro="Cette page prend pour pivot la scène d’épreuve, notion centrale pour penser l’exposition publique, la mise en discussion et la révisabilité des architectures de régulation."
    >
      {sceneDepreuve ? (
        <article class="scene-focus-card">
          <div class="scene-focus-card__eyebrow">Entrée principale</div>
          <h3>
            <a href={hrefOf(sceneDepreuve)}>{sceneDepreuve.data.term}</a>
          </h3>
          <p class="scene-focus-card__def">{sceneDepreuve.data.definitionShort}</p>

          {(mobilizedAuthors.length > 0 || comparisonTraditions.length > 0) && (
            <div class="scene-focus-card__meta">
              {mobilizedAuthors.length > 0 && (
                <p>
                  <strong>Auteurs mobilisés :</strong> {mobilizedAuthors.join(" / ")}
                </p>
              )}

              {comparisonTraditions.length > 0 && (
                <p>
                  <strong>Traditions de comparaison :</strong> {comparisonTraditions.join(" / ")}
                </p>
              )}
            </div>
          )}
        </article>
      ) : (
        <p class="scene-empty">
          La fiche principale n’est pas encore disponible dans la collection.
        </p>
      )}
    </GlossaryPortalSection>

    {structuralEntries.length > 0 && (
      <GlossaryPortalSection
        id="articulations-essentielles"
        title="Articulations essentielles"
        count={`${structuralCount} notion${structuralCount > 1 ? "s" : ""}`}
        intro="La scène n’est pas une notion isolée. Elle s’articule au phénomène de tension, à l’opérateur d’archicration et au méta-régime d’archicratie."
      >
        <div class="scene-cards">
          {structuralEntries.map((entry) => (
            <a class="scene-card" href={hrefOf(entry)}>
              <strong>{entry.data.term}</strong>
              <span>{entry.data.definitionShort}</span>

              {(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
                <small>
                  Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
                </small>
              )}
            </a>
          ))}
        </div>
      </GlossaryPortalSection>
    )}

    {relatedEntries.length > 0 && (
      <GlossaryPortalSection
        id="constellation-theorique"
        title="Constellation théorique"
        count={`${constellationCount} entrée${constellationCount > 1 ? "s" : ""}`}
        intro="Cette notion dialogue avec plusieurs diagnostics et paradigmes qui permettent d’en préciser la portée politique, symbolique et régulatrice."
      >
        {otherEntries.length > 0 && (
          <GlossaryPortalPanel
            id="notions-et-diagnostics-lies"
            title="Notions et diagnostics liés"
            count={`${otherCount} entrée${otherCount > 1 ? "s" : ""}`}
            intro="Ces entrées prolongent la scène d’épreuve vers des questions d’instituabilité, de fermeture, d’empêchement ou de visibilité de la régulation."
            surface={true}
            className="scene-block"
          >
            <div class="scene-cards">
              {otherEntries.map((entry) => (
                <a class="scene-card" href={hrefOf(entry)}>
                  <strong>{entry.data.term}</strong>
                  <span>{entry.data.definitionShort}</span>

                  {(entry.data.comparisonTraditions?.length ?? 0) > 0 && (
                    <small>
                      Traditions de comparaison : {entry.data.comparisonTraditions.join(" / ")}
                    </small>
                  )}
                </a>
              ))}
            </div>
          </GlossaryPortalPanel>
        )}

        {paradigmEntries.length > 0 && (
          <GlossaryPortalPanel
            id="paradigmes-mobilises"
            title="Paradigmes mobilisés"
            count={`${paradigmCount} paradigme${paradigmCount > 1 ? "s" : ""}`}
            intro="Ces paradigmes servent de points d’appui comparatifs pour mieux comprendre ce qui, dans la scène archicratique, relève de la conflictualité, de l’apparition publique ou de la mise en litige de la régulation."
            surface={true}
            className="scene-block"
          >
            <div class="scene-cards">
              {paradigmEntries.map((entry) => (
                <a class="scene-card" href={hrefOf(entry)}>
                  <strong>{entry.data.term}</strong>
                  <span>{entry.data.definitionShort}</span>

                  {(entry.data.mobilizedAuthors?.length ?? 0) > 0 && (
                    <small>
                      Auteurs mobilisés : {entry.data.mobilizedAuthors.join(" / ")}
                    </small>
                  )}
                </a>
              ))}
            </div>
          </GlossaryPortalPanel>
        )}
      </GlossaryPortalSection>
    )}

    <GlossaryPortalSection
      id="prolonger-la-lecture"
      title="Prolonger la lecture"
      intro="Cette page a vocation à devenir un portail intermédiaire entre l’accueil du glossaire et les fiches détaillées. Elle prolonge la lecture vers les autres parcours déjà stabilisés du système archicratique."
    >
      <div class="scene-cards">
        {prolongerLinks.map((item) => (
          <a class="scene-card" href={item.href}>
            <strong>{item.title}</strong>
            <span>{item.text}</span>
          </a>
        ))}
      </div>
    </GlossaryPortalSection>

    <GlossaryPortalSection
      id="portee-densemble"
      title="Portée d’ensemble"
      final={true}
    >
      <p>
        Les scènes archicratiques rappellent que la régulation ne vaut jamais
        seulement par son efficacité interne. Elle doit aussi pouvoir paraître,
        être soumise à l’épreuve, être discutée et éventuellement être révisée.
        La <a href="/glossaire/scene-depreuve/">scène d’épreuve</a> marque ainsi
        le point où l’<a href="/glossaire/archicration/">archicration</a> cesse
        d’être pure opération pour devenir enjeu politique, symbolique et
        collectif.
      </p>
    </GlossaryPortalSection>
  </section>

  <GlossaryPortalStickySync
    heroMoreId="scene-hero-more"
    heroToggleId="scene-hero-toggle"
  />
</GlossaryLayout>

<style>
  .scene-page{
    padding: 8px 0 24px;
  }

  .scene-focus-card{
    margin-top: 14px;
    padding: 18px 20px;
    border: 1px solid rgba(127,127,127,0.22);
    border-radius: 18px;
    background: rgba(127,127,127,0.05);
  }

  .scene-focus-card__eyebrow{
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .72;
  }

  .scene-focus-card h3{
    margin: 0 0 10px;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.15;
  }

  .scene-focus-card h3 a{
    text-decoration: none;
  }

  .scene-focus-card__def{
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    opacity: .95;
  }

  .scene-focus-card__meta{
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(127,127,127,0.18);
  }

  .scene-focus-card__meta p{
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    opacity: .9;
  }

  .scene-focus-card__meta p + p{
    margin-top: 6px;
  }

  .scene-block{
    margin-top: 18px;
  }

  .scene-cards{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 14px;
  }

  .scene-card{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid rgba(127,127,127,0.22);
    border-radius: 16px;
    background: rgba(127,127,127,0.05);
    text-decoration: none;
    transition:
      transform 120ms ease,
      background 120ms ease,
      border-color 120ms ease;
  }

  .scene-card:hover{
    transform: translateY(-1px);
    background: rgba(127,127,127,0.08);
    border-color: rgba(0,217,255,0.16);
    text-decoration: none;
  }

  .scene-card strong{
    font-size: 15px;
    line-height: 1.3;
  }

  .scene-card span{
    font-size: 14px;
    line-height: 1.45;
    opacity: .92;
  }

  .scene-card small{
    font-size: 12px;
    line-height: 1.4;
    opacity: .72;
  }

  .scene-empty{
    margin: 0;
    font-style: italic;
    opacity: .82;
  }

  @media (prefers-color-scheme: dark){
    .scene-focus-card,
    .scene-card{
      background: rgba(255,255,255,0.04);
    }

    .scene-card:hover{
      background: rgba(255,255,255,0.07);
    }
  }
</style>