import { notFound } from "next/navigation";
import Link from "next/link";
import { PortableText, type PortableTextComponents, type SanityDocument } from "next-sanity";
import { client } from "@/sanity/lib/client";
import { urlFor } from "@/sanity/lib/image";
import { ARTICLE_BY_SLUG_QUERY } from "@/sanity/lib/queries";

const options = { next: { revalidate: 60 } };

const portableTextComponents: PortableTextComponents = {
  types: {
    image: ({ value }) => (
      // eslint-disable-next-line @next/next/no-img-element
      <img
        src={urlFor(value).width(1200).url()}
        alt=""
        className="rounded-lg"
      />
    ),
  },
};

export default async function ArticlePage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const article = await client.fetch<SanityDocument | null>(
    ARTICLE_BY_SLUG_QUERY,
    { slug },
    options,
  );

  if (!article) {
    notFound();
  }

  const coverImageUrl = article.coverImage
    ? urlFor(article.coverImage).width(1200).height(675).url()
    : null;

  return (
    <main className="mx-auto max-w-3xl px-6 py-16">
      <Link href="/articles" className="text-sm text-terracotta hover:underline">
        &larr; Back to articles
      </Link>

      <h1 className="mt-4 font-heading text-4xl font-semibold text-charcoal">
        {article.title}
      </h1>
      <p className="mt-2 text-sm text-charcoal/60">
        {new Date(article.publishedAt).toLocaleDateString()}
      </p>

      {coverImageUrl && (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={coverImageUrl}
          alt=""
          className="mt-8 aspect-video w-full rounded-lg object-cover"
        />
      )}

      <div className="prose prose-p:text-charcoal prose-headings:font-heading prose-headings:text-charcoal mt-8 max-w-none">
        {Array.isArray(article.body) && (
          <PortableText value={article.body} components={portableTextComponents} />
        )}
      </div>
    </main>
  );
}