---
import { payload } from "src/shared/payload/payload-sdk";
import { groupBy } from "src/utils/array";
import TimelineYear from "./_components/TimelineYear.astro";
import AppEmptyLayout from "components/AppLayout/AppEmptyLayout.astro";
import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
import Card from "components/Card.astro";
import { getI18n } from "src/i18n/i18n";
import AppLayoutBackgroundImg from "components/AppLayout/components/AppLayoutBackgroundImg.astro";
import { cache } from "src/utils/cachedPayload";
import type { WordingKey } from "src/i18n/wordings-keys";
import AppLayoutDescription from "components/AppLayout/components/AppLayoutDescription.astro";

const events = await payload.getChronologyEvents();
const groupedEvents = groupBy(events, (event) => event.date.year);
const { getLocalizedUrl, t, formatTimelineDate } = await getI18n(Astro.locals.currentLocale);
---

{/* ------------------------------------------- HTML ------------------------------------------- */}

<AppEmptyLayout>
  <AppLayoutBackgroundImg
    img={{
      url: "/img/timeline-background.webp",
      width: 2478,
      height: 4110,
    }}
  />
  <AppLayoutTitle title={t("timeline.title")} />
  <AppLayoutDescription description={t("timeline.description")} />

  <div class="card-container">
    <Card>
      <div class="card-content prose">
        <h3>{t("timeline.notes.title")}</h3>

        <p
          set:html={t("timeline.notes.content", {
            worldInside: `<a href="${getLocalizedUrl(
              "/collectibles/world-inside"
            )}">World Inside</a>`,
          })}
        />
      </div>
    </Card>

    <Card>
      <div class="card-content prose">
        <h3>{t("timeline.priorCataclysmNote.title")}</h3>

        <p
          set:html={t("timeline.priorCataclysmNote.content", {
            worldInside: `<a href="${getLocalizedUrl(
              "/collectibles/world-inside"
            )}">World Inside</a>`,
          })}
        />
      </div>
    </Card>

    <Card>
      <div class="card-content prose jump-card">
        <h3>{t("timeline.jumpTo")}</h3>

        {
          cache.config.timeline.eras.map(({ name, startingYear, endingYear }) => (
            <p
              set:html={t(name as WordingKey, {
                start: `<a href="#${startingYear}">${formatTimelineDate({ year: startingYear })}</a>`,
                end: `<a href="#${endingYear}">${formatTimelineDate({ year: endingYear })}</a>`,
              })}
            />
          ))
        }
      </div>
    </Card>
  </div>
  {groupedEvents.map(({ key, values }) => <TimelineYear year={key} events={values} />)}
</AppEmptyLayout>

{/* ------------------------------------------- CSS -------------------------------------------- */}

<style>
  .card-content {
    padding: clamp(1em, 4vw, 3em);
    max-width: 35rem;

    &.jump-card > p {
      margin-block: 0.2em;
    }
  }

  .card-container {
    margin-top: 2em;
    margin-bottom: 4em;
    display: flex;
    gap: 2em;
    flex-wrap: wrap;
  }
</style>