'use client';

import Link from 'next/link';
import { useLanguage } from '@/context/LanguageContext';
import type { PhotoGallery } from '@/lib/api';
import Card from '@/components/ui/Card';
import { CameraIcon } from '@heroicons/react/24/outline';

export default function PhotosIndexClient({ galleries }: { galleries: PhotoGallery[] }) {
  const { locale } = useLanguage();
  const es = locale === 'es';

  const formatDate = (iso?: string) => {
    if (!iso) return null;
    return new Date(iso).toLocaleDateString(es ? 'es-ES' : 'en-US', {
      year: 'numeric',
      month: 'long',
      timeZone: 'America/Asuncion',
    });
  };

  return (
    <div className="section-padding">
      <div className="container-page">
        <h1 className="section-title text-center mb-2">
          {es ? 'Galerías de Fotos' : 'Photo Galleries'}
        </h1>
        <p className="text-center text-gray-600 mb-10">
          {es
            ? 'Recuerdos de nuestros intercambios de idiomas en Asunción'
            : 'Memories from our language exchanges in Asunción'}
        </p>

        {galleries.length === 0 ? (
          <div className="text-center py-16">
            <CameraIcon className="w-16 h-16 mx-auto text-gray-300 mb-4" />
            <p className="text-gray-600">
              {es ? 'Aún no hay galerías publicadas.' : 'No galleries published yet.'}
            </p>
          </div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {galleries.map((g) => (
              // Event-linked galleries live under the event's URL.
              <Link key={g.id} href={g.event ? `/events/${g.event.slug}/gallery` : `/photos/${g.slug}`}>
                <Card variant="elevated" className="overflow-hidden hover:shadow-card-hover transition-shadow h-full">
                  <div className="aspect-video bg-gray-100 flex items-center justify-center">
                    {g.coverUrl ? (
                      // eslint-disable-next-line @next/next/no-img-element
                      <img src={g.coverUrl} alt="" className="w-full h-full object-cover" loading="lazy" />
                    ) : (
                      <CameraIcon className="w-12 h-12 text-gray-300" />
                    )}
                  </div>
                  <div className="p-4">
                    <h2 className="font-heading font-semibold text-lg text-primary-dark">
                      {es && g.titleEs ? g.titleEs : g.title}
                    </h2>
                    <p className="text-sm text-gray-600 mt-1">
                      {g.photoCount} {es ? 'fotos' : 'photos'}
                      {g.event?.startDatetime && <> · {formatDate(g.event.startDatetime)}</>}
                    </p>
                  </div>
                </Card>
              </Link>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
