Keep/keep-notes/components/label-filter.tsx

'use client'

import { useState, useEffect } from 'react'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
  DropdownMenuCheckboxItem,
  DropdownMenuSeparator,
  DropdownMenuLabel,
} from '@/components/ui/dropdown-menu'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Filter } from 'lucide-react'
import { LABEL_COLORS } from '@/lib/types'
import { cn } from '@/lib/utils'
import { useLabels } from '@/context/LabelContext'
import { LabelBadge } from './label-badge'

interface LabelFilterProps {
  selectedLabels: string[]
  selectedColor?: string | null
  onFilterChange: (labels: string[]) => void
  onColorChange?: (color: string | null) => void
}

export function LabelFilter({ selectedLabels, selectedColor, onFilterChange, onColorChange }: LabelFilterProps) {
  const { labels, loading, getLabelColor } = useLabels()
  const [allLabelNames, setAllLabelNames] = useState<string[]>([])

  useEffect(() => {
    // Extract label names from labels array
    setAllLabelNames(labels.map((l: any) => l.name).sort())
  }, [labels])

  const handleToggleLabel = (label: string) => {
    if (selectedLabels.includes(label)) {
      onFilterChange(selectedLabels.filter((l: string) => l !== label))
    } else {
      onFilterChange([...selectedLabels, label])
    }
  }

  const handleClearAll = () => {
    onFilterChange([])
    onColorChange?.(null)
  }

  const handleColorFilter = (color: string) => {
    if (selectedColor === color) {
      onColorChange?.(null)
    } else {
      onColorChange?.(color)
    }
  }

  if (loading || allLabelNames.length === 0) return null

  return (
    <div className="flex items-center gap-2">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" size="sm" className="h-9">
            <Filter className="h-4 w-4 mr-2" />
            Filter by Label
            {selectedLabels.length > 0 && (
              <Badge variant="secondary" className="ml-2 h-5 min-w-5 px-1.5">
                {selectedLabels.length}
              </Badge>
            )}
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-80">
          <DropdownMenuLabel className="flex items-center justify-between">
            <span>Filter by Labels</span>
            {selectedLabels.length > 0 && (
              <Button
                variant="ghost"
                size="sm"
                onClick={handleClearAll}
                className="h-6 text-xs"
              >
                Clear
              </Button>
            )}
          </DropdownMenuLabel>
          <DropdownMenuSeparator />
          
          {/* Color Filter */}
          <div className="p-2">
            <p className="text-xs font-medium mb-2 text-gray-600 dark:text-gray-400">Filter by Color</p>
            <div className="grid grid-cols-3 gap-2">
              {Object.entries(LABEL_COLORS).map(([colorName, colorClasses]) => {
                const isSelected = selectedColor === colorName
                const labelCount = labels.filter((l: any) => l.color === colorName).length

                return (
                  <button
                    key={colorName}
                    onClick={() => handleColorFilter(colorName)}
                    className={cn(
                      'flex items-center gap-2 p-2 rounded-lg border-2 transition-all hover:scale-105',
                      isSelected ? 'ring-2 ring-blue-500' : 'border-gray-300 dark:border-gray-600'
                    )}
                  >
                    <div
                      className={cn(
                        'w-6 h-6 rounded-full border-2',
                        colorClasses.bg,
                        isSelected ? 'border-blue-500 dark:border-blue-400' : colorClasses.border
                      )}
                    />
                    <span className="text-xs ml-2">{labelCount}</span>
                  </button>
                )
              })}
            </div>
          </div>
          <DropdownMenuSeparator />
          
          {/* Label Filters */}
          {!loading && allLabelNames.map((labelName: string) => {
            const isSelected = selectedLabels.includes(labelName)
            const isColorFiltered = selectedColor && selectedColor !== 'gray'

            return (
              <DropdownMenuCheckboxItem
                key={labelName}
                checked={isSelected && !isColorFiltered}
                onCheckedChange={() => handleToggleLabel(labelName)}
              >
                <LabelBadge
                  label={labelName}
                  isDisabled={!!isColorFiltered}
                />
              </DropdownMenuCheckboxItem>
            )
          })}
        </DropdownMenuContent>
      </DropdownMenu>

      {/* Active filters display */}
      {!loading && selectedLabels.length > 0 && (
        <div className="flex flex-wrap gap-1">
          {selectedLabels.map((labelName: string) => (
            <LabelBadge
              key={labelName}
              label={labelName}
              variant="filter"
              onClick={() => handleToggleLabel(labelName)}
            />
          ))}
        </div>
      )}
    </div>
  )
}