---
import { getCollection } from "astro:content";
import { getRelativeLocaleUrl } from "astro:i18n";
import IconRss from "@/assets/icons/IconRss.svg";
import IconArrowRight from "@/assets/icons/IconArrowRight.svg";
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 Card from "@/components/Card.astro";
import LinkButton from "@/components/LinkButton.astro";
import { getSortedPosts } from "@/utils/getSortedPosts";
import { useTranslations } from "@/i18n";
import config from "@/config";

const { socials, posts: postsConfig } = config;

const locale = Astro.currentLocale ?? config.site.lang;
const t = useTranslations(locale);

const posts = await getCollection("posts");
const sortedPosts = getSortedPosts(posts);
const featuredPosts = sortedPosts.filter(({ data }) => data.featured);
const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
const homePath = getRelativeLocaleUrl(locale, "");
---

<Layout>
  <Header />
  <main
    id="main-content"
    data-layout="index"
    data-home-path={homePath}
    class="app-layout"
  >
    <section id="hero" class="border-border border-b pt-8 pb-6">
      <h1 class="my-4 inline-block text-4xl font-bold sm:my-8 sm:text-5xl">
        👋 I'm Qihan
      </h1>
      <a
        target="_blank"
        href={`${import.meta.env.BASE_URL.replace(/\/?$/, "/")}rss.xml`}
        class="inline-block"
        aria-label="RSS Feed"
        title="RSS Feed"
      >
        <IconRss
          width={20}
          height={20}
          class="stroke-accent scale-125 stroke-3 rtl:-rotate-90"
        />
        <span class="sr-only">RSS Feed</span>
      </a>

      <p>
        最慢的步伐不是跬步，而是徘徊；最快的脚步不是冲刺，而是坚持。
      </p>

      {
        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">
              {t.home.socialLinks}:
            </div>
            <Socials />
          </div>
        )
      }
    </section>

    {
      featuredPosts.length > 0 && (
        <section
          id="featured"
          class:list={[
            "pt-12 pb-6",
            { "border-border border-b": recentPosts.length > 0 },
          ]}
        >
          <h2 class="text-2xl font-semibold tracking-wide">
            {t.home.featured}
          </h2>
          <ul>
            {featuredPosts.map(data => (
              <Card variant="h3" {...data} />
            ))}
          </ul>
        </section>
      )
    }

    {
      recentPosts.length > 0 && (
        <section id="recent-posts" class="pt-12 pb-6">
          <h2 class="text-2xl font-semibold tracking-wide">
            {t.home.recentPosts}
          </h2>
          <ul>
            {recentPosts.slice(0, postsConfig.perIndex).map(data => (
              <Card variant="h3" {...data} />
            ))}
          </ul>
        </section>
      )
    }

    <div class="my-8 text-center">
      <LinkButton href={getRelativeLocaleUrl(locale, "posts")}>
        {t.home.allPosts}
        <IconArrowRight class="inline-block rtl:-rotate-180" />
      </LinkButton>
    </div>
  </main>
  <Footer />
</Layout>

<script>
  document.addEventListener("astro:page-load", () => {
    const indexLayout = (document.querySelector("#main-content") as HTMLElement)
      ?.dataset;
    const baseRoot = import.meta.env.BASE_URL.replace(/\/?$/, "/");
    if (indexLayout?.layout) {
      sessionStorage.setItem("backUrl", indexLayout.homePath ?? baseRoot);
    }
  });
</script>
