"use client";

import { useQuery } from "convex/react";
import { api } from "../../convex/_generated/api";
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
import { Bell, X } from "lucide-react";
import { Id } from "convex/_generated/dataModel";
import { useState, useEffect } from "react";

interface PopoverExampleProps {
  align?: "start" | "center" | "end";
  userID: Id<"members">;
}

const PopoverExample = ({ align = "center", userID }: PopoverExampleProps) => {
  const notifications = useQuery(api.notification.getAllNotifications, { userId: userID });


  // Debugging: Log notifications when they change
  useEffect(() => {
    console.log("Notifications updated:", notifications);
  }, [notifications]);

  return (
    <Popover>
      <PopoverTrigger className="p-2 rounded-full bg-blue-100 relative hover:bg-blue-200 transition">
        <Bell className="w-6 h-6 text-gray-700" />
        {notifications && notifications.length > 0 && (
          <div className="absolute -top-1 -right-1 bg-red-500 text-white text-[10px] w-5 h-5 rounded-full flex items-center justify-center shadow-md">
            {notifications.length > 9 ? "9+" : notifications.length}
          </div>
        )}
      </PopoverTrigger>

      <PopoverContent align={align} className="w-[400px] bg-white shadow-xl rounded-2xl p-4 flex flex-col border border-gray-200">
        {/* Loading State */}
        {notifications === undefined && <p className="text-gray-500 text-center">Loading...</p>}

        {/* Scrollable Notification List */}
        {notifications && notifications.length > 0 ? (
          <div className="max-h-[330px] overflow-y-auto flex flex-col gap-3 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
            {notifications.map((item) => (
              <div
                key={item._id}
                className="bg-gray-50 hover:bg-gray-100 shadow-md rounded-xl p-4 transition duration-300 flex flex-col gap-2"
              >
                <div className="flex items-center justify-between">
                  <p className="text-md text-gray-800 flex-1">{item.content}</p>
                  <X
                    size={18}
                    className="text-gray-400 hover:text-red-500 cursor-pointer transition"
                    onClick={() => {
                      // You can add a dismissal function here that calls a mutation
                      // e.g. api.notification.dismissNotification({ notificationId: item._id, userId: userID })
                    }}
                  />
                </div>
                {item.buttonText && (
                  <a href={item.buttonUrl} className="mt-1 text-gray-800 bg-blue-200 hover:bg-blue-300 px-3 py-1 rounded-md transition w-fit shadow">
                    {item.buttonText}
                  </a>
                )}
              </div>
            ))}
          </div>
        ) : (
          notifications && <p className="text-gray-500 text-center">No notifications</p>
        )}

        {/* Styled Banner */}
        <div className="mt-3 py-2 text-sm text-gray-700 text-center border-t border-gray-200 bg-gradient-to-r from-blue-50/10 to-blue-100 rounded-b-2xl">
          Made with{" "}
          <a
            href="https://github.com/your-xerexjs-repo"
            className="underline font-semibold transition"
            target="_blank"
            rel="noopener noreferrer"
          >
            XerexJS
          </a>
        </div>
      </PopoverContent>
    </Popover>
  );
};

export default PopoverExample