"use client";

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

const COLORS = {
  INK: "#1B2A41",
  GREEN: "#2F6B4F",
  BRASS: "#B8860B",
  RUST: "#A63D40",
  BLUE: "#2563EB",
};

const STAT_CONFIG = [
  {
    key: "PENDING",
    label: "Pending Tasks",
    icon: Clock,
    color: COLORS.BRASS,
  },
  {
    key: "IN_PROGRESS",
    label: "In Progress",
    icon: Loader2,
    color: COLORS.BLUE,
  },
  {
    key: "COMPLETED",
    label: "Completed",
    icon: CheckCircle2,
    color: COLORS.GREEN,
  },
  {
    key: "CANCELLED",
    label: "Cancelled",
    icon: XCircle,
    color: COLORS.RUST,
  },
] as const;

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 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 TaskStatsCards() {
  const { data: response, isLoading } = useGetTaskStats();
  const stats = response;

 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-1 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}
      />

      {STAT_CONFIG.map(({ key, label, icon, color }) => (
        <StatCard
          key={key}
          title={label}
          value={stats?.byStatus?.[key] ?? 0}
          icon={icon}
          color={color}
        />
      ))}
    </div>
  );
}