"use client";

import { Card } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { ClipboardList, Hourglass, Send, CheckCircle2, XCircle } from "lucide-react";
import { useGetManagerTaskStats } from "../hooks/dashboard.hooks";


const COLORS = {
  INK: "#1B2A41",
  PURPLE: "#7C3AED",
  ORANGE: "#EA580C",
  GREEN: "#2F6B4F",
  RUST: "#A63D40",
};

function StatCard({
  title,
  value,
  icon: Icon,
  color,
}: {
  title: string;
  value: number;
  icon: React.ElementType;
  color: string;
}) {
  return (
    <Card
      className="transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
      style={{ borderTop: `3px solid ${color}` }}
    >
      <div className="p-5">
        <div className="flex items-start justify-between">
          <div>
            <p className="text-[10px] p-2 uppercase tracking-widest font-semibold text-muted-foreground">
              {title}
            </p>
            <h2 className="mt-3 text-3xl  p-1 font-bold text-[#1B2A41]">{value}</h2>
          </div>
          <div
            className="flex h-11 w-11 items-center justify-center rounded-lg"
            style={{ background: `${color}15` }}
          >
            <Icon size={20} color={color} />
          </div>
        </div>
      </div>
    </Card>
  );
}

export function ManagerTaskStatsCards() {
  const { data: stats, isLoading } = useGetManagerTaskStats();

  if (isLoading) {
    return (
      <div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-5 gap-4">
        {Array.from({ length: 5 }).map((_, i) => (
          <Skeleton key={i} className="h-28 rounded-md" />
        ))}
      </div>
    );
  }

  return (
    // <div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-5 gap-4">
     <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
          gap: 14,
        }}
      >
      <StatCard title="Total Tasks" value={stats?.total ?? 0} icon={ClipboardList} color={COLORS.INK} />
      <StatCard title="Pending My Review" value={stats?.pendingMyReview ?? 0} icon={Hourglass} color={COLORS.PURPLE} />
      <StatCard title="Sent to Client" value={stats?.sentToClient ?? 0} icon={Send} color={COLORS.ORANGE} />
      <StatCard title="Completed" value={stats?.completed ?? 0} icon={CheckCircle2} color={COLORS.GREEN} />
      <StatCard title="Rejected" value={stats?.rejectedByMe ?? 0} icon={XCircle} color={COLORS.RUST} />
    </div>
  );
}