<template>
  <div class="flex flex-col gap-4">
    <!-- Main Toolbar Row -->
    <div class="flex items-center justify-between gap-4">
      <!-- Left Side - Filters -->
      <div class="flex flex-wrap gap-2">
        <!-- View Toggle -->
        <div class="flex items-center border rounded-md h-8 p-0.5">
          <Button
            variant="ghost"
            size="sm"
            :class="{ 'bg-muted': viewMode === 'grid' }"
            @click="$emit('update:view-mode', 'grid')"
            class="h-7 px-2"
          >
            <LayoutGrid class="h-4 w-4" />
          </Button>
          <Button
            variant="ghost"
            size="sm"
            :class="{ 'bg-muted': viewMode === 'list' }"
            @click="$emit('update:view-mode', 'list')"
            class="h-7 px-2"
          >
            <List class="h-4 w-4" />
          </Button>
        </div>

        <!-- Category Filter -->
        <Popover>
          <PopoverTrigger as-child>
            <Button variant="outline" size="sm" class="h-8 border-dashed">
              <Package class="mr-2 h-4 w-4" />
              Category
              <Badge
                v-if="categoryFilter !== 'all'"
                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 category..." />
              <CommandList>
                <CommandEmpty>No category found.</CommandEmpty>
                <CommandGroup>
                  <CommandItem
                    value="all"
                    @select="$emit('update:category-filter', 'all')"
                  >
                    <div
                      :class="[
                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
                        categoryFilter === 'all'
                          ? 'bg-primary text-primary-foreground'
                          : 'opacity-50 [&_svg]:invisible'
                      ]"
                    >
                      <Check class="h-4 w-4" />
                    </div>
                    <span>All Categories</span>
                  </CommandItem>
                  <CommandItem
                    v-for="category in categories"
                    :key="category.value"
                    :value="category.value"
                    @select="$emit('update:category-filter', category.value)"
                  >
                    <div
                      :class="[
                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
                        categoryFilter === category.value
                          ? 'bg-primary text-primary-foreground'
                          : 'opacity-50 [&_svg]:invisible'
                      ]"
                    >
                      <Check class="h-4 w-4" />
                    </div>
                    <component :is="category.icon" class="h-4 w-4 mr-2" />
                    <span>{{ category.label }}</span>
                  </CommandItem>
                </CommandGroup>
              </CommandList>
            </Command>
          </PopoverContent>
        </Popover>

        <!-- Task Status Filter (only for list view) -->
        <TaskStatusFilter
          v-if="viewMode === 'list'"
          :all-task-types="allTaskTypes"
          :project-id="projectId"
          @filter-changed="$emit('task-status-filter-changed', $event)"
        />

        <!-- Column Visibility Control (only for list view) -->
        <Popover v-if="viewMode === 'list'">
          <PopoverTrigger as-child>
            <Button variant="outline" size="sm" class="h-8 border-dashed">
              <Settings2 class="mr-2 h-4 w-4" />
              View
              <Badge
                v-if="hiddenColumnsCount > 0"
                variant="secondary"
                class="ml-2 rounded-sm px-1 font-normal"
              >
                {{ hiddenColumnsCount }}
              </Badge>
            </Button>
          </PopoverTrigger>
          <PopoverContent class="w-[200px] p-0" align="end">
            <Command>
              <CommandInput placeholder="Search columns..." />
              <CommandList>
                <CommandEmpty>No columns found.</CommandEmpty>
                <CommandGroup>
                  <CommandSeparator />
                  <template v-for="column in allColumns">
                    <CommandItem
                      v-if="column.type == 'default'"
                      :key="column.id"
                      :value="column.id"
                      @select="toggleColumn(column.id, !(columnVisibility[column.id] !== false))"
                    >
                      <div
                        :class="[
                          'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
                          columnVisibility[column.id] !== false
                            ? 'bg-primary text-primary-foreground'
                            : 'opacity-50 [&_svg]:invisible'
                        ]"
                      >
                        <Check class="h-4 w-4" />
                      </div>
                      <span>{{ column.label }}</span>
                    </CommandItem>
                  </template>
                </CommandGroup>
                <CommandGroup>
                  <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
                    Task Types
                  </div>
                  <CommandSeparator />
                  <template v-for="column in allColumns">
                    <CommandItem
                      v-if="column.type == 'task'"
                      :key="column.id"
                      :value="column.id"
                      @select="toggleColumn(column.id, !(columnVisibility[column.id] !== false))"
                    >
                      <div
                        :class="[
                          'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
                          columnVisibility[column.id] !== false
                            ? 'bg-primary text-primary-foreground'
                            : 'opacity-50 [&_svg]:invisible'
                        ]"
                      >
                        <Check class="h-4 w-4" />
                      </div>
                      <span>{{ column.label }}</span>
                    </CommandItem>
                  </template>
                </CommandGroup>
              </CommandList>
            </Command>
          </PopoverContent>
        </Popover>

        <!-- Task Columns Toggle Button (only for list view) -->
        <Button
          v-if="viewMode === 'list'"
          variant="outline"
          size="sm"
          @click="toggleAllTaskColumns"
          class="h-8"
        >
          <ListTodo v-if="!allTaskColumnsVisible" class="h-4 w-4 mr-2" />
          <ListX v-else class="h-4 w-4 mr-2" />
          {{ allTaskColumnsVisible ? 'Hide' : 'Show' }} Tasks
        </Button>

        <!-- Detail Panel Enable/Disable Toggle Button (only for list view) -->
        <Button 
          v-if="viewMode === 'list'"
          @click="$emit('toggle-detail-panel')"
          :variant="isDetailPanelEnabled ? 'default' : 'outline'"
          size="sm"
          :class="[
            'h-8 w-8 p-0',
            isDetailPanelEnabled ? 'bg-primary text-primary-foreground hover:bg-primary/90' : ''
          ]"
          :title="isDetailPanelEnabled ? 'Disable Auto Detail Panel' : 'Enable Auto Detail Panel'"
        >
          <PanelRightClose v-if="isDetailPanelEnabled" class="h-4 w-4" />
          <PanelRightOpen v-else class="h-4 w-4" />
        </Button>

        <!-- Clear Filters -->
        <Button
          v-if="hasFilters"
          variant="ghost"
          size="sm"
          class="h-8 px-2 lg:px-3"
          @click="clearFilters"
        >
          Reset
          <X class="ml-2 h-4 w-4" />
        </Button>
      </div>

      <!-- Right Side - Search and Actions -->
      <div class="flex items-center gap-2 flex-shrink-0">
        <!-- Search -->
        <div class="relative w-64">
          <Search class="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            :model-value="search"
            @update:model-value="debouncedSearch"
            placeholder="Search assets..."
            class="pl-9 h-8"
          />
        </div>

        <!-- Thumbnail Toggle -->
        <Button
          variant="outline"
          size="sm"
          @click="$emit('update:show-thumbnails', !showThumbnails)"
          class="h-8 w-8 p-0"
          :title="showThumbnails ? 'Hide Thumbnails' : 'Show Thumbnails'"
        >
          <ImageIcon v-if="!showThumbnails" class="h-4 w-4" />
          <ImageOff v-else class="h-4 w-4" />
        </Button>

        <!-- Create Asset Button -->
        <Button @click="$emit('create-asset')" size="sm" class="h-8 w-8 p-0">
          <Plus class="h-4 w-4" />
        </Button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { 
  LayoutGrid, List, Search, Package, Plus, ImageIcon, ImageOff,
  PanelRightClose, PanelRightOpen, Check, X, Settings2, ListTodo, ListX
} 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,
  CommandItem,
  CommandList,
  CommandSeparator,
} from '@/components/ui/command'
import TaskStatusFilter from './TaskStatusFilter.vue'
import type { VisibilityState } from '@tanstack/vue-table'
import type { Asset, AssetCategory } from '@/services/asset'

interface CategoryOption {
  value: AssetCategory
  label: string
  icon: any
}

interface Props {
  viewMode: 'grid' | 'list'
  categoryFilter: AssetCategory | 'all'
  search: string
  columnVisibility: VisibilityState
  categories: CategoryOption[]
  allTaskTypes: string[]
  projectId: number
  selectedAsset: Asset | null
  isDetailPanelEnabled: boolean
  showThumbnails: boolean
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:view-mode': [value: 'grid' | 'list']
  'update:category-filter': [value: AssetCategory | 'all']
  'update:search': [value: string]
  'update:column-visibility': [value: VisibilityState]
  'update:show-thumbnails': [value: boolean]
  'task-status-filter-changed': [value: string]
  'toggle-detail-panel': []
  'create-asset': []
}>()

// Column definitions - computed to be reactive to allTaskTypes changes
const allColumns = computed(() => [
  { id: 'thumbnail', label: 'Thumbnail', type: 'default' },
  { id: 'name', label: 'Asset Name', type: 'default' },
  { id: 'category', label: 'Category', type: 'default' },
  { id: 'status', label: 'Status', type: 'default' },
  { id: 'description', label: 'Description', type: 'default' },
  { id: 'updatedAt', label: 'Updated', type: 'default' },
  ...props.allTaskTypes.map(taskType => ({
    id: taskType,
    label: taskType.charAt(0).toUpperCase() + taskType.slice(1),
    type: 'task'
  })),
])

// Computed
const hasFilters = computed(() => {
  return (
    props.categoryFilter !== 'all' ||
    props.search !== ''
  )
})

const hiddenColumnsCount = computed(() => {
  return allColumns.value.filter(col => props.columnVisibility[col.id] === false).length
})

// Check if all task columns are visible
const allTaskColumnsVisible = computed(() => {
  const taskColumns = allColumns.value.filter(col => col.type === 'task')
  return taskColumns.length > 0 && taskColumns.every(col => props.columnVisibility[col.id] !== false)
})

// Debounced search
let searchTimeout: ReturnType<typeof setTimeout> | null = null
const debouncedSearch = (value: string | number) => {
  const searchValue = typeof value === 'string' ? value : String(value)
  if (searchTimeout) clearTimeout(searchTimeout)
  searchTimeout = setTimeout(() => {
    emit('update:search', searchValue)
  }, 300)
}

// Methods
const toggleColumn = (columnId: string, value: any) => {
  const newVisibility = { ...props.columnVisibility, [columnId]: value as boolean }
  emit('update:column-visibility', newVisibility)
}

const toggleAllTaskColumns = () => {
  const newVisibility = { ...props.columnVisibility }
  const taskColumns = allColumns.value.filter(col => col.type === 'task')
  
  // If all task columns are visible, hide them; otherwise show them
  const shouldHide = allTaskColumnsVisible.value
  
  taskColumns.forEach(col => {
    newVisibility[col.id] = !shouldHide
  })
  
  emit('update:column-visibility', newVisibility)
}

const clearFilters = () => {
  emit('update:category-filter', 'all')
  emit('update:search', '')
}
</script>