import { DatePickerWithRange } from "@/components/Dashboard/DatePicker";
import AuthenticatedLayout from "@/layouts/authenticated-layout";
import { Head, usePage, Link } from "@inertiajs/react";
import {
    Building,
    School,
    UsersRound,
    Waves,
    Skull,
    ArrowUpRight,
    ArrowDownRight,
    TrendingUp,
    Activity,
    FileText,
    Volume2,
    Box,
    Ban,
} from "lucide-react";
import { Card } from "@/components/ui/card";
import hasAnyPermission from "@/utils/hasAnyPermission";
import { ChartCard } from "@/components/Dashboard/ChartCard";

export default function Dashboard() {
    const { auth, runPosts } = usePage().props;
    const userPermissions = auth?.user?.permissions ?? [];

    return (
        <AuthenticatedLayout header="Dashboard">
            <Head title="Dashboard" />

            <div className="flex flex-1 flex-col gap-6 h-full p-6">
                {/* Top Section */}
                <div className="flex justify-between items-center gap-4 flex-wrap">
                    <div className="space-y-1">
                        <h2 className="text-2xl font-bold tracking-tight">
                            Dashboard Overview
                        </h2>
                    </div>
                    <DatePickerWithRange />
                </div>

                {/* Stats Section */}
                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                    {/* Izin Lingkungan */}
                    <Card className="bg-emerald-500 text-white relative overflow-hidden flex flex-col">
                        <div className="p-6 relative flex-grow">
                            <div className="flex justify-between items-center">
                                <div className="opacity-20 absolute left-2 top-1/2 -translate-y-1/2">
                                    <FileText className="h-24 w-24" />
                                </div>
                                <div className="z-10 w-full text-right">
                                    <p className="text-4xl font-bold">13.00</p>
                                    <h3 className="text-xl font-medium">
                                        Izin Lingkungan
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <Link
                            href="/reports/environmental-permit"
                            className="text-center py-2 bg-black bg-opacity-20 hover:bg-opacity-30 transition-all text-[11px] border-t border-white border-opacity-20"
                        >
                            KE PELAPORAN - TRIWULAN 2/SEMESTER 1 - 2025
                        </Link>
                    </Card>

                    {/* Air Limbah */}
                    <Card className="bg-blue-500 text-white relative overflow-hidden flex flex-col">
                        <div className="p-6 relative flex-grow">
                            <div className="flex justify-between items-center">
                                <div className="opacity-20 absolute left-2 top-1/2 -translate-y-1/2">
                                    <Waves className="h-24 w-24" />
                                </div>
                                <div className="z-10 w-full text-right">
                                    <p className="text-4xl font-bold">62.67</p>
                                    <h3 className="text-xl font-medium">
                                        Air Limbah
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <Link
                            href="/reports/wastewater"
                            className="text-center py-2 bg-black bg-opacity-20 hover:bg-opacity-30 transition-all text-[11px] border-t border-white border-opacity-20"
                        >
                            KE PELAPORAN - TRIWULAN 1 - 2025
                        </Link>
                    </Card>

                    {/* Limbah B3 */}
                    <Card className="bg-red-500 text-white relative overflow-hidden flex flex-col">
                        <div className="p-6 relative flex-grow">
                            <div className="flex justify-between items-center">
                                <div className="opacity-20 absolute left-2 top-1/2 -translate-y-1/2">
                                    <Skull className="h-24 w-24" />
                                </div>
                                <div className="z-10 w-full text-right">
                                    <p className="text-4xl font-bold">0.00</p>
                                    <h3 className="text-xl font-medium">
                                        Limbah B3
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <Link
                            href="/reports/hazardous-waste"
                            className="text-center py-2 bg-black bg-opacity-20 hover:bg-opacity-30 transition-all text-[11px] border-t border-white border-opacity-20"
                        >
                            KE PELAPORAN - TRIWULAN 1 - 2025
                        </Link>
                    </Card>

                    {/* Sumber Bergerak */}
                    <Card className="bg-purple-500 text-white relative overflow-hidden flex flex-col">
                        <div className="p-6 relative flex-grow">
                            <div className="flex justify-between items-center">
                                <div className="opacity-20 absolute left-2 top-1/2 -translate-y-1/2">
                                    <Building className="h-24 w-24" />
                                </div>
                                <div className="z-10 w-full text-right">
                                    <p className="text-4xl font-bold">0.00</p>
                                    <h3 className="text-xl font-medium">
                                        Sumber Bergerak
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <Link
                            href="/reports/mobile-sources"
                            className="text-center py-2 bg-black bg-opacity-20 hover:bg-opacity-30 transition-all text-[11px] border-t border-white border-opacity-20"
                        >
                            KE PELAPORAN - TRIWULAN 2/SEMESTER 1 - 2025
                        </Link>
                    </Card>

                    {/* Kebisingan */}
                    <Card className="bg-blue-600 text-white relative overflow-hidden flex flex-col">
                        <div className="p-6 relative flex-grow">
                            <div className="flex justify-between items-center">
                                <div className="opacity-20 absolute left-2 top-1/2 -translate-y-1/2">
                                    <Volume2 className="h-24 w-24" />
                                </div>
                                <div className="z-10 w-full text-right">
                                    <p className="text-4xl font-bold">0.00</p>
                                    <h3 className="text-xl font-medium">
                                        Kebisingan
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <Link
                            href="/reports/noise"
                            className="text-center py-2 bg-black bg-opacity-20 hover:bg-opacity-30 transition-all text-[11px] border-t border-white border-opacity-20"
                        >
                            KE PELAPORAN - TRIWULAN 2/SEMESTER 1 - 2025
                        </Link>
                    </Card>

                    {/* Sumber Tidak Bergerak */}
                    <Card className="bg-purple-400 text-white relative overflow-hidden flex flex-col">
                        <div className="p-6 relative flex-grow">
                            <div className="flex justify-between items-center">
                                <div className="opacity-20 absolute left-2 top-1/2 -translate-y-1/2">
                                    <Building className="h-24 w-24" />
                                </div>
                                <div className="z-10 w-full text-right">
                                    <p className="text-4xl font-bold">0.00</p>
                                    <h3 className="text-xl font-medium">
                                        Sumber Tidak Bergerak
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <Link
                            href="/reports/stationary-sources"
                            className="text-center py-2 bg-black bg-opacity-20 hover:bg-opacity-30 transition-all text-[11px] border-t border-white border-opacity-20"
                        >
                            KE PELAPORAN - TRIWULAN 2/SEMESTER 1 - 2025
                        </Link>
                    </Card>

                    {/* Limbah Padat */}
                    <Card className="bg-gray-400 text-white relative overflow-hidden flex flex-col">
                        <div className="p-6 relative flex-grow">
                            <div className="flex justify-between items-center">
                                <div className="opacity-20 absolute left-2 top-1/2 -translate-y-1/2">
                                    <Box className="h-24 w-24" />
                                </div>
                                <div className="z-10 w-full text-right">
                                    <p className="text-4xl font-bold">0.00</p>
                                    <h3 className="text-xl font-medium">
                                        Limbah Padat
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <Link
                            href="/reports/solid-waste"
                            className="text-center py-2 bg-black bg-opacity-20 hover:bg-opacity-30 transition-all text-[11px] border-t border-white border-opacity-20"
                        >
                            KE PELAPORAN - TRIWULAN 2/SEMESTER 1 - 2025
                        </Link>
                    </Card>

                    {/* Kawasan Dilarang Merokok */}
                    <Card className="bg-orange-400 text-white relative overflow-hidden flex flex-col ">
                        <div className="p-6 relative flex-grow">
                            <div className="flex justify-between items-center">
                                <div className="opacity-20 absolute left-2 top-1/2 -translate-y-1/2">
                                    <Ban className="h-24 w-24" />
                                </div>
                                <div className="z-10 w-full text-right">
                                    <p className="text-4xl font-bold">0.00</p>
                                    <h3 className="text-xl font-medium">
                                        Kawasan Dilarang Merokok
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <Link
                            href="/reports/no-smoking-zones"
                            className="text-center py-2 bg-black bg-opacity-20 hover:bg-opacity-30 transition-all text-[11px] border-t border-white border-opacity-20"
                        >
                            KE PELAPORAN - TRIWULAN 2/SEMESTER 1 - 2025
                        </Link>
                    </Card>
                </div>

                {/* Cerobong Stats Section */}
                <Card className="relative overflow-hidden">
                    <div className="p-6 relative">
                        <div className="flex items-center justify-between">
                            <div className="flex items-center gap-3">
                                <div className="p-2 bg-orange-100 rounded-lg">
                                    <Activity className="h-5 w-5 text-orange-600" />
                                </div>
                                <div>
                                    <h3 className="text-xl font-semibold">
                                        Total Cerobong
                                    </h3>
                                    <p className="text-sm text-muted-foreground">
                                        Update terakhir: Senin, 03 Feb 2025
                                    </p>
                                </div>
                            </div>
                            <div className="text-right">
                                <p className="text-3xl font-bold">2,336</p>
                            </div>
                        </div>
                    </div>
                </Card>
                <div className="w-full">
                    <ChartCard />
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
