---
import BaseLayout from '../../layouts/BaseLayout.astro';
import EpisodeCard from '../../components/episodes/EpisodeCard.astro';
import { getCollection, render } from 'astro:content';
import type { CollectionEntry } from 'astro:content';

export async function getStaticPaths() {
  const episodes = await getCollection('episodes');
  return episodes.map((episode) => ({
    params: { slug: episode.id },
    props: { episode },
  }));
}

interface Props {
  episode: CollectionEntry<'episodes'>;
}

const { episode } = Astro.props;
const { title, season, episode: episodeNum, pubDate, duration, audioUrl, tags, chapters, originalUrl } = episode.data;

const { Content } = await render(episode);

const formattedDate = new Date(pubDate).toLocaleDateString('en-US', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
});

const seasonLabel = season === 0 ? 'Special' : `Season ${season}`;
const episodeLabel = season === 0 ? 'Special' : `S${season} E${String(episodeNum).padStart(2, '0')}`;

const allEpisodes = await getCollection('episodes');
const relatedEpisodes = allEpisodes
  .filter((ep) => ep.data.season === season && ep.id !== episode.id)
  .sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime())
  .slice(0, 4);
---

<BaseLayout title={title} description={`${episodeLabel} of The Computer Guru Show`}>
  <article class="episode-detail">
    <div class="container container--narrow">

      <nav class="breadcrumb" aria-label="Breadcrumb">
        <ol class="breadcrumb__list">
          <li class="breadcrumb__item">
            <a href="/episodes">Episodes</a>
          </li>
          <li class="breadcrumb__separator" aria-hidden="true">/</li>
          <li class="breadcrumb__item">
            <a href={`/episodes?season=${season}`}>{seasonLabel}</a>
          </li>
          <li class="breadcrumb__separator" aria-hidden="true">/</li>
          <li class="breadcrumb__item breadcrumb__item--current" aria-current="page">
            {title}
          </li>
        </ol>
      </nav>

      <header class="episode-detail__header">
        <span class="badge">{episodeLabel}</span>
        <h1 class="episode-detail__title">{title}</h1>

        <div class="episode-detail__meta">
          <time datetime={pubDate.toISOString()} class="episode-detail__date">
            {formattedDate}
          </time>
          <span class="episode-detail__divider" aria-hidden="true">|</span>
          <span class="episode-detail__duration">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            {duration}
          </span>
        </div>
      </header>

      <section class="episode-detail__player">
        <audio
          controls
          preload="metadata"
          class="episode-detail__audio"
          src={audioUrl}
        >
          Your browser does not support the audio element.
        </audio>
        <button
          class="btn btn--ghost episode-detail__play-persistent"
          data-audio-url={audioUrl}
          data-episode-title={title}
          data-season={String(season)}
          data-episode-num={String(episodeNum)}
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polygon points="5 3 19 12 5 21 5 3" fill="currentColor"></polygon>
          </svg>
          Play in Persistent Player
        </button>
      </section>

      {chapters && chapters.length > 0 && (
        <section class="episode-detail__chapters">
          <h2 class="episode-detail__section-title">Chapters</h2>
          <ol class="chapters-list">
            {chapters.map((chapter) => (
              <li class="chapters-list__item">
                <span class="chapters-list__time">{chapter.time}</span>
                <span class="chapters-list__title">{chapter.title}</span>
              </li>
            ))}
          </ol>
        </section>
      )}

      <section class="episode-detail__content">
        <h2 class="episode-detail__section-title">Show Notes</h2>
        <div class="prose">
          <Content />
        </div>
      </section>

      {tags.length > 0 && (
        <section class="episode-detail__tags">
          <h2 class="episode-detail__section-title">Tags</h2>
          <div class="tag-list">
            {tags.map((tag: string) => (
              <span class="badge">{tag}</span>
            ))}
          </div>
        </section>
      )}

      <section class="episode-detail__platforms">
        <h2 class="episode-detail__section-title">Listen On</h2>
        <div class="platform-links">
          <a
            href={audioUrl}
            class="btn btn--ghost"
            download
          >
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
              <polyline points="7 10 12 15 17 10"></polyline>
              <line x1="12" y1="15" x2="12" y2="3"></line>
            </svg>
            Download MP3
          </a>
          {originalUrl && (
            <a
              href={originalUrl}
              class="btn btn--ghost"
              target="_blank"
              rel="noopener noreferrer"
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                <polyline points="15 3 21 3 21 9"></polyline>
                <line x1="10" y1="14" x2="21" y2="3"></line>
              </svg>
              Original Post
            </a>
          )}
          <a
            href="/feed.xml"
            class="btn btn--ghost"
          >
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M4 11a9 9 0 0 1 9 9"></path>
              <path d="M4 4a16 16 0 0 1 16 16"></path>
              <circle cx="5" cy="19" r="1"></circle>
            </svg>
            RSS Feed
          </a>
        </div>
      </section>

    </div>

    {relatedEpisodes.length > 0 && (
      <section class="episode-detail__related section">
        <div class="container">
          <h2 class="section__title">More from {seasonLabel}</h2>
          <div class="grid grid--3">
            {relatedEpisodes.map((ep) => (
              <EpisodeCard episode={ep} />
            ))}
          </div>
        </div>
      </section>
    )}
  </article>
</BaseLayout>

<style>
  .breadcrumb {
    margin-bottom: var(--space-8);
    padding-top: var(--space-6);
  }

  .breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .breadcrumb__item a {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .breadcrumb__item a:hover {
    color: var(--color-accent);
  }

  .breadcrumb__item--current {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .breadcrumb__separator {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .episode-detail__header {
    margin-bottom: var(--space-8);
  }

  .episode-detail__header .badge {
    margin-bottom: var(--space-3);
  }

  .episode-detail__title {
    font-size: var(--text-3xl);
    margin-top: var(--space-3);
    margin-bottom: var(--space-4);
    line-height: 1.15;
  }

  .episode-detail__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .episode-detail__duration {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }

  .episode-detail__divider {
    color: var(--color-border);
  }

  .episode-detail__player {
    margin-bottom: var(--space-8);
    padding: var(--space-6);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .episode-detail__audio {
    width: 100%;
    height: 48px;
  }

  .episode-detail__play-persistent {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
  }

  .episode-detail__audio::-webkit-media-controls-panel {
    background: var(--color-bg-tertiary);
  }

  .episode-detail__section-title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
  }

  .episode-detail__chapters {
    margin-bottom: var(--space-8);
  }

  .chapters-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .chapters-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-fast);
  }

  .chapters-list__item:last-child {
    border-bottom: none;
  }

  .chapters-list__item:hover {
    background: var(--color-bg-tertiary);
  }

  .chapters-list__time {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-accent);
    min-width: 60px;
    flex-shrink: 0;
  }

  .chapters-list__title {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
  }

  .episode-detail__content {
    margin-bottom: var(--space-8);
  }

  .prose {
    color: var(--color-text-secondary);
    line-height: 1.8;
    font-size: var(--text-base);
  }

  .prose :global(p) {
    margin-bottom: var(--space-4);
  }

  .prose :global(a) {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .prose :global(a:hover) {
    color: var(--color-accent-hover);
  }

  .prose :global(ul),
  .prose :global(ol) {
    margin-bottom: var(--space-4);
    padding-left: var(--space-6);
  }

  .prose :global(li) {
    margin-bottom: var(--space-2);
  }

  .prose :global(strong) {
    color: var(--color-text-primary);
    font-weight: 600;
  }

  .prose :global(h2),
  .prose :global(h3) {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
  }

  .episode-detail__tags {
    margin-bottom: var(--space-8);
  }

  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .episode-detail__platforms {
    margin-bottom: var(--space-8);
    padding: var(--space-6);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .platform-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .episode-detail__related {
    border-top: 1px solid var(--color-border);
  }

  @media (max-width: 640px) {
    .episode-detail__title {
      font-size: var(--text-2xl);
    }

    .episode-detail__meta {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-1);
    }

    .episode-detail__divider {
      display: none;
    }

    .platform-links {
      flex-direction: column;
    }

    .platform-links .btn {
      width: 100%;
      justify-content: center;
    }
  }
</style>

<script>
  document.addEventListener('astro:page-load', () => {
    const btn = document.querySelector<HTMLButtonElement>('.episode-detail__play-persistent');
    if (btn) {
      btn.addEventListener('click', (e) => {
        e.preventDefault();
        const audioUrl = btn.dataset.audioUrl;
        const title = btn.dataset.episodeTitle;
        const season = parseInt(btn.dataset.season ?? '0', 10);
        const episode = parseInt(btn.dataset.episodeNum ?? '0', 10);

        if (audioUrl) {
          document.dispatchEvent(
            new CustomEvent('play-episode', {
              detail: { audioUrl, title, season, episode },
            })
          );
        }
      });
    }
  });
</script>