"use client";

import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from "recharts";
import { useGetTaskStats } from "../hooks/dashboard.hooks";


const STATUS_COLORS: Record<string, string> = {
  PENDING: "#EAB308",
  IN_PROGRESS: "#3B82F6",
  EMPLOYEE_DONE: "#6366F1",
  MANAGER_APPROVAL: "#A855F7",
  CLIENT_APPROVAL: "#F97316",
  FILING_PENDING: "#EAB308",
  COMPLETED: "#10B981",
  REJECTED: "#EF4444",
};

const STATUS_LABELS: Record<string, string> = {
  PENDING: "Pending",
  IN_PROGRESS: "In Progress",
  EMPLOYEE_DONE: "Employee Done",
  MANAGER_APPROVAL: "Manager Review",
  CLIENT_APPROVAL: "Your Approval",
  FILING_PENDING: "Filing Pending",
  COMPLETED: "Completed",
  REJECTED: "Rejected",
};

export function TaskStatusPieChart() {
  const { data: stats, isLoading } = useGetTaskStats();
 

  const chartData = stats
    ? Object.entries(stats.byStatus)
        .filter(([, count]) => count > 0)
        .map(([status, count]) => ({
          name: STATUS_LABELS[status] ?? status,
          value: count,
          color: STATUS_COLORS[status] ?? "#94A3B8",
        }))
    : [];

  return (
    <Card className="border-border shadow-sm">
      <CardHeader className="py-4 px-5 border-b border-border">
        <p className="text-sm font-semibold text-foreground">Task Status Breakdown</p>
        <p className="text-xs text-muted-foreground">Where your tasks currently stand</p>
      </CardHeader>
      {/* <CardContent className="p-5"> */}
      <CardContent className="h-[350px] p-4">
        {isLoading ? (
          <Skeleton className="h-64 w-full rounded-lg" />
        ) : chartData.length === 0 ? (
          <div className="h-64 flex items-center justify-center text-sm text-muted-foreground">
            No tasks yet
          </div>
        ) : (
          <ResponsiveContainer width="100%" height={280}>
            <PieChart>
              <Pie
                data={chartData}
                dataKey="value"
                nameKey="name"
                cx="50%"
                cy="50%"
                innerRadius={60}
                outerRadius={95}
                paddingAngle={2}
              >
                {chartData.map((entry, i) => (
                  <Cell key={i} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip
                formatter={(value: number, name: string) => [`${value} task${value === 1 ? "" : "s"}`, name]}
              />
              <Legend
                verticalAlign="bottom"
                iconType="circle"
                wrapperStyle={{ fontSize: "11px" }}
              />
            </PieChart>
          </ResponsiveContainer>
        )}
      </CardContent>
    </Card>
  );
}