'use client';

import { useEffect, useCallback } from 'react';
import { X, ChevronLeft, ChevronRight } from 'lucide-react';

export type LightboxImage = {
  url: string;
  caption?: string | null;
};

type Props = {
  images: LightboxImage[];
  index: number;
  onClose: () => void;
  onNav: (index: number) => void;
};

export function GalleryLightbox({ images, index, onClose, onNav }: Props) {
  const total = images.length;
  const current = images[index];

  const prev = useCallback(() => onNav((index - 1 + total) % total), [index, total, onNav]);
  const next = useCallback(() => onNav((index + 1) % total), [index, total, onNav]);

  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowLeft') prev();
      if (e.key === 'ArrowRight') next();
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [onClose, prev, next]);

  // Body scroll lock
  useEffect(() => {
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = ''; };
  }, []);

  if (!current) return null;

  return (
    <div
      className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/92 backdrop-blur-sm"
      onClick={onClose}
    >
      {/* Kapat */}
      <button
        onClick={onClose}
        className="absolute right-4 top-4 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20"
        aria-label="Kapat"
      >
        <X size={20} strokeWidth={2} />
      </button>

      {/* Sayaç */}
      <span className="absolute left-1/2 top-4 -translate-x-1/2 rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-white/80">
        {index + 1} / {total}
      </span>

      {/* Sol ok */}
      {total > 1 && (
        <button
          onClick={(e) => { e.stopPropagation(); prev(); }}
          className="absolute left-4 flex h-12 w-12 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20 sm:left-6"
          aria-label="Önceki"
        >
          <ChevronLeft size={24} strokeWidth={2} />
        </button>
      )}

      {/* Resim */}
      <div
        className="mx-16 flex max-h-[88vh] max-w-[90vw] flex-col items-center gap-3"
        onClick={(e) => e.stopPropagation()}
      >
        <img
          key={current.url}
          src={current.url}
          alt={current.caption ?? `Görsel ${index + 1}`}
          className="max-h-[80vh] max-w-[90vw] rounded-xl object-contain shadow-2xl transition-opacity duration-200"
          draggable={false}
        />
        {current.caption && (
          <p className="max-w-xl text-center text-sm text-white/70">{current.caption}</p>
        )}
      </div>

      {/* Sağ ok */}
      {total > 1 && (
        <button
          onClick={(e) => { e.stopPropagation(); next(); }}
          className="absolute right-4 flex h-12 w-12 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/20 sm:right-6"
          aria-label="Sonraki"
        >
          <ChevronRight size={24} strokeWidth={2} />
        </button>
      )}
    </div>
  );
}