"use client"

import type React from "react"
import { useState, useMemo, useEffect, useRef } from "react"
import { Check, Search, X } from "lucide-react"
import { cn } from "@/lib/utils"
// import { Badge } from "@/app/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

export interface MultiSelectOption {
  id: string
  name: string
  icon?: React.ReactNode
}

interface MultiSelectProps {
  options: MultiSelectOption[]
  selected: string[]
  onValueChange: (selected: string[]) => void
  placeholder?: string
  searchPlaceholder?: string
  className?: string
  showSelectAll?: boolean
  disabled?: boolean
  width?: string
}

export function MultiSelect({
  options,
  selected,
  onValueChange,
  placeholder = "Select options...",
  searchPlaceholder = "Search options...",
  className,
  showSelectAll = true,
  disabled = false,
  width = "w-[223px]",
}: MultiSelectProps) {
  const [open, setOpen] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")
  const dropdownRef = useRef<HTMLDivElement>(null)

  // Filter options based on search query
  const filteredOptions = useMemo(() => {
    if (!searchQuery) return options
    return options.filter((option) => option.name.toLowerCase().includes(searchQuery.toLowerCase()))
  }, [options, searchQuery])

  // Get selected option objects
  const selectedOptions = useMemo(() => {
    return options.filter((option) => selected.includes(option.name))
  }, [options, selected])

  // Handle individual option toggle
  const toggleOption = (name: string) => {
    const newSelected = selected.includes(name) ? selected.filter((item) => item !== name) : [...selected, name]
    
    onValueChange(newSelected)
  }

  // Handle select all toggle
  const toggleSelectAll = () => {
    const allFilteredValues = filteredOptions.map((option) => option.name)
    const allSelected = allFilteredValues.every((name) => selected.includes(name))

    if (allSelected) {
      // Deselect all filtered options
      const newSelected = selected.filter((name) => !allFilteredValues.includes(name))
      onValueChange(newSelected)
    } else {
      // Select all filtered options
      const newSelected = Array.from(new Set([...selected, ...allFilteredValues]))
      onValueChange(newSelected)
    }
  }

  // Remove individual selected item
  // const removeSelected = (name: string) => {
  //   console.log("removeSelected", name)
  //   console.log("selected", selected)

  //   onValueChange(selected.filter((item) => item !== name))
  // }

  // Check if all filtered options are selected
  const allFilteredSelected =
    filteredOptions.length > 0 && filteredOptions.every((option) => selected.includes(option.name))

  // Close dropdown when clicking outside (disabled in sidebar context)
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      // Check if we're inside a Sheet/sidebar context
      const isInSidebar = (event.target as Element)?.closest('[data-radix-dialog-content]')
      if (isInSidebar) return // Don't close if inside sidebar
      
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setOpen(false)
      }
    }
    if (open) {
      document.addEventListener("mousedown", handleClickOutside)
    }
    return () => {
      document.removeEventListener("mousedown", handleClickOutside)
    }
  }, [open])

  return (
    <TooltipProvider>
      <div ref={dropdownRef} className={cn("relative w-full", className)}>
        {/* Dropdown */}
        <div className="relative bg-background">
          <Button
            type="button"
            variant="outline"
            role="combobox"
            aria-expanded={open}
            className={`${width} justify-start text-left font-normal`}
            disabled={disabled}
            onClick={(e) => {
              // Don't toggle if clicking on X icon
              if ((e.target as HTMLElement).closest('.remove-item')) {
                e.preventDefault()
                e.stopPropagation()
                return
              }
              setOpen(!open)
            }}
          >
            {selectedOptions.length === 0 ? (
              <span className="text-muted-foreground">{placeholder}</span>
            ) : selectedOptions.length <= 2 ? (
              <div className="flex items-center gap-1">
                {selectedOptions.slice(0, 2).map((option) => (
                <span key={option.id} className="capitalize flex items-center gap-1 text-sm text-yellow-600 border border-yellow-600 bg-yellow-50 rounded-md pl-1">
                    {option.name.length > 7
                      ? option.name.slice(0, 5) + ".."
                      : option.name}
                    <Button
                      type="button"
                      variant="outline"
                      className="w-2 h-2 cursor-pointer hover:text-red-600 remove-item text-yellow-600 bg-yellow-50 border-none"
                      onClick={(e) => {
                        e.preventDefault()
                        e.stopPropagation()
                        toggleOption(option.name)
                      }}
                    >
                      <X className="w-2 h-2" />
                    </Button>
                  </span>
                ))}
              </div>
            ) : (
              <div className="flex items-center gap-2">
                {selectedOptions.slice(0, 2).map((option) => (
                  <span key={option.id} className="capitalize flex items-center gap-1 text-sm text-yellow-600 border border-yellow-600 bg-yellow-50 rounded-md pl-1">
                    {option.name.length > 6
                      ? option.name.slice(0, 5) + ".."
                      : option.name}
                    <Button
                      type="button"
                      variant="outline"
                      className="w-2 h-2 cursor-pointer hover:text-red-600 remove-item text-yellow-600 bg-yellow-50 border-none"
                      onClick={(e) => {
                        e.preventDefault()
                        e.stopPropagation()
                        toggleOption(option.name)
                      }}
                    >
                      <X className="w-2 h-2" />
                    </Button>
                  </span>
                ))}
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <span className="font-medium cursor-pointer text-yellow-600 border border-yellow-600 bg-yellow-50 rounded-md px-1">+{selectedOptions.length - 2}</span>
                    </TooltipTrigger>
                    <TooltipContent>
                      <div className="max-w-xs">
                        {selectedOptions.slice(2).map((option, index) => (
                          <div key={index} className="flex items-center gap-1 text-xs capitalize">
                            {option.icon && option.icon}{""}
                            {option.name}
                          </div>
                        ))}
                      </div>
                    </TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              </div>
            )}
          </Button>

          {open && (
            <div className="absolute top-full left-0 z-50 w-full bg-background border rounded-md shadow-lg mt-1">
              {/* Search */}
              <div className="p-3 border-b">
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                  <Input
                    placeholder={searchPlaceholder}
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="pl-9"
                  />
                </div>
              </div>

              {/* Options */}
              <div className="max-h-64 overflow-y-auto bg-background">
                {/* Clear Option */}
                {selected.length > 0 && (
                  <div className="p-3 border-b">
                    <button
                      type="button"
                      className="text-sm font-medium cursor-pointer text-red-600 hover:text-red-800 w-full text-left"
                      onClick={(e) => {
                        e.preventDefault()
                        e.stopPropagation()
                        onValueChange([])
                      }}
                    >
                      Clear All
                    </button>
                  </div>
                )}

                {showSelectAll && filteredOptions.length > 0 && (
                  <div className="p-3 border-b">
                    <div className="flex items-center space-x-2" onClick={(e) => e.stopPropagation()}>
                      <Checkbox id="select-all" checked={allFilteredSelected} onCheckedChange={toggleSelectAll} />
                      <label
                        htmlFor="select-all"
                        className="text-sm font-medium leading-none cursor-pointer"
                      >
                        Select All
                      </label>
                    </div>
                  </div>
                )}

                {filteredOptions.length === 0 ? (
                  <div className="p-3 text-center text-sm text-muted-foreground">No options found</div>
                ) : (
                  <div className="p-1">
                    {filteredOptions.map((option) => (
                      <div
                        key={option.id}
                        className="flex items-center space-x-2 p-2 hover:bg-accent hover:text-accent-foreground rounded-sm cursor-pointer"
                        onClick={(e) => {
                          e.preventDefault()
                          e.stopPropagation()
                          toggleOption(option.name)
                        }}
                      >
                        {option.icon && <span className="w-4 h-4 flex-shrink-0 flex items-center">{option.icon}</span>}
                        <span className="text-sm flex-1 capitalize ml-2">{option.name}</span>
                        {selected.includes(option.name) && <Check className="w-4 h-4 text-yellow-500" />}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          )}
        </div>
      </div>
    </TooltipProvider>
  )
}