---
import { parseISO, format } from "date-fns";
import Layout from "@layouts/Layout.astro";
import AssociatedMedia from "@components/blocks/AssociatedMedia.astro";
import Warning from "@components/blocks/banners/Warning.astro";
import { fetchGlobalData } from "@utils/data/global/index.js";
import { md } from "@utils/helpers/general.js";
import icons from "@cdransf/astro-tabler-icons";

const { globals, show } = await fetchGlobalData(Astro, Astro.url.pathname);

if (!show) return Astro.redirect("/404", 404);

const {
  IconArrowLeft,
  IconHeart,
  IconNeedle,
  IconCircleCheck,
} = icons;
const pageTitle = `${show.title} / TV`;
const description = show.description || `Details about ${show.title}.`;
const alt = `${show.title} / ${show.year}`;
---

<Layout
  pageTitle={pageTitle}
  description={description}
  fullUrl={Astro.url.pathname}
  ogImage={show.backdrop}
>
  <a class="back-link" href="/watching" title="Go back to the watching index page">
    <div set:html={IconArrowLeft({ size: 18 })}/> Back to watching
  </a>
  <article class="watching focus">
    <img
      srcset={`
        ${globals.cdn_url}${show.backdrop}?class=bannersm&type=webp 256w,
        ${globals.cdn_url}${show.backdrop}?class=bannermd&type=webp 512w,
        ${globals.cdn_url}${show.backdrop}?class=bannerbase&type=webp 1024w
      `}
      sizes="(max-width: 450px) 256px,
        (max-width: 850px) 512px,
        1024px"
      src={`${globals.cdn_url}${show.backdrop}?class=bannersm&type=webp`}
      alt={alt}
      class="image-banner"
      loading="eager"
      decoding="async"
      width="256"
      height="180"
    />
    <div class="media-meta">
      <span class="title">
        <strong>{show.title}</strong>
        {show.year && ` (${show.year})`}
      </span>
      {
        show.favorite && (
          <span class="sub-meta favorite">
            <div set:html={IconHeart({ size: 18 })}/> This is one of my favorite shows!
          </span>
        )
      }
      {
        show.tattoo && (
          <span class="sub-meta tattoo">
            <div set:html={IconNeedle({ size: 18 })}/> I have a tattoo inspired by this show!
          </span>
        )
      }
      {
        show.collected && (
          <span class="sub-meta collected">
            <div set:html={IconCircleCheck({ size: 18 })}/> This show is in my collection!
          </span>
        )
      }
      {
        show.episode?.formatted_episode && (
          <span class="sub-meta">
            I last watched{" "}
            <strong class="highlight-text">{show.episode.formatted_episode}</strong>{" "}
            on {format(parseISO(show.episode.last_watched_at), "PPPP")}.
          </span>
        )
      }
    </div>

    {show.review && (
      <>
        <h2>My thoughts</h2>
        <Warning text="There are probably spoilers after this banner — this is a warning about them." />
        <div set:html={md(show.review)}/>
      </>
    )}

    <AssociatedMedia
      artists={show.artists}
      books={show.books}
      genres={show.genres}
      movies={show.movies}
      posts={show.posts}
      shows={show.related_shows}
    />

    {show.description && (
      <>
        <h2>Overview</h2>
        <div set:html={md(show.description)}/>
      </>
    )}
  </article>
</Layout>