<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">Tasks</h2>
          <p class="text-sm text-muted-foreground mt-1">
            View and manage all project tasks
          </p>
        </div>
      </div>
    </div>

    <!-- Content -->
    <div class="flex-1 overflow-auto">
      <!-- Task Browser -->
      <div v-if="projectId">
        <TaskBrowser :project-id="projectId" />
      </div>
      
      <div v-else class="p-4 sm:p-6">
        <!-- No project selected -->
        <Card>
          <CardContent class="p-12 text-center">
            <ListTodo 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 tasks.
            </p>
          </CardContent>
        </Card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { ListTodo } from 'lucide-vue-next'
import { Card, CardContent } from '@/components/ui/card'
import TaskBrowser from '@/components/task/TaskBrowser.vue'

const route = useRoute()

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