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

export const metadata: Metadata = {
  title: 'Gallery',
  description: 'Browse the complete gallery of artworks by Katheryn Trenshaw',
};

export const revalidate = 60;

async function getGalleryData(): Promise<{ artworks: Artwork[]; series: Series[] }> {
  try {
    const [artworks, series] = await Promise.all([
      getArtworks({ status: 'published' }),
      getSeries(),
    ]);
    return { artworks, series };
  } catch (error) {
    console.error('Error fetching gallery data:', error);
    return { artworks: [], series: [] };
  }
}

export default async function GalleryPage() {
  const { artworks, series } = await getGalleryData();

  return (
    <div className="min-h-screen pt-28 py-12">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="text-center">
          <h1 className="font-serif text-4xl font-bold text-gray-900 md:text-5xl">
            Gallery
          </h1>
          <p className="mx-auto mt-4 max-w-2xl text-lg text-gray-600">
            Explore the complete collection of original artworks
          </p>
        </div>

        {/* Series Filter (if series exist) */}
        {series.length > 0 && (
          <div className="mt-8">
            <h2 className="text-lg font-medium text-gray-900">Browse by Series</h2>
            <div className="mt-4 flex flex-wrap gap-2">
              {series.map((s) => (
                <Link
                  key={s.id}
                  href={`/gallery/series/${s.slug || s.id}`}
                  className="rounded-full bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition hover:bg-amber-50 hover:text-amber-700"
                >
                  {s.name}
                </Link>
              ))}
            </div>
          </div>
        )}

        {/* Artwork Grid */}
        <div className="mt-12">
          <ArtworkGrid artworks={artworks} columns={3} />
        </div>
      </div>
    </div>
  );
}
