"use client";

import { MessageCircle } from "lucide-react";
import { useEffect, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { useSession } from "@/lib/hooks/use-session";
import { MessagesPanel } from "./MessagesPanel";

interface MessagesBellProps {
  className?: string;
}

export function MessagesBell({ className }: MessagesBellProps) {
  const { user } = useSession();
  const [unreadUsersCount, setUnreadUsersCount] = useState(0);
  const [isOpen, setIsOpen] = useState(false);

  // Buscar contagem de usuários únicos com mensagens não vistas
  const fetchUnreadCount = async () => {
    if (!user) return;

    try {
      const res = await fetch("/api/chats/unread-count", {
        credentials: "include",
      });
      if (res.ok) {
        const data = await res.json();
        if (data.success) {
          setUnreadUsersCount(data.count);
        }
      }
    } catch (error) {
      console.error("[CHAT-DEBUG] Erro ao buscar contagem de chats:", error);
    }
  };

  // Polling automático a cada 30 segundos
  useEffect(() => {
    if (!user) return;

    fetchUnreadCount();

    const interval = setInterval(() => {
      fetchUnreadCount();
    }, 30000); // 30 segundos

    return () => clearInterval(interval);
  }, [user, fetchUnreadCount]);

  // Atualizar contagem quando abrir/fechar
  useEffect(() => {
    if (isOpen) {
      fetchUnreadCount();
    }
  }, [isOpen, fetchUnreadCount]);

  // Marcar como visto quando abrir
  const handleOpenChange = (open: boolean) => {
    setIsOpen(open);
  };

  if (!user) {
    return null;
  }

  return (
    <>
      <Button
        variant="ghost"
        size="icon"
        className={`relative ${className}`}
        onClick={() => handleOpenChange(true)}
      >
        <MessageCircle className="h-5 w-5" />
        {unreadUsersCount > 0 && (
          <Badge
            variant="destructive"
            className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center p-0 text-xs rounded-full animate-pulse"
          >
            {unreadUsersCount > 99 ? "99+" : unreadUsersCount}
          </Badge>
        )}
      </Button>

      <MessagesPanel
        open={isOpen}
        onOpenChange={handleOpenChange}
        onUnreadCountChange={setUnreadUsersCount}
      />
    </>
  );
}