---
import type { GetStaticPaths } from "astro";
import { getCollection } from "astro:content";
import Layout from "@/layouts/Layout.astro";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";

export const getStaticPaths = (async () => {
  const fics = await getCollection("fics");
  return fics.map(fic => ({
    params: { ficId: fic.id },
    props: { fic },
  }));
}) satisfies GetStaticPaths;

const { fic } = Astro.props;
const chapters = await getCollection("chapters", ({ id }) => {
  return id.startsWith(fic.id);
});
chapters.length = Math.min(chapters.length, 5);
chapters.sort((a, b) => a.data.sortOrder - b.data.sortOrder);
dayjs.extend(utc);
---
<Layout title={fic.data.title}>
  <Fragment slot="header" set:html={`<link rel="alternate" type="application/rss+xml" title="${fic.data.title}" href=${new URL(`/fics/${Astro.params.ficId}/rss.xml`, Astro.site)} />`} />
  <main>
    <section>
      <h1>{fic.data.title}</h1>
      <header class="info">
        <p>
          <span class="title">Fandom</span> 
          <span class="data">{fic.data.series.join(", ")}</span>
        </p>
        <time datetime={dayjs(fic.data.publishedAt).utc(true).toISOString()}>
          <span class="title">Date</span> 
          <span class="data">{dayjs(fic.data.publishedAt).utc(true).format("MMMM DD, YYYY")}</span>
        </time>
        <div>
          <span class="title">Summary</span>
          <blockquote class="data">
            <Fragment set:html={fic.data.summary} />
          </blockquote>
        </div>
        <div class="links">
          <a class="button" href={`/fics/${chapters[0].id}`}>start reading</a>
          <a class="button" href={`/fics/${Astro.params.ficId}/rss.xml`}>rss feed</a>
        </div>
      </header>

      <h2>chapters</h2>
      <ul>
        {chapters.map(chapter => (
          <li><a href={chapter.id}>{chapter.data.title}</a></li>
        ))}
      </ul>
    </section>
  </main>
</Layout>

<style>
  main {
    display: grid;
    place-content: center;

    section {
      max-width: 80ch;

      .info {
        > * {
          display: flex;
          flex-flow: row wrap;
        }

        .title {
          flex: 1;
          font-weight: bold;
        }
        
        .data {
          flex: 2;
        }
        
        blockquote {
          margin: 1rem 2rem;
        }

        .links {
          align-content: center;
          justify-content: space-around;
        }
      }
    }
  }
</style>