"use client";

import * as React from "react";
import { Bell, CheckCheck, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  clearAdminAlertsAction,
  markAdminAlertsReadAction,
} from "@/lib/actions/admin-shell";
import { adminTexts } from "@/lib/i18n/admin";
import { cn } from "@/lib/utils";

/** Serialized alert — the layout maps lib/alerts Alert rows into this. */
export type AdminAlertDto = {
  id: string;
  kind: string;
  message: string;
  ago: string;
  read: boolean;
};

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

export function AdminAlertsBell({ alerts }: { alerts: AdminAlertDto[] }) {
  const unread = alerts.filter((a) => !a.read).length;

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          type="button"
          variant="ghost"
          size="icon"
          aria-label={adminTexts.header.alerts}
          className="relative size-8 text-white/75 hover:bg-white/10 hover:text-white"
        >
          <Bell className="size-4" />
          {unread > 0 ? (
            <span className="absolute -top-0.5 -right-0.5 grid min-w-4 place-items-center rounded-full bg-rose-500 px-1 font-mono text-[10px] leading-4 font-semibold text-white tabular-nums">
              {unread > 99 ? "99+" : unread}
            </span>
          ) : null}
        </Button>
      </DropdownMenuTrigger>

      <DropdownMenuContent align="end" className="w-80 p-0">
        <DropdownMenuLabel className="flex items-center justify-between px-3 py-2 text-xs">
          {adminTexts.header.alerts}
          {alerts.length ? (
            <span className="font-mono text-[10px] text-muted-foreground tabular-nums">
              {alerts.length}
            </span>
          ) : null}
        </DropdownMenuLabel>
        <DropdownMenuSeparator className="m-0" />

        <div className="max-h-80 overflow-y-auto">
          {alerts.length === 0 ? (
            <p className="px-3 py-6 text-center text-xs text-muted-foreground">
              {adminTexts.header.noAlerts}
            </p>
          ) : (
            alerts.map((alert) => (
              <div
                key={alert.id}
                className={cn(
                  "border-b px-3 py-2 last:border-0",
                  !alert.read && "bg-blue-600/5 dark:bg-blue-500/10",
                )}
              >
                <div className="flex items-center gap-1.5">
                  <span
                    className={cn(
                      "rounded px-1.5 py-px font-mono text-[10px] font-medium",
                      KIND_TONE[alert.kind] ?? "bg-muted text-muted-foreground",
                    )}
                  >
                    {alert.kind}
                  </span>
                  <span className="ml-auto text-[10px] text-muted-foreground">
                    {alert.ago}
                  </span>
                </div>
                <p className="mt-1 text-xs leading-snug">{alert.message}</p>
              </div>
            ))
          )}
        </div>

        {alerts.length ? (
          <>
            <DropdownMenuSeparator className="m-0" />
            <div className="flex items-center gap-2 p-2">
              <form action={markAdminAlertsReadAction} className="flex-1">
                <Button
                  type="submit"
                  variant="ghost"
                  size="sm"
                  className="w-full justify-start"
                  disabled={unread === 0}
                >
                  <CheckCheck className="size-3.5" />
                  Mark read
                </Button>
              </form>
              <form action={clearAdminAlertsAction}>
                <Button type="submit" variant="ghost" size="sm" className="text-destructive">
                  <Trash2 className="size-3.5" />
                  {adminTexts.header.clearAlerts}
                </Button>
              </form>
            </div>
          </>
        ) : null}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

export default AdminAlertsBell;