<template>
  <div class="h-full flex flex-col">
    <!-- Header - Shot Task Style -->
    <div class="sticky top-0 z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b pb-4 px-4 sm:px-6 pt-4 sm:pt-6 mb-4">
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-2xl font-semibold">My Tasks</h1>
          <p class="text-sm text-muted-foreground mt-1">
            View and track your assigned tasks across all projects
          </p>
        </div>
        <div class="flex items-center gap-4">
          <div class="text-sm text-muted-foreground">
            <span class="font-semibold">{{ tasks.length }}</span> total tasks
            <span v-if="overdueTasks.length > 0" class="ml-4 text-destructive font-semibold">
              {{ overdueTasks.length }} overdue
            </span>
          </div>
        </div>
      </div>

      <!-- Filter Toolbar -->
      <div class="flex flex-wrap gap-2 mt-4">
        <!-- Project Filter -->
        <Select v-model="selectedProjectId" @update:model-value="handleProjectChange">
          <SelectTrigger class="w-[250px] h-8">
            <SelectValue placeholder="All Projects" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Projects</SelectItem>
            <SelectItem v-for="project in projects" :key="project.id" :value="String(project.id)">
              {{ project.name }}
            </SelectItem>
          </SelectContent>
        </Select>

        <!-- Status Filter -->
        <Select v-model="selectedStatus" @update:model-value="handleStatusChange">
          <SelectTrigger class="w-[200px] h-8">
            <SelectValue placeholder="All Statuses" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Statuses</SelectItem>
            <SelectItem value="not_started">Not Started</SelectItem>
            <SelectItem value="in_progress">In Progress</SelectItem>
            <SelectItem value="submitted">Submitted</SelectItem>
            <SelectItem value="approved">Approved</SelectItem>
            <SelectItem value="retake">Retake</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>

    <!-- Content -->
    <div class="flex-1 overflow-auto px-4 sm:px-6 pb-6">
      <!-- Task List -->
      <div v-if="isLoading" class="flex items-center justify-center py-12">
        <div class="flex items-center gap-2">
          <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
          <span class="text-muted-foreground">Loading tasks...</span>
        </div>
      </div>
      <div v-else-if="tasks.length === 0" class="text-center py-12">
        <ListTodo class="h-12 w-12 mx-auto text-muted-foreground mb-4" />
        <h3 class="text-lg font-semibold mb-2">No tasks found</h3>
        <p class="text-muted-foreground">
          {{ selectedProjectId !== 'all' || selectedStatus !== 'all' ? 'Try adjusting your filters' : 'No tasks assigned to you' }}
        </p>
      </div>
      <TaskList v-else @task-selected="handleTaskSelected" :tasks="tasks" />
    </div>

    <!-- Task Detail Panel -->
    <TaskDetailPanel
      v-if="selectedTask"
      :task-id="selectedTask.id"
      @close="handleClosePanel"
      @task-updated="handleTaskUpdated"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ListTodo } from 'lucide-vue-next'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import TaskList from '@/components/task/TaskList.vue'
import TaskDetailPanel from '@/components/task/TaskDetailPanel.vue'
import { taskService, type TaskListItem } from '@/services/task'
import { projectService, type Project } from '@/services/project'

const router = useRouter()

// State
const tasks = ref<TaskListItem[]>([])
const projects = ref<Project[]>([])
const selectedProjectId = ref<string>('all')
const selectedStatus = ref<string>('all')
const isLoading = ref(false)
const selectedTask = ref<TaskListItem | null>(null)

// Computed
const overdueTasks = computed(() => {
  const now = new Date()
  return tasks.value.filter(task => {
    if (!task.deadline) return false
    const deadline = new Date(task.deadline)
    return deadline < now && task.status !== 'approved'
  })
})

// Methods
async function fetchMyTasks() {
  isLoading.value = true
  try {
    const projectId = selectedProjectId.value === 'all' ? undefined : parseInt(selectedProjectId.value)
    const status = selectedStatus.value === 'all' ? undefined : selectedStatus.value
    tasks.value = await taskService.getMyTasks(projectId, status)
  } catch (error) {
    console.error('Failed to fetch my tasks:', error)
  } finally {
    isLoading.value = false
  }
}

async function fetchProjects() {
  try {
    projects.value = await projectService.getUserProjects()
  } catch (error) {
    console.error('Failed to fetch projects:', error)
  }
}

function handleProjectChange() {
  fetchMyTasks()
}

function handleStatusChange() {
  fetchMyTasks()
}

function handleTaskSelected(task: any) {
  selectedTask.value = task
}

function handleClosePanel() {
  selectedTask.value = null
}

function handleTaskUpdated() {
  fetchMyTasks()
}

// Lifecycle
onMounted(async () => {
  await Promise.all([fetchMyTasks(), fetchProjects()])
})
</script>
