'use client'

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

interface LabelFilterProps {
  selectedLabels: string[]
  onFilterChange: (labels: string[]) => void
}

export function LabelFilter({ selectedLabels, onFilterChange }: LabelFilterProps) {
  const { labels, loading } = 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([])
  }

  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 />
          
          {/* Label Filters */}
          <div className="max-h-64 overflow-y-auto px-1 pb-1">
            {!loading && allLabelNames.map((labelName: string) => {
              const isSelected = selectedLabels.includes(labelName)

              return (
                <div
                  key={labelName}
                  onClick={(e) => {
                    e.preventDefault()
                    handleToggleLabel(labelName)
                  }}
                  className={cn(
                    "flex items-center gap-2 p-2 rounded-sm cursor-pointer text-sm hover:bg-accent hover:text-accent-foreground"
                  )}
                >
                  <div className={cn(
                    "flex h-4 w-4 items-center justify-center rounded border border-primary",
                    isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
                  )}>
                    <Check className="h-3 w-3" />
                  </div>
                  <LabelBadge
                    label={labelName}
                  />
                </div>
              )
            })}
          </div>
        </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>
  )
}