"use client"

import { Button } from "@/app/_components/ui/button"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/app/_components/ui/tooltip"
import { Popover, PopoverContent, PopoverTrigger } from "@/app/_components/ui/popover"
import { ChevronDown, Siren } from "lucide-react"
import { IconMessage } from "@tabler/icons-react"

import { useEffect, useRef, useState } from "react"
import type { ITooltips } from "./tooltips"
import MonthSelector from "../month-selector"
import YearSelector from "../year-selector"
import CategorySelector from "../category-selector"
import SourceTypeSelector from "../source-type-selector"

// Define the additional tools and features
const additionalTooltips = [
    { id: "reports" as ITooltips, icon: <IconMessage size={20} />, label: "Police Report" },
    { id: "recents" as ITooltips, icon: <Siren size={20} />, label: "Recent incidents" },
]

interface AdditionalTooltipsProps {
    activeControl?: string
    onControlChange?: (controlId: ITooltips) => void
    selectedYear: number
    setSelectedYear: (year: number) => void
    selectedMonth: number | "all"
    setSelectedMonth: (month: number | "all") => void
    selectedCategory: string | "all"
    setSelectedCategory: (category: string | "all") => void
    selectedSourceType: string
    setSelectedSourceType: (sourceType: string) => void
    availableYears?: (number | null)[]
    availableSourceTypes?: string[]
    categories?: string[]
    panicButtonTriggered?: boolean
}

export default function AdditionalTooltips({
    activeControl,
    onControlChange,
    selectedYear,
    setSelectedYear,
    selectedMonth,
    setSelectedMonth,
    selectedCategory,
    setSelectedCategory,
    selectedSourceType = "cbu",
    setSelectedSourceType,
    availableYears = [],
    availableSourceTypes = [],
    categories = [],
    panicButtonTriggered = false,
}: AdditionalTooltipsProps) {
    const [showSelectors, setShowSelectors] = useState(false)
    const containerRef = useRef<HTMLDivElement>(null)
    const [isClient, setIsClient] = useState(false)

    const container = isClient ? document.getElementById("root") : null

    useEffect(() => {
        if (panicButtonTriggered && activeControl !== "alerts" && onControlChange) {
        onControlChange("alerts")
    }
  }, [panicButtonTriggered, activeControl, onControlChange])

    useEffect(() => {
      setIsClient(true)
  }, [])

    const isControlDisabled = (controlId: ITooltips) => {
        // When source type is CBU, disable all controls except for layers
        return selectedSourceType === "cbu" && controlId !== "layers"
    }

    return (
        <>
            <div ref={containerRef} className="z-10 bg-background rounded-md p-1 flex items-center space-x-1">
                <TooltipProvider>
                  {additionalTooltips.map((control) => {
                      const isButtonDisabled = isControlDisabled(control.id)

                      return (
                          <Tooltip key={control.id}>
                              <TooltipTrigger asChild>
                                  <Button
                                      variant={activeControl === control.id ? "default" : "ghost"}
                                      size="medium"
                            className={`h-8 w-8 rounded-md ${isButtonDisabled
                                    ? "opacity-40 cursor-not-allowed bg-gray-700/30 text-gray-400 border-gray-600 hover:bg-gray-700/30 hover:text-gray-400"
                                    : activeControl === control.id
                                        ? "bg-emerald-500 text-black hover:bg-emerald-500/90"
                                        : "text-white hover:bg-emerald-500/90 hover:text-background"
                                } ${control.id === "alerts" && panicButtonTriggered ? "animate-pulse ring-2 ring-red-500" : ""}`}
                            onClick={() => onControlChange?.(control.id)}
                            disabled={isButtonDisabled}
                            aria-disabled={isButtonDisabled}
                        >
                            {control.icon}
                            <span className="sr-only">{control.label}</span>
                        </Button>
                    </TooltipTrigger>
                    <TooltipContent side="bottom">
                        <p>{isButtonDisabled ? "Not available for CBU data" : control.label}</p>
                    </TooltipContent>
                </Tooltip>
              )
          })}

                  <Tooltip>
                      <Popover open={showSelectors} onOpenChange={setShowSelectors}>
                          <PopoverTrigger asChild>
                              <Button
                                  variant="ghost"
                                  size="icon"
                                  className="h-8 w-8 rounded-md text-white hover:bg-emerald-500/90 hover:text-background"
                                  onClick={() => setShowSelectors(!showSelectors)}
                              >
                                  <ChevronDown size={20} />
                                  <span className="sr-only">Filters</span>
                              </Button>
                          </PopoverTrigger>
                          <PopoverContent
                              container={containerRef.current || container || undefined}
                              className="w-auto p-3 bg-black/90 border-gray-700 text-white"
                              align="end"
                              style={{ zIndex: 2000 }}
                          >
                              <div className="flex flex-col gap-3">
                                  <div className="flex items-center gap-2">
                                      <span className="text-xs w-16">Source:</span>
                                      <SourceTypeSelector
                                          availableSourceTypes={availableSourceTypes}
                                          selectedSourceType={selectedSourceType}
                                          onSourceTypeChange={setSelectedSourceType}
                                          className="w-[180px]"
                                      />
                                  </div>
                                  <div className="flex items-center gap-2">
                                      <span className="text-xs w-16">Year:</span>
                                      <YearSelector
                                          availableYears={availableYears}
                                          selectedYear={selectedYear}
                                          onYearChange={setSelectedYear}
                                          className="w-[180px]"
                                      />
                                  </div>
                                  <div className="flex items-center gap-2">
                                      <span className="text-xs w-16">Month:</span>
                                      <MonthSelector
                                          selectedMonth={selectedMonth}
                                          onMonthChange={setSelectedMonth}
                                          className="w-[180px]"
                                      />
                                  </div>
                                  <div className="flex items-center gap-2">
                                      <span className="text-xs w-16">Category:</span>
                                      <CategorySelector
                                          categories={categories}
                                          selectedCategory={selectedCategory}
                                          onCategoryChange={setSelectedCategory}
                                          className="w-[180px]"
                                      />
                                  </div>
                              </div>
                          </PopoverContent>
                      </Popover>
                  </Tooltip>
              </TooltipProvider>
          </div>

          {showSelectors && (
              <div className="z-10 bg-background rounded-md p-2 flex items-center gap-2 md:hidden">
                  <SourceTypeSelector
                      availableSourceTypes={availableSourceTypes}
                      selectedSourceType={selectedSourceType}
                      onSourceTypeChange={setSelectedSourceType}
                      className="w-[80px]"
                  />
                  <YearSelector
                      availableYears={availableYears}
                      selectedYear={selectedYear}
                      onYearChange={setSelectedYear}
                      className="w-[80px]"
                  />
                  <MonthSelector selectedMonth={selectedMonth} onMonthChange={setSelectedMonth} className="w-[80px]" />
                  <CategorySelector
                      categories={categories}
                      selectedCategory={selectedCategory}
                      onCategoryChange={setSelectedCategory}
                      className="w-[80px]"
                  />
              </div>
          )}
      </>
  )
}