---
import BaseLayout from "../layouts/BaseLayout.astro";
import ContentCard from "../components/ContentCard.astro";
import MediaModal from "../components/MediaModal.astro";
import { readContentCache } from "../lib/content/cache";
import { podcastEpisodes } from "../lib/content/selectors";
import { getPublicConfig } from "../lib/config";

const cache = await readContentCache();
const episodes = podcastEpisodes(cache).sort(
  (a, b) => Date.parse(b.publishedAt) - Date.parse(a.publishedAt),
);

const cfg = getPublicConfig();
const siteUrl = (cfg.siteUrl || "http://localhost:4321").replace(/\/$/, "");
const canonicalUrl = `${siteUrl}/podcast`;

const podcastJsonLd = {
  "@context": "https://schema.org",
  "@type": "CollectionPage",
  name: "Podcast | Irregular Mind",
  url: canonicalUrl,
  mainEntity: {
    "@type": "ItemList",
    itemListElement: episodes.slice(0, 20).map((episode, index) => ({
      "@type": "ListItem",
      position: index + 1,
      url: `${siteUrl}/podcast/${encodeURIComponent(episode.id)}`,
      item: {
        "@type": "PodcastEpisode",
        name: episode.title,
        datePublished: episode.publishedAt,
      },
    })),
  },
};
---

<BaseLayout
  title="Podcast | Irregular Mind"
  description="Episodes from the Irregular Mind podcast."
  canonicalPath="/podcast"
>
  <script type="application/ld+json" set:html={JSON.stringify(podcastJsonLd)} />
  <section class="section">
    <div class="section-header">
      <h2 class="title-hover-line">Irregular Mind</h2>
      <span class="muted">{episodes.length} episodes</span>
    </div>
    {
      episodes.length > 0 ? (
        <div class="grid">
          {episodes.map((item) => (
            <ContentCard item={item} placement="podcast.list" />
          ))}
        </div>
      ) : (
        <div class="empty">
          No episodes yet. Set <code>PODCAST_RSS_URL</code> and run{" "}
          <code>npm run fetch-content</code>.
        </div>
      )
    }
  </section>
  
  <MediaModal />
</BaseLayout>