<template>
  <v-app>
    <AppShell>
      <RouterView />
    </AppShell>
    <ImageViewer v-if="modal.isOpen" @close="modal.close()" />
    <AppSnackbar ref="snackbar" />
  </v-app>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'

import AppShell from './components/AppShell.vue'
import AppSnackbar from './components/AppSnackbar.vue'
import ImageViewer from './components/modal/ImageViewer.vue'
import { useModalStore } from './stores/modal.js'

const modal = useModalStore()
const snackbar = ref(null)
const route = useRoute()

onMounted(() => {
  // Expose snackbar via a simple global so stores can call it without props.
  window.__fcToast = (opts) => snackbar.value?.open(opts)
})

// Audit 2026-06-02: the modal is an overlay, not a page. When the
// route changes (RouterLink inside the modal, history back/forward,
// programmatic push from any view), close the modal so it doesn't
// hover over a different route. Watching route.name (not the path)
// keeps within-route nav like /artist/foo → /artist/bar from
// dismissing the modal mid-browse.
watch(() => route.name, () => {
  if (modal.isOpen) modal.close()
})
</script>
