'use client';

import React, { useState, useEffect } from 'react';
import Image from 'next/image';
import { useTranslations } from 'next-intl';
import { Section, Container, Heading } from '../../components/ui';
import Lightbox from '../Lightbox';
import { useSearchParams } from 'next/navigation';

export default function GallerySection() {
  const t = useTranslations('Home.gallery');
  const searchParams = useSearchParams();
  const images = [
    '/uploads/2024/12/DSC07433-Large-600x400.webp',
    '/uploads/2024/12/DSC07460-Large-600x400.webp',
    '/uploads/2024/12/DSC07469-Large-600x400.webp',
    '/uploads/2024/12/DSC07539-Large-600x400.webp',
    '/uploads/2024/12/DSC07655-Large.webp',
    '/uploads/2024/12/DSC07768-Large.webp',
  ];

  const [lightboxOpen, setLightboxOpen] = useState(false);
  const [lightboxIndex, setLightboxIndex] = useState(0);

  useEffect(() => {
    const photoParam = searchParams.get('photo');
    if (photoParam !== null) {
      const index = parseInt(photoParam, 10);
      if (!isNaN(index) && index >= 0 && index < images.length) {
        if (lightboxIndex !== index) setLightboxIndex(index);
        if (!lightboxOpen) setLightboxOpen(true);
      }
    }
  }, [searchParams, images.length, lightboxIndex, lightboxOpen]);

  return (
    <Section className="bg-white text-white py-32">
      <Container>
        <Heading level={2} subtitle={t('subtitle')} align="center">
          {t('title')}
        </Heading>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {images.map((src, idx) => (
            <button
              key={idx}
              onClick={() => {
                setLightboxIndex(idx);
                setLightboxOpen(true);
              }}
              className="relative aspect-[4/3] overflow-hidden rounded-3xl group shadow-lg hover:shadow-2xl transition-all duration-700 cursor-pointer"
            >
              <Image
                src={src}
                alt={`${t('alt')} ${idx + 1}`}
                fill
                className="object-cover transition-transform duration-1000 group-hover:scale-110"
                unoptimized
              />
              <div className="absolute inset-0 bg-primary-dark/20 group-hover:bg-transparent transition-all duration-500" />
              <div className="absolute inset-0 border-0 group-hover:border-[16px] border-white/10 transition-all duration-500 pointer-events-none" />
            </button>
          ))}
        </div>
      </Container>

      <Lightbox
        isOpen={lightboxOpen}
        images={images}
        initialIndex={lightboxIndex}
        onClose={() => setLightboxOpen(false)}
      />
    </Section>
  );
}