import { Metadata } from 'next';
import { getArtworks, Artwork } from '@/lib/directus';
import { ArtworkCard } from '@/components/artwork-card';

export const metadata: Metadata = {
  title: 'Store',
  description: 'Shop original artworks, prints, and unique pieces by Katheryn Trenshaw',
};

// Force dynamic rendering to ensure fresh data from Directus
export const dynamic = 'force-dynamic';
export const revalidate = 0;

async function getShopItems(): Promise<{ available: Artwork[]; sold: Artwork[] }> {
  try {
    const allArtworks = await getArtworks({});
    const available = allArtworks.filter(
      (a) => a.status === 'published' && a.price && a.price > 0
    );
    const sold = allArtworks.filter((a) => a.status === 'sold');
    return { available, sold };
  } catch (error) {
    console.error('Error fetching shop items:', error);
    return { available: [], sold: [] };
  }
}

export default async function StorePage() {
  const { available, sold } = await getShopItems();
  const allItems = [...available, ...sold];

  return (
    <div className="min-h-screen bg-white pt-24">
      {/* Header */}
      <div className="border-b border-gray-200">
        <div className="mx-auto max-w-7xl px-4 py-16 text-center">
          <h1 className="font-serif text-4xl md:text-5xl">Store</h1>
          <p className="mt-4 text-gray-600">
            Original artworks and unique pieces
          </p>
        </div>
      </div>

      {/* Filter tabs */}
      <div className="border-b border-gray-200">
        <div className="mx-auto max-w-7xl px-4">
          <div className="flex gap-8 py-4 text-sm">
            <button className="font-medium text-gray-900 border-b-2 border-gray-900 pb-4 -mb-[17px]">
              All ({allItems.length})
            </button>
            <button className="text-gray-500 hover:text-gray-900 pb-4 -mb-[17px]">
              Available ({available.length})
            </button>
            <button className="text-gray-500 hover:text-gray-900 pb-4 -mb-[17px]">
              Sold ({sold.length})
            </button>
          </div>
        </div>
      </div>

      {/* Products Grid - 2 columns to match original */}
      <div className="mx-auto max-w-5xl px-4 py-12">
        {allItems.length > 0 ? (
          <div className="grid gap-8 grid-cols-1 md:grid-cols-2">
            {allItems.map((artwork, index) => (
              <ArtworkCard
                key={artwork.id}
                artwork={artwork}
                priority={index < 2}
                aspectRatio="3:2"
              />
            ))}
          </div>
        ) : (
          <div className="py-20 text-center">
            <h3 className="font-serif text-xl text-gray-900">
              Coming Soon
            </h3>
            <p className="mt-2 text-gray-500">
              New works will be available shortly.
            </p>
            <p className="mt-4 text-sm text-gray-500">
              <a href="/contact" className="underline underline-offset-2 hover:no-underline">
                Contact us
              </a>{' '}
              for enquiries about specific pieces.
            </p>
          </div>
        )}
      </div>

      {/* Info Section */}
      <div className="border-t border-gray-200 bg-gray-50">
        <div className="mx-auto max-w-7xl px-4 py-16">
          <div className="grid gap-12 md:grid-cols-3 text-center">
            <div>
              <div className="mx-auto h-12 w-12 flex items-center justify-center">
                <svg className="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
                </svg>
              </div>
              <h3 className="mt-4 font-medium text-gray-900">Secure Packaging</h3>
              <p className="mt-2 text-sm text-gray-600">
                Each artwork is carefully packaged to ensure it arrives in perfect condition.
              </p>
            </div>

            <div>
              <div className="mx-auto h-12 w-12 flex items-center justify-center">
                <svg className="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                </svg>
              </div>
              <h3 className="mt-4 font-medium text-gray-900">Certificate of Authenticity</h3>
              <p className="mt-2 text-sm text-gray-600">
                All original artworks come with a signed certificate.
              </p>
            </div>

            <div>
              <div className="mx-auto h-12 w-12 flex items-center justify-center">
                <svg className="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
              </div>
              <h3 className="mt-4 font-medium text-gray-900">Personal Service</h3>
              <p className="mt-2 text-sm text-gray-600">
                Questions? Get in touch for personalized assistance.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
