"use client"
import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts"
import { useGetStylistPerformance } from "@/lib/react-query/hooks/analytics"
import { Skeleton } from "@/components/ui/skeleton"

export function RevenueChartActual() {
  const { data: stylistData, isLoading } = useGetStylistPerformance()

  // Transform API data for the chart
  const chartData = stylistData?.map(stylist => ({
    name: stylist.stylistName,
    revenue: stylist.totalRevenue
  })) || []

  if (isLoading) {
    return (
      <div className="w-full h-[280px] flex items-center justify-center">
        <div className="space-y-3 w-full max-w-md">
          <Skeleton className="h-4 w-full" />
          <Skeleton className="h-4 w-3/4" />
          <Skeleton className="h-4 w-1/2" />
        </div>
      </div>
    )
  }

  if (!chartData || chartData.length === 0) {
    return (
      <div className="w-full h-[280px] flex items-center justify-center text-muted-foreground">
        No stylist performance data available
      </div>
    )
  }

  return (
    <ResponsiveContainer width="100%" height={280}>
      <AreaChart data={chartData} margin={{ top: 10, right: 20, left: 0, bottom: 0 }}>
        <defs>
          <linearGradient id="revenueArea" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#2563eb" stopOpacity={0.3} />
            <stop offset="100%" stopColor="#2563eb" stopOpacity={0} />
          </linearGradient>
        </defs>
        <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fontSize: 12, fill: "#64748b" }} />
        <YAxis
          tick={{ fontSize: 12, fill: "#64748b" }}
          tickFormatter={value => `€${value}`}
          axisLine={false}
          tickLine={false}
        />
        <Tooltip formatter={value => [`€${value}`, "Revenue"]} />
        <Area
          type="monotone"
          dataKey="revenue"
          stroke="#2563eb"
          strokeWidth={3}
          fill="url(#revenueArea)"
          dot={{ r: 3, fill: "#2563eb" }}
          activeDot={{ r: 5, fill: "#2563eb" }}
        />
      </AreaChart>
    </ResponsiveContainer>
  )
}