Gallery Interface

export default function GalleryPage() {
  const [selectedAlbumId, setSelectedAlbumId] = useState<string | null>(null)
  const [selectedPhoto, setSelectedPhoto] = useState<Photo | null>(null)
  const [searchQuery, setSearchQuery] = useState('')
  
  return (
    <div className="flex h-svh overflow-hidden bg-background">
      <AlbumSidebar
        albums={albums}
        selectedAlbumId={selectedAlbumId}
        onSelectAlbum={setSelectedAlbumId}
        onCreateAlbum={handleCreateAlbum}
        onDeleteAlbum={handleDeleteAlbum}
        searchQuery={searchQuery}
        onSearchChange={setSearchQuery}
        onLogout={handleLogout}
      />
      
      <PhotoGrid
        photos={filteredPhotos}
        selectedPhotoId={selectedPhoto?.id ?? null}
        onSelectPhoto={setSelectedPhoto}
        onUpload={handleUpload}
        onDeletePhoto={handleDeletePhoto}
        onMovePhoto={handleMovePhoto}
        albums={albums}
        isUploading={isUploading}
        isLoading={photosLoading || albumsLoading}
      />
      
      <PhotoDetails
        photo={selectedPhoto}
        albumName={selectedAlbumName}
        onClose={() => setSelectedPhoto(null)}
        onDimensionsLoaded={handleDimensionsLoaded}
      />
    </div>
  )
}

const fetcher = (url: string) => fetch(url).then((r) => r.json())

const { data: albums = [], isLoading: albumsLoading } = useSWR<Album[]>(
  '/api/albums',
  fetcher
)

const { data: allPhotos = [], isLoading: photosLoading } = useSWR<Photo[]>(
  '/api/photos',
  fetcher
)

const filteredPhotos = useMemo(() => {
  let photos = allPhotos
  if (selectedAlbumId) {
    photos = photos.filter((p) => p.album_id === selectedAlbumId)
  }
  if (searchQuery.trim()) {
    const q = searchQuery.toLowerCase()
    photos = photos.filter((p) => p.file_name.toLowerCase().includes(q))
  }
  return photos
}, [allPhotos, selectedAlbumId, searchQuery])

import { mutate } from 'swr'

// After uploading photos
await Promise.all(uploadPromises)
mutate('/api/photos')

// After deleting an album
mutate('/api/albums')
mutate('/api/photos')  // Photos may have been moved