<template>
  <div class="flex h-[calc(100vh-5rem)] w-full flex-col md:flex-row">
    <div class="relative h-2/3 w-full md:h-full md:flex-1">
      <ClientOnly>
        <KestrelMap
          :devices="devices ?? []"
          :pois="pois ?? []"
          :live-sessions="liveSessions ?? []"
          :can-edit-pois="canEditPois"
          @select="selectedCamera = $event"
          @select-live="onSelectLive($event)"
          @refresh-pois="refreshPois"
        />
      </ClientOnly>
    </div>
    <CameraViewer
      v-if="selectedCamera"
      :camera="selectedCamera"
      @close="selectedCamera = null"
    />
  </div>
</template>

<script setup>
const { devices, liveSessions } = useCameras()
const { data: pois, refresh: refreshPois } = usePois()
const { canEditPois } = useUser()
const selectedCamera = ref(null)

function onSelectLive(session) {
  const latest = (liveSessions.value || []).find(s => s.id === session?.id)
  selectedCamera.value = latest ?? session
}
</script>
