---
import BaseLayout from "../../layouts/BaseLayout.astro";
import { readContentCache } from "../../lib/content/cache";
import { youtubeVideos } from "../../lib/content/selectors";

export async function getStaticPaths() {
  const cache = await readContentCache();
  const videos = youtubeVideos(cache);
  return videos.map((v) => ({ params: { id: v.id }, props: { video: v } }));
}

const { video } = Astro.props;

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "VideoObject",
  name: video.title,
  uploadDate: video.publishedAt,
  thumbnailUrl: video.thumbnailUrl ? [video.thumbnailUrl] : undefined,
  url: video.url,
};

let videoDomain = "";
try {
  videoDomain = new URL(video.url).hostname;
} catch {
  videoDomain = "";
}

function truncate(s: string, n: number) {
  const t = (s || "").trim();
  if (t.length <= n) return t;
  return `${t.slice(0, Math.max(0, n - 1)).trimEnd()}…`;
}
---

<BaseLayout
  title={`${video.title} | SanthoshJ`}
  description={`Watch: ${video.title}`}
  canonicalPath={`/videos/${encodeURIComponent(video.id)}`}
  ogImageUrl={video.thumbnailUrl}
>
  <script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
  <section class="section">
    <div class="section-header">
      <h2>{video.title}</h2>
      <a
        class="muted"
        href="/videos"
        data-umami-event="click"
        data-umami-event-target_id="video_detail.back_to_videos"
        data-umami-event-placement="section_header"
        data-umami-event-target_url="/videos"
      >
        Back to videos →
      </a>
    </div>
    <div class="empty">
      <p style="margin-top: 0;">
        This page exists for SEO and sharing. The canonical watch page is YouTube.
      </p>
      <p>
        <a
          class="cta primary"
          href={video.url}
          target="_blank"
          rel="noopener noreferrer"
          data-umami-event="outbound_click"
          data-umami-event-target_id={`video_detail.watch.${video.id}`}
          data-umami-event-placement="video_detail"
          data-umami-event-target_url={video.url}
          data-umami-event-title={truncate(video.title, 160)}
          data-umami-event-type="video"
          data-umami-event-domain={videoDomain || "unknown"}
          data-umami-event-source="youtube"
          data-umami-event-ui_placement="video_detail"
        >
          Watch on YouTube
        </a>
      </p>
    </div>
  </section>
</BaseLayout>
