"use client"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
import { useGetStylistPerformance } from "@/lib/react-query/hooks/analytics"
import { Skeleton } from "@/components/ui/skeleton"
import { useTranslations } from "next-intl"

export function StylistTab() {
  return (
    <div className="grid grid-cols-1">
      <StylistPerformance />
    </div>
  )
}

function LoadingCard() {
  const t = useTranslations()

  return (
    <Card>
      <CardHeader>
        <CardTitle className="font-medium text-primary-blue">{t("analytics.stylist.performance.title")}</CardTitle>
        <CardDescription className="text-xs text-muted-foreground">{t("analytics.stylist.performance.description")}</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {[1, 2, 3, 4].map((i) => (
            <div key={i} className="flex flex-col rounded-xl border border-border bg-card p-4 gap-3">
              <div className="flex items-center gap-3">
                <Skeleton className="w-14 h-14 rounded-full" />
                <Skeleton className="h-4 w-32" />
              </div>
              <div className="flex gap-3 mt-2">
                <Skeleton className="flex-1 h-16 rounded-lg" />
                <Skeleton className="flex-1 h-16 rounded-lg" />
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}

function StylistPerformance() {
  const { data: stylistData, isLoading } = useGetStylistPerformance()
  const t = useTranslations()

  if (isLoading) {
    return <LoadingCard />
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="font-medium text-primary-blue">{t("analytics.stylist.performance.title")}</CardTitle>
        <CardDescription className="text-xs text-muted-foreground">{t("analytics.stylist.performance.description")}</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {stylistData?.map((stylist) => (
            <div key={stylist._id} className="flex flex-col rounded-xl border border-border bg-card p-4 gap-3">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <Avatar className="w-14 h-14">
                    <AvatarImage src="" alt={stylist.stylistName} />
                    <AvatarFallback>{stylist.stylistName.split(' ').map(n => n[0]).join('')}</AvatarFallback>
                  </Avatar>
                  <span className="font-medium text-foreground text-base">{stylist.stylistName}</span>
                </div>
              </div>
              <div className="flex gap-3 mt-2">
                <div className="flex-1 rounded-lg bg-blue-50 px-4 py-2">
                  <div className="text-xs text-blue-700 font-medium mb-1">{t("analytics.stylist.performance.bookings")}</div>
                  <div className="text-xl font-bold text-blue-700">{stylist.totalBookings}</div>
                </div>
                <div className="flex-1 rounded-lg bg-green-50 px-4 py-2">
                  <div className="text-xs text-green-600 font-medium mb-1">{t("analytics.stylist.performance.revenue")}</div>
                  <div className="text-xl font-bold text-green-600">${stylist.totalRevenue}</div>
                </div>
              </div>
            </div>
          ))}
          {(!stylistData || stylistData.length === 0) && (
            <div className="col-span-full text-center py-8 text-muted-foreground">
              {t("analytics.stylist.performance.empty")}
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  )
}