"use client"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Calendar, Clock, Euro, ArrowUpRight, TrendingUp } from "lucide-react"
import { useTranslations } from "next-intl"
import { useGetDailyMetrics } from "@/lib/react-query/hooks/analytics"
import { Skeleton } from "@/components/ui/skeleton"

export function DailySummary() {
    const t = useTranslations('dashboard.dailySummary')
    const { data: metrics, isLoading } = useGetDailyMetrics()

    if (isLoading) {
        return (
            <Card className="bg-white rounded-2xl shadow-sm overflow-hidden border-none mt-6">
                <CardHeader className="pb-4">
                    <div className="flex justify-between items-center">
                        <div>
                            <Skeleton className="h-8 w-48 mb-2" />
                            <Skeleton className="h-4 w-64" />
                        </div>
                        <Skeleton className="w-10 h-10 rounded-xl" />
                    </div>
                </CardHeader>
                <CardContent>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
                        {[1, 2, 3].map((i) => (
                            <div key={i} className="p-5 h-36 bg-slate-50 rounded-2xl border border-slate-100 animate-pulse" />
                        ))}
                    </div>
                </CardContent>
            </Card>
        )
    }

    const stats = {
        appointments: metrics?.totalAppointments ?? 0,
        remainingSlots: metrics?.remainingSlots ?? 0,
        revenue: metrics?.dailyRevenue ?? 0
    }

    return (
        <Card className="bg-white rounded-2xl shadow-sm overflow-hidden border-none mt-6">
            <CardHeader className="pb-4">
                <div className="flex justify-between items-center">
                    <div>
                        <CardTitle className="font-medium text-primary-blue">
                            {t('title')}
                        </CardTitle>
                        <CardDescription className="text-sm text-slate-500 font-medium">
                            {t('description')}
                        </CardDescription>
                    </div>
                    <div className="bg-blue-50 p-2.5 rounded-xl border border-blue-100/50 shadow-inner">
                        <TrendingUp className="w-5 h-5 text-blue-600" />
                    </div>
                </div>
            </CardHeader>
            <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
                    {/* Appointments Stat */}
                    <div className="group relative overflow-hidden flex flex-col p-5 bg-gradient-to-br from-indigo-50/80 via-white to-blue-50/50 rounded-2xl border border-indigo-100/50 hover:shadow-md transition-all duration-300">
                        <div className="flex items-center gap-3 mb-3">
                            <div className="p-2 bg-indigo-500/10 rounded-xl group-hover:scale-110 transition-transform">
                                <Calendar className="w-5 h-5 text-indigo-600" />
                            </div>
                            <span className="text-base font-semibold text-slate-800">{t('totalAppointments')}</span>
                        </div>
                        <div className="flex items-baseline gap-3">
                            <span className="text-3xl font-extrabold text-indigo-900 tracking-tight">{stats.appointments}</span>
                            <div className="flex items-center text-[10px] font-bold bg-green-100 text-green-700 px-1.5 py-0.5 rounded-full uppercase tracking-wider">
                                {t('today')} <ArrowUpRight className="w-3 h-3 ml-0.5" />
                            </div>
                        </div>
                        {/* Subtle background element */}
                        <div className="absolute -right-2 -bottom-2 opacity-[0.03] group-hover:opacity-[0.07] transition-opacity">
                            <Calendar className="w-20 h-20 text-indigo-900" />
                        </div>
                    </div>

                    {/* Remaining Slots Stat */}
                    <div className="group relative overflow-hidden flex flex-col p-5 bg-gradient-to-br from-amber-50/80 via-white to-orange-50/50 rounded-2xl border border-amber-100/50 hover:shadow-md transition-all duration-300">
                        <div className="flex items-center gap-3 mb-3">
                            <div className="p-2 bg-amber-500/10 rounded-xl group-hover:scale-110 transition-transform">
                                <Clock className="w-5 h-5 text-amber-600" />
                            </div>
                            <span className="text-base font-semibold text-slate-800">{t('remainingSlots')}</span>
                        </div>
                        <div className="flex items-baseline gap-3">
                            <span className="text-3xl font-extrabold text-amber-900 tracking-tight">{stats.remainingSlots}</span>
                            <div className="flex items-center text-[10px] font-bold bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded-full uppercase tracking-wider">
                                {t('available')}
                            </div>
                        </div>
                        {/* Subtle background element */}
                        <div className="absolute -right-2 -bottom-2 opacity-[0.03] group-hover:opacity-[0.07] transition-opacity">
                            <Clock className="w-20 h-20 text-amber-900" />
                        </div>
                    </div>

                    {/* Revenue Stat */}
                    <div className="group relative overflow-hidden flex flex-col p-5 bg-gradient-to-br from-emerald-50/80 via-white to-teal-50/50 rounded-2xl border border-emerald-100/50 hover:shadow-md transition-all duration-300">
                        <div className="flex items-center gap-3 mb-3">
                            <div className="p-2 bg-emerald-500/10 rounded-xl group-hover:scale-110 transition-transform">
                                <Euro className="w-5 h-5 text-emerald-600" />
                            </div>
                            <span className="text-base font-semibold text-slate-800">{t('dailyRevenue')}</span>
                        </div>
                        <div className="flex items-baseline gap-3">
                            <span className="text-3xl font-extrabold text-emerald-900 tracking-tight">€{stats.revenue}</span>
                            <div className="flex items-center text-[10px] font-bold bg-emerald-100 text-emerald-700 px-1.5 py-0.5 rounded-full uppercase tracking-wider">
                                {t('current')} <ArrowUpRight className="w-3 h-3 ml-0.5" />
                            </div>
                        </div>
                        {/* Subtle background element */}
                        <div className="absolute -right-2 -bottom-2 opacity-[0.03] group-hover:opacity-[0.07] transition-opacity">
                            <Euro className="w-20 h-20 text-emerald-900" />
                        </div>
                    </div>
                </div>
            </CardContent>
        </Card>
    )
}