MIF_E31221222/sigap-website/app/_components/map/crime-map.tsx

"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/app/_components/ui/card"
import { Skeleton } from "@/app/_components/ui/skeleton"
import DistrictLayer, { type DistrictFeature } from "./layers/district-layer"
import MapView from "./map"
import { Button } from "@/app/_components/ui/button"
import { AlertCircle } from "lucide-react"
import { getMonthName } from "@/app/_utils/common"
import { useRef, useState, useCallback, useMemo } from "react"
import { CrimePopup } from "./pop-up"
import type { CrimeIncident } from "./markers/crime-marker"
import { useFullscreen } from "@/app/_hooks/use-fullscreen"
import { Overlay } from "./overlay"
import MapLegend from "./controls/map-legend"
import { usePrefetchedCrimeData } from "@/app/(pages)/(admin)/dashboard/crime-management/crime-overview/_hooks/use-prefetch-crimes"
import { useGetCrimeCategories } from "@/app/(pages)/(admin)/dashboard/crime-management/crime-overview/_queries/queries"
import { ITopTooltipsMapId } from "./controls/map-tooltips"
import MapSelectors from "./controls/map-selector"
import TopNavigation from "./controls/map-navigations"
import CrimeSidebar from "./sidebar/map-sidebar"
import SidebarToggle from "./sidebar/sidebar-toggle"

export default function CrimeMap() {
    // State for sidebar
    const [sidebarCollapsed, setSidebarCollapsed] = useState(true)
    const [selectedDistrict, setSelectedDistrict] = useState<DistrictFeature | null>(null)
    const [selectedIncident, setSelectedIncident] = useState<CrimeIncident | null>(null)
    const [showLegend, setShowLegend] = useState<boolean>(true)
    const [selectedCategory, setSelectedCategory] = useState<string | "all">("all")
    const [activeControl, setActiveControl] = useState<ITopTooltipsMapId>("incidents")

    const mapContainerRef = useRef<HTMLDivElement>(null)

    // Use the custom fullscreen hook
    const { isFullscreen } = useFullscreen(mapContainerRef)

    // Toggle sidebar function
    const toggleSidebar = useCallback(() => {
        setSidebarCollapsed(!sidebarCollapsed)
    }, [sidebarCollapsed])

    // Use our new prefetched data hook
    const {
        availableYears,
        isYearsLoading,
        crimes,
        isCrimesLoading,
        crimesError,
        setSelectedYear,
        setSelectedMonth,
        selectedYear,
        selectedMonth,
    } = usePrefetchedCrimeData()

    // Extract all unique categories
    const { data: categoriesData, isLoading: isCategoryLoading } = useGetCrimeCategories()

    // Transform categories data to string array
    const categories = useMemo(() =>
        categoriesData ? categoriesData.map(category => category.name) : []
        , [categoriesData])

    // Filter incidents based on selected category
    const filteredCrimes = useMemo(() => {
        if (!crimes) return []
        if (selectedCategory === "all") return crimes

        return crimes.map((district: { incidents: CrimeIncident[], number_of_crime: number }) => ({
            ...district,
            incidents: district.incidents.filter(incident =>
                incident.category === selectedCategory
            ),
            // Update number_of_crime to reflect the filtered count
            number_of_crime: district.incidents.filter(
                incident => incident.category === selectedCategory
            ).length
        }))
    }, [crimes, selectedCategory])

    // Extract all incidents from all districts for marker display
    const allIncidents = useMemo(() => {
        if (!filteredCrimes) return []

        return filteredCrimes.flatMap((district: { incidents: CrimeIncident[] }) =>
            district.incidents.map((incident) => ({
                id: incident.id,
                timestamp: incident.timestamp,
                description: incident.description,
                status: incident.status,
                category: incident.category,
                type: incident.type,
                address: incident.address,
                latitude: incident.latitude,
                longitude: incident.longitude,
            }))
        )
    }, [filteredCrimes])

    // Handle district click
    const handleDistrictClick = (feature: DistrictFeature) => {
        setSelectedDistrict(feature)
    }

    // Handle incident marker click
    const handleIncidentClick = (incident: CrimeIncident) => {
        setSelectedIncident(incident)
    }

    // Reset filters
    const resetFilters = useCallback(() => {
        setSelectedYear(2024)
        setSelectedMonth("all")
        setSelectedCategory("all")
    }, [setSelectedYear, setSelectedMonth])

    // Determine the title based on filters
    const getMapTitle = () => {
        let title = `${selectedYear}`
        if (selectedMonth !== "all") {
            title += ` - ${getMonthName(Number(selectedMonth))}`
        }
        if (selectedCategory !== "all") {
            title += ` - ${selectedCategory}`
        }
        return title
    }

    return (
        <Card className="w-full p-0 border-none shadow-none h-96">
            <CardHeader className="flex flex-row pb-2 pt-0 px-0 items-center justify-between">
                <CardTitle>Crime Map {getMapTitle()}</CardTitle>
                <MapSelectors
                    availableYears={availableYears || []}
                    selectedYear={selectedYear}
                    setSelectedYear={setSelectedYear}
                    selectedMonth={selectedMonth}
                    setSelectedMonth={setSelectedMonth}
                    selectedCategory={selectedCategory}
                    setSelectedCategory={setSelectedCategory}
                    categories={categories}
                    isYearsLoading={isYearsLoading}
                    isCategoryLoading={isCategoryLoading}
                />
            </CardHeader>
            <CardContent className="p-0">
                {isCrimesLoading ? (
                    <div className="flex items-center justify-center h-96">
                        <Skeleton className="h-full w-full rounded-md" />
                    </div>
                ) : crimesError ? (
                    <div className="flex flex-col items-center justify-center h-96 gap-4">
                        <AlertCircle className="h-10 w-10 text-destructive" />
                        <p className="text-center">Failed to load crime data. Please try again later.</p>
                            <Button onClick={() => window.location.reload()}>Retry</Button>
                    </div>
                ) : (
                            <div className="relative h-[600px]" ref={mapContainerRef}>
                                <MapView mapStyle="mapbox://styles/mapbox/dark-v11" className="h-[600px] w-full rounded-md">
                                    {/* District Layer with crime data */}
                                    <DistrictLayer
                                        onClick={handleDistrictClick}
                                        crimes={filteredCrimes || []}
                                        year={selectedYear.toString()}
                                        month={selectedMonth.toString()}
                                        filterCategory={selectedCategory}
                                    />

                                    {/* Popup for selected incident */}
                                    {selectedIncident && (
                                        <CrimePopup
                                            longitude={selectedIncident.longitude}
                                            latitude={selectedIncident.latitude}
                                            onClose={() => setSelectedIncident(null)}
                                            crime={selectedIncident}
                                        />
                                    )}

                                    {/* Components that are only visible in fullscreen mode */}
                                    {isFullscreen && (
                                        <>
                                            <Overlay position="top" className="m-0 bg-transparent shadow-none p-0 border-none">
                                                <div className="flex justify-center">
                                                    <TopNavigation
                                                        activeControl={activeControl}
                                                        onControlChange={setActiveControl}
                                                        selectedYear={selectedYear}
                                                        setSelectedYear={setSelectedYear}
                                                        selectedMonth={selectedMonth}
                                                        setSelectedMonth={setSelectedMonth}
                                                        selectedCategory={selectedCategory}
                                                        setSelectedCategory={setSelectedCategory}
                                                        availableYears={availableYears || []}
                                                        categories={categories}
                                                    />
                                                </div>
                                            </Overlay>

                                            {/* Sidebar component without overlay */}
                                            <CrimeSidebar defaultCollapsed={sidebarCollapsed} />

                                            <MapLegend position="bottom-right" />
                                        </>
                                    )}
                        </MapView>
                    </div>
                )}
            </CardContent>
        </Card>
    )
}