<template>
  <div class="h-full flex flex-col">
    <!-- Header -->
    <div class="px-4 sm:px-6 py-4 sm:py-6 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div class="flex items-center justify-between">
        <div>
          <h2 class="text-xl font-semibold">Shots</h2>
          <p class="text-sm text-muted-foreground mt-1">
            Manage shots and their production tasks
          </p>
        </div>
      </div>
    </div>

    <!-- Content -->
    <div class="flex-1 overflow-hidden flex flex-col min-h-0">
      <!-- Shot Browser -->
      <div v-if="projectId" class="flex-1 min-h-0 flex flex-col">
        <ShotBrowser 
          :project-id="projectId" 
          :selected-episode-id="selectedEpisodeId ?? undefined"
        />
      </div>
      
      <div v-else class="p-4 sm:p-6">
        <!-- No project selected -->
        <Card>
          <CardContent class="p-12 text-center">
            <Camera class="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
            <h3 class="text-lg font-semibold mb-2">No Project Selected</h3>
            <p class="text-muted-foreground mb-4">
              Please select a project to view its shots.
            </p>
          </CardContent>
        </Card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { Camera } from 'lucide-vue-next'
import { Card, CardContent } from '@/components/ui/card'
import ShotBrowser from '@/components/shot/ShotBrowser.vue'

const route = useRoute()

// Reactive state
const selectedEpisodeId = ref<number | null | undefined>(undefined)

// Computed properties
const projectId = computed(() => {
  const id = route.params.projectId
  return typeof id === 'string' ? parseInt(id) : null
})

const episodeIdFromRoute = computed(() => {
  const id = route.params.episodeId
  return typeof id === 'string' ? parseInt(id) : null
})

// Initialize episode selection from URL
watch([projectId, episodeIdFromRoute], ([newProjectId, newEpisodeId]) => {
  if (newProjectId && selectedEpisodeId.value === undefined) {
    selectedEpisodeId.value = newEpisodeId || null
  }
}, { immediate: true })
</script>