From 9cd95951a28e4df044b7b524ad45b21cc53f5061 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 2 Oct 2025 13:31:28 +0000
Subject: [PATCH] feat: Add lightbox support to photo galleries

---
 src/components/upload/EntityPhotoGallery.tsx | 31 +++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/components/upload/EntityPhotoGallery.tsx b/src/components/upload/EntityPhotoGallery.tsx
index 932cee1a..48cad962 100644
--- a/src/components/upload/EntityPhotoGallery.tsx
+++ b/src/components/upload/EntityPhotoGallery.tsx
@@ -6,6 +6,7 @@ import { useAuth } from '@/hooks/useAuth';
 import { useNavigate } from 'react-router-dom';
 import { UppyPhotoSubmissionUpload } from '@/components/upload/UppyPhotoSubmissionUpload';
 import { PhotoManagementDialog } from '@/components/upload/PhotoManagementDialog';
+import { PhotoModal } from '@/components/moderation/PhotoModal';
 import { supabase } from '@/integrations/supabase/client';
 import { EntityPhotoGalleryProps } from '@/types/submissions';
 import { useUserRole } from '@/hooks/useUserRole';
@@ -32,6 +33,8 @@ export function EntityPhotoGallery({
   const [showUpload, setShowUpload] = useState(false);
   const [showManagement, setShowManagement] = useState(false);
   const [loading, setLoading] = useState(true);
+  const [selectedPhotoIndex, setSelectedPhotoIndex] = useState<number | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   useEffect(() => {
     fetchPhotos();
@@ -86,6 +89,16 @@ export function EntityPhotoGallery({
     fetchPhotos(); // Refresh photos after submission
   };
 
+  const handlePhotoClick = (index: number) => {
+    setSelectedPhotoIndex(index);
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setSelectedPhotoIndex(null);
+  };
+
   if (showUpload) {
     return (
       <div className="space-y-4">
@@ -161,13 +174,14 @@ export function EntityPhotoGallery({
       {/* Photo Grid */}
       {photos.length > 0 ? (
         <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-          {photos.map((photo) => (
+          {photos.map((photo, index) => (
             <Card key={photo.id} className="overflow-hidden">
               <CardContent className="p-0">
                 <img
                   src={photo.url}
                   alt={photo.title || photo.caption || `${entityName} photo`}
                   className="w-full h-48 object-cover hover:scale-105 transition-transform cursor-pointer"
+                  onClick={() => handlePhotoClick(index)}
                 />
                 {(photo.title || photo.caption) && (
                   <div className="p-3">
@@ -207,6 +221,21 @@ export function EntityPhotoGallery({
           </Button>
         </div>
       )}
+
+      {/* Photo Lightbox Modal */}
+      {selectedPhotoIndex !== null && (
+        <PhotoModal
+          photos={photos.map(photo => ({
+            id: photo.id,
+            url: photo.url,
+            caption: photo.caption,
+            filename: photo.title,
+          }))}
+          initialIndex={selectedPhotoIndex}
+          isOpen={isModalOpen}
+          onClose={handleCloseModal}
+        />
+      )}
     </div>
   );
 }