"use client";

import { memo } from "react";
import Link from "next/link";
import { motion } from "framer-motion";
import { CheckIcon } from "@heroicons/react/24/outline";
import { BellSlashIcon } from "@heroicons/react/24/solid";
import {
  useNotifications,
  useMarkNotificationAsRead,
  useMarkAllNotificationsAsRead,
  useDismissNotification,
} from "../hooks/useNotifications";
import { NotificationItem } from "./NotificationItem";
import { cn } from "@/shared/utils";

interface NotificationDropdownProps {
  isOpen: boolean;
  onClose: () => void;
  position?: "below" | "right";
}

export const NotificationDropdown = memo(function NotificationDropdown({
  isOpen,
  onClose,
  position = "below",
}: NotificationDropdownProps) {
  const { data, isLoading } = useNotifications({
    limit: 10,
    includeRead: true,
    enabled: isOpen,
  });

  const markAsRead = useMarkNotificationAsRead();
  const markAllAsRead = useMarkAllNotificationsAsRead();
  const dismiss = useDismissNotification();

  const notifications = data?.notifications ?? [];
  const hasUnread = (data?.unreadCount ?? 0) > 0;

  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
      transition={{ duration: 0.1 }}
      className={cn(
        "absolute w-80 sm:w-96",
        position === "right" ? "left-full top-0 ml-2" : "right-0 top-full mt-2",
        "bg-popover border border-border rounded-xl shadow-lg z-50 overflow-hidden"
      )}
    >
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-3 border-b border-border">
        <h3 className="text-sm font-semibold text-foreground">Notifications</h3>
        {hasUnread && (
          <button
            type="button"
            className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
            onClick={() => markAllAsRead.mutate()}
            disabled={markAllAsRead.isPending}
          >
            <CheckIcon className="h-3.5 w-3.5" />
            Mark all read
          </button>
        )}
      </div>

      {/* Notification list */}
      <div className="max-h-96 overflow-y-auto">
        {isLoading ? (
          <div className="flex items-center justify-center py-8">
            <div className="h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
          </div>
        ) : notifications.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-10 px-4 text-center">
            <BellSlashIcon className="h-10 w-10 text-muted-foreground/40 mb-3" />
            <p className="text-sm text-muted-foreground">No notifications yet</p>
            <p className="text-xs text-muted-foreground/70 mt-1">
              We&apos;ll notify you when something important happens
            </p>
          </div>
        ) : (
          <div className="divide-y divide-border/50">
            {notifications.map(notification => (
              <NotificationItem
                key={notification.id}
                notification={notification}
                onMarkAsRead={id => markAsRead.mutate(id)}
                onDismiss={id => dismiss.mutate(id)}
              />
            ))}
          </div>
        )}
      </div>

      {/* Footer */}
      {notifications.length > 0 && (
        <div className="px-4 py-3 border-t border-border">
          <Link
            href="/account/notifications"
            className="block text-center text-xs text-muted-foreground hover:text-foreground transition-colors"
            onClick={onClose}
            prefetch={false}
          >
            View all notifications
          </Link>
        </div>
      )}
    </motion.div>
  );
});
