<template>
  <v-container fluid class="py-6">
    <v-btn
      class="fc-select-toggle"
      :color="sel.isSelectMode ? 'accent' : undefined"
      :variant="sel.isSelectMode ? 'flat' : 'tonal'"
      size="small"
      @click="sel.isSelectMode ? sel.exitSelectMode() : sel.enterSelectMode()"
    >{{ sel.isSelectMode ? 'Done' : 'Select' }}</v-btn>

    <div class="fc-gallery-layout">
      <div class="fc-gallery-layout__main">
        <EmptyState v-if="store.isEmpty" />
        <GalleryGrid v-else @open="openImage" />
      </div>
      <TimelineSidebar v-if="store.images.length > 0" class="fc-gallery-layout__sidebar" />
    </div>

    <ImageViewer
      v-if="modal.currentImageId !== null"
      @close="closeImage"
    />
    <BulkEditorPanel />
  </v-container>
</template>

<script setup>
import { onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useGalleryStore } from '../stores/gallery.js'
import { useModalStore } from '../stores/modal.js'
import GalleryGrid from '../components/gallery/GalleryGrid.vue'
import TimelineSidebar from '../components/gallery/TimelineSidebar.vue'
import EmptyState from '../components/gallery/EmptyState.vue'
import ImageViewer from '../components/modal/ImageViewer.vue'
import BulkEditorPanel from '../components/gallery/BulkEditorPanel.vue'
import { useGallerySelectionStore } from '../stores/gallerySelection.js'

const store = useGalleryStore()
const modal = useModalStore()
const sel = useGallerySelectionStore()
const router = useRouter()
const route = useRoute()

onMounted(async () => {
  const tagId = parseInt(route.query.tag_id, 10)
  if (!isNaN(tagId)) store.setTagFilter(tagId)
  await store.loadInitial()
  await store.loadTimeline()
  // Open modal if URL has ?image=N
  const initial = parseInt(route.query.image, 10)
  if (!isNaN(initial)) modal.open(initial)
})

watch(() => route.query.tag_id, (q) => {
  sel.clear()  // result set changed — selected ids are no longer valid
  const tagId = parseInt(q, 10)
  store.setTagFilter(isNaN(tagId) ? null : tagId)
})

watch(() => route.query.image, (q) => {
  const id = parseInt(q, 10)
  if (!isNaN(id) && id !== modal.currentImageId) modal.open(id)
  else if (isNaN(id) && modal.currentImageId !== null) modal.close()
})

function openImage(id) {
  router.push({ query: { ...route.query, image: id } })
}
function closeImage() {
  const q = { ...route.query }
  delete q.image
  router.push({ query: q })
}
</script>

<style scoped>
.fc-gallery-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.fc-gallery-layout__main { flex: 1; min-width: 0; }
.fc-gallery-layout__sidebar { flex-shrink: 0; }
.fc-select-toggle {
  position: absolute; top: 12px; right: 16px; z-index: 1101;
}

@media (max-width: 900px) {
  .fc-gallery-layout { flex-direction: column-reverse; }
  .fc-gallery-layout__sidebar { width: 100%; max-height: 200px; }
}
</style>
