import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft } from "lucide-react";
import { getDictionary, pick } from "@/i18n";
import { sanityFetch, urlFor, slugStaticParams } from "@/sanity/client";
import { SERMON_QUERY, SERMON_SLUGS_QUERY } from "@/sanity/queries";
import { Container } from "@/components/ui";
import { RichText } from "@/components/portable-text";
import { MediaPlayer } from "@/components/media-player";
import { formatDate } from "@/lib/format";

/* eslint-disable @typescript-eslint/no-explicit-any */

export async function generateStaticParams() {
  return slugStaticParams(SERMON_SLUGS_QUERY);
}

export async function generateMetadata({ params }: { params: Promise<{ locale: string; slug: string }> }) {
  const { locale, slug } = await params;
  const m = await sanityFetch<any>(SERMON_QUERY, { slug }, null);
  if (!m) return {};
  return { title: pick(m.title, locale), description: pick(m.summary, locale) };
}

export default async function SermonPage({ params }: { params: Promise<{ locale: string; slug: string }> }) {
  const { locale, slug } = await params;
  const dict = getDictionary(locale);
  const m = await sanityFetch<any>(SERMON_QUERY, { slug }, null);
  if (!m) notFound();

  const poster = m.poster
    ? urlFor(m.poster).width(1280).quality(80).url()
    : undefined;

  return (
    <article>
      <Container narrow>
        <div className="py-12">
          <Link
            href={`/${locale}/sermons/`}
            className="inline-flex items-center gap-1.5 text-sm font-semibold text-brand-bright transition hover:gap-2.5"
          >
            <ArrowLeft className="size-4" />
            {dict.nav.sermons}
          </Link>
          <p className="mt-6 text-xs font-semibold uppercase tracking-[0.14em] text-brand-bright">
            {formatDate(m.date, locale)}
          </p>
          <h1 className="mt-3 text-balance text-4xl leading-tight sm:text-5xl">
            {pick(m.title, locale)}
          </h1>
          {m.speaker?.name && (
            <p className="mt-3 text-muted">
              {dict.sermons.speaker}: {m.speaker.name}
            </p>
          )}

          <div className="mt-8">
            {m.videoUrl || m.audioUrl ? (
              <MediaPlayer
                videoUrl={m.videoUrl}
                audioUrl={m.audioUrl}
                poster={poster}
                dict={dict}
              />
            ) : (
              <p className="rounded-2xl border border-line bg-surface p-6 text-muted">
                {dict.sermons.noMedia}
              </p>
            )}
          </div>

          <div className="py-10">
            <RichText value={pick(m.description, locale)} />
          </div>
        </div>
      </Container>
    </article>
  );
}