"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, Layers, Siren } from "lucide-react"
import { IconMessage } from "@tabler/icons-react"

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

// Define the additional tools and features
const additionalTooltips = [
    { id: "reports" as ITooltips, icon: <IconMessage size={20} />, label: "Police Report" },
    { id: "layers" as ITooltips, icon: <Layers size={20} />, label: "Map Layers" },
    { id: "alerts" as ITooltips, icon: <Siren size={20} />, label: "Active Alerts" },
]

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
    availableYears?: (number | null)[]
    categories?: string[]
}

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

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

    return (
        <>
            <div ref={containerRef} className="z-10 bg-background rounded-md p-1 flex items-center space-x-1">
                <TooltipProvider>
                    {additionalTooltips.map((control) => (
                        <Tooltip key={control.id}>
                            <TooltipTrigger asChild>
                                <Button
                                    variant={activeControl === control.id ? "default" : "ghost"}
                                    size="medium"
                                    className={`h-8 w-8 rounded-md ${activeControl === control.id
                                        ? "bg-emerald-500 text-black hover:bg-emerald-500/90"
                                        : "text-white hover:bg-emerald-500/90 hover:text-background"
                                        }`}
                                    onClick={() => onControlChange?.(control.id)}
                                >
                                    {control.icon}
                                    <span className="sr-only">{control.label}</span>
                                </Button>
                            </TooltipTrigger>
                            <TooltipContent side="bottom">
                                <p>{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">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">
                    <YearSelector
                        availableYears={availableYears}
                        selectedYear={selectedYear}
                        onYearChange={setSelectedYear}
                        className="w-[100px]"
                    />
                    <MonthSelector selectedMonth={selectedMonth} onMonthChange={setSelectedMonth} className="w-[100px]" />
                    <CategorySelector
                        categories={categories}
                        selectedCategory={selectedCategory}
                        onCategoryChange={setSelectedCategory}
                        className="w-[100px]"
                    />
                </div>
            )}
        </>
    )
}