thrilltrack-explorer/src/components/moderation/PhotoModal.tsx

import { useState } from 'react';
import { X, ChevronLeft, ChevronRight } from 'lucide-react';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';

interface PhotoModalProps {
  photos: Array<{
    id: string;
    url: string;
    filename?: string;
    caption?: string;
  }>;
  initialIndex: number;
  isOpen: boolean;
  onClose: () => void;
}

export function PhotoModal({ photos, initialIndex, isOpen, onClose }: PhotoModalProps) {
  const [currentIndex, setCurrentIndex] = useState(initialIndex);
  const currentPhoto = photos[currentIndex];

  const goToPrevious = () => {
    setCurrentIndex((prev) => (prev > 0 ? prev - 1 : photos.length - 1));
  };

  const goToNext = () => {
    setCurrentIndex((prev) => (prev < photos.length - 1 ? prev + 1 : 0));
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'ArrowLeft') goToPrevious();
    if (e.key === 'ArrowRight') goToNext();
    if (e.key === 'Escape') onClose();
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-7xl w-full max-h-[90vh] p-0 [&>button]:hidden">
        <div className="relative bg-black rounded-lg overflow-hidden" onKeyDown={handleKeyDown} tabIndex={0}>
          {/* Close button */}
          <Button
            variant="ghost"
            size="sm"
            onClick={onClose}
            className="absolute top-4 right-4 z-20 text-white hover:bg-white/10"
          >
            <X className="h-4 w-4" />
          </Button>

          {/* Header */}
          <div className="absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-black/80 to-transparent p-4">
            <div className="text-white">
              <h3 className="font-medium">
                {currentPhoto?.filename || `Photo ${currentIndex + 1}`}
              </h3>
              {photos.length > 1 && (
                <p className="text-sm text-white/70">
                  {currentIndex + 1} of {photos.length}
                </p>
              )}
            </div>
          </div>

          {/* Image */}
          <div className="flex items-center justify-center min-h-[400px] max-h-[80vh]">
            <img
              src={currentPhoto?.url}
              alt={currentPhoto?.caption || `Photo ${currentIndex + 1}`}
              className="max-w-full max-h-full object-contain"
              loading="lazy"
            />
          </div>

          {/* Navigation */}
          {photos.length > 1 && (
            <>
              <Button
                variant="ghost"
                size="sm"
                onClick={goToPrevious}
                className="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:bg-white/10"
              >
                <ChevronLeft className="h-6 w-6" />
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={goToNext}
                className="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:bg-white/10"
              >
                <ChevronRight className="h-6 w-6" />
              </Button>
            </>
          )}

          {/* Caption */}
          {currentPhoto?.caption && (
            <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
              <p className="text-white text-sm">{currentPhoto.caption}</p>
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}