"use client";

import { Certificate } from "@/types/models";
import { format } from "date-fns";
import { toast } from "@/hooks/use-toast";
import { useFormSubmission } from "@/hooks/use-form-submission";
import { useTranslations } from "next-intl";

import { ArrowRight, CalendarRange, Award, Download, Loader, Medal, ShieldCheck, Sparkles } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

export function CertificateBox({ certificate }: { certificate: Certificate }) {
    const t = useTranslations();

    const downloadCertificate = useFormSubmission({
        endPoint: `/user/certification/get/${certificate?.cert_id}`,
        method: "GET",
        onError: (err) => {
            const status: boolean = err?.response?.data?.status;
            if (!status) {
                toast({
                    variant: "destructive",
                    title: t("custom.failed")
                })
            };
            return { handled: true }
        },
        onSuccess: (response) => {
            const pdfUrl = response?.pdf_url;
            if (pdfUrl) {
                window.open(pdfUrl, "_blank");
            } else {
                toast({
                    variant: "destructive",
                    title: t("custom.failed")
                })
            }
        }
    });

    return (
        <div className="group relative h-full flex flex-col overflow-hidden rounded-2xl bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 hover:border-primary-tw-300 dark:hover:border-primary-tw-600 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
            {/* Award Header with Gradient */}
            <div className="relative bg-gradient-to-br from-primary-tw-500 via-purple-600 to-pink-600 p-10 overflow-hidden">
                {/* Background decorations */}
                <div className="absolute inset-0 bg-black/10"></div>
                <div className="absolute top-0 left-0 w-40 h-40 bg-white/10 rounded-full blur-3xl -translate-x-20 -translate-y-20"></div>
                <div className="absolute bottom-0 right-0 w-40 h-40 bg-white/10 rounded-full blur-3xl translate-x-20 translate-y-20"></div>
                
                {/* Sparkles decoration */}
                <div className="absolute top-4 right-4 opacity-40">
                    <Sparkles className="size-6 text-white animate-pulse" />
                </div>
                <div className="absolute bottom-4 left-4 opacity-40">
                    <Sparkles className="size-4 text-white animate-pulse" style={{ animationDelay: '0.5s' }} />
                </div>
                
                {/* Award Icon */}
                <div className="relative z-10 flex items-center justify-center">
                    <div className="relative">
                        {/* Glow effect */}
                        <div className="absolute inset-0 bg-white/30 rounded-full blur-2xl animate-pulse"></div>
                        {/* Icon container */}
                        <div className="relative bg-white/20 backdrop-blur-sm rounded-full p-6 border-4 border-white/40 group-hover:scale-110 group-hover:rotate-12 transition-all duration-700">
                            <Award className="size-16 text-white drop-shadow-2xl" strokeWidth={2.5} />
                        </div>
                    </div>
                </div>
            </div>

            {/* Content Section */}
            <div className="flex-1 flex flex-col p-6 space-y-4">
                {/* Title & ID Badge */}
                <div className="space-y-3 border-b border-gray-100 dark:border-zinc-800 pb-4">
                    <div className="flex items-start justify-between gap-3">
                        <h3 className="font-bold text-lg text-gray-900 dark:text-gray-100 line-clamp-2 leading-tight">
                            {certificate?.name}
                        </h3>
                        
                        {/* Certificate ID Badge */}
                        <Badge className="flex-shrink-0 bg-gradient-to-r from-primary-tw-100 to-purple-100 dark:from-primary-tw-950 dark:to-purple-950 text-primary-tw-700 dark:text-primary-tw-400 border border-primary-tw-200 dark:border-primary-tw-800 font-bold px-3 py-1 shadow-sm">
                            <ShieldCheck className="size-3 me-1" />
                            #{certificate.cert_id}
                        </Badge>
                    </div>
                    
                    {certificate?.group_name && (
                        <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 leading-relaxed">
                            {certificate.group_name}
                        </p>
                    )}
                </div>

                {/* Date Range */}
              

                {/* Download Button */}
                <div className="pt-2">
                    <Button
                        disabled={downloadCertificate.isPending}
                        onClick={() => downloadCertificate.mutate({})}
                        className="w-full bg-gradient-to-r from-primary-tw-500 to-purple-600 hover:from-primary-tw-600 hover:to-purple-700 text-white font-semibold shadow-lg hover:shadow-xl transition-all duration-300 group/btn"
                    >
                        {downloadCertificate.isPending ? (
                            <>
                                <Loader className="size-4 me-2 animate-spin" />
                                جاري التحميل...
                            </>
                        ) : (
                            <>
                                <Download className="size-4 me-2" />
                                تحميل الشهادة
                            </>
                        )}
                    </Button>
                </div>
            </div>

            {/* Decorative gradient line at bottom */}
            <div className="h-1 bg-gradient-to-r from-primary-tw-500 via-purple-600 to-pink-500 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
        </div>
    )
}