'use client';
import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { MessageCircle } from 'lucide-react';

export default function ChatFloatingButton() {
  const router = useRouter();
  const [unreadCount, setUnreadCount] = useState(0);

  useEffect(() => {
    const fetchUnreadCount = async () => {
      try {
        const response = await fetch('/api/messages/unread-counts');
        if (response.ok) {
          const data = await response.json();
          // Calculer le total des messages non lus
          const totalUnread = Object.values(data.unreadCounts || {}).reduce((sum: number, count: any) => sum + count, 0);
          setUnreadCount(totalUnread);
        }
      } catch (error) {
        console.error('Erreur lors du chargement des messages non lus:', error);
      }
    };

    fetchUnreadCount();
    
    // Rafraîchir toutes les 30 secondes
    const interval = setInterval(fetchUnreadCount, 30000);
    
    return () => clearInterval(interval);
  }, []);

  return (
    <button
      onClick={() => router.push('/chat')}
      className="fixed bottom-6 right-6 z-50 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg p-4 flex items-center justify-center transition-all duration-200 relative"
      title="Ouvrir le chat"
      style={{ boxShadow: '0 4px 24px rgba(0,0,0,0.15)' }}
    >
      <MessageCircle className="h-7 w-7" />
      {unreadCount > 0 && (
        <div className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold">
          {unreadCount > 99 ? '99+' : unreadCount}
        </div>
      )}
    </button>
  );
}