---
import { getCollection } from "astro:content";
import Layout from "@/layouts/Layout.astro";
import Header from "@/components/Header.astro";
import Footer from "@/components/Footer.astro";
import Socials from "@/components/Socials.astro";
import LinkButton from "@/components/LinkButton.astro";
import Card from "@/components/Card.astro";
import getSortedPosts from "@/utils/getSortedPosts";
import IconRss from "@/assets/icons/IconRss.svg";
import IconArrowRight from "@/assets/icons/IconArrowRight.svg";
import { SITE } from "@/config";
import { SOCIALS } from "@/constants";

const events = await getCollection("events");
const workshops = await getCollection("workshops");
const news = await getCollection("news");
const technical = await getCollection("technical");

const sortedEvents = getSortedPosts(events);
const sortedWorkshops = getSortedPosts(workshops);
const sortedNews = getSortedPosts(news);
const sortedTechnical = getSortedPosts(technical);

const featuredEvents = sortedEvents.filter(({ data }) => data.featured);
const featuredWorkshops = sortedWorkshops.filter(({ data }) => data.featured);
const featuredNews = sortedNews.filter(({ data }) => data.featured);
const featuredTechnical = sortedTechnical.filter(({ data }) => data.featured);

// Exclure les featured des recent pour éviter les doublons
const recentEvents = sortedEvents
  .filter(event => !featuredEvents.find(f => f.id === event.id))
  .slice(0, SITE.postPerIndex);
const recentWorkshops = sortedWorkshops
  .filter(workshop => !featuredWorkshops.find(f => f.id === workshop.id))
  .slice(0, SITE.postPerIndex);
const recentNews = sortedNews
  .filter(newsItem => !featuredNews.find(f => f.id === newsItem.id))
  .slice(0, SITE.postPerIndex);
const recentTechnical = sortedTechnical
  .filter(tech => !featuredTechnical.find(f => f.id === tech.id))
  .slice(0, SITE.postPerIndex);
---

<Layout>
  <Header />
  <main id="main-content" data-layout="index" class="app-layout">
    <section id="hero" class:list={["pt-8 pb-6", "border-b border-border"]}>
      <h1 class="my-4 inline-block text-4xl font-bold sm:my-8 sm:text-5xl">
        Welcome to HEC IA
      </h1>
      <a
        target="_blank"
        href="/rss.xml"
        class="inline-block"
        aria-label="rss feed"
        title="RSS Feed"
      >
        <IconRss
          width={20}
          height={20}
          class="scale-125 stroke-accent stroke-3 rtl:-rotate-90"
        />
        <span class="sr-only">RSS Feed</span>
      </a>

      <p>
        At HEC IA we make AI and technology more accessible to tomorrow's
        managers. Our goal, make people on the campus able to leverage AI to its
        full potential.
      </p>
      <p class="mt-2">
        Explore our events, workshops, latest news, and technical deep dives to
        stay up-to-date with the latest in AI and in the tech world.
      </p>
      {
        // only display if at least one social link is enabled
        SOCIALS.length > 0 && (
          <div class="mt-4 flex max-sm:flex-col sm:items-center">
            <div class="me-2 mb-1 whitespace-nowrap sm:mb-0">Social Links:</div>
            <Socials />
          </div>
        )
      }
    </section>

    {
      (featuredEvents.length > 0 || recentEvents.length > 0) && (
        <section
          id="events"
          class:list={["pt-12 pb-6", "border-b border-border"]}
        >
          <h2 class="text-2xl font-semibold tracking-wide">Events</h2>
          <ul>
            {featuredEvents.map(data => (
              <Card variant="h3" {...data} />
            ))}
            {recentEvents
              .slice(0, SITE.postPerIndex - featuredEvents.length)
              .map(data => (
                <Card variant="h3" {...data} />
              ))}
          </ul>
          <div class="my-4 text-center">
            <LinkButton href="/events/1">
              All Events
              <IconArrowRight class="inline-block rtl:-rotate-180" />
            </LinkButton>
          </div>
        </section>
      )
    }

    {
      (featuredWorkshops.length > 0 || recentWorkshops.length > 0) && (
        <section
          id="workshops"
          class:list={["pt-12 pb-6", "border-b border-border"]}
        >
          <h2 class="text-2xl font-semibold tracking-wide">Workshops</h2>
          <ul>
            {featuredWorkshops.map(data => (
              <Card variant="h3" {...data} />
            ))}
            {recentWorkshops
              .slice(0, SITE.postPerIndex - featuredWorkshops.length)
              .map(data => (
                <Card variant="h3" {...data} />
              ))}
          </ul>
          <div class="my-4 text-center">
            <LinkButton href="/workshops/1">
              All Workshops
              <IconArrowRight class="inline-block rtl:-rotate-180" />
            </LinkButton>
          </div>
        </section>
      )
    }

    {
      (featuredNews.length > 0 || recentNews.length > 0) && (
        <section
          id="news"
          class:list={["pt-12 pb-6", "border-b border-border"]}
        >
          <h2 class="text-2xl font-semibold tracking-wide">Latest News</h2>
          <ul>
            {featuredNews.map(data => (
              <Card variant="h3" {...data} />
            ))}
            {recentNews
              .slice(0, SITE.postPerIndex - featuredNews.length)
              .map(data => (
                <Card variant="h3" {...data} />
              ))}
          </ul>
          <div class="my-4 text-center">
            <LinkButton href="/news/1">
              All News
              <IconArrowRight class="inline-block rtl:-rotate-180" />
            </LinkButton>
          </div>
        </section>
      )
    }

    {
      (featuredTechnical.length > 0 || recentTechnical.length > 0) && (
        <section id="technical" class="pt-12 pb-6">
          <h2 class="text-2xl font-semibold tracking-wide">
            Technical Deep Dives
          </h2>
          <ul>
            {featuredTechnical.map(data => (
              <Card variant="h3" {...data} />
            ))}
            {recentTechnical
              .slice(0, SITE.postPerIndex - featuredTechnical.length)
              .map(data => (
                <Card variant="h3" {...data} />
              ))}
          </ul>
          <div class="my-4 text-center">
            <LinkButton href="/technical/1">
              All Technical Articles
              <IconArrowRight class="inline-block rtl:-rotate-180" />
            </LinkButton>
          </div>
        </section>
      )
    }
  </main>
  <Footer />
</Layout>

<script>
  document.addEventListener("astro:page-load", () => {
    const indexLayout = (document.querySelector("#main-content") as HTMLElement)
      ?.dataset?.layout;
    if (indexLayout) {
      sessionStorage.setItem("backUrl", "/");
    }
  });
</script>
