import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';

import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import {
    Empty,
    EmptyDescription,
    EmptyHeader,
    EmptyMedia,
    EmptyTitle,
} from '@/components/ui/empty';
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, User } from '@/types';
import { Head, router } 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 { FolderCodeIcon } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
import { FaFire, FaPeopleCarry, FaWater } from 'react-icons/fa';
import { toast, Toaster } from 'sonner';

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

type Props = {
    kejadianList: Panic[];
    panicList: Panic[];
    lokasiAirList: LokasiAir[];
    masyarakatList: User[];
    masyarakatCount: number; // Tidak digunakan, tapi dipertahankan
};

export default function AdminDashboard({
    kejadianList = [],
    panicList = [],
    lokasiAirList = [],
    masyarakatList = [],
    masyarakatCount = 0,
}: Props) {
    const breadcrumbs = useAuthBreadcrumb();
    const [previewType, setPreviewType] = useState<'image' | 'video' | null>(
        null,
    );
    const [previewSrc, setPreviewSrc] = useState<string | null>(null);
    const [isOpen, setIsOpen] = useState(false);
    const [alerts, setAlerts] = useState<Panic[]>(panicList);
    const [isAlarmPlaying, setIsAlarmPlaying] = useState(false);

    // 🚩 STATE BARU UNTUK STATISTIK REALTIME
    const [stats, setStats] = useState({
        kejadianCount: kejadianList.length,
        lokasiAirCount: lokasiAirList.length,
        masyarakatCount: masyarakatList.length,
    });
    // ------------------------------------

    // simpan izin notifikasi aplikasi di localStorage
    const [permissionGranted, setPermissionGranted] = useState<boolean>(false);

    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] = [-0.956182, 122.791346]; // Luwuk Banggai Teluk Lalong

    // 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[] = [];

        // Hentikan animasi blink jika tidak ada data panic baru
        if (panicData.length === 0 && kejadianRef.current) {
            kejadianRef.current.style.display = 'none';
        }

        // Panic Markers
        panicData.forEach((p, index) => {
            const isNewest = index === 0;

            const marker = L.marker([p.latitude, p.longitude], {
                // Gunakan divIcon untuk custom marker blinking
                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]);
        });

        // Jika tidak ada marker sama sekali, set view ke default
        if (allCoords.length === 0) {
            map.setView(DEFAULT_COORD, 12);
        } else {
            if (panicData.length === 0 || allCoords.length > 1) {
                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 UNTUK STATISTIK DAN ALERT
    useEffect(() => {
        if (!window.Reverb) return;

        // --- Alert Listener (Sudah Ada) ---
        const panicChannel = window.Reverb.channel('panic-alerts');
        panicChannel.listen('.panic.created', (e: { panic: Panic }) => {
            // 1. Update list alert (tabel dan map)
            setAlerts((prev) => {
                const exists = prev.some((p) => p.id === e.panic.id);
                if (exists) return prev;
                return [e.panic, ...prev];
            });

            // 2. Update stat Kejadian
            setStats((prev) => ({
                ...prev,
                kejadianCount: prev.kejadianCount + 1,
            }));

            // 3. Mainkan alarm dan notifikasi
            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}`,
                });
            }
        });

        // --- Listener Lokasi Air Baru ---
        const lokasiAirChannel = window.Reverb.channel('lokasi-air');
        lokasiAirChannel.listen(
            '.lokasi-air.created',
            (e: { lokasiAir: LokasiAir }) => {
                setStats((prev) => ({
                    ...prev,
                    lokasiAirCount: prev.lokasiAirCount + 1,
                }));
            },
        );

        // --- Listener User Baru ---
        const userChannel = window.Reverb.channel('users');
        userChannel.listen('.user.registered', (e: { user: User }) => {
            // 1. Update stat Masyarakat
            setStats((prev) => ({
                ...prev,
                masyarakatCount: prev.masyarakatCount + 1,
            }));
        });

        return () => {
            panicChannel.stopListening('.panic.created');
            window.Reverb.leave('panic-alerts');

            lokasiAirChannel.stopListening('.lokasi-air.created');
            window.Reverb.leave('lokasi-air');

            userChannel.stopListening('.user.registered');
            window.Reverb.leave('users');
        };
    }, [permissionGranted]); // Dependency permissionGranted dipertahankan

    // 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.');
        }
    };

    // Saat halaman direfresh, pastikan alarm & izin tidak aktif
    useEffect(() => {
        stopAlarm(); // pastikan alarm tidak nyala otomatis
        setPermissionGranted(false);
        localStorage.setItem('app_notification_permission', 'false');
    }, []);

    // 📊 DEFINISI CARDS DENGAN MENGGUNAKAN STATE stats
    const atasCards = [
        {
            title: 'Kejadian',
            description: 'Total kejadian kebakaran',
            amount: stats.kejadianCount.toString(), // 👈 Menggunakan State
            bgColor: 'bg-amber-200',
            iconBg: 'bg-amber-100',
            iconColor: 'text-amber-200',
            Icon: FaFire,
        },
        {
            title: 'Titik Air',
            description: 'Total tempat mengambil air',
            amount: stats.lokasiAirCount.toString(), // 👈 Menggunakan State
            bgColor: 'bg-blue-200',
            iconBg: 'bg-blue-100',
            iconColor: 'text-blue-200',
            Icon: FaWater,
        },
        {
            title: 'Masyarakat',
            description: 'Total masyarakat yang menggunakan aplikasi',
            amount: stats.masyarakatCount.toString(), // 👈 Menggunakan State
            bgColor: 'bg-emerald-200',
            iconBg: 'bg-emerald-100',
            iconColor: 'text-emerald-200',
            Icon: FaPeopleCarry,
        },
    ];
    // ----------------------------------------------------

    // update status
    const handleUpdateStatus = (
        id: number,
        currentStatus: string | undefined,
    ) => {
        if (currentStatus !== 'baru') {
            console.log('⚠️ Status hanya bisa diubah dari "baru" ke "proses".');
            return;
        }

        const nextStatus = 'proses';

        router.patch(
            route('panic.updateStatus', id),
            { status: nextStatus },
            {
                preserveScroll: true,
                onSuccess: () => {
                    console.log('✅ Status berhasil diperbarui menjadi proses');

                    // 🔥 Hapus data yang sudah diubah jadi "proses" dari daftar tampilan
                    setAlerts((prevAlerts) =>
                        prevAlerts.filter((alert) => alert.id !== id),
                    );
                },
                onError: (errors) => {
                    console.error(errors);
                },
            },
        );
    };

    const openPreview = (type: 'image' | 'video', src: string) => {
        setPreviewType(type);
        setPreviewSrc(src);
        setIsOpen(true);
    };

    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">
                    {/* 👇 BAGIAN INI SUDAH MENGGUNAKAN STATE BARU stats */}
                    {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">
                                {/* 👈 MENGGUNAKAN card.amount (yang berasal dari stats) */}
                                {card.amount}
                            </CardContent>
                        </Card>
                    ))}
                    {/* 👆 BAGIAN INI SUDAH REALTIME */}
                </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>

                <div className="mt-8 w-full">
                    {alerts.length === 0 ? (
                        <Empty>
                            <EmptyHeader>
                                <EmptyMedia variant="icon">
                                    <FolderCodeIcon className="text-neutral-400" />
                                </EmptyMedia>
                                <EmptyTitle className="text-neutral-400">
                                    Empty
                                </EmptyTitle>
                                <EmptyDescription className="text-neutral-400">
                                    Data kejadian masih kosong.
                                </EmptyDescription>
                            </EmptyHeader>
                        </Empty>
                    ) : (
                        <>
                            <h2 className="mb-3 text-xl font-semibold">
                                Daftar Kejadian Terbaru:
                            </h2>
                            <div className="rounded-md border shadow">
                                <Table className="w-full">
                                    <TableHeader>
                                        <TableRow>
                                            <TableHead className="w-16 text-center">
                                                No
                                            </TableHead>
                                            <TableHead>File</TableHead>
                                            <TableHead>Nama Pengirim</TableHead>
                                            <TableHead>Lokasi</TableHead>
                                            <TableHead>Waktu</TableHead>
                                            <TableHead>Status</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 className="space-y-2">
                                                    {/* Jika media adalah gambar */}
                                                    {p.media_type === 'image' &&
                                                        p.media_url && (
                                                            <img
                                                                src={
                                                                    p.media_url
                                                                }
                                                                className="h-16 w-16 cursor-pointer rounded object-cover transition hover:opacity-80"
                                                                onClick={() =>
                                                                    p.media_url &&
                                                                    openPreview(
                                                                        'image',
                                                                        p.media_url,
                                                                    )
                                                                }
                                                            />
                                                        )}

                                                    {/* Jika media adalah video */}
                                                    {p.media_type === 'video' &&
                                                        p.media_url && (
                                                            <video
                                                                src={
                                                                    p.media_url
                                                                }
                                                                className="h-16 w-16 cursor-pointer rounded object-cover transition hover:opacity-80"
                                                                onClick={() =>
                                                                    p.media_url &&
                                                                    openPreview(
                                                                        'video',
                                                                        p.media_url,
                                                                    )
                                                                }
                                                            />
                                                        )}

                                                    {/* Jika tidak ada media */}
                                                    {!p.media_url && (
                                                        <span className="text-xs text-gray-400">
                                                            Tidak ada media
                                                        </span>
                                                    )}
                                                </TableCell>
                                                <TableCell>
                                                    {p.user?.name ??
                                                        'Tidak diketahui'}
                                                </TableCell>
                                                <TableCell>
                                                    <div>
                                                        <span className="font-semibold">
                                                            Lat: {p.latitude},
                                                            Lng: {p.longitude}
                                                        </span>
                                                    </div>
                                                </TableCell>
                                                <TableCell>
                                                    {new Date(
                                                        p.created_at,
                                                    ).toLocaleString()}
                                                </TableCell>
                                                <TableCell>
                                                    {p.status === 'baru' && (
                                                        <Button
                                                            variant="outline"
                                                            size="sm"
                                                            onClick={() =>
                                                                handleUpdateStatus(
                                                                    p.id,
                                                                    p.status,
                                                                )
                                                            }
                                                        >
                                                            Proses
                                                        </Button>
                                                    )}
                                                </TableCell>
                                            </TableRow>
                                        ))}
                                    </TableBody>
                                </Table>
                            </div>
                        </>
                    )}
                </div>
            </div>

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

            <Dialog open={isOpen} onOpenChange={setIsOpen}>
                <DialogContent className="max-w-3xl">
                    <DialogHeader>
                        <DialogTitle>Preview Media</DialogTitle>
                    </DialogHeader>

                    {previewType === 'image' && (
                        <img
                            src={previewSrc!}
                            className="max-h-[80vh] w-full rounded object-contain"
                        />
                    )}

                    {previewType === 'video' && (
                        <video
                            src={previewSrc!}
                            controls
                            autoPlay
                            className="max-h-[80vh] w-full rounded object-contain"
                        />
                    )}
                </DialogContent>
            </Dialog>

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