<template>
  <div class="scolaire--page">
      <!-- ================== -->
      <!-- FILS D'ARIANE -->
      <!-- ================== -->
      <PageSection tone="" content-size="default" class="breadcrum_wp">
        <Breadcrumb/>
      </PageSection>

      <!-- ================== -->
      <!-- EN-TêTE -->
      <!-- ================== -->
      <section class="fiche_header_simple_wp">
        <div class="fiche_header_wp_gauche"></div>

        <div class="fiche_header_inner">
          <div class="fiche_header_titres">
            <div>
              <DsHeading as="h1" tone="default" textcase="uppercase" class="concert-card__title">
                {{scolaire_donnees_servies.header_titre}}
              </DsHeading>
            </div>
      
            <DsText as="p" align="justify">
                {{scolaire_donnees_servies.header_text}}
            </DsText>
          </div>
          <div class="fiche_header_img">
            <DsMedia
              v-if="scolaire_donnees_servies?.header_illustration?.[0]?.url"
              :src="scolaire_donnees_servies.header_illustration[0].url"
              :alt="scolaire_donnees_servies.header_illustration[0].alternativeText || ''"
              fit="cover"
              ratio="square"
            />

            <div v-else class="img_placeholder" aria-hidden="true" />
          </div>
          
        </div>
        <div class="fiche_header_wp_droite"></div>

      </section>

      <!-- ================== -->
      <!-- CHIFFRES -->
      <!-- ================== -->
      <PageSection tone="" content-size="default" padded_size="md" class="chiffres_wp">
          <Chiffres
            :title= "scolaire_donnees_servies?.chiffres_scolaires?.[0]?.Titre"
            :items="scolairesChiffres"
          />
      </PageSection>

      <!-- ================== -->
      <!-- AFFICHAGE DES PARTIE EN DÉCALLAGE AVEC LE CONTENU PROVENANT DE STRAPI -->
      <!-- ================== -->
      <template v-for="(t, index) in tiroirs" :key="index">
        <PageSection :content="false">
          <Decalage
            :tone="t.decalage_couleur"
            title-tone="invert"
            :position="t.decalage_sens"
            button-tone="invert"
            :ensavoirplus-target="`texte_cache_${index + 3}`"
            ensavoirplus-group="scolaires-details"
            :lien-cta="t.lien_cta"
            :text-cta="t.text_cta"
          >
            <template #title>
              {{ t.decalage_titre }}
            </template>
            <DsText as="p" tone="invert" align="justify">
              {{ t.decalage_texte }}
            </DsText>
          </Decalage>
        </PageSection>
        <PageSection
          :id="`texte_cache_${index + 3}`"
          data-ensavoirplus-group="scolaires-details"
          tone=""
          content-size="default"
          padded_size="md"
          class="decalage_ensavoirplus--hidden"
        >
          <section v-if="t.tiroir_galerie.length"  class="img-gallery_wp">
            <div class="img-gallery">
              <DsMedia
                v-for="img in t.tiroir_galerie"
                :key="img.id || img.url"
                :src="img.url"
                :alt="img.alternativeText"
              />
            </div>
          </section>
          <SectionContent class="description_wp fiche_description">
            <StrapiBlocksConvert :blocks="t.tiroir_description" />
          </SectionContent>
          <section v-if="t.tiroir_videos.length" class="youtube_wp">
            <div class="youtube-list">
              <div v-for="v in t.tiroir_videos" :key="v.id" class="youtube-item">
                <iframe
                  :src="v.lien_youtube"
                  title="Vidéo YouTube"
                  loading="lazy"
                  referrerpolicy="strict-origin-when-cross-origin"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  allowfullscreen
                />
              </div>
            </div>
          </section>
        </PageSection>
      </template>





<!-- RESSOURCES PEDAGOGIQUES -->
      <section>
        <PageSection :content="false">
          <Decalage
            tone="brand"
            title-tone="invert"
            position="left"
            button-tone="invert"
            :ensavoirplus-target="ressourcesSectionId"
            ensavoirplus-group="ressources"
          >
            <template #title>
              RESSOURCES PÉDAGOGIQUES
            </template>
            <DsText as="p" tone="invert" align="justify">
             Accompagner la préparation des activités musicales et la découverte des concerts.
            </DsText>
            <DsText as="p" tone="invert" align="justify">
             Des outils pour tous les âges de se familiariser avec l'Orchestre, les instruments, la musique symphonique et les compositeurs.
            </DsText>
          </Decalage>
        </PageSection>
        <PageSection
          :id="ressourcesSectionId"
          data-ensavoirplus-group="ressources"
          tone=""
          content-size="default"
          padded_size="md"
          class="decalage_ensavoirplus--hidden"
        >
          <section class="ressources-pedagogiques__list">
            <RessourcesCard
              v-for="ressource in ressourcesPedagogiques"
              :key="ressource.id"
              :title="ressource.title"
              :description="ressource.description"
              :img-src="ressource.imgSrc"
              :img-alt="ressource.imgAlt"
              :badge="ressource.badge"
              :file-label="ressource.fileLabel"
              :file-size="ressource.fileSize"
              :file-url="ressource.fileUrl"
              :file-name="ressource.fileName"
              :link-type="ressource.linkType"
              :actions="ressource.actions"
            />
          </section>
        </PageSection>
      </section>


      
      <!-- ================== -->
      <!-- CONTACT -->
      <!-- ================== -->

      <PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
          <ContactSpecifique
            titre="Contacter le service des actions culturelles"
            nom="Vanessa Gasztowtt"
            poste="Responsable de l’action éducative et culturelle
et de la programmation jeune public"
            numero=""
            mail="vanessa.gasztowtt@orchestre-ile.com"
            adresse=""
          />
      </PageSection>






  </div>




</template>

<script setup>
  import DsHeading from '@root/design-system/primitives/DsHeading.vue'
  import DsText from '@root/design-system/primitives/DsText.vue'
  import DsMedia from '@root/design-system/primitives/DsMedia.vue'
  import { computed } from 'vue'

  // ======================================
  // RÉCUPÉRATION DES DONNÉES DANS STRAPI
  // ======================================

  const endpoint = "/api/__strapi__/scolaires"
  const populate = {
      header_illustration: true,
      chiffres_scolaires: {chiffres: true},
      tiroirs_scolaires: {
        decalage_parametres: true,
        tiroir_galerie: true,
        tiroir_videos: true,
      },
  }

  const { items: scolaires, pending, error } = useStrapi(
    endpoint,
    {
      locale: "fr-FR",
      populate,
      limit: 1,
    }
  )

  const { items: ressourcesPedagogiquesItems } = useStrapi(
    "/api/__strapi__/ressources-pedagogiques",
    {
      locale: "fr-FR",
      populate: {
        illustration_ressource: true,
        document_ressource: true,
      },
      sort: "ordre_ressource:asc",
      fetchAll: true,
    }
  )

  // ======================================
  // PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
  // ======================================
  const scolaire_donnees_servies = computed(() => scolaires.value?.[0] || {})
  const ressourcesSectionId = "texte_cache_ressources"
  const ressourcesPedagogiques = computed(() =>
    (ressourcesPedagogiquesItems.value || []).map((ressource) => {
      const document = ressource.document_ressource
      const webUrl = ressource.web_ressource || ""
      const actions = [
        document?.url
          ? {
              id: "pdf",
              type: "file",
              label: "Télécharger le document (PDF)",
              size: formatFileSize(document.size),
              url: document.url,
              fileName: document.name || "",
            }
          : null,
        webUrl
          ? {
              id: "web",
              type: "web",
              label: "Ouvrir la ressource web",
              url: webUrl,
            }
          : null,
      ].filter(Boolean)

      return {
        id: ressource.documentId || ressource.id,
        title: ressource.titre_ressource,
        description: ressource.description_ressource,
        imgSrc: ressource.illustration_ressource?.url || "",
        imgAlt:
          ressource.illustration_ressource?.alternativeText ||
          ressource.titre_ressource ||
          "Ressource pédagogique",
        badge: getResourceBadge(actions),
        actions,
      }
    })
  )

  const scolairesChiffres = computed(() =>
    (scolaires.value?.[0]?.chiffres_scolaires?.[0]?.chiffres || []).map((item) => ({
      value: item.chiffre,
      label: item.label,
    }))
  )

  const tiroirs = computed(() =>
    (scolaires.value?.[0]?.tiroirs_scolaires || []).map((tiroir_item) => ({
      decalage_titre: tiroir_item.decalage_parametres?.decalage_titre,
      decalage_texte: tiroir_item.decalage_parametres?.decalage_texte,
      decalage_sens:
        tiroir_item.decalage_parametres?.decalage_sens === "droite" ? "right" : "left",
      decalage_couleur:
        tiroir_item.decalage_parametres?.decalage_couleur === "rouge"
          ? "brand"
          : tiroir_item.decalage_parametres?.decalage_couleur === "vert clair"
            ? "brandreverse"
            : tiroir_item.decalage_parametres?.decalage_couleur === "jaune"
              ? "jaune"
              : "dark",
      lien_cta: tiroir_item.decalage_parametres?.lien_cta || "",
      text_cta: tiroir_item.decalage_parametres?.text_cta || undefined,
      tiroir_description: tiroir_item.tiroir_description,
      tiroir_galerie: (tiroir_item.tiroir_galerie || []).map((tiroir_item_img) => ({
        id: tiroir_item_img.id,
        url: tiroir_item_img.url,
        alt: tiroir_item_img.alternativeText,
      })),
      tiroir_videos: (tiroir_item.tiroir_videos || [])
        .map((tiroir_item_video) => {
          const id = getYoutubeId(tiroir_item_video?.lien_youtube)
          if (!id) return null

          return {
            id: tiroir_item_video.id || id,
            lien_youtube: `https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&iv_load_policy=3&playsinline=1`,
          }
        })
        .filter(Boolean),
    }))
  )


  function getYoutubeId(url = "") {
    try {
      const u = new URL(url)
      if (u.hostname.includes("youtu.be")) return u.pathname.slice(1)
      if (u.pathname.startsWith("/shorts/")) return u.pathname.split("/")[2]
      if (u.pathname.startsWith("/embed/")) return u.pathname.split("/")[2]
      return u.searchParams.get("v")
    } catch {
      return null
    }
  }

  function getResourceBadge(actions = []) {
    const hasPdf = actions.some((action) => action.type === "file")
    const hasWeb = actions.some((action) => action.type === "web")

    if (hasPdf && hasWeb) return "PDF + WEB"
    if (hasWeb) return "WEB"
    return "PDF"
  }

  function formatFileSize(sizeInKo) {
    const size = Number(sizeInKo)
    if (!Number.isFinite(size) || size <= 0) return ""

    if (size >= 1024) {
      return `${formatNumber(size / 1024)} Mo`
    }

    return `${formatNumber(size)} Ko`
  }

  function formatNumber(value) {
    return new Intl.NumberFormat("fr-FR", {
      maximumFractionDigits: value >= 10 ? 0 : 1,
    }).format(value)
  }

</script>

<style lang="scss">
  // =======================
  // SPÉCIFIQUE À CETTE PAGE
  // =======================
  .scolaire--page {
    .chiffres_wp {
      background-color: var(--c-background-jaune);
      margin-bottom: 50px;
    }
    .fiche_description {
      display: flex;
      justify-content: center;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
      > * {
        max-width: 640px;
        display: flex;
        flex-direction: column;
      }
    }
    .contact_spe_wp {
      background-color: var(--c-background-jaune-clair);
      margin-top: 50px;
      margin-bottom: 20px;
    }
    .ressources-pedagogiques__list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(0, 392px));
      gap: 24px;
      justify-content: center;
    }
    @media (min-width: 400px) and (max-width: 900px) {
      .ressources-pedagogiques__list {
        grid-template-columns: repeat(2, minmax(0, 392px));
      }
    }
    @media (max-width: 399px) {
      .ressources-pedagogiques__list {
        grid-template-columns: minmax(0, 392px);
      }
    }
    .strapi-blocks {
      h2 {
        color: var(--c-bleu);
      }
    }
  }

  /* ============================ */
  /* GALERIES */
  /* ============================ */

</style>
