"use client";

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

interface Email {
  id: string;
  subject: string;
  from: string;
  fromName?: string;
  date: string;
  read: boolean;
  starred: boolean;
  folder: string;
}

interface EmailResponse {
  emails: Email[];
  mailUrl: string;
  error?: string;
}

export function Email() {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [emails, setEmails] = useState<Email[]>([]);
  const [loading, setLoading] = useState(false);
  const [refreshing, setRefreshing] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [mailUrl, setMailUrl] = useState<string | null>(null);
  const [accounts, setAccounts] = useState<Array<{ id: string; email: string; color?: string }>>([]);
  const [unreadCount, setUnreadCount] = useState<number>(0);
  const [accountErrors, setAccountErrors] = useState<Record<string, string>>({});
  const { triggerNotification } = useWidgetNotification();
  const lastUnreadCountRef = useRef<number>(-1);
  const lastEmailIdsRef = useRef<Set<string>>(new Set());
  const isInitializedRef = useRef(false);
  
  // Create a map for quick account lookup by ID (recalculated when accounts change)
  const accountMap = useMemo(() => {
    return new Map(accounts.map(acc => [acc.id, acc]));
  }, [accounts]);

  useEffect(() => {
    if (status === 'authenticated') {
      loadAccounts();
    }
  }, [status]);

  useEffect(() => {
    if (accounts.length > 0 && status === 'authenticated') {
      fetchEmails(false);
      fetchUnreadCount();
    }
  }, [accounts, status]);

  const loadAccounts = async () => {
    try {
      const response = await fetch('/api/courrier/accounts');
      if (response.ok) {
        const data = await response.json();
        if (data.accounts) {
          const loadedAccounts = data.accounts.map((acc: any) => {
            // If no color is set, generate a consistent color based on account ID
            let accountColor = acc.color;
            if (!accountColor && acc.id) {
              // Generate a color hash from accountId
              let hash = 0;
              for (let i = 0; i < acc.id.length; i++) {
                hash = acc.id.charCodeAt(i) + ((hash << 5) - hash);
              }
              const hue = Math.abs(hash % 360);
              accountColor = `hsl(${hue}, 70%, 50%)`;
            }
            
            return {
              id: acc.id || acc.email,
              email: acc.email,
              color: accountColor || '#0082c9' // Fallback default color
            };
          });
          console.log('[Email Widget] Loaded accounts with colors:', loadedAccounts.map((acc: { id: string; email: string; color: string }) => ({
            id: acc.id,
            email: acc.email,
            color: acc.color
          })));
          setAccounts(loadedAccounts);
        }
      }
    } catch (err) {
      console.error('Error loading accounts:', err);
    }
  };

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

    try {
      // Fetch emails from all accounts in parallel
      const emailPromises = accounts.map(async (account) => {
        try {
          const url = `/api/courrier?folder=INBOX&page=1&perPage=33&accountId=${encodeURIComponent(account.id)}${forceRefresh ? '&refresh=true' : ''}`;
          const response = await fetch(url);
          if (!response.ok) {
            const errorMsg = `Failed to fetch emails for ${account.email}`;
            console.warn(errorMsg);
            setAccountErrors(prev => ({ ...prev, [account.id]: errorMsg }));
            return [];
          }
          const data = await response.json();
          if (data.error || !data.emails) {
            const errorMsg = data.error || `No emails returned for ${account.email}`;
            setAccountErrors(prev => ({ ...prev, [account.id]: errorMsg }));
            return [];
          }
          // Add accountId to each email for proper identification
          return data.emails.map((email: any) => ({
            ...email,
            accountId: account.id,
            _accountEmail: account.email // Debug: store account email for verification
          }));
        } catch (err) {
          const errorMsg = `Error fetching emails for ${account.email}: ${err instanceof Error ? err.message : 'Unknown error'}`;
          console.error(errorMsg, err);
          setAccountErrors(prev => ({ ...prev, [account.id]: errorMsg }));
          return [];
        }
      });

      const allEmailsArrays = await Promise.allSettled(emailPromises);
      const allEmails = allEmailsArrays
        .filter((result): result is PromiseFulfilledResult<any[]> => result.status === 'fulfilled')
        .flatMap(result => result.value);
      
      // Transform and sort all emails
      const transformedEmails = allEmails
        .map((email: any) => ({
          id: email.id,
          subject: email.subject,
          from: email.from[0]?.address || '',
          fromName: email.from[0]?.name || '',
          date: email.date,
          read: email.flags.seen,
          starred: email.flags.flagged,
          folder: email.folder,
          accountId: email.accountId,
          _accountEmail: email._accountEmail // Keep for debugging
        }))
        // Sort emails by date (most recent first)
        .sort((a: Email, b: Email) => new Date(b.date).getTime() - new Date(a.date).getTime())
        .slice(0, 33); // Show up to 33 emails
      
      console.log('[Email Widget] Transformed emails with accountIds:', transformedEmails.map(e => ({
        id: e.id,
        subject: e.subject,
        accountId: (e as any).accountId,
        accountEmail: (e as any)._accountEmail
      })));
      
      setEmails(transformedEmails);
      setMailUrl('/courrier');

      // Calculate unread count
      const currentUnreadCount = transformedEmails.filter(e => !e.read).length;
      const currentEmailIds = new Set(transformedEmails.map(e => e.id));
      
      // Detect new emails by comparing IDs (more reliable than count)
      const newEmailIds = new Set(
        Array.from(currentEmailIds).filter(id => !lastEmailIdsRef.current.has(id))
      );
      const hasNewEmails = newEmailIds.size > 0;
      
      // On first load, just store email IDs without triggering notifications
      if (!isInitializedRef.current) {
        console.log('[Email Widget] 📧 Initializing - storing existing email IDs without notifications', {
          emailCount: transformedEmails.length,
          unreadCount: currentUnreadCount,
        });
        lastEmailIdsRef.current = currentEmailIds;
        lastUnreadCountRef.current = currentUnreadCount;
        isInitializedRef.current = true;
      } else {
        // Update count if it changed
        if (currentUnreadCount !== lastUnreadCountRef.current) {
          lastUnreadCountRef.current = currentUnreadCount;
        }
      }
      
      // Always prepare notification items (unread emails only, max 10)
      const notificationItems = transformedEmails
        .filter(e => !e.read)
        .slice(0, 10)
        .map(email => {
          const account = accountMap.get((email as any).accountId);
          return {
            id: email.id,
            title: email.subject || 'Sans objet',
            message: `De ${email.fromName || email.from.split('@')[0]}`,
            link: '/courrier',
            timestamp: new Date(email.date),
            metadata: {
              accountId: (email as any).accountId,
              accountEmail: account?.email,
            },
          };
        });

      // 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: 'email',
        count: currentUnreadCount,
        items: notificationItems,
      });

      // Dispatch event for Outlook-style notifications (for new emails detected by ID)
      if (hasNewEmails) {
        // Get only the newly arrived emails (by ID comparison)
        const newEmails = transformedEmails
          .filter(e => newEmailIds.has(e.id) && !e.read)
          .slice(0, 5); // Limit to 5 most recent new emails
      
        if (newEmails.length > 0) {
          console.log('[Email Widget] 📧 Dispatching new emails event', {
            newEmailsCount: newEmails.length,
            newEmailIds: Array.from(newEmailIds),
            previousCount: lastUnreadCountRef.current,
            currentCount: currentUnreadCount,
            previousEmailIds: Array.from(lastEmailIdsRef.current),
          });
          
          window.dispatchEvent(new CustomEvent('new-emails-detected', {
            detail: {
              emails: transformedEmails,
              accountMap: accountMap,
              previousCount: lastUnreadCountRef.current,
              currentCount: currentUnreadCount,
            }
          }));
        }
      }
      
      // Always update lastEmailIdsRef to track current state
      lastEmailIdsRef.current = currentEmailIds;

      // Show error only if all accounts failed
      if (allEmails.length === 0 && accounts.length > 0 && Object.keys(accountErrors).length === accounts.length) {
        setError('Failed to load emails from all accounts');
      }
    } catch (error) {
      console.error('Error fetching emails:', error);
      setError(error instanceof Error ? error.message : 'Failed to load emails');
      setEmails([]);
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  };

  const fetchUnreadCount = async () => {
    try {
      const response = await fetch('/api/courrier/unread-counts');
      if (response.ok) {
        const data = await response.json();
        if (data && typeof data === 'object') {
          // Sum up unread counts from all accounts and folders
          let totalUnread = 0;
          Object.values(data).forEach((accountCounts: any) => {
            if (typeof accountCounts === 'object') {
              Object.values(accountCounts).forEach((count: any) => {
                if (typeof count === 'number') {
                  totalUnread += count;
                }
              });
            }
          });
          setUnreadCount(totalUnread);
        }
      }
    } catch (err) {
      console.error('Error fetching unread count:', err);
      // Don't set error state for unread count failures
    }
  };

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

  // Manual refresh handler (bypasses cache)
  const handleManualRefresh = async () => {
    await fetchEmails(true); // Force refresh, bypass cache
    await fetchUnreadCount();
  };

  const formatDate = (dateString: string) => {
    try {
      const date = new Date(dateString);
      return new Intl.DateTimeFormat('fr-FR', {
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      }).format(date);
    } catch (e) {
      return '';
    }
  };

  return (
    <Card className="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">
          <Mail className="h-5 w-5 text-gray-600" />
          Courrier
          {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">
        {accounts.length === 0 ? (
          <div className="text-center py-6 flex flex-col items-center gap-3">
            <Mail className="h-8 w-8 text-gray-400" />
            <div>
              <p className="text-gray-700 text-sm font-medium mb-1">Aucun compte email configuré</p>
              <p className="text-gray-500 text-xs mb-3">Configurez votre compte email pour voir vos messages</p>
              <Button
                variant="default"
                size="sm"
                onClick={() => router.push('/courrier')}
                className="bg-blue-600 hover:bg-blue-700 text-white"
              >
                Configurer un compte
              </Button>
            </div>
          </div>
        ) : error ? (
          <div className="text-center py-4">
            <p className="text-red-500 text-sm mb-2">{error}</p>
            {Object.keys(accountErrors).length > 0 && (
              <div className="text-xs text-gray-500 space-y-1">
                {Object.entries(accountErrors).map(([accountId, errMsg]) => (
                  <p key={accountId}>{errMsg}</p>
                ))}
              </div>
            )}
          </div>
        ) : loading && emails.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 emails...</p>
          </div>
        ) : emails.length === 0 ? (
          <div className="text-center py-6">
            <p className="text-gray-500">Aucun email</p>
          </div>
        ) : (
          <div className="space-y-3 max-h-[500px] overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent">
            {emails.map((email, index) => {
              // Find the account color for this email using the accountId
              const emailAccountId = (email as any).accountId;
              const account = emailAccountId ? accountMap.get(emailAccountId) : null;
              // Use account color, or generate a color based on accountId if not found
              let accountColor = account?.color || '#0082c9';
              
              // If no color is set, generate a consistent color based on accountId
              if (!account?.color && emailAccountId) {
                // Generate a color hash from accountId
                let hash = 0;
                for (let i = 0; i < emailAccountId.length; i++) {
                  hash = emailAccountId.charCodeAt(i) + ((hash << 5) - hash);
                }
                const hue = Math.abs(hash % 360);
                accountColor = `hsl(${hue}, 70%, 50%)`;
              }
              
              // Debug log for first few emails
              if (index < 3) {
                console.log('[Email Widget] Email account mapping', {
                  emailId: email.id,
                  emailAccountId,
                  accountFound: !!account,
                  accountEmail: account?.email,
                  accountColor: account?.color,
                  finalColor: accountColor,
                  allAccountIds: Array.from(accountMap.keys()),
                  allAccounts: Array.from(accountMap.values()).map(a => ({ id: a.id, email: a.email, color: a.color }))
                });
              }
              
              return (
                <div key={email.id} className="flex items-start gap-3 py-1 border-b border-gray-100 last:border-0">
                  <div className="pt-1 flex-shrink-0">
                    <div 
                      className="w-3 h-3 rounded-full border border-gray-300"
                      style={{ backgroundColor: accountColor }}
                      title={account?.email || (email as any)._accountEmail || `Account ID: ${emailAccountId || 'unknown'}`}
                    />
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex justify-between">
                      <p className="font-medium truncate" style={{maxWidth: '180px'}}>{email.fromName || email.from.split('@')[0]}</p>
                      <p className="text-xs text-gray-500">{formatDate(email.date)}</p>
                    </div>
                    <p className="text-sm text-gray-700 truncate">{email.subject}</p>
                  </div>
                </div>
              );
            })}
            
            {mailUrl && (
              <div className="pt-2">
                <Link href={mailUrl} className="text-sm text-blue-600 hover:text-blue-800">
                  Voir tous les emails →
                </Link>
              </div>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  );
}