"use client"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useGetWeeklyBookings, useGetPeakHours } 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')}`
}

export function Overview() {
  const t = useTranslations()
  const { data: weeklyBookingsData, isLoading: weeklyBookingsLoading } = useGetWeeklyBookings()
  const { data: peakHoursData, isLoading: peakHoursLoading } = useGetPeakHours()

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

  // Sort peak hours by bookings count and take top 3
  const topPeakHours = peakHoursData
    ?.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 ? (
        <Card className="gap-2">
          <CardHeader>
            <CardTitle className="font-medium text-primary-blue">{t("earnings.overview.topPerformingDays.title")}</CardTitle>
            <CardDescription className="text-xs text-muted-foreground">{t("earnings.overview.topPerformingDays.description")}</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>
      ) : (
        <Card className="gap-2">
          <CardHeader>
            <CardTitle className="font-medium text-primary-blue">{t("earnings.overview.topPerformingDays.title")}</CardTitle>
            <CardDescription className="text-xs text-muted-foreground">{t("earnings.overview.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("earnings.overview.topPerformingDays.noData")}</span>
                  <span className="text-muted-foreground text-right">-</span>
                  <span className="font-medium text-gradient-start">{t("earnings.overview.topPerformingDays.noData")}</span>
                  <span className="text-muted-foreground text-right">-</span>
                  <span className="font-medium text-gradient-start">{t("earnings.overview.topPerformingDays.noData")}</span>
                  <span className="text-muted-foreground text-right">-</span>
                </>
              )}
            </div>
          </CardContent>
        </Card>
      )}
      {peakHoursLoading ? (
        <Card className="gap-2">
          <CardHeader>
            <CardTitle className="font-medium text-primary-blue">{t("earnings.overview.peakHours.title")}</CardTitle>
            <CardDescription className="text-xs text-muted-foreground">{t("earnings.overview.peakHours.description")}</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>
      ) : (
        <Card className="gap-2">
          <CardHeader>
            <CardTitle className="font-medium text-primary-blue">{t("earnings.overview.peakHours.title")}</CardTitle>
            <CardDescription className="text-xs text-muted-foreground">{t("earnings.overview.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("earnings.overview.peakHours.noData")}</span>
                  <span className="text-muted-foreground text-right">-</span>
                  <span className="font-medium text-gradient-start">{t("earnings.overview.peakHours.noData")}</span>
                  <span className="text-muted-foreground text-right">-</span>
                  <span className="font-medium text-gradient-start">{t("earnings.overview.peakHours.noData")}</span>
                  <span className="text-muted-foreground text-right">-</span>
                </>
              )}
            </div>
          </CardContent>
        </Card>
      )}
      <Card className="gap-2">
        <CardHeader>
          <CardTitle className="font-medium text-primary-blue">{t("earnings.overview.cancellationsNoShows.title")}</CardTitle>
          <CardDescription className="text-xs text-muted-foreground">{t("earnings.overview.cancellationsNoShows.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("earnings.overview.cancellationsNoShows.noShows")}</span>
            <span className="text-muted-foreground text-right">7</span>
            <span className="font-medium text-gradient-start">{t("earnings.overview.cancellationsNoShows.lateCancel")}</span>
            <span className="text-muted-foreground text-right">5</span>
            <span className="font-medium text-gradient-start">{t("earnings.overview.cancellationsNoShows.earlyCancel")}</span>
            <span className="text-muted-foreground text-right">3</span>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}