import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { useAuthBreadcrumb } from '@/hooks/use-auth-breadcrumb';
import AppLayout from '@/layouts/app-layout';
import { LokasiAir, Panic } from '@/types';
import { Head } from '@inertiajs/react';
import { motion } from 'framer-motion';
import L from 'leaflet';
import 'leaflet-fullscreen';
import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';
import 'leaflet/dist/leaflet.css';
import { Gift, User } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import { toast, Toaster } from 'sonner';

declare global {
    interface Window {
        Reverb: any;
    }
}

type Props = {
    panics: Panic[];
    lokasiAirList: LokasiAir[];
};

export default function AdminDashboard({
    panics = [],
    lokasiAirList = [],
}: Props) {
    const breadcrumbs = useAuthBreadcrumb();
    const [alerts, setAlerts] = useState<Panic[]>(panics);
    const [isAlarmPlaying, setIsAlarmPlaying] = useState(false);

    // simpan izin notifikasi aplikasi di localStorage
    const [permissionGranted, setPermissionGranted] = useState<boolean>(() => {
        const saved = localStorage.getItem('app_notification_permission');
        return saved === 'true';
    });

    const audioRef = useRef<HTMLAudioElement | null>(null);
    const mapRef = useRef<L.Map | null>(null);
    const markersRef = useRef<L.LayerGroup | null>(null);
    const kejadianRef = useRef<HTMLDivElement | null>(null);

    const DEFAULT_COORD: [number, number] = [-6.2, 106.8167]; // Jakarta

    // Update Marker Panic & Lokasi Air
    const updateMarkers = (panicData: Panic[], lokasiAirData: LokasiAir[]) => {
        const map = mapRef.current;
        const markerLayer = markersRef.current;
        if (!map || !markerLayer) return;

        markerLayer.clearLayers();
        const allCoords: L.LatLngExpression[] = [];

        // Jika tidak ada data panic, fokus ke default koordinat dan hentikan blink marker
        if (panicData.length === 0) {
            map.setView(DEFAULT_COORD, 12);
            if (kejadianRef.current) {
                kejadianRef.current.style.display = 'none';
            }
        } else {
            // Panic Markers
            panicData.forEach((p, index) => {
                const isNewest = index === 0;

                const marker = L.marker([p.latitude, p.longitude], {
                    icon: L.divIcon({
                        className: 'relative',
                        html: isNewest
                            ? `<div id="kejadian-marker-${p.id}" style="width:24px;height:24px;"></div>`
                            : `<div style="width:16px;height:16px;border-radius:50%;background-color:#a00;border:2px solid white;"></div>`,
                        iconSize: [24, 24],
                        iconAnchor: [12, 12],
                    }),
                }).bindPopup(
                    `<b>🚨 Panic Alert</b><br/>Lat: ${p.latitude}<br/>Lng: ${p.longitude}<br/><small>${new Date(
                        p.created_at,
                    ).toLocaleString()}</small>`,
                );

                marker.addTo(markerLayer);
                allCoords.push([p.latitude, p.longitude]);

                // Fokus otomatis ke kejadian terbaru
                if (isNewest) {
                    const latLng = L.latLng(p.latitude, p.longitude);
                    map.flyTo(latLng, 16, { animate: true, duration: 2 });
                    marker.openPopup();

                    // tampilkan motion div di lokasi marker
                    setTimeout(() => {
                        const target = document.getElementById(
                            `kejadian-marker-${p.id}`,
                        );
                        if (target && kejadianRef.current) {
                            kejadianRef.current.style.display = 'block';
                            target.innerHTML = '';
                            target.appendChild(kejadianRef.current);
                        }
                    }, 500);
                }
            });
        }

        // Marker Lokasi Air
        lokasiAirData.forEach((l) => {
            const airMarker = L.marker([l.latitude, l.longitude], {
                icon: L.icon({
                    iconUrl: '/icons/fire-hydrant.png',
                    iconSize: [30, 30],
                    iconAnchor: [15, 30],
                    popupAnchor: [0, -28],
                }),
            })
                .addTo(markerLayer)
                .bindPopup(
                    `<b>💧 ${l.nama}</b><br/>${
                        l.deskripsi ?? ''
                    }<br/><small>Lat: ${l.latitude}, Lng: ${l.longitude}</small>`,
                );

            allCoords.push([l.latitude, l.longitude]);
        });

        // Fit map agar semua marker terlihat
        if (allCoords.length > 0) {
            const bounds = L.latLngBounds(allCoords);
            map.fitBounds(bounds, { padding: [50, 50] });
        }
    };

    // Inisialisasi Map
    useEffect(() => {
        if (!mapRef.current) {
            const map = L.map('map', {
                ...({ fullscreenControl: true } as any),
            }).setView(DEFAULT_COORD, 12);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; OpenStreetMap contributors',
            }).addTo(map);

            mapRef.current = map;
            markersRef.current = L.layerGroup().addTo(map);

            updateMarkers(alerts, lokasiAirList);
        }
    }, []);

    // Update Marker Saat Data Berubah
    useEffect(() => {
        updateMarkers(alerts, lokasiAirList);
    }, [alerts, lokasiAirList]);

    // Realtime Listener Panic
    useEffect(() => {
        if (!window.Reverb) return;

        const channel = window.Reverb.channel('panic-alerts');

        channel.listen('.panic.created', (e: { panic: Panic }) => {
            setAlerts((prev) => {
                const exists = prev.some((p) => p.id === e.panic.id);
                if (exists) return prev;
                return [e.panic, ...prev];
            });

            if (permissionGranted && audioRef.current) {
                const audio = audioRef.current;
                audio.currentTime = 0;
                audio.loop = true;
                audio.play().then(() => setIsAlarmPlaying(true));
            }

            if (permissionGranted && Notification.permission === 'granted') {
                new Notification('🚨 Lokasi Kejadian!', {
                    body: `Lokasi: ${e.panic.latitude}, ${e.panic.longitude}`,
                });
            }
        });

        return () => {
            channel.stopListening('.panic.created');
            window.Reverb.leave('panic-alerts');
        };
    }, [permissionGranted]);

    // Stop Alarm
    const stopAlarm = () => {
        if (audioRef.current) {
            audioRef.current.pause();
            audioRef.current.currentTime = 0;
            audioRef.current.loop = false;
            setIsAlarmPlaying(false);
        }
    };

    // Toggle Notifikasi
    const togglePermission = () => {
        if (!permissionGranted) {
            Notification.requestPermission().then((permission) => {
                if (permission === 'granted') {
                    setPermissionGranted(true);
                    localStorage.setItem('app_notification_permission', 'true');
                    toast.success('🔔 Suara diaktifkan!');
                } else {
                    toast.error('🔕 Browser tidak mengizinkan.');
                }
            });
        } else {
            stopAlarm();
            setPermissionGranted(false);
            localStorage.setItem('app_notification_permission', 'false');
            toast.error('🔕 Izin notifikasi dibatalkan di aplikasi.');
        }
    };

    // Sinkronisasi jika user mencabut izin di browser
    useEffect(() => {
        if (Notification.permission !== 'granted') {
            localStorage.setItem('app_notification_permission', 'false');
            setPermissionGranted(false);
        }
    }, []);

    // card
    const atasCards = [
        {
            title: 'Kejadian',
            description: 'Total kejadian kebakaran',
            amount: '20',
            bgColor: 'bg-amber-200',
            iconBg: 'bg-amber-100',
            iconColor: 'text-amber-200',
            Icon: Gift,
        },
        {
            title: 'Titik Air',
            description: 'Total tempat mengambil air',
            amount: '20',
            bgColor: 'bg-blue-200',
            iconBg: 'bg-blue-100',
            iconColor: 'text-blue-200',
            Icon: User,
        },
        {
            title: 'Masyarakat',
            description: 'Total masyarakat yang menggunakan aplikasi',
            amount: '20',
            bgColor: 'bg-emerald-200',
            iconBg: 'bg-emerald-100',
            iconColor: 'text-emerald-200',
            Icon: User,
        },
    ];

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Beranda" />
            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
                {/* card */}
                <div className="grid auto-rows-min gap-4 md:grid-cols-3">
                    {atasCards.map((card, index) => (
                        <Card
                            key={index}
                            className={`relative ${card.bgColor}`}
                        >
                            <CardHeader>
                                <CardTitle className="dark:text-black">
                                    {card.title}
                                </CardTitle>
                                <CardDescription className="text-xs dark:text-black">
                                    {card.description}
                                </CardDescription>
                                <div
                                    className={`absolute top-4 right-4 rounded-full ${card.iconBg} p-2`}
                                >
                                    <card.Icon
                                        className={`h-9 w-9 ${card.iconColor}`}
                                    />
                                </div>
                            </CardHeader>
                            <CardContent className="text-2xl font-bold dark:text-black">
                                {card.amount}
                            </CardContent>
                        </Card>
                    ))}
                </div>

                {/* Tombol izin & alarm */}
                <div className="mt-4 flex flex-wrap gap-4">
                    <Button
                        size="sm"
                        onClick={togglePermission}
                        className={`rounded-lg text-white shadow transition-all ${
                            permissionGranted
                                ? 'bg-red-600 hover:bg-red-700'
                                : 'bg-blue-600 hover:bg-blue-700'
                        }`}
                    >
                        {permissionGranted ? 'Off 🔈' : 'On 🔊'}
                    </Button>

                    {isAlarmPlaying && (
                        <Button
                            size="sm"
                            onClick={stopAlarm}
                            className="rounded-lg bg-gray-700 text-white hover:bg-gray-800"
                        >
                            🔕 Matikan Alarm
                        </Button>
                    )}
                </div>

                {/* Map */}
                <div className="relative h-[500px] w-full overflow-hidden rounded-lg shadow-md">
                    <div id="map" className="z-0 h-full w-full rounded-lg" />
                    {/* Animasi blinking kejadian */}
                    <motion.div
                        ref={kejadianRef}
                        className="pointer-events-none absolute hidden h-6 w-6 rounded-full border-2 border-white bg-red-600 shadow-lg"
                        animate={{
                            scale: [1, 1.5, 1],
                            opacity: [1, 0.3, 1],
                        }}
                        transition={{
                            duration: 1,
                            repeat: Infinity,
                            ease: 'easeInOut',
                        }}
                    />
                </div>

                {/* Tabel Daftar Panic */}
                <div className="mt-8 w-full">
                    <h2 className="mb-3 text-xl font-semibold">
                        Daftar Kejadian Terbaru:
                    </h2>

                    {alerts.length === 0 ? (
                        <p className="text-gray-500 italic">
                            Belum ada peringatan kejadian.
                        </p>
                    ) : (
                        <div className="rounded-md border shadow">
                            <Table className="w-full">
                                <TableHeader>
                                    <TableRow>
                                        <TableHead className="w-16 text-center">
                                            No
                                        </TableHead>
                                        <TableHead>Lokasi</TableHead>
                                        <TableHead>Waktu</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {alerts.map((p, index) => (
                                        <TableRow
                                            key={p.id}
                                            className={
                                                index === 0
                                                    ? 'bg-red-50/50'
                                                    : ''
                                            }
                                        >
                                            <TableCell className="text-center font-medium">
                                                {index + 1}
                                            </TableCell>
                                            <TableCell>
                                                <div>
                                                    <span className="font-semibold">
                                                        Lat: {p.latitude}
                                                    </span>
                                                    , Lng: {p.longitude}
                                                </div>
                                            </TableCell>
                                            <TableCell>
                                                {new Date(
                                                    p.created_at,
                                                ).toLocaleString()}
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        </div>
                    )}
                </div>
            </div>

            <audio
                ref={audioRef}
                src="/sounds/alarm1.mp3"
                preload="auto"
                hidden
            />

            <Toaster position="top-right" richColors />
        </AppLayout>
    );
}
