---
import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
import VideoPlayer from '@app/website/video/VideoPlayer.svelte';
import { getVideoMetadata, resolveVideo } from '@util/video.ts';
import { siteUrl } from '@util/url.ts';

const { name } = Astro.params;

const video = name ? await resolveVideo(name) : null;
if (!video) return new Response(null, { status: 404 });

const metadata = await getVideoMetadata(video);
if (!metadata) return new Response(null, { status: 404 });

const { title, description, longDescription } = metadata;
const streamUrl = siteUrl(`video/${encodeURIComponent(video.name)}/stream`);
const thumbnailUrl = siteUrl(`video/${encodeURIComponent(video.name)}/thumbnail.jpg`);
---

<WebsiteLayout title={title} description={description ?? undefined} openGraph="minimal">
  <Fragment slot="head">
    <meta property="og:type" content="website" />
    <meta property="og:image" content={thumbnailUrl} />
    <meta property="og:image:type" content="image/jpeg" />
    <meta property="og:image:alt" content={title} />
  </Fragment>

  <section class="mx-auto flex w-full max-w-6xl flex-col gap-5 px-4 py-8 lg:py-12">
    <div>
      <p class="text-sm tracking-widest text-base-content/60 uppercase">Video</p>
      <h1 class="mt-1 text-2xl font-semibold break-words lg:text-4xl">{title}</h1>
    </div>

    {description && (
      <p class="max-w-3xl text-base leading-relaxed whitespace-pre-line text-base-content/80">{description}</p>
    )}

    <VideoPlayer client:load src={streamUrl} type={video.contentType} title={title} poster={thumbnailUrl} />

    {longDescription && (
      <p class="max-w-3xl text-base leading-relaxed whitespace-pre-line text-base-content/70">{longDescription}</p>
    )}
  </section>
</WebsiteLayout>