import Link from "next/link";
import { Play } from "lucide-react";
import { getDictionary, pick } from "@/i18n";
import { sanityFetch, urlFor } from "@/sanity/client";
import { SERMONS_QUERY } from "@/sanity/queries";
import { PageHeader, Container, Eyebrow, SectionHeading } from "@/components/ui";
import { Reveal } from "@/components/reveal";
import { Button } from "@/components/ui/button";
import { SermonCard } from "@/components/cards";

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

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const d = getDictionary(locale);
  return { title: d.sermons.title, description: d.sermons.lead };
}

export default async function SermonsPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const dict = getDictionary(locale);
  const sermons = await sanityFetch<any[]>(SERMONS_QUERY, {}, []);
  const base = `/${locale}`;

  const featured = sermons?.[0];
  const rest = (sermons || []).slice(1);

  return (
    <>
      <PageHeader eyebrow={dict.nav.sermons} title={dict.sermons.title} lead={dict.sermons.lead} />

      {sermons.length ? (
        <>
          {/* Featured message */}
          {featured && (
            <section className="py-16 sm:py-20">
              <Container>
                <Reveal>
                  <div className="grid overflow-hidden rounded-[2rem] border border-line bg-surface shadow-card lg:grid-cols-2">
                    <Link
                      href={`${base}/sermons/${featured.slug?.current}/`}
                      className="group relative block min-h-72 overflow-hidden bg-brand-deep"
                    >
                      {featured.poster && (
                        <img
                          src={urlFor(featured.poster).width(1100).quality(80).url()}
                          alt={pick(featured.title, locale) || ""}
                          className="h-full w-full object-cover opacity-85 transition duration-700 group-hover:scale-105"
                        />
                      )}
                      <span className="absolute inset-0 grid place-items-center">
                        <span className="grid h-16 w-16 place-items-center rounded-full bg-bg/95 text-brand shadow-lg transition group-hover:scale-110 group-hover:animate-pulse-glow">
                          <Play className="size-6 fill-current" />
                        </span>
                      </span>
                    </Link>
                    <div className="flex flex-col justify-center gap-4 p-8 sm:p-10">
                      <Eyebrow>{dict.sermons.featured}</Eyebrow>
                      <h2 className="text-balance text-2xl tracking-tight sm:text-3xl">
                        {pick(featured.title, locale)}
                      </h2>
                      {pick(featured.summary, locale) && (
                        <p className="line-clamp-3 text-ink-soft">
                          {pick(featured.summary, locale)}
                        </p>
                      )}
                      {featured.speaker?.name && (
                        <p className="text-sm text-muted">
                          {dict.sermons.speaker}: {featured.speaker.name}
                        </p>
                      )}
                      <Button asChild className="mt-2 w-fit">
                        <Link href={`${base}/sermons/${featured.slug?.current}/`}>
                          <Play className="size-4 fill-current" />
                          {dict.cta.watch}
                        </Link>
                      </Button>
                    </div>
                  </div>
                </Reveal>
              </Container>
            </section>
          )}

          {/* All messages */}
          {rest.length > 0 && (
            <section className="bg-surface py-16 sm:py-20">
              <Container>
                <SectionHeading title={dict.sermons.latest} />
                <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                  {rest.map((s, i) => (
                    <Reveal key={s._id} delay={(i % 3) * 0.06}>
                      <SermonCard sermon={s} locale={locale} dict={dict} />
                    </Reveal>
                  ))}
                </div>
              </Container>
            </section>
          )}
        </>
      ) : (
        <Container>
          <p className="py-20 text-center text-muted">{dict.empty.sermons}</p>
        </Container>
      )}
    </>
  );
}