"use client"

import { format } from "date-fns";
import { CONTROL_USER_DATA } from "@/utils/data/control-user-data";
import { useTranslations } from "next-intl";
import { useRouter, Link } from "@/i18n/navigation";
import { useGet } from "@/hooks/use-get"
import { useQueryClient } from "@tanstack/react-query";

import { BanknoteArrowDown, BookMarked, GraduationCap, HandCoins, LoaderIcon, TicketCheck } from "lucide-react";

import { useState, useEffect } from "react";

export function DashboardHome() {
    const t = useTranslations();
    const router = useRouter();
    const queryClient = useQueryClient();

    const [date, setDate] = useState<string>("");

    useEffect(() => {
        setDate(format(new Date(), "PPPP"));
    }, []);

    const { data: user, isError } = useGet({ url: "/user" });
    const { data: stats } = useGet({ url: "/user/statistics" });

    const userDetails = [
        {
            title: t('user.expenses'),
            icon: BanknoteArrowDown,
            bgColor: "bg-red-500",
            data: stats?.countPrices ? Number(stats?.countPrices).toFixed(2) : "0",
            href: "/dashboard/purchases"
        },
        {
            title: t('routes.certificates'),
            icon: TicketCheck,
            bgColor: "bg-yellow-500",
            data: `${stats?.countCertificates || 0} ${t("single-word.certificates")}`,
            href: "/dashboard/certificates"
        },
        {
            title: t('user.purchased-program'),
            icon: BookMarked,
            bgColor: "bg-blue-500",
            data: `${stats?.countGroups || 0} ${t("single-word.purchases")}`,
            href: "/dashboard/programs"
        },
    ];

    // if (isError) {
    //     CONTROL_USER_DATA({ action: "delete" });
    //     setTimeout(() => router.push("/login"), 1500)
    //     return (
    //         <div className="fixed top-0 right-0 h-dvh w-dvw z-[1000] text-white grid place-items-center bg-black">
    //             <p>
    //                 ERROR | 404
    //             </p>
    //         </div>
    //     )
    // };

    return (
        <section className="space-y-4 p-4">
            <div>
                <h2 className="text-xl font-semibold">
                    {t("hello")}, {user?.first_name}
                </h2>
                <p>
                    {date}
                </p>
            </div>
          <div className="grid gap-6">
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {userDetails.map((item, index) => (
            <Link 
                key={index} 
                href={item.href}
                onClick={() => {
                    queryClient.invalidateQueries();
                    router.refresh();
                }}
                className="group relative overflow-hidden bg-gradient-to-br from-white to-gray-50 dark:from-zinc-900 dark:to-zinc-950 p-6 rounded-2xl border border-gray-200 dark:border-zinc-800 hover:border-primary-tw-300 dark:hover:border-primary-tw-600 shadow-sm hover:shadow-xl transition-all duration-500 hover:-translate-y-1 block"
            >
                {/* Background decoration */}
                <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-primary-tw-100/20 to-purple-100/20 dark:from-primary-tw-900/10 dark:to-purple-900/10 rounded-full blur-3xl -translate-y-16 translate-x-16 group-hover:scale-150 transition-transform duration-700" />
                
                {/* Content */}
                <div className="relative z-10 flex items-center gap-4">
                    {/* Icon Container */}
                    <div className={`flex-shrink-0 ${item.bgColor} rounded-2xl p-4 shadow-lg group-hover:scale-110 group-hover:rotate-3 transition-all duration-500`}>
                        <item.icon className="size-6 text-white" />
                    </div>
                    
                    {/* Text Content */}
                    <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">
                            {item.title}
                        </p>
                        <p className="text-2xl font-bold text-gray-900 dark:text-gray-100 truncate">
                            {item.data}
                        </p>
                    </div>
                </div>
                
                {/* Bottom gradient line */}
                <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-primary-tw-500 via-purple-500 to-pink-500 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
            </Link>
        ))}
    </div>
</div>
        </section>
    )
}