"use client";

import { getUnreadCount } from "@/libs/axios/modules/notification";
import { useClickOutside } from "@/hooks/useClickOutside";
import { AnimatePresence } from "framer-motion";
import Cookies from "js-cookie";
import { Bell } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import NotificationPanel from "./NotificationPanel";

export default function NotificationButton() {
  const [isOpen, setIsOpen] = useState(false);
  const [unreadCount, setUnreadCount] = useState(0);
  const containerRef = useRef<HTMLDivElement>(null);

  const token = Cookies.get("token")?.slice(1, -1) ?? "";

  useClickOutside(containerRef, () => setIsOpen(false));

  useEffect(() => {
    if (!token) return;
    getUnreadCount(token)
      .then(res => setUnreadCount(res.data?.data?.unread_count ?? 0))
      .catch(() => {});
  }, [token]);

  return (
    <div ref={containerRef} className="relative">
      <button
        onClick={() => setIsOpen(prev => !prev)}
        className="relative p-2 hover:bg-gray-100 rounded-full transition-colors cursor-pointer"
        aria-label="Notifikasi"
      >
        <Bell className="w-5 h-5 text-gray-700" />
        {unreadCount > 0 && (
          <span className="absolute top-0.5 right-0.5 min-w-4 h-4 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center px-1 leading-none">
            {unreadCount > 99 ? "99+" : unreadCount}
          </span>
        )}
      </button>

      <AnimatePresence>
        {isOpen && (
          <NotificationPanel
            token={token}
            onUnreadChange={setUnreadCount}
          />
        )}
      </AnimatePresence>
    </div>
  );
}