---
import type { GlossarySmartNavigation } from "../lib/glossary";
import { hrefOfGlossaryEntry } from "../lib/glossary";

interface Props {
  smartNavigation?: GlossarySmartNavigation;
}

const { smartNavigation } = Astro.props;

const hasPrimary = Boolean(smartNavigation?.primaryNext);
const paths = smartNavigation?.paths ?? [];
const flows = smartNavigation?.flows ?? [];
const hasPaths = paths.length > 0;
const hasFlows = flows.length > 0;
---

{(hasPrimary || hasPaths || hasFlows) && (
  <section class="glossary-smart-nav" aria-label="Navigation guidée du glossaire">
    <div class="glossary-smart-nav__eyebrow">Explorer les prolongements</div>

    {smartNavigation?.primaryNext && (
      <div class="glossary-smart-nav__primary">
        <span class="glossary-smart-nav__label">Étape suivante</span>
        <a href={hrefOfGlossaryEntry(smartNavigation.primaryNext)}>
          {smartNavigation.primaryNext.data.term}
        </a>

        {smartNavigation.primaryReason && (
          <p>{smartNavigation.primaryReason}</p>
        )}
      </div>
    )}

    {hasFlows && (
    <div class="glossary-smart-nav__flows" aria-label="Parcours contextuels">
        <span class="glossary-smart-nav__label">Parcours contextuels</span>

        <div class="glossary-smart-nav__flow-list">
        {flows.map((flow) => (
            flow.primaryNext && (
            <a class="glossary-smart-nav__flow" href={hrefOfGlossaryEntry(flow.primaryNext)}>
                <span class="glossary-smart-nav__flow-label">{flow.label}</span>
                <strong>{flow.primaryNext.data.term}</strong>
                {flow.primaryReason && <span>{flow.primaryReason}</span>}
            </a>
            )
        ))}
        </div>
    </div>
    )}

    {hasPaths && (
      <div class="glossary-smart-nav__paths" aria-label="Parcours de lecture">
        {paths.map((path) => {
          const panelId = `smart-nav-${path.key}`;

          return (
            <div class="glossary-smart-nav__path">
              <button
                class="glossary-smart-nav__path-button"
                type="button"
                aria-expanded="false"
                aria-controls={panelId}
              >
                <span>{path.label}</span>
                <span class="glossary-smart-nav__chevron" aria-hidden="true">▾</span>
              </button>

              <ul id={panelId} class="glossary-smart-nav__path-panel" hidden>
                {path.entries.map((entry) => (
                  <li>
                    <a href={hrefOfGlossaryEntry(entry)}>{entry.data.term}</a>
                  </li>
                ))}
              </ul>
            </div>
          );
        })}
      </div>
    )}
  </section>
)}

<style>
  .glossary-smart-nav{
    margin: 14px 0 18px;
    padding: 14px;
    border: 1px solid rgba(127,127,127,0.20);
    border-radius: 18px;
    background: rgba(127,127,127,0.045);
  }

  .glossary-smart-nav__primary{
    display: grid;
    gap: 5px;
    margin-bottom: 10px;
  }

  .glossary-smart-nav__label{
    font-size: 13px;
    font-weight: 800;
    opacity: .76;
  }

  .glossary-smart-nav__primary a{
    width: fit-content;
    font-size: clamp(1.05rem, 2vw, 1.22rem);
    font-weight: 900;
    line-height: 1.18;
    text-decoration: none;
  }

  .glossary-smart-nav__primary p{
    max-width: 72ch;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    opacity: .88;
  }

  .glossary-smart-nav__paths{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    }

  .glossary-smart-nav__path{
    align-self: flex-start;
    min-width: min(180px, 100%);
    border: 1px solid rgba(127,127,127,0.18);
    border-radius: 14px;
    background: rgba(127,127,127,0.035);
    overflow: hidden;
  }

  .glossary-smart-nav__path-button{
    width: 100%;
    border: 1px solid rgba(127,127,127,0.18);
    background: rgba(127,127,127,0.06);
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.25;
    text-align: left;
    user-select: none;
    border-radius: 999px;
  }

  .glossary-smart-nav__path-button:hover{
    background: rgba(127,127,127,0.10);
  }

  .glossary-smart-nav__path-button:active{
    transform: scale(0.98);
  }

  .glossary-smart-nav__chevron{
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1;
    opacity: .72;
    transform: rotate(0deg);
    transition: transform 160ms ease, opacity 160ms ease;
  }

  .glossary-smart-nav__path-button[aria-expanded="true"] .glossary-smart-nav__chevron{
    transform: rotate(180deg);
    opacity: .96;
  }

  .glossary-smart-nav__path-panel{
    margin: 0;
    padding: 0 11px 10px 24px;
  }

  .glossary-smart-nav__path-panel[hidden]{
    display: none;
  }

  .glossary-smart-nav__path-panel li{
    margin: 5px 0;
    font-size: 13px;
    line-height: 1.32;
  }

  .glossary-smart-nav__path-panel a{
    text-decoration: none;
  }

  .glossary-smart-nav__flows{
    display: grid;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 6px;
  }
  
  .glossary-smart-nav__flow-list{
    display: grid;
    gap: 8px;
  }

  .glossary-smart-nav__flow{
    display: grid;
    gap: 3px;
    padding: 10px 11px;
    border: 1px solid rgba(127,127,127,0.18);
    border-radius: 14px;
    background: rgba(127,127,127,0.035);
    text-decoration: none;
  }

  .glossary-smart-nav__flow-label{
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .72;
  }

  .glossary-smart-nav__flow strong{
    font-size: 14px;
    line-height: 1.25;
  }

  .glossary-smart-nav__flow span:last-child{
    font-size: 13px;
    line-height: 1.35;
    opacity: .84;
  }

  .glossary-smart-nav__eyebrow{
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .08em; /* légèrement augmenté */
    text-transform: uppercase;
    opacity: .78; /* un poil plus visible */
  }

  @media (max-width: 760px){
    .glossary-smart-nav{
      margin: 12px 0 16px;
      padding: 12px;
      border-radius: 16px;
    }

    .glossary-smart-nav__paths{
      display: grid;
      grid-template-columns: 1fr;
      gap: 7px;
    }

    .glossary-smart-nav__path{
      width: 100%;
    }
  }

  @media (prefers-color-scheme: dark){
    .glossary-smart-nav{
      background: rgba(255,255,255,0.04);
    }

    .glossary-smart-nav__path{
      background: rgba(255,255,255,0.035);
    }

    .glossary-smart-nav__flow{
      background: rgba(255,255,255,0.035);
    }
  }
</style>

<script is:inline>
  (() => {
    document.querySelectorAll(".glossary-smart-nav").forEach((nav) => {
      nav
        .querySelectorAll(".glossary-smart-nav__path-button")
        .forEach((button) => {
          button.addEventListener("click", () => {
            const panelId = button.getAttribute("aria-controls");
            const panel = panelId ? document.getElementById(panelId) : null;
            if (!panel || !nav.contains(panel)) return;

            const expanded = button.getAttribute("aria-expanded") === "true";
            const nextExpanded = !expanded;

            button.setAttribute("aria-expanded", nextExpanded ? "true" : "false");
            panel.hidden = !nextExpanded;

            button
              .closest(".glossary-smart-nav__path")
              ?.classList.toggle("is-open", nextExpanded);
          });
        });
    });
  })();
</script>