"use client";

import { Card } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { ClipboardList, AlertTriangle, Clock, CheckCircle2, FileWarning } from "lucide-react";
import { useGetEmployeeTaskStats } from "../hooks/dashboard.hooks";


const COLORS = {
  INK: "#1B2A41",
  GREEN: "#2F6B4F",
  BRASS: "#B8860B",
  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] uppercase p-2 tracking-widest font-semibold text-muted-foreground">
              {title}
            </p>
            <h2 className="mt-3 p-1 text-3xl 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 EmployeeTaskStatsCards() {
  const { data: stats, isLoading } = useGetEmployeeTaskStats();

  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">
      
      <StatCard title="Total Tasks" value={stats?.total ?? 0} icon={ClipboardList} color={COLORS.INK} />
      <StatCard title="Pending" value={stats?.byStatus?.PENDING ?? 0} icon={AlertTriangle} color={COLORS.RUST} />
      <StatCard
        title="REJECTED"
        value={stats?.byStatus?.IN_PROGRESS ?? 0}
        icon={FileWarning}
        color={COLORS.BRASS}
      />
      {/* <StatCard title="Completed" value={stats?.completed ?? 0} icon={CheckCircle2} color={COLORS.GREEN} /> */}
    </div>
  );
}