"use client";

import { TrendingUp } from "lucide-react";
import { Bar, BarChart, XAxis, YAxis } from "recharts";

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import { trpc } from "@/app/_trpc/client";

export default function UserTaskChart({ searchParams }: { searchParams: Record<string, string> }) {
  const [usersData] = trpc.users.getUserRecentCompleatedTasks.useSuspenseQuery(searchParams, {
    refetchOnMount: false,
    refetchOnWindowFocus: false,
  });


  const chartConfig = usersData
    ? usersData.reduce((acc, { user }, index) => {
        if (!user) return acc; 
        const numChart = index + 1 >= 5 ? 5 : index + 1;
        acc[user.toLowerCase()] = {
          label: user,
          color: `hsl(var(--chart-${numChart}))`,
        };
        return acc;
      }, {} as Record<string, { label: string; color: string }>)
    : {};

  const chartData = usersData?.map(({ user, total }) => ({
    usuario: user?.toLowerCase() || "Unknown",
    total,
    fill: `var(--color-${user?.toLowerCase() || "unknown"})`,
  }));


  return (
    <Card className="h-full bg-white">
      <CardHeader>
        <CardTitle>Tareas completadas y revisasas</CardTitle>
        <CardDescription>Enero - hoy</CardDescription>
      </CardHeader>
      <CardContent>
            <ChartContainer config={chartConfig} className=" min-h-[150px]  min-w-[300px] ">
          <BarChart
            accessibilityLayer
            data={chartData}
            layout="vertical"
            margin={{
              left: 0,
            }}
          >
            <YAxis
              dataKey="usuario"
              type="category"
              tickLine={false}
              tickMargin={10}
              axisLine={false}
              tickFormatter={(value) =>
                chartConfig[value as keyof typeof chartConfig]?.label
              }
            />
            <XAxis dataKey="total" type="number" hide />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent hideLabel />}
            />
            <Bar dataKey="total" layout="vertical" radius={5} />
          </BarChart>
        </ChartContainer>
      </CardContent>
 
    </Card>
  );
}