import { DatePickerWithRange } from "@/components/Dashboard/DatePicker";
import AuthenticatedLayout from "@/layouts/authenticated-layout";
import { Head, usePage } from "@inertiajs/react";
import {
    Building,
    School,
    UsersRound,
    Waves,
    Skull,
    ArrowUpRight,
    ArrowDownRight,
    TrendingUp,
    Activity,
} 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-5">
                    {/* Total Laporan (Cek Permission) */}
                    {/* {hasAnyPermission(userPermissions, ["Dashboard.index"]) && ( */}
                    <Card className="relative overflow-hidden group transition-all hover:shadow-lg">
                        <div className="p-6 relative">
                            <div className="flex justify-between items-start">
                                <div className="p-2 bg-blue-100 rounded-lg">
                                    <School className="h-5 w-5 text-blue-600" />
                                </div>
                                <div className="flex items-center text-sm text-green-600">
                                    <TrendingUp className="h-4 w-4 mr-1" />
                                    +12.5%
                                </div>
                            </div>
                            <div className="mt-4">
                                <h3 className="text-sm font-medium text-muted-foreground">
                                    Total Laporan
                                </h3>
                                <p className="text-2xl font-bold">1,305</p>
                            </div>
                        </div>
                    </Card>
                    {/* )} */}

                    {/* Jumlah Perusahaan */}
                    <Card className="relative overflow-hidden group transition-all hover:shadow-lg">
                        <div className="p-6 relative">
                            <div className="flex justify-between items-start">
                                <div className="p-2 bg-purple-100 rounded-lg">
                                    <Building className="h-5 w-5 text-purple-600" />
                                </div>
                                <div className="flex items-center text-sm text-green-600">
                                    <TrendingUp className="h-4 w-4 mr-1" />
                                    +8.2%
                                </div>
                            </div>
                            <div className="mt-4">
                                <h3 className="text-sm font-medium text-muted-foreground">
                                    Jumlah Perusahaan
                                </h3>
                                <p className="text-2xl font-bold">847</p>
                            </div>
                        </div>
                    </Card>

                    {/* Jumlah Verifikator */}
                    <Card className="relative overflow-hidden group transition-all hover:shadow-lg">
                        <div className="p-6 relative">
                            <div className="flex justify-between items-start">
                                <div className="p-2 bg-green-100 rounded-lg">
                                    <UsersRound className="h-5 w-5 text-green-600" />
                                </div>
                                <div className="flex items-center text-sm text-red-600">
                                    <ArrowDownRight className="h-4 w-4 mr-1" />
                                    -3.1%
                                </div>
                            </div>
                            <div className="mt-4">
                                <h3 className="text-sm font-medium text-muted-foreground">
                                    Jumlah Verifikator
                                </h3>
                                <p className="text-2xl font-bold">124</p>
                            </div>
                        </div>
                    </Card>

                    {/* Air Limbah */}
                    <Card className="relative overflow-hidden group transition-all hover:shadow-lg">
                        <div className="p-6 relative">
                            <div className="flex justify-between items-start">
                                <div className="p-2 bg-cyan-100 rounded-lg">
                                    <Waves className="h-5 w-5 text-cyan-600" />
                                </div>
                                <div className="flex items-center text-sm text-green-600">
                                    <ArrowUpRight className="h-4 w-4 mr-1" />
                                    +5.7%
                                </div>
                            </div>
                            <div className="mt-4">
                                <h3 className="text-sm font-medium text-muted-foreground">
                                    Air Limbah
                                </h3>
                                <p className="text-2xl font-bold">2,431</p>
                            </div>
                        </div>
                    </Card>

                    {/* Limbah B3 */}
                    <Card className="relative overflow-hidden group transition-all hover:shadow-lg">
                        <div className="p-6 relative">
                            <div className="flex justify-between items-start">
                                <div className="p-2 bg-red-100 rounded-lg">
                                    <Skull className="h-5 w-5 text-red-600" />
                                </div>
                                <div className="flex items-center text-sm text-red-600">
                                    <ArrowDownRight className="h-4 w-4 mr-1" />
                                    -2.3%
                                </div>
                            </div>
                            <div className="mt-4">
                                <h3 className="text-sm font-medium text-muted-foreground">
                                    Limbah B3
                                </h3>
                                <p className="text-2xl font-bold">567</p>
                            </div>
                        </div>
                    </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>
    );
}
