"use client";

import { useEffect, useState, useRef } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { RefreshCw, MessageSquare, Loader2 } from "lucide-react";
import { useRouter } from "next/navigation";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { signIn, useSession } from "next-auth/react";
import { useWidgetNotification } from "@/hooks/use-widget-notification";
import { useUnifiedRefresh } from "@/hooks/use-unified-refresh";
import { REFRESH_INTERVALS } from "@/lib/constants/refresh-intervals";
import { Badge } from "@/components/ui/badge";

interface Message {
  id: string;
  text: string;
  timestamp: string;
  rawTimestamp: string;
  roomName: string;
  roomType: string;
  sender: {
    _id: string;
    username: string;
    name: string;
    initials: string;
    color: string;
  };
  isOwnMessage: boolean;
  room: {
    id: string;
    type: string;
    name: string;
    isChannel: boolean;
    isPrivateGroup: boolean;
    isDirect: boolean;
    link: string;
  };
}

export function Parole() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [unreadCount, setUnreadCount] = useState<number>(0);
  const router = useRouter();
  const { data: session, status } = useSession();
  const { triggerNotification } = useWidgetNotification();
  const lastUnreadCountRef = useRef<number>(-1); // Initialize to -1 to detect first load
  const lastMessageIdsRef = useRef<Set<string>>(new Set());
  const isInitializedRef = useRef<boolean>(false);

  const fetchMessages = async (forceRefresh = false) => {
    // Only show loading spinner on initial load, not on auto-refresh
    if (!messages.length) {
      setLoading(true);
    }
    setRefreshing(true);
    setError(null);

    try {
      const response = await fetch('/api/rocket-chat/messages' + (forceRefresh ? '?refresh=true' : ''), {
        cache: 'no-store',
        next: { revalidate: 0 },
        credentials: 'include',
      });

      if (!response.ok) {
        // Check if response is JSON before trying to parse
        const contentType = response.headers.get('content-type') || '';
        if (contentType.includes('application/json')) {
        const errorData = await response.json();
        throw new Error(errorData.error || 'Failed to fetch messages');
        } else {
          // Response is HTML (probably an error page)
          const errorText = await response.text();
          console.error('[Parole Widget] Received HTML instead of JSON', {
            status: response.status,
            statusText: response.statusText,
            preview: errorText.substring(0, 200),
          });
          throw new Error(`Server returned error page (${response.status})`);
        }
      }

      // Check if response is JSON before parsing
      const contentType = response.headers.get('content-type') || '';
      if (!contentType.includes('application/json')) {
        const errorText = await response.text();
        console.error('[Parole Widget] Expected JSON, got HTML', {
          contentType,
          preview: errorText.substring(0, 200),
        });
        throw new Error('Server returned invalid response format');
      }

      const data = await response.json();
      if (Array.isArray(data.messages)) {
        // Utiliser le totalUnreadCount de l'API (plus fiable)
        const currentUnreadCount = data.totalUnreadCount || 0;
        const currentMessageIds = new Set<string>(data.messages.map((m: any) => m.id as string));
        
        // Update unread count state for badge display
        setUnreadCount(currentUnreadCount);
        
        // Detect new messages by comparing IDs (more reliable than count)
        const newMessageIds = new Set(
          (Array.from(currentMessageIds) as string[]).filter((id: string) => !lastMessageIdsRef.current.has(id))
        );
        const hasNewMessages = newMessageIds.size > 0;
        
        // On initialise au premier chargement
        if (!isInitializedRef.current) {
          console.log('[Parole Widget] 💬 Initializing - storing existing message IDs without notifications', {
            messageCount: data.messages.length,
            unreadCount: currentUnreadCount,
          });
          lastMessageIdsRef.current = currentMessageIds;
          lastUnreadCountRef.current = currentUnreadCount;
          isInitializedRef.current = true;
        } else {
          // Update count if it changed
          if (currentUnreadCount !== lastUnreadCountRef.current) {
            lastUnreadCountRef.current = currentUnreadCount;
          }
        }
        
        // Always prepare notification items (messages, max 10)
        const notificationItems = data.messages
          .slice(0, 10)
          .map((msg: any) => ({
            id: msg.id,
            title: msg.sender.name || msg.sender.username,
            message: msg.text || msg.message || '',
            link: '/parole',
            timestamp: new Date(msg.rawTimestamp || msg.timestamp),
            metadata: {
              roomName: msg.roomName,
              roomType: msg.roomType,
            },
          }));

        // Always trigger notification update to keep count fresh in Redis
        // This ensures the count doesn't expire even if it hasn't changed
        await triggerNotification({
          source: 'rocketchat',
          count: currentUnreadCount,
          items: notificationItems,
        });

        // Dispatch event for Outlook-style notifications (for new messages detected by ID)
        if (hasNewMessages) {
          console.log('[Parole Widget] 💬 Dispatching new messages event', {
            newMessagesCount: newMessageIds.size,
            newMessageIds: Array.from(newMessageIds),
            previousCount: lastUnreadCountRef.current,
            currentCount: currentUnreadCount,
            previousMessageIds: Array.from(lastMessageIdsRef.current),
          });
          
          window.dispatchEvent(new CustomEvent('new-messages-detected', {
            detail: {
              messages: data.messages,
              previousCount: lastUnreadCountRef.current,
              currentCount: currentUnreadCount,
            }
          }));
        }
        
        // Always update lastMessageIdsRef to track current state
        lastMessageIdsRef.current = currentMessageIds;
        setMessages(data.messages);
      } else {
        console.warn('Unexpected data format:', data);
        setMessages([]);
      }
      setError(null);
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Failed to fetch messages';
      console.error('[Parole Widget] Error fetching messages', {
        error: errorMessage,
        forceRefresh,
        err,
      });
      setError(errorMessage);
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  };

  // Initial fetch on mount
  useEffect(() => {
    if (status === 'authenticated') {
      fetchMessages(false); // Use cache on initial load
    }
  }, [status]);

  // Integrate unified refresh for automatic polling
  // Use forceRefresh=true to ensure we get the latest messages immediately
  const { refresh } = useUnifiedRefresh({
    resource: 'parole',
    interval: REFRESH_INTERVALS.PAROLE, // 30 seconds
    enabled: status === 'authenticated',
    onRefresh: async () => {
      // Use forceRefresh to bypass cache and get latest messages immediately
      await fetchMessages(true); // Force refresh to get new messages immediately
    },
    priority: 'high',
  });

  // Manual refresh handler (bypasses cache)
  const handleManualRefresh = async (e?: React.MouseEvent) => {
    if (e) {
      e.stopPropagation();
    }
    await fetchMessages(true); // Force refresh, bypass cache
  };

  if (status === 'loading') {
    return (
      <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full">
        <CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100">
          <CardTitle className="text-lg font-semibold text-gray-800 flex items-center gap-2">
            <MessageSquare className="h-5 w-5 text-gray-600" />
            Parole
          </CardTitle>
        </CardHeader>
        <CardContent className="p-6">
          <p className="text-center text-gray-500">Loading...</p>
        </CardContent>
      </Card>
    );
  }

  if (status === 'unauthenticated' || (error && error.includes('Session expired'))) {
    return (
      <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full">
        <CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100">
          <CardTitle className="text-lg font-semibold text-gray-800 flex items-center gap-2">
            <MessageSquare className="h-5 w-5 text-gray-600" />
            Parole
          </CardTitle>
        </CardHeader>
        <CardContent className="p-6">
          <div className="text-center">
            <p className="text-gray-500 mb-4">Please sign in to view messages</p>
            <Button 
              onClick={(e) => {
                e.stopPropagation();
                signIn('keycloak');
              }}
              variant="default"
              className="bg-blue-600 hover:bg-blue-700 text-white"
            >
              Sign In
            </Button>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card 
      className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg cursor-pointer w-full" 
      onClick={() => router.push('/parole')}
    >
      <CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100">
        <CardTitle className="text-lg font-semibold text-gray-800 flex items-center gap-2">
          <MessageSquare className="h-5 w-5 text-gray-600" />
          Parole
          {unreadCount > 0 && (
            <Badge variant="destructive" className="ml-1 text-xs">
              {unreadCount}
            </Badge>
          )}
        </CardTitle>
        <Button 
          variant="ghost" 
          size="icon"
          onClick={handleManualRefresh}
          disabled={refreshing}
          className="h-7 w-7 p-0 hover:bg-gray-100/50 rounded-full"
        >
          <RefreshCw className={`h-3.5 w-3.5 text-gray-600 ${refreshing ? 'animate-spin' : ''}`} />
        </Button>
      </CardHeader>
      <CardContent className="p-4">
        {loading && messages.length === 0 ? (
          <div className="text-center py-6 flex flex-col items-center">
            <Loader2 className="h-6 w-6 animate-spin text-gray-400 mb-2" />
            <p className="text-gray-500">Chargement des messages...</p>
          </div>
        ) : error ? (
          <div className="text-center py-4">
            <p className="text-red-500 text-sm mb-2">{error}</p>
            <Button 
              variant="outline" 
              onClick={handleManualRefresh}
              className="mt-2"
            >
              Réessayer
            </Button>
          </div>
        ) : (
          <div className="space-y-4 max-h-[400px] overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent">
            {messages.length === 0 ? (
              <p className="text-center text-gray-500 py-6">Aucun message</p>
            ) : (
              messages.map((message) => (
                <div key={message.id} className="flex items-start space-x-3 hover:bg-gray-50/50 p-3 rounded-lg transition-colors">
                  <Avatar className="h-8 w-8" style={{ backgroundColor: message.sender.color }}>
                    <AvatarImage src={`https://ui-avatars.com/api/?name=${encodeURIComponent(message.sender.name)}&background=random`} />
                    <AvatarFallback>{message.sender.initials}</AvatarFallback>
                  </Avatar>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-baseline justify-between space-x-2">
                      <p className="text-sm font-semibold text-gray-800 truncate max-w-[70%]">{message.sender.name}</p>
                      <span className="text-xs font-medium text-gray-500 flex-shrink-0">{message.timestamp}</span>
                    </div>
                    <p className="text-sm text-gray-600 whitespace-pre-wrap line-clamp-2 mt-1">{message.text}</p>
                    {message.roomName && (
                      <div className="flex items-center mt-2">
                        <span className={`inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${
                          message.room.isChannel ? 'bg-blue-50 text-blue-700' :
                          message.room.isPrivateGroup ? 'bg-purple-50 text-purple-700' :
                          'bg-green-50 text-green-700'
                        }`}>
                          {message.room.isChannel ? '#' : message.room.isPrivateGroup ? '🔒' : '💬'} {message.roomName}
                        </span>
                      </div>
                    )}
                  </div>
                </div>
              ))
            )}
          </div>
        )}
      </CardContent>
    </Card>
  );
}