"use client"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useGetPeakHours, useGetWeeklyBookings, useGetBookingRatio } from "@/lib/react-query/hooks/analytics"
import { Skeleton } from "@/components/ui/skeleton"
import { useTranslations } from "next-intl"

function formatTimeTo24Hour(hourString: string): string {
  const [hours, minutes] = hourString.split(':').map(Number)
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`
}

function LoadingCard() {
  return (
    <Card className="gap-2">
      <CardHeader>
        <CardTitle className="font-medium text-primary-blue">
          <Skeleton className="h-5 w-32" />
        </CardTitle>
        <CardDescription className="text-xs text-muted-foreground">
          <Skeleton className="h-3 w-48" />
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid grid-rows-3 grid-cols-2 gap-y-2 gap-x-4">
          {[1, 2, 3].map((i) => (
            <div key={i} className="contents">
              <Skeleton className="h-4 w-16" />
              <Skeleton className="h-4 w-20 ml-auto" />
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}

export function OverviewCards() {
  const t = useTranslations()

  const { data: peakHoursData, isLoading: peakHoursLoading } = useGetPeakHours()
  const { data: weeklyBookingsData, isLoading: weeklyBookingsLoading } = useGetWeeklyBookings()
  const { data: bookingRatioData, isLoading: bookingRatioLoading } = useGetBookingRatio()

  // Sort peak hours by bookings count and take top 3
  const topPeakHours = peakHoursData
    ?.sort((a, b) => b.bookings - a.bookings)
    ?.slice(0, 3) || []

  // Sort weekly bookings by count and take top 3
  const topPerformingDays = weeklyBookingsData
    ?.sort((a, b) => b.bookings - a.bookings)
    ?.slice(0, 3) || []

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-6">
      {weeklyBookingsLoading ? (
        <LoadingCard />
      ) : (
        <Card className="gap-2">
          <CardHeader>
            <CardTitle className="font-medium text-primary-blue">{t("analytics.overviewCards.topPerformingDays.title")}</CardTitle>
            <CardDescription className="text-xs text-muted-foreground">{t("analytics.overviewCards.topPerformingDays.description")}</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-rows-3 grid-cols-2 gap-y-2 gap-x-4">
              {topPerformingDays.map((day, index) => (
                <div key={`${day.day || 'day'}-${index}`} className="contents">
                  <span className="font-medium text-gradient-start">{day.day}</span>
                  <span className="text-muted-foreground text-right">{day.bookings} {day.bookings === 1 ? t("analytics.service.performance.booking") : t("analytics.service.performance.bookings")}</span>
                </div>
              ))}
              {topPerformingDays.length === 0 && (
                <>
                  <span className="font-medium text-gradient-start">{t("analytics.overviewCards.topPerformingDays.noData")}</span>
                  <span className="text-muted-foreground text-right">-</span>
                  <span className="font-medium text-gradient-start">{t("analytics.overviewCards.topPerformingDays.noData")}</span>
                  <span className="text-muted-foreground text-right">-</span>
                  <span className="font-medium text-gradient-start">{t("analytics.overviewCards.topPerformingDays.noData")}</span>
                  <span className="text-muted-foreground text-right">-</span>
                </>
              )}
            </div>
          </CardContent>
        </Card>
      )}
      {peakHoursLoading ? (
        <LoadingCard />
      ) : (
        <Card className="gap-2">
          <CardHeader>
            <CardTitle className="font-medium text-primary-blue">{t("analytics.overviewCards.peakHours.title")}</CardTitle>
            <CardDescription className="text-xs text-muted-foreground">{t("analytics.overviewCards.peakHours.description")}</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-rows-3 grid-cols-2 gap-y-2 gap-x-4">
              {topPeakHours.map((hour, index) => (
                <div key={`${hour.hour || 'hour'}-${index}`} className="contents">
                  <span className="font-medium text-gradient-start">{formatTimeTo24Hour(hour.hour)}</span>
                  <span className="text-muted-foreground text-right">{hour.bookings} {hour.bookings === 1 ? t("analytics.service.performance.booking") : t("analytics.service.performance.bookings")}</span>
                </div>
              ))}
              {topPeakHours.length === 0 && (
                <>
                  <span className="font-medium text-gradient-start">{t("analytics.overviewCards.peakHours.noData")}</span>
                  <span className="text-muted-foreground text-right">-</span>
                  <span className="font-medium text-gradient-start">{t("analytics.overviewCards.peakHours.noData")}</span>
                  <span className="text-muted-foreground text-right">-</span>
                  <span className="font-medium text-gradient-start">{t("analytics.overviewCards.peakHours.noData")}</span>
                  <span className="text-muted-foreground text-right">-</span>
                </>
              )}
            </div>
          </CardContent>
        </Card>
      )}
      {bookingRatioLoading ? (
        <LoadingCard />
      ) : (
        <Card className="gap-2">
          <CardHeader>
            <CardTitle className="font-medium text-primary-blue">{t("analytics.overviewCards.bookingCompletion.title")}</CardTitle>
            <CardDescription className="text-xs text-muted-foreground">{t("analytics.overviewCards.bookingCompletion.description")}</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-rows-3 grid-cols-2 gap-y-2 gap-x-4">
              <span className="font-medium text-gradient-start">{t("analytics.overviewCards.bookingCompletion.confirmed")}</span>
              <span className="text-muted-foreground text-right">{bookingRatioData?.confirmed || 0} {(bookingRatioData?.confirmed || 0) === 1 ? t("analytics.service.performance.booking") : t("analytics.service.performance.bookings")}</span>
              <span className="font-medium text-gradient-start">{t("analytics.overviewCards.bookingCompletion.noShows")}</span>
              <span className="text-muted-foreground text-right">{bookingRatioData?.noShow || 0}</span>
              <span className="font-medium text-gradient-start">{t("analytics.overviewCards.bookingCompletion.completionRate")}</span>
              <span className="text-muted-foreground text-right">{bookingRatioData?.ratio && !isNaN(bookingRatioData.ratio) ? Math.round(bookingRatioData.ratio * 100) : 0}%</span>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}