import * as React from "react";
import Link from "next/link";
import {
  AlertTriangle,
  ArrowRight,
  CheckCircle2,
  CreditCard,
  LifeBuoy,
  RefreshCw,
  XCircle,
  type LucideIcon,
} from "lucide-react";
import type { AdminBadges } from "@/lib/admin/badges";
import { adminTexts } from "@/lib/i18n/admin";
import { cn } from "@/lib/utils";

type PendingItem = {
  key: string;
  label: string;
  href: string;
  icon: LucideIcon;
  count: number;
  tone: "rose" | "amber" | "blue" | "cyan";
};

const TONE: Record<string, string> = {
  rose: "bg-rose-500/10 text-rose-600 dark:text-rose-400",
  amber: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
  blue: "bg-blue-600/10 text-blue-600 dark:text-blue-400",
  cyan: "bg-cyan-500/10 text-cyan-600 dark:text-cyan-400",
};

/** Queues waiting for an admin decision, straight from lib/admin/badges. */
export function AdminPendingGrid({ badges }: { badges: AdminBadges }) {
  const items: PendingItem[] = [
    {
      key: "orders",
      label: adminTexts.dashboard.errorsToPlace,
      href: "/admin/orders?tab=error",
      icon: AlertTriangle,
      count: badges.orders,
      tone: "rose",
    },
    {
      key: "payments",
      label: adminTexts.dashboard.paymentsPending,
      href: "/admin/payments?tab=pending",
      icon: CreditCard,
      count: badges.payments,
      tone: "amber",
    },
    {
      key: "tickets",
      label: adminTexts.dashboard.ticketsPending,
      href: "/admin/tickets?tab=pending",
      icon: LifeBuoy,
      count: badges.tickets,
      tone: "blue",
    },
    {
      key: "refill",
      label: adminTexts.dashboard.refillPending,
      href: "/admin/refill?tab=pending",
      icon: RefreshCw,
      count: badges.refill,
      tone: "cyan",
    },
    {
      key: "cancel",
      label: adminTexts.dashboard.cancelPending,
      href: "/admin/cancel?tab=pending",
      icon: XCircle,
      count: badges.cancel,
      tone: "amber",
    },
  ];

  if (badges.total === 0) {
    return (
      <div className="flex items-center gap-2 rounded-xl border border-dashed px-3 py-6 text-sm text-muted-foreground">
        <CheckCircle2 className="size-4 text-emerald-500" />
        {adminTexts.dashboard.allClear}
      </div>
    );
  }

  return (
    <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
      {items.map((item) => (
        <Link
          key={item.key}
          href={item.href}
          className={cn(
            "group flex items-center gap-2.5 rounded-xl border px-3 py-2.5 transition-colors",
            item.count > 0
              ? "bg-card hover:border-blue-600/40"
              : "bg-muted/30 opacity-60 hover:opacity-100",
          )}
        >
          <span
            className={cn(
              "grid size-8 shrink-0 place-items-center rounded-lg",
              TONE[item.tone],
            )}
          >
            <item.icon className="size-4" />
          </span>
          <span className="min-w-0 flex-1">
            <span className="block truncate text-sm font-medium">{item.label}</span>
            <span className="block font-mono text-xs text-muted-foreground tabular-nums">
              {item.count} {adminTexts.header.pendingWork}
            </span>
          </span>
          <ArrowRight className="size-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
        </Link>
      ))}
    </div>
  );
}

export default AdminPendingGrid;