import { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { getSeriesItem, getSeries, Series } from '@/lib/directus';
import { ArtworkGrid } from '@/components/artwork-grid';

export const revalidate = 60;

type Props = {
  params: Promise<{ slug: string }>;
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  try {
    const series = await getSeriesItem(slug);
    if (!series) return { title: 'Series Not Found' };

    return {
      title: series.name,
      description: series.description?.replace(/<[^>]*>/g, '').slice(0, 160) || `${series.name} - artwork series by Katheryn Trenshaw`,
    };
  } catch {
    return { title: 'Series Not Found' };
  }
}

export async function generateStaticParams() {
  try {
    const allSeries = await getSeries();
    return allSeries.map((s) => ({
      slug: String(s.slug || s.id),
    }));
  } catch {
    return [];
  }
}

export default async function SeriesPage({ params }: Props) {
  const { slug } = await params;
  let series: Series;

  try {
    series = await getSeriesItem(slug);
    if (!series) notFound();
  } catch {
    notFound();
  }

  const artworks = series.artworks?.filter((a) => a.status === 'published') || [];

  return (
    <div className="min-h-screen py-12">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Breadcrumb */}
        <nav className="mb-8">
          <ol className="flex items-center space-x-2 text-sm text-gray-500">
            <li>
              <Link href="/" className="hover:text-gray-700">
                Home
              </Link>
            </li>
            <li>/</li>
            <li>
              <Link href="/gallery" className="hover:text-gray-700">
                Gallery
              </Link>
            </li>
            <li>/</li>
            <li className="text-gray-900">{series.name}</li>
          </ol>
        </nav>

        {/* Header */}
        <div className="mb-12">
          <h1 className="font-serif text-4xl font-bold text-gray-900 md:text-5xl">
            {series.name}
          </h1>
          {series.description && (
            <div
              className="prose prose-lg prose-gray mt-4 max-w-3xl"
              dangerouslySetInnerHTML={{ __html: series.description }}
            />
          )}
        </div>

        {/* Artworks */}
        <ArtworkGrid artworks={artworks} columns={3} />

        {/* Back to Gallery */}
        <div className="mt-12">
          <Link
            href="/gallery"
            className="inline-flex items-center text-amber-700 hover:text-amber-800"
          >
            <svg
              className="mr-2 h-4 w-4"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M15 19l-7-7 7-7"
              />
            </svg>
            Back to Gallery
          </Link>
        </div>
      </div>
    </div>
  );
}
