import React from 'react'
import { Layers, Info, Eye, Filter, MapPin, AlertTriangle, AlertCircle } from 'lucide-react'
import { Card, CardContent } from "@/app/_components/ui/card"
import { Separator } from "@/app/_components/ui/separator"
import { CRIME_RATE_COLORS } from "@/app/_utils/const/map"
import { SidebarSection } from "../components/sidebar-section"

export function SidebarInfoTab() {
    return (
        <>
            <SidebarSection title="Map Legend" icon={<Layers className="h-4 w-4 text-green-400" />}>
                <Card className="bg-gradient-to-r from-zinc-800/80 to-zinc-900/80 border border-white/10">
                    <CardContent className="p-4 text-xs space-y-3">
                        <div className="space-y-2">
                            <h4 className="font-medium mb-2 text-sm">Crime Severity</h4>
                            <div className="flex items-center gap-2 p-1.5 hover:bg-white/5 rounded-md transition-colors">
                                <div className="w-4 h-4 rounded" style={{ backgroundColor: CRIME_RATE_COLORS.low }}></div>
                                <span>Low Crime Rate</span>
                            </div>
                            <div className="flex items-center gap-2 p-1.5 hover:bg-white/5 rounded-md transition-colors">
                                <div className="w-4 h-4 rounded" style={{ backgroundColor: CRIME_RATE_COLORS.medium }}></div>
                                <span>Medium Crime Rate</span>
                            </div>
                            <div className="flex items-center gap-2 p-1.5 hover:bg-white/5 rounded-md transition-colors">
                                <div className="w-4 h-4 rounded" style={{ backgroundColor: CRIME_RATE_COLORS.high }}></div>
                                <span>High Crime Rate</span>
                            </div>
                        </div>

                        <Separator className="bg-white/20 my-3" />

                        <div className="space-y-2">
                            <h4 className="font-medium mb-2 text-sm">Map Markers</h4>
                            <div className="flex items-center gap-2 p-1.5 hover:bg-white/5 rounded-md transition-colors">
                                <AlertCircle className="h-4 w-4 text-red-500" />
                                <span>Individual Incident</span>
                            </div>
                            <div className="flex items-center gap-2 p-1.5 hover:bg-white/5 rounded-md transition-colors">
                                <div className="w-5 h-5 rounded-full bg-pink-400 flex items-center justify-center text-[10px] text-white">5</div>
                                <span className="font-bold">Incident Cluster</span>
                            </div>
                        </div>
                    </CardContent>
                </Card>
            </SidebarSection>

            <SidebarSection title="About" icon={<Info className="h-4 w-4 text-green-400" />}>
                <Card className="bg-gradient-to-r from-zinc-800/80 to-zinc-900/80 border border-white/10">
                    <CardContent className="p-4 text-xs">
                        <p className="mb-3">
                            SIGAP Crime Map provides real-time visualization and analysis
                            of crime incidents across Jember region.
                        </p>
                        <p>
                            Data is sourced from official police reports and updated
                            daily to ensure accurate information.
                        </p>
                        <div className="mt-3 p-2 bg-white/5 rounded-lg text-white/60">
                            <div className="flex justify-between">
                                <span>Version</span>
                                <span className="font-medium">1.2.4</span>
                            </div>
                            <div className="flex justify-between mt-1">
                                <span>Last Updated</span>
                                <span className="font-medium">June 18, 2024</span>
                            </div>
                        </div>
                    </CardContent>
                </Card>
            </SidebarSection>

            <SidebarSection title="How to Use" icon={<Eye className="h-4 w-4 text-green-400" />}>
                <Card className="bg-gradient-to-r from-zinc-800/80 to-zinc-900/80 border border-white/10">
                    <CardContent className="p-4 text-xs space-y-3">
                        <div className="flex gap-3 items-start">
                            <div className="bg-emerald-900/50 p-1.5 rounded-md">
                                <Filter className="h-3.5 w-3.5 text-emerald-400" />
                            </div>
                            <div>
                                <span className="font-medium">Filtering</span>
                                <p className="text-white/70 mt-1">
                                    Use the year, month, and category filters at the top to
                                    refine the data shown on the map.
                                </p>
                            </div>
                        </div>

                        <div className="flex gap-3 items-start">
                            <div className="bg-emerald-900/50 p-1.5 rounded-md">
                                <MapPin className="h-3.5 w-3.5 text-emerald-400" />
                            </div>
                            <div>
                                <span className="font-medium">District Information</span>
                                <p className="text-white/70 mt-1">
                                    Click on any district to view detailed crime statistics for that area.
                                </p>
                            </div>
                        </div>

                        <div className="flex gap-3 items-start">
                            <div className="bg-emerald-900/50 p-1.5 rounded-md">
                                <AlertTriangle className="h-3.5 w-3.5 text-emerald-400" />
                            </div>
                            <div>
                                <span className="font-medium">Incidents</span>
                                <p className="text-white/70 mt-1">
                                    Click on incident markers to view details about specific crime reports.
                                </p>
                            </div>
                        </div>
                    </CardContent>
                </Card>
            </SidebarSection>
        </>
    )
}