import { DatePickerWithRange } from "@/components/Dashboard/DatePicker";
import AuthenticatedLayout from "@/layouts/authenticated-layout";
import { Head } from "@inertiajs/react";
import {
    Building,
    School,
    Skull,
    UsersRound,
    Waves,
    TrendingUp,
    ArrowUpRight,
    ArrowDownRight,
    Activity,
} from "lucide-react";
import StatsCard from "@/components/Dashboard/DashCard";
import { ChartCard } from "@/components/Dashboard/ChartCard";
import { Card } from "@/components/ui/card";

export default function Dashboard() {
    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>
                        {/* <p className="text-muted-foreground">
                            Detailed monitoring and analytics of environmental
                            metrics
                        </p> */}
                    </div>
                    <DatePickerWithRange />
                </div>

                {/* Stats Cards Grid */}
                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
                    <Card className="relative overflow-hidden group transition-all hover:shadow-lg">
                        <div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-transparent opacity-50 group-hover:opacity-70 transition-opacity" />
                        <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>

                    <Card className="relative overflow-hidden group transition-all hover:shadow-lg">
                        <div className="absolute inset-0 bg-gradient-to-br from-purple-50 to-transparent opacity-50 group-hover:opacity-70 transition-opacity" />
                        <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>

                    <Card className="relative overflow-hidden group transition-all hover:shadow-lg">
                        <div className="absolute inset-0 bg-gradient-to-br from-green-50 to-transparent opacity-50 group-hover:opacity-70 transition-opacity" />
                        <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>

                    <Card className="relative overflow-hidden group transition-all hover:shadow-lg">
                        <div className="absolute inset-0 bg-gradient-to-br from-cyan-50 to-transparent opacity-50 group-hover:opacity-70 transition-opacity" />
                        <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>

                    <Card className="relative overflow-hidden group transition-all hover:shadow-lg">
                        <div className="absolute inset-0 bg-gradient-to-br from-red-50 to-transparent opacity-50 group-hover:opacity-70 transition-opacity" />
                        <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="absolute inset-0 bg-gradient-to-br from-orange-50/50 to-transparent" />
                    <div className="relative p-6">
                        <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 className="flex items-center justify-end gap-1 text-sm text-green-600 mt-1">
                                    <span>Seluruh Perusahaan</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </Card>

                {/* Chart Section */}
                <div className="w-full">
                    <ChartCard />
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
