KanzlAI-mGMT/frontend/src/components/notifications/NotificationBell.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { Bell, Check, CheckCheck, ExternalLink } from "lucide-react";
import { api } from "@/lib/api";
import type { Notification, NotificationListResponse } from "@/lib/types";

function getEntityLink(n: Notification): string | null {
  if (!n.entity_type || !n.entity_id) return null;
  switch (n.entity_type) {
    case "deadline":
      return `/fristen/${n.entity_id}`;
    case "appointment":
      return `/termine/${n.entity_id}`;
    case "case":
      return `/akten/${n.entity_id}`;
    default:
      return null;
  }
}

function getTypeColor(type: Notification["type"]): string {
  switch (type) {
    case "deadline_overdue":
      return "bg-red-500";
    case "deadline_reminder":
      return "bg-amber-500";
    case "case_update":
      return "bg-blue-500";
    case "assignment":
      return "bg-violet-500";
    default:
      return "bg-neutral-500";
  }
}

function timeAgo(dateStr: string): string {
  const now = new Date();
  const date = new Date(dateStr);
  const diffMs = now.getTime() - date.getTime();
  const diffMin = Math.floor(diffMs / 60000);
  if (diffMin < 1) return "gerade eben";
  if (diffMin < 60) return `vor ${diffMin} Min.`;
  const diffHours = Math.floor(diffMin / 60);
  if (diffHours < 24) return `vor ${diffHours} Std.`;
  const diffDays = Math.floor(diffHours / 24);
  if (diffDays === 1) return "gestern";
  return `vor ${diffDays} Tagen`;
}

export function NotificationBell() {
  const [open, setOpen] = useState(false);
  const panelRef = useRef<HTMLDivElement>(null);
  const queryClient = useQueryClient();

  const { data: unreadData } = useQuery({
    queryKey: ["notifications-unread-count"],
    queryFn: () =>
      api.get<{ unread_count: number }>("/api/notifications/unread-count"),
    refetchInterval: 30_000,
  });

  const { data: notifData } = useQuery({
    queryKey: ["notifications"],
    queryFn: () =>
      api.get<NotificationListResponse>("/api/notifications?limit=20"),
    enabled: open,
  });

  const markRead = useMutation({
    mutationFn: (id: string) =>
      api.patch(`/api/notifications/${id}/read`),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["notifications"] });
      queryClient.invalidateQueries({
        queryKey: ["notifications-unread-count"],
      });
    },
  });

  const markAllRead = useMutation({
    mutationFn: () => api.patch("/api/notifications/read-all"),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["notifications"] });
      queryClient.invalidateQueries({
        queryKey: ["notifications-unread-count"],
      });
    },
  });

  // Close on click outside
  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    if (open) {
      document.addEventListener("mousedown", handleClickOutside);
    }
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [open]);

  const unreadCount = unreadData?.unread_count ?? 0;
  const notifications = notifData?.data ?? [];

  return (
    <div className="relative" ref={panelRef}>
      <button
        onClick={() => setOpen(!open)}
        className="relative rounded-md p-1.5 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600"
        title="Benachrichtigungen"
      >
        <Bell className="h-4 w-4" />
        {unreadCount > 0 && (
          <span className="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-bold text-white">
            {unreadCount > 99 ? "99+" : unreadCount}
          </span>
        )}
      </button>

      {open && (
        <div className="absolute right-0 top-full z-50 mt-2 w-80 rounded-xl border border-neutral-200 bg-white shadow-lg sm:w-96">
          {/* Header */}
          <div className="flex items-center justify-between border-b border-neutral-100 px-4 py-3">
            <h3 className="text-sm font-semibold text-neutral-900">
              Benachrichtigungen
            </h3>
            {unreadCount > 0 && (
              <button
                onClick={() => markAllRead.mutate()}
                className="flex items-center gap-1 text-xs text-neutral-500 hover:text-neutral-700"
              >
                <CheckCheck className="h-3 w-3" />
                Alle gelesen
              </button>
            )}
          </div>

          {/* Notification list */}
          <div className="max-h-96 overflow-y-auto">
            {notifications.length === 0 ? (
              <div className="p-6 text-center text-sm text-neutral-400">
                Keine Benachrichtigungen
              </div>
            ) : (
              notifications.map((n) => {
                const link = getEntityLink(n);
                return (
                  <div
                    key={n.id}
                    className={`flex items-start gap-3 border-b border-neutral-50 px-4 py-3 transition-colors last:border-0 ${
                      n.read_at
                        ? "bg-white"
                        : "bg-blue-50/50"
                    }`}
                  >
                    <div
                      className={`mt-1.5 h-2 w-2 flex-shrink-0 rounded-full ${getTypeColor(n.type)}`}
                    />
                    <div className="min-w-0 flex-1">
                      <p className="text-sm font-medium text-neutral-900 leading-snug">
                        {n.title}
                      </p>
                      {n.body && (
                        <p className="mt-0.5 text-xs text-neutral-500 line-clamp-2">
                          {n.body}
                        </p>
                      )}
                      <div className="mt-1.5 flex items-center gap-2">
                        <span className="text-[11px] text-neutral-400">
                          {timeAgo(n.created_at)}
                        </span>
                        {link && (
                          <a
                            href={link}
                            onClick={() => setOpen(false)}
                            className="flex items-center gap-0.5 text-[11px] text-blue-600 hover:text-blue-700"
                          >
                            <ExternalLink className="h-2.5 w-2.5" />
                            Anzeigen
                          </a>
                        )}
                      </div>
                    </div>
                    {!n.read_at && (
                      <button
                        onClick={() => markRead.mutate(n.id)}
                        className="flex-shrink-0 rounded p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
                        title="Als gelesen markieren"
                      >
                        <Check className="h-3 w-3" />
                      </button>
                    )}
                  </div>
                );
              })
            )}
          </div>
        </div>
      )}
    </div>
  );
}