import Link from "next/link";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import {
  AlertTriangle,
  ClipboardCheck,
  PackageCheck,
  Eye,
  TrendingUp,
} from "lucide-react";
import type { DashboardStats } from "@/types";

interface StatsCardsProps {
  stats: DashboardStats;
}

/**
 * Five numbers that can go down. Each one links to the page that lists what it
 * counts — a figure with no way through to the rows behind it is wallpaper.
 */
export function StatsCards({ stats }: StatsCardsProps) {
  const cards = [
    {
      label: "Blocked",
      value: stats.blocked,
      href: "#blocked",
      icon: AlertTriangle,
      color: "text-red-400",
      bg: "bg-red-500/10",
      // The only card that earns emphasis when it is non-zero: everything else
      // here is a queue depth, this one is work that has stopped.
      emphasise: stats.blocked > 0,
    },
    {
      label: "In QC",
      value: stats.inQc,
      href: "/pipeline?status=READY_FOR_QC",
      icon: ClipboardCheck,
      color: "text-amber-400",
      bg: "bg-amber-500/10",
    },
    {
      label: "Ready to deliver",
      value: stats.readyToDeliver,
      href: "/pipeline/deliveries",
      icon: PackageCheck,
      color: "text-green-400",
      bg: "bg-green-500/10",
    },
    {
      label: "With the client",
      value: stats.awaitingClientReview,
      href: "/playlist",
      icon: Eye,
      color: "text-blue-400",
      bg: "bg-blue-500/10",
    },
    {
      label: "Active projects",
      value: stats.activeProjects,
      href: "/projects",
      icon: TrendingUp,
      color: "text-zinc-400",
      bg: "bg-zinc-500/10",
    },
  ];

  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
      {cards.map((card) => {
        const Icon = card.icon;
        return (
          <Link key={card.label} href={card.href} className="group rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-500">
            <Card
              className={cn(
                "h-full transition-colors group-hover:border-zinc-700",
                card.emphasise && "border-red-500/40"
              )}
            >
              <CardContent className="p-4">
                <div className="flex items-center justify-between mb-3">
                  <div className={cn("p-2 rounded-md", card.bg)}>
                    <Icon className={cn("h-4 w-4", card.color)} />
                  </div>
                </div>
                <p
                  className={cn(
                    "text-3xl font-bold tabular-nums",
                    card.emphasise ? "text-red-400" : "text-white"
                  )}
                >
                  {card.value}
                </p>
                <p className="text-sm text-zinc-400 mt-0.5">{card.label}</p>
              </CardContent>
            </Card>
          </Link>
        );
      })}
    </div>
  );
}