import { create } from 'zustand'
import type { Photo } from '../types/photo'

type ViewMode = 'grid' | 'loupe'

interface PhotoStore {
  photos: Photo[]
  selectedPhotos: string[]
  activePhotoId: string | null
  lastSelectedIndex: number | null
  rangeStartIndex: number | null
  viewMode: ViewMode

  setPhotos: (photos: Photo[]) => void
  selectPhoto: (id: string, index: number) => void
  togglePhotoSelection: (id: string, index: number) => void
  selectRange: (endIndex: number) => void
  deselectPhoto: (id: string) => void
  clearSelection: () => void
  setActivePhoto: (id: string | null) => void
  setViewMode: (mode: ViewMode) => void
  openLoupe: (id: string) => void
  closeLoupe: () => void
}

export const usePhotoStore = create<PhotoStore>((set) => ({
  photos: [],
  selectedPhotos: [],
  activePhotoId: null,
  lastSelectedIndex: null,
  rangeStartIndex: null,
  viewMode: 'grid',

  setPhotos: (photos) => set({ photos }),
  
  selectPhoto: (id, index) => set({
    selectedPhotos: [id],
    activePhotoId: id,
    lastSelectedIndex: index,
    rangeStartIndex: index,
  }),
  
  togglePhotoSelection: (id, index) => set((state) => {
    const isSelected = state.selectedPhotos.includes(id)
    return {
      selectedPhotos: isSelected
        ? state.selectedPhotos.filter(photoId => photoId !== id)
        : [...state.selectedPhotos, id],
      lastSelectedIndex: index,
      rangeStartIndex: isSelected ? state.rangeStartIndex : index,
    }
  }),
  
  selectRange: (endIndex) => {
    // Note: The actual range selection logic should be handled in the Timeline component
    // which has access to the photos array
    set({
      lastSelectedIndex: endIndex,
    })
  },
  
  deselectPhoto: (id) => set((state) => ({
    selectedPhotos: state.selectedPhotos.filter(photoId => photoId !== id)
  })),
  
  clearSelection: () => set({ 
    selectedPhotos: [],
    lastSelectedIndex: null,
    rangeStartIndex: null,
  }),
  
  setActivePhoto: (id) => set({ activePhotoId: id }),

  setViewMode: (mode) => set({ viewMode: mode }),

  openLoupe: (id) => set({ viewMode: 'loupe', activePhotoId: id }),

  closeLoupe: () => set({ viewMode: 'grid' }),
}))