"use client"
import StatsCard from "@/components/common/StatsCard"
import { Euro, Calendar, Percent, User } from "lucide-react"
import { useGetRevenueStats, useGetAppointmentStats, useGetClientsStats, useGetOccupancyRate } from "@/lib/react-query/hooks/analytics"
import { useTranslations } from "next-intl"

export default function DashboardStatsGrid() {
  const td = useTranslations('dashboard')
  const { data: revenueStats, isLoading: revenueLoading } = useGetRevenueStats()
  const { data: appointmentStats, isLoading: appointmentLoading } = useGetAppointmentStats()
  const { data: clientStats, isLoading: clientLoading } = useGetClientsStats()
  const { data: occupancyData, isLoading: occupancyLoading } = useGetOccupancyRate()

  // Calculate average fill rate across all stylists
  const averageFillRate = occupancyData && occupancyData.length > 0
    ? Math.round(occupancyData.reduce((sum, stylist) => sum + stylist.occupancyRate, 0) / occupancyData.length)
    : 0

  return (
    <div className="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      <StatsCard
        label={td('stats.revenueToday')}
        value={revenueLoading ? "..." : `€${revenueStats?.todayRevenue || 0}`}
        valueColor="text-gradient-start"
        borderColor="border-gradient-start"
        iconBgColor="bg-light-blue"
        icon={<Euro className="w-7 h-7 text-gradient-start" />}
      />

      <StatsCard
        label={td('stats.appointments')}
        value={appointmentLoading ? "..." : `${appointmentStats?.todayAppointments || 0}`}
        valueColor="text-[#EFB603]"
        borderColor="border-[#EFB603]"
        iconBgColor="bg-[#FFF7D6]"
        icon={<Calendar className="w-7 h-7 text-[#EFB603]" />}
      />

      <StatsCard
        label={td('stats.fillRate')}
        value={occupancyLoading ? "..." : `${averageFillRate}%`}
        valueColor="text-[#FF6E00] font-bold"
        borderColor="border-[#FF6E00]"
        iconBgColor="bg-[#FFE6D6]"
        icon={<Percent className="w-7 h-7 text-[#FF6E00]" />}
      />

      <StatsCard
        label={td('stats.newClients')}
        value={clientLoading ? "..." : `${clientStats?.newClientsToday || 0}`}
        valueColor="text-[#B72DFF]"
        borderColor="border-[#B72DFF]"
        iconBgColor="bg-[#F3E6FF]"
        icon={<User className="w-7 h-7 text-[#B72DFF]" />}
      />
    </div>
  )
}