"use client";

import {
  AlertTriangle,
  BellOff,
  CheckCircle2,
  Info,
  XCircle,
  type LucideIcon,
} from "lucide-react";
import { StatusBadge } from "@/components/ui/badge";
import { useI18n, useT } from "@/i18n";
import { cn } from "@/lib/cn";
import { formatRelative } from "@/lib/format";
import type { AdminNotification, AdminNotificationGroupValue, AdminNotificationTypeValue } from "@/types/notification";

/** Severity of one notification, carried by color and icon together. */
const TYPE_META: Record<AdminNotificationTypeValue, { icon: LucideIcon; variant: React.ComponentProps<typeof StatusBadge>["variant"] }> = {
  info: { icon: Info, variant: "info" },
  warning: { icon: AlertTriangle, variant: "warning" },
  success: { icon: CheckCircle2, variant: "success" },
  danger: { icon: XCircle, variant: "destructive" },
};

export function NotificationTypeBadge({ type }: { type: AdminNotificationTypeValue }) {
  const t = useT();
  const { icon: Icon, variant } = TYPE_META[type];
  return (
    <StatusBadge variant={variant}>
      <Icon aria-hidden />
      {t(`notifications.types.${type}`)}
    </StatusBadge>
  );
}

export function NotificationGroupBadge({ group }: { group: AdminNotificationGroupValue }) {
  const t = useT();
  return (
    <StatusBadge variant="secondary" dot={false}>
      {t(`notifications.groups.${group}`)}
    </StatusBadge>
  );
}

/** The marker that keeps unread items visually distinct from read ones. */
export function UnreadDot() {
  return <span aria-label="unread" className="h-2 w-2 shrink-0 rounded-full bg-primary" />;
}

/** A single notification row, shared by the bell dropdown and the full page. */
export function NotificationItem({
  notification,
  onOpen,
  compact = false,
}: {
  notification: AdminNotification;
  onOpen: () => void;
  compact?: boolean;
}) {
  const { locale } = useI18n();
  const { icon: Icon, variant } = TYPE_META[notification.type];

  return (
    <button
      type="button"
      onClick={onOpen}
      className={cn(
        "flex w-full items-start gap-3 rounded-lg px-2 py-2.5 text-start transition-colors hover:bg-muted",
        compact ? "text-sm" : "px-3",
      )}
    >
      <span
        className={cn(
          "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
          variant === "destructive" ? "bg-destructive-soft" : "bg-muted",
        )}
      >
        <Icon className="h-4 w-4 text-muted-foreground" aria-hidden />
      </span>
      <span className="min-w-0 flex-1">
        <span className="flex items-center justify-between gap-2">
          <span className="truncate font-medium text-foreground">{notification.title}</span>
          {!notification.is_read ? <UnreadDot /> : null}
        </span>
        <span className="block text-xs leading-relaxed text-muted-foreground">
          {notification.message}
        </span>
        <span className="mt-1 flex flex-wrap items-center gap-2">
          <NotificationGroupBadge group={notification.group} />
          <span className="text-[11px] text-muted-foreground">
            {formatRelative(notification.created_at, locale)}
          </span>
        </span>
      </span>
    </button>
  );
}

export function NotificationsEmpty() {
  const t = useT();
  return (
    <div className="flex flex-col items-center gap-2 px-6 py-10 text-center">
      <BellOff className="h-8 w-8 text-muted-foreground" aria-hidden />
      <p className="text-sm font-medium text-foreground">{t("notifications.empty")}</p>
    </div>
  );
}