import * as React from "react";
import { BellOff } from "lucide-react";
import type { AdminAlertDto } from "@/components/admin/alerts-bell";
import { adminTexts } from "@/lib/i18n/admin";
import { cn } from "@/lib/utils";

const KIND_TONE: Record<string, string> = {
  job: "bg-rose-500/15 text-rose-600 dark:text-rose-400",
  provider: "bg-amber-500/15 text-amber-600 dark:text-amber-400",
  pricing: "bg-orange-500/15 text-orange-600 dark:text-orange-400",
  dispatch: "bg-blue-500/15 text-blue-600 dark:text-blue-400",
  order: "bg-blue-500/15 text-blue-600 dark:text-blue-400",
  payment: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400",
};

/** Newest system alerts (job failures, provider balance, pricing guards). */
export function AdminAlertsFeed({ alerts }: { alerts: AdminAlertDto[] }) {
  if (alerts.length === 0) {
    return (
      <div className="flex items-center gap-2 py-6 text-sm text-muted-foreground">
        <BellOff className="size-4" />
        {adminTexts.header.noAlerts}
      </div>
    );
  }

  return (
    <ul className="divide-y">
      {alerts.map((alert) => (
        <li key={alert.id} className="flex items-start gap-2 py-2 first:pt-0 last:pb-0">
          <span
            className={cn(
              "mt-0.5 shrink-0 rounded px-1.5 py-px font-mono text-[10px] font-medium",
              KIND_TONE[alert.kind] ?? "bg-muted text-muted-foreground",
            )}
          >
            {alert.kind}
          </span>
          <p className="min-w-0 flex-1 text-xs leading-snug">{alert.message}</p>
          <span className="shrink-0 text-[10px] whitespace-nowrap text-muted-foreground">
            {alert.ago}
          </span>
        </li>
      ))}
    </ul>
  );
}

export default AdminAlertsFeed;