<template>
  <div class="flex flex-col gap-4">
    <!-- Filters Row -->
    <div class="flex flex-wrap gap-2">
      <!-- My Tasks Quick Filter -->
      <Button
        variant="outline"
        size="sm"
        :class="{'bg-primary text-primary-foreground': myTasksFilter}"
        @click="toggleMyTasksFilter"
        class="h-8"
      >
        <User class="mr-2 h-4 w-4" />
        My Tasks
      </Button>
      
      <!-- Context Filter Toggle -->
      <SegmentedToggle
        :options="contextFilterOptions"
        :model-value="contextFilter"
        @update:model-value="$emit('update:context-filter', $event as 'all' | 'shots' | 'assets')"
      />
      <!-- Status Filter -->
      <Popover>
        <PopoverTrigger as-child>
          <Button variant="outline" size="sm" class="h-8 border-dashed">
            <ListFilter class="mr-2 h-4 w-4" />
            Status
            <Badge
              v-if="statusFilter.length > 0"
              variant="secondary"
              class="ml-2 rounded-sm px-1 font-normal"
            >
              {{ statusFilter.length }}
            </Badge>
          </Button>
        </PopoverTrigger>
        <PopoverContent class="w-[200px] p-0" align="start">
          <Command>
            <CommandInput placeholder="Search status..." />
            <CommandList>
              <CommandEmpty>No status found.</CommandEmpty>
              <CommandGroup>
                <CheckableCommandItem
                  v-for="status in statusOptions"
                  :key="status.value"
                  :value="status.value"
                  :model-value="statusFilter.includes(status.value)"
                  @update:model-value="toggleStatusFilter(status.value)"
                >
                  <span>{{ status.label }}</span>
                </CheckableCommandItem>
              </CommandGroup>
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>

      <!-- Task Type Filter -->
      <Popover>
        <PopoverTrigger as-child>
          <Button variant="outline" size="sm" class="h-8 border-dashed">
            <Tag class="mr-2 h-4 w-4" />
            Type
            <Badge
              v-if="typeFilter.length > 0"
              variant="secondary"
              class="ml-2 rounded-sm px-1 font-normal"
            >
              {{ typeFilter.length }}
            </Badge>
          </Button>
        </PopoverTrigger>
        <PopoverContent class="w-[200px] p-0" align="start">
          <Command>
            <CommandInput placeholder="Search type..." />
            <CommandList>
              <CommandEmpty>No type found.</CommandEmpty>
              <CommandGroup>
                <CheckableCommandItem
                  v-for="type in taskTypes"
                  :key="type"
                  :value="type"
                  :model-value="typeFilter.includes(type)"
                  @update:model-value="toggleTypeFilter(type)"
                >
                  <span class="capitalize">{{ type.replace(/_/g, ' ') }}</span>
                </CheckableCommandItem>
              </CommandGroup>
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>

      <!-- Episode Filter -->
      <Popover v-if="episodes.length > 0">
        <PopoverTrigger as-child>
          <Button variant="outline" size="sm" class="h-8 border-dashed">
            <Film class="mr-2 h-4 w-4" />
            Episode
            <Badge
              v-if="episodeFilter !== null"
              variant="secondary"
              class="ml-2 rounded-sm px-1 font-normal"
            >
              1
            </Badge>
          </Button>
        </PopoverTrigger>
        <PopoverContent class="w-[200px] p-0" align="start">
          <Command>
            <CommandInput placeholder="Search episode..." />
            <CommandList>
              <CommandEmpty>No episode found.</CommandEmpty>
              <CommandGroup>
                <CheckableCommandItem
                  value="all"
                  :model-value="episodeFilter === null"
                  @update:model-value="$emit('update:episode-filter', null)"
                >
                  <span>All Episodes</span>
                </CheckableCommandItem>
                <CheckableCommandItem
                  v-for="episode in episodes"
                  :key="episode.id"
                  :value="episode.id.toString()"
                  :model-value="episodeFilter === episode.id"
                  @update:model-value="$emit('update:episode-filter', episode.id)"
                >
                  <span>{{ episode.name }}</span>
                </CheckableCommandItem>
              </CommandGroup>
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>

      <!-- Assignee Filter -->
      <Popover v-if="assignees.length > 0">
        <PopoverTrigger as-child>
          <Button variant="outline" size="sm" class="h-8 border-dashed">
            <User class="mr-2 h-4 w-4" />
            Assignee
            <Badge
              v-if="assigneeFilter.length > 0"
              variant="secondary"
              class="ml-2 rounded-sm px-1 font-normal"
            >
              {{ assigneeFilter.length }}
            </Badge>
          </Button>
        </PopoverTrigger>
        <PopoverContent class="w-[200px] p-0" align="start">
          <Command>
            <CommandInput placeholder="Search assignee..." />
            <CommandList>
              <CommandEmpty>No assignee found.</CommandEmpty>
              <CommandGroup>
                <CheckableCommandItem
                  v-for="assignee in assignees"
                  :key="assignee.id"
                  :value="assignee.id.toString()"
                  :model-value="assigneeFilter.includes(assignee.id)"
                  @update:model-value="toggleAssigneeFilter(assignee.id)"
                >
                  <span>{{ assignee.name }}</span>
                </CheckableCommandItem>
              </CommandGroup>
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>

      <!-- Column Visibility -->
      <div class="ml-auto">
        <ColumnToggleList
          :columns="allColumns"
          :model-value="columnVisibility"
          @update:model-value="$emit('update:column-visibility', $event)"
        />
      </div>

      <!-- Detail Panel Enable/Disable Toggle Button -->
      <DetailPanelToggleButton
        :enabled="isDetailPanelEnabled"
        @toggle="$emit('toggle-detail-panel')"
      />

      <!-- Search -->
      <div class="relative flex-1">
        <Search class="absolute left-2 top-2 h-4 w-4 text-muted-foreground" />
        <Input
          :model-value="search"
          @update:model-value="debouncedSearch"
          placeholder="Search tasks..."
          class="h-8 pl-8"
        />
      </div>

      <!-- Clear Filters -->
      <ClearFiltersButton v-if="hasFilters" @clear="clearFilters" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Search, ListFilter, Tag, Film, Package, User } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover'
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandList,
  CheckableCommandItem,
} from '@/components/ui/command'
import ColumnToggleList from '@/components/shared/ColumnToggleList.vue'
import SegmentedToggle from '@/components/shared/SegmentedToggle.vue'
import DetailPanelToggleButton from '@/components/shared/DetailPanelToggleButton.vue'
import ClearFiltersButton from '@/components/shared/ClearFiltersButton.vue'
import { useDebouncedSearch } from '@/composables/useDebouncedSearch'
import type { VisibilityState } from '@tanstack/vue-table'
import type { Episode } from '@/services/episode'

interface Props {
  statusFilter: string[]
  typeFilter: string[]
  episodeFilter: number | null
  assigneeFilter: number[]
  contextFilter: 'all' | 'shots' | 'assets'
  search: string
  columnVisibility: VisibilityState
  episodes: Episode[]
  assignees: Array<{ id: number; name: string }>
  taskTypes: string[]
  myTasksFilter: boolean
  currentUserId: number | null
  isDetailPanelEnabled: boolean
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:status-filter': [value: string[]]
  'update:type-filter': [value: string[]]
  'update:episode-filter': [value: number | null]
  'update:assignee-filter': [value: number[]]
  'update:context-filter': [value: 'all' | 'shots' | 'assets']
  'update:search': [value: string]
  'update:column-visibility': [value: VisibilityState]
  'update:my-tasks-filter': [value: boolean]
  'toggle-detail-panel': []
}>()

// Status options
const statusOptions = [
  { value: 'not_started', label: 'Not Started' },
  { value: 'in_progress', label: 'In Progress' },
  { value: 'submitted', label: 'Submitted' },
  { value: 'approved', label: 'Approved' },
  { value: 'retake', label: 'Retake' },
]

const contextFilterOptions = [
  { value: 'all', label: 'All' },
  { value: 'shots', icon: Film },
  { value: 'assets', icon: Package },
]

// Column definitions
const allColumns = [
  { id: 'name', label: 'Task Name' },
  { id: 'task_type', label: 'Type' },
  { id: 'status', label: 'Status' },
  { id: 'context', label: 'Context' },
  { id: 'shot_asset', label: 'Shot/Asset' },
  { id: 'episode_name', label: 'Episode' },
  { id: 'assigned_user_name', label: 'Assignee' },
  { id: 'deadline', label: 'Deadline' },
  { id: 'created_at', label: 'Created' },
  { id: 'actions', label: 'Actions' },
]

// Computed
const hasFilters = computed(() => {
  return (
    props.statusFilter.length > 0 ||
    props.typeFilter.length > 0 ||
    props.episodeFilter !== null ||
    props.assigneeFilter.length > 0 ||
    props.contextFilter !== 'all' ||
    props.search !== '' ||
    props.myTasksFilter
  )
})

// Debounced search
const { debouncedSearch } = useDebouncedSearch((value) => emit('update:search', value))

// Methods
const toggleStatusFilter = (status: string) => {
  const newFilter = props.statusFilter.includes(status)
    ? props.statusFilter.filter((s) => s !== status)
    : [...props.statusFilter, status]
  emit('update:status-filter', newFilter)
}

const toggleTypeFilter = (type: string) => {
  const newFilter = props.typeFilter.includes(type)
    ? props.typeFilter.filter((t) => t !== type)
    : [...props.typeFilter, type]
  emit('update:type-filter', newFilter)
}

const toggleAssigneeFilter = (assigneeId: number) => {
  const newFilter = props.assigneeFilter.includes(assigneeId)
    ? props.assigneeFilter.filter((id) => id !== assigneeId)
    : [...props.assigneeFilter, assigneeId]
  emit('update:assignee-filter', newFilter)
}

const toggleMyTasksFilter = () => {
  const newValue = !props.myTasksFilter
  emit('update:my-tasks-filter', newValue)
  
  // When enabling My Tasks, set the assignee filter to current user
  if (newValue && props.currentUserId) {
    emit('update:assignee-filter', [props.currentUserId])
  } else if (!newValue) {
    // When disabling, clear the assignee filter
    emit('update:assignee-filter', [])
  }
}

const clearFilters = () => {
  emit('update:status-filter', [])
  emit('update:type-filter', [])
  emit('update:episode-filter', null)
  emit('update:assignee-filter', [])
  emit('update:context-filter', 'all')
  emit('update:search', '')
  emit('update:my-tasks-filter', false)
}
</script>
