"use client"

import { useState, useRef, useEffect, useCallback } from "react"
import { useMap } from "react-map-gl/mapbox"
import { BASE_BEARING, BASE_DURATION, BASE_PITCH, BASE_ZOOM, MAPBOX_TILESET_ID, PITCH_3D, ZOOM_3D } from "@/app/_utils/const/map"
import DistrictPopup from "../pop-up/district-popup"
import DistrictExtrusionLayer from "./district-extrusion-layer"
import ClusterLayer from "./cluster-layer"
import HeatmapLayer from "./heatmap-layer"
import TimelineLayer from "./timeline-layer"

import type { ICrimes, IIncidentLogs } from "@/app/_utils/types/crimes"
import type { IDistrictFeature } from "@/app/_utils/types/map"
import { createFillColorExpression, getCrimeRateColor, processCrimeDataByDistrict } from "@/app/_utils/map"
import UnclusteredPointLayer from "./uncluster-layer"

import { toast } from "sonner"
import type { ITooltipsControl } from "../controls/top/tooltips"
import type { IUnits } from "@/app/_utils/types/units"
import UnitsLayer from "./units-layer"
import DistrictFillLineLayer from "./district-layer"

import TimezoneLayer from "./timezone"
import FaultLinesLayer from "./fault-lines"
import RecentIncidentsLayer from "./recent-incidents-layer"
import IncidentPopup from "../pop-up/incident-popup"
import { manageLayerVisibility } from "@/app/_utils/map/layer-visibility"

// Interface for crime incident
interface ICrimeIncident {
    id: string
    district?: string
    category?: string
    type_category?: string | null
    description?: string
    status: string
    address?: string | null
    timestamp?: Date
    latitude?: number
    longitude?: number
}

// District layer props
export interface IDistrictLayerProps {
    visible?: boolean
    onClick?: (feature: IDistrictFeature) => void
    onDistrictClick?: (feature: IDistrictFeature) => void
    map?: any
    year: string
    month: string
    filterCategory: string | "all"
    crimes: ICrimes[]
    units?: IUnits[]
    tilesetId?: string
    focusedDistrictId?: string | null
    setFocusedDistrictId?: (id: string | null) => void
    crimeDataByDistrict?: Record<string, any>
    showFill?: boolean
    activeControl?: ITooltipsControl
}

interface LayersProps {
    visible?: boolean
    crimes: ICrimes[]
    units?: IUnits[]
    recentIncidents: IIncidentLogs[]
    year: string
    month: string
    filterCategory: string | "all"
    activeControl: ITooltipsControl
    tilesetId?: string
    useAllData?: boolean
    showEWS?: boolean
    sourceType?: string
}

export default function Layers({
    visible = true,
    crimes,
    recentIncidents,
    units,
    year,
    month,
    filterCategory,
    activeControl,
    tilesetId = MAPBOX_TILESET_ID,
    useAllData = false,
    showEWS = true,
    sourceType = "cbt",
}: LayersProps) {
    const animationRef = useRef<number | null>(null)

    const { current: map } = useMap()

    if (!map) {
        toast.error("Map not found")
        return null
    }

    const mapboxMap = map.getMap()

    const [selectedDistrict, setSelectedDistrict] = useState<IDistrictFeature | null>(null)
    const [selectedIncident, setSelectedIncident] = useState<ICrimeIncident | null>(null)
    const [focusedDistrictId, setFocusedDistrictId] = useState<string | null>(null)
    const selectedDistrictRef = useRef<IDistrictFeature | null>(null)
    // Track if we're currently interacting with a marker to prevent district selection
    const isInteractingWithMarker = useRef<boolean>(false)

    const crimeDataByDistrict = processCrimeDataByDistrict(crimes)

    const handlePopupClose = useCallback(() => {
        selectedDistrictRef.current = null
        setSelectedDistrict(null)
        setSelectedIncident(null)
        setFocusedDistrictId(null)
        isInteractingWithMarker.current = false

        if (map) {
            map.easeTo({
                zoom: BASE_ZOOM,
                pitch: BASE_PITCH,
                bearing: BASE_BEARING,
                duration: BASE_DURATION,
                easing: (t) => t * (2 - t),
            })

            if (map.getLayer("clusters")) {
                map.getMap().setLayoutProperty("clusters", "visibility", "visible")
            }

            if (map.getLayer("unclustered-point")) {
                map.getMap().setLayoutProperty("unclustered-point", "visibility", "visible")
            }

            if (map.getLayer("district-fill")) {
                const fillColorExpression = createFillColorExpression(null, crimeDataByDistrict)
                map.getMap().setPaintProperty("district-fill", "fill-color", fillColorExpression as any)
            }
        }
    }, [map, crimeDataByDistrict])

    const animateExtrusionDown = () => {
        if (!map || !map.getLayer("district-extrusion") || !focusedDistrictId) {
            return
        }

        if (animationRef.current) {
            cancelAnimationFrame(animationRef.current)
            animationRef.current = null
        }

        // Get the current height from the layer (default to 800 if not found)
        let currentHeight = 800

        try {
            const paint = map.getPaintProperty("district-extrusion", "fill-extrusion-height")
            if (Array.isArray(paint) && paint.length > 0) {
                // Try to extract the current height from the expression
                const idx = paint.findIndex((v) => v === focusedDistrictId)
                if (idx !== -1 && typeof paint[idx + 1] === "number") {
                    currentHeight = paint[idx + 1]
                }
            }
        } catch {
            // fallback to default
        }

        const startHeight = currentHeight
        const targetHeight = 0
        const duration = 700
        const startTime = performance.now()

        const animate = (currentTime: number) => {
            const elapsed = currentTime - startTime
            const progress = Math.min(elapsed / duration, 1)
            const easedProgress = progress * (2 - progress)
            const newHeight = startHeight + (targetHeight - startHeight) * easedProgress

            try {
                map.getMap().setPaintProperty("district-extrusion", "fill-extrusion-height", [
                    "case",
                    ["has", "kode_kec"],
                    ["match", ["get", "kode_kec"], focusedDistrictId, newHeight, 0],
                    0,
                ])

                map.getMap().setPaintProperty("district-extrusion", "fill-extrusion-color", [
                    "case",
                    ["has", "kode_kec"],
                    [
                        "match",
                        ["get", "kode_kec"],
                        focusedDistrictId || "",
                        "transparent",
                        "transparent",
                    ],
                    "transparent",
                ])

                if (progress < 1) {
                    animationRef.current = requestAnimationFrame(animate)
                } else {
                    animationRef.current = null
                }

            } catch (error) {
                if (animationRef.current) {
                    cancelAnimationFrame(animationRef.current)
                    animationRef.current = null
                }
            }
        }

        animationRef.current = requestAnimationFrame(animate)
    }

    const handleCloseDistrictPopup = useCallback(() => {
        animateExtrusionDown()
        handlePopupClose()
    }, [handlePopupClose, animateExtrusionDown])

    const handleDistrictClick = useCallback(
        (feature: IDistrictFeature) => {
            if (isInteractingWithMarker.current) {
                return
            }

            setSelectedIncident(null)
            setSelectedDistrict(feature)
            selectedDistrictRef.current = feature
            setFocusedDistrictId(feature.id)

            if (map && feature.longitude && feature.latitude) {
                map.flyTo({
                    center: [feature.longitude, feature.latitude],
                    zoom: ZOOM_3D,
                    pitch: PITCH_3D,
                    bearing: BASE_BEARING,
                    duration: BASE_DURATION,
                    easing: (t) => t * (2 - t),
                })

                if (map.getLayer("clusters")) {
                    map.getMap().setLayoutProperty("clusters", "visibility", "none")
                }
                if (map.getLayer("unclustered-point")) {
                    map.getMap().setLayoutProperty("unclustered-point", "visibility", "none")
                }
            }
        },
        [map],
    )

    useEffect(() => {
        if (!mapboxMap) return

        const handleFlyToEvent = (e: Event) => {
            const customEvent = e as CustomEvent
            if (!map || !customEvent.detail) return

            const { longitude, latitude, zoom, bearing, pitch, duration } = customEvent.detail

            map.flyTo({
                center: [longitude, latitude],
                zoom: zoom || 15,
                bearing: bearing || 0,
                pitch: pitch || 45,
                duration: duration || 2000,
            })
        }

        mapboxMap.getCanvas().addEventListener("mapbox_fly_to", handleFlyToEvent as EventListener)

        return () => {
            if (mapboxMap && mapboxMap.getCanvas()) {
                mapboxMap.getCanvas().removeEventListener("mapbox_fly_to", handleFlyToEvent as EventListener)
            }
        }
    }, [mapboxMap, map])

    useEffect(() => {
        if (selectedDistrictRef.current) {
            const districtId = selectedDistrictRef.current.id
            const districtCrime = crimes.find((crime) => crime.district_id === districtId)

            if (districtCrime) {
                const selectedYearNum = year ? Number.parseInt(year) : new Date().getFullYear()

                let demographics = districtCrime.districts.demographics?.find((d) => d.year === selectedYearNum)

                if (!demographics && districtCrime.districts.demographics?.length) {
                    demographics = districtCrime.districts.demographics.sort((a, b) => b.year - a.year)[0]
                }

                let geographics = districtCrime.districts.geographics?.find((g) => g.year === selectedYearNum)

                if (!geographics && districtCrime.districts.geographics?.length) {
                    const validGeographics = districtCrime.districts.geographics
                        .filter((g) => g.year !== null)
                        .sort((a, b) => (b.year || 0) - (a.year || 0))

                    geographics = validGeographics.length > 0 ? validGeographics[0] : districtCrime.districts.geographics[0]
                }

                if (!demographics || !geographics) {
                    console.error("Missing district data:", { demographics, geographics })
                    return
                }

                const crime_incidents = districtCrime.crime_incidents
                    .filter((incident) => filterCategory === "all" || incident.crime_categories.name === filterCategory)
                    .map((incident) => ({
                        id: incident.id,
                        timestamp: incident.timestamp,
                        description: incident.description,
                        status: incident.status || "",
                        category: incident.crime_categories.name,
                        type: incident.crime_categories.type || "",
                        address: incident.locations.address || "",
                        latitude: incident.locations.latitude,
                        longitude: incident.locations.longitude,
                    }))

                const updatedDistrict: IDistrictFeature = {
                    ...selectedDistrictRef.current,
                    number_of_crime: crimeDataByDistrict[districtId]?.number_of_crime || 0,
                    level: crimeDataByDistrict[districtId]?.level || selectedDistrictRef.current.level,
                    demographics: {
                        number_of_unemployed: demographics.number_of_unemployed,
                        population: demographics.population,
                        population_density: demographics.population_density,
                        year: demographics.year,
                    },
                    geographics: {
                        address: geographics.address || "",
                        land_area: geographics.land_area || 0,
                        year: geographics.year || 0,
                        latitude: geographics.latitude,
                        longitude: geographics.longitude,
                    },
                    crime_incidents,
                    selectedYear: year,
                    selectedMonth: month,
                }

                selectedDistrictRef.current = updatedDistrict

                setSelectedDistrict((prevDistrict) => {
                    if (
                        prevDistrict?.id === updatedDistrict.id &&
                        prevDistrict?.selectedYear === updatedDistrict.selectedYear &&
                        prevDistrict?.selectedMonth === updatedDistrict.selectedMonth
                    ) {
                        return prevDistrict
                    }
                    return updatedDistrict
                })
            }
        }
    }, [crimes, filterCategory, year, month, crimeDataByDistrict])

    const handleSetFocusedDistrictId = useCallback((id: string | null, isMarkerClick = false) => {
        if (isMarkerClick) {
            isInteractingWithMarker.current = true

            setTimeout(() => {
                isInteractingWithMarker.current = false
            }, 1000)
        }

        setFocusedDistrictId(id)
    }, [])

    const crimesVisible = activeControl === "incidents"
    const showHeatmapLayer = activeControl === "heatmap" && sourceType !== "cbu"
    const showUnitsLayer = activeControl === "units"
    const showTimelineLayer = activeControl === "timeline"
    const showHistoricalLayer = activeControl === "historical"
    const showRecentIncidents = activeControl === "recents"
    const showDistrictFill =
        activeControl === "incidents" ||
        activeControl === "clusters" ||
        activeControl === "historical" ||
        activeControl === "recents"
    const showIncidentMarkers = activeControl !== "heatmap" && activeControl !== "timeline" && sourceType !== "cbu"

    const shouldShowExtrusion = focusedDistrictId !== null && !isInteractingWithMarker.current

    useEffect(() => {
        if (!mapboxMap) return;

        const recentLayerIds = ["very-recent-incidents-pulse", "recent-incidents-glow", "recent-incidents"];
        const timelineLayerIds = ["timeline-markers-bg", "timeline-markers"];
        const heatmapLayerIds = ["heatmap-layer"];
        const unitsLayerIds = ["units-points", "incidents-points", "units-labels", "units-connection-lines"];
        const clusterLayerIds = ["clusters", "cluster-count", "crime-points", "crime-count-labels"];
        const unclusteredLayerIds = ["unclustered-point"];

        if (activeControl !== "recents") {
            manageLayerVisibility(mapboxMap, recentLayerIds, false);
        }

        if (activeControl !== "timeline") {
            manageLayerVisibility(mapboxMap, timelineLayerIds, false);
        }

        if (activeControl !== "heatmap") {
            manageLayerVisibility(mapboxMap, heatmapLayerIds, false);
        }

        if (activeControl !== "units") {
            manageLayerVisibility(mapboxMap, unitsLayerIds, false);
        }

        if (activeControl !== "clusters") {
            manageLayerVisibility(mapboxMap, clusterLayerIds, false);
        }

        if (activeControl !== "incidents" && activeControl !== "recents" && activeControl !== "historical") {
            manageLayerVisibility(mapboxMap, unclusteredLayerIds, false);
        }

    }, [activeControl, mapboxMap]);

    return (
        <>
            <DistrictFillLineLayer
                visible={true}
                map={mapboxMap}
                year={year}
                month={month}
                filterCategory={filterCategory}
                crimes={crimes}
                tilesetId={tilesetId}
                focusedDistrictId={focusedDistrictId}
                setFocusedDistrictId={handleSetFocusedDistrictId}
                crimeDataByDistrict={crimeDataByDistrict}
                showFill={showDistrictFill}
                activeControl={activeControl}
                onDistrictClick={handleDistrictClick}
            />

            {shouldShowExtrusion && (
                <DistrictExtrusionLayer
                    visible={true}
                    map={mapboxMap}
                    tilesetId={tilesetId}
                    focusedDistrictId={focusedDistrictId}
                    crimeDataByDistrict={crimeDataByDistrict}
                />
            )}

            <RecentIncidentsLayer
                visible={showRecentIncidents}
                map={mapboxMap}
                incidents={recentIncidents}
            />

            <HeatmapLayer
                crimes={crimes}
                year={year}
                month={month}
                filterCategory={filterCategory}
                visible={showHeatmapLayer}
                useAllData={useAllData}
                enableInteractions={true}
                setFocusedDistrictId={handleSetFocusedDistrictId}
            />

            <TimelineLayer
                crimes={crimes}
                year={year}
                month={month}
                filterCategory={filterCategory}
                visible={showTimelineLayer}
                map={mapboxMap}
                useAllData={useAllData}
            />

            <UnitsLayer
                crimes={crimes}
                units={units}
                filterCategory={filterCategory}
                visible={showUnitsLayer}
                map={mapboxMap}
            />

            <ClusterLayer
                visible={visible && activeControl === "clusters"}
                map={mapboxMap}
                crimes={crimes}
                filterCategory={filterCategory}
                focusedDistrictId={focusedDistrictId}
                clusteringEnabled={activeControl === "clusters"}
                showClusters={activeControl === "clusters"}
                sourceType={sourceType}
            />

            <UnclusteredPointLayer
                visible={visible && showIncidentMarkers && !focusedDistrictId}
                map={mapboxMap}
                crimes={crimes}
                filterCategory={filterCategory}
                focusedDistrictId={focusedDistrictId}
            />

            {selectedDistrict && !selectedIncident && !isInteractingWithMarker.current && (
                <DistrictPopup
                    longitude={selectedDistrict.longitude || 0}
                    latitude={selectedDistrict.latitude || 0}
                    onClose={handleCloseDistrictPopup}
                    district={selectedDistrict}
                    year={year}
                    month={month}
                    filterCategory={filterCategory}
                />
            )}

            <TimezoneLayer map={mapboxMap} />

            <FaultLinesLayer map={mapboxMap} />
        </>
    )
}