---
import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
import VideoPlayer from '@app/website/video/VideoPlayer.svelte';
import { getVideoMetadata, resolveVideo } from '@util/video.ts';
import { BASE_PATH } from 'astro:env/server';

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, width, height, duration } = metadata;
const streamPath = `${BASE_PATH}/video/${encodeURIComponent(video.name)}/stream`;
---

<WebsiteLayout title={`${title} - Video`} description={description ?? undefined}>
  <Fragment slot="head">
    <meta property="og:type" content="video" />
    <meta property="og:video" content={streamPath} />
    <meta property="og:video:type" content={video.contentType} />
    {width && <meta property="og:video:width" content={width.toString()} />}
    {height && <meta property="og:video:height" content={height.toString()} />}
    {duration && <meta property="og:video:duration" content={duration.toString()} />}
  </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>

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

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