---
import { getCollection, getEntry, type CollectionEntry } from "astro:content";
import { Image } from "astro:assets";
import GalleryLayout from "../../layouts/GalleryLayout.astro";
import mapImage from "../../assets/images/tlotm_map.jpg";

type StoryWithPubDate = CollectionEntry<"stories"> & { data: { pubDate: Date } };

const series = await getEntry("series", "the-lost-of-the-marshes");
const stories = (await getCollection(
  "stories",
  (story) => !story.data.isDraft && story.data.pubDate && story.data.series?.id === series.id,
)) as StoryWithPubDate[];
const mainChapters = stories
  .filter((story) => story.slug.startsWith("the-lost-of-the-marshes/chapter-"))
  .sort((a, b) => a.data.pubDate.getTime() - b.data.pubDate.getTime());
const bonusChapters = stories
  .filter((story) => story.slug.startsWith("the-lost-of-the-marshes/bonus-"))
  .sort((a, b) => a.data.pubDate.getTime() - b.data.pubDate.getTime());
const mainChaptersWithSummaries = mainChapters.filter((story) => story.data.summary);
---

<GalleryLayout pageTitle={series.data.name} enablePagefind={true} class="h-feed">
  <meta
    slot="head"
    property="og:description"
    content="The Lost of the Marshes || The story of Quince, Nikili, and Suu."
  />
  <h1 class="p-name m-2 text-2xl font-semibold text-stone-800 dark:text-stone-100">{series.data.name}</h1>
  <p class="p-summary my-4">
    This is the main hub for the story of Quince, Nikili, and Suu, as well as all bonus content.
  </p>
  <section class="my-2" aria-labelledby="main-chapters">
    <h2
      id="main-chapters"
      class="p-2 text-xl font-semibold text-stone-800 dark:text-stone-100"
      data-pagefind-meta="type:series"
    >
      Main chapters
    </h2>
    <details
      class="mx-3 mb-6 mt-1 rounded-lg border border-stone-400 bg-stone-300 dark:border-stone-500 dark:bg-stone-700"
    >
      <summary class="rounded-lg bg-stone-200 px-2 py-1 dark:bg-stone-800">
        Click to reveal spoilers up to {
          mainChaptersWithSummaries[mainChaptersWithSummaries.length - 1].data.title.match(/Chapter \d+\b/)?.[0]
        }
      </summary>
      <ul class="border-t border-stone-400 px-1 dark:border-stone-500">
        {
          mainChapters
            .filter((story) => story.data.summary)
            .map((story) => (
              <li class="my-2">
                <a class="text-link underline" href={`/stories/${story.slug}`}>
                  {story.data.shortTitle || story.data.title}:
                </a>
                <span>{story.data.summary}</span>
              </li>
            ))
        }
      </ul>
    </details>
    <ul class="flex flex-wrap justify-center gap-4 text-center md:justify-normal">
      {
        mainChapters.map((story) => (
          <li class="h-entry break-inside-avoid">
            <a class="u-url text-link hover:underline focus:underline" href={`/stories/${story.slug}`}>
              {story.data.thumbnail ? (
                <Image
                  class="u-photo w-48"
                  src={story.data.thumbnail}
                  alt={`Thumbnail for ${story.data.title}`}
                  width={story.data.thumbnailWidth}
                  height={story.data.thumbnailHeight}
                />
              ) : null}
              <div class="max-w-48 text-sm">
                <span class="p-name">{story.data.title}</span>
                <br />
                <time class="dt-published italic" datetime={story.data.pubDate.toISOString().slice(0, 10)}>
                  {story.data.pubDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
                </time>
              </div>
            </a>
          </li>
        ))
      }
    </ul>
  </section>
  <section class="my-2" aria-labelledby="bonus-chapters">
    <h2 id="bonus-chapters" class="p-2 text-xl font-semibold text-stone-800 dark:text-stone-100">Bonus chapters</h2>
    <ul class="flex flex-wrap justify-center gap-4 text-center md:justify-normal">
      {
        bonusChapters.map((story) => (
          <li class="h-entry break-inside-avoid">
            <a class="u-url text-link hover:underline focus:underline" href={`/stories/${story.slug}`}>
              {story.data.thumbnail ? (
                <Image
                  class="u-photo w-48"
                  src={story.data.thumbnail}
                  alt={`Thumbnail for ${story.data.title}`}
                  width={story.data.thumbnailWidth}
                  height={story.data.thumbnailHeight}
                />
              ) : null}
              <div class="max-w-48 text-sm">
                <span class="p-name">{story.data.title}</span>
                <br />
                <time class="dt-published italic" datetime={story.data.pubDate.toISOString().slice(0, 10)}>
                  {story.data.pubDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
                </time>
              </div>
            </a>
          </li>
        ))
      }
    </ul>
  </section>
  <section class="mb-6 mt-2" aria-labelledby="map">
    <h2 id="map" class="p-2 text-xl font-semibold text-stone-800 dark:text-stone-100">Map</h2>
    <p class="mb-4 mt-2">Updated to include locations up to Chapter 11.</p>
    <Image
      class="mx-auto w-full max-w-4xl break-before-page"
      src={mapImage}
      alt="A geopolitical map for the setting of The Lost of the Marshes. The center is covered by desert plains, except for two rivers that run from north to south through the marshes: the First River to the west, and the Second River to the East. The First River starts at the Eastern Toroza Mountains, passing through the Labla state before reaching the Quuwa Marshes inside of Kaati. Along the way, it passes next to the cities of Kaati to its east and Fereh to its west, respectively. The Second River passes by Sinipin to its west. South of the Quuwa marshes and between both rivers are Logas to the east and Kuir to the west, until both rivers reach the Hamora Lake inside of the Hamora Marshes. To the north of the lake is Zugul, and out of the lake comes the southeastern-bound Last River. Halfway down the Last River is Kyorna to the northwest, before it eventually reaches the Bronze Gulf. To the east of the Kaati state is Zuit on the Szogors Mountains, including Saisa; to the south is the state of Munigad; and to the west, an empty desert called Fool's Hope."
      data-pagefind-meta="image[src],image_alt[alt]"
    />
  </section>
</GalleryLayout>
