'use client';

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { Loader2, AlertCircle } from 'lucide-react';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { 
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";

// Import components
import EmailSidebar from '@/components/email/EmailSidebar';
import EmailList from '@/components/email/EmailList';
import EmailContent from '@/components/email/EmailContent';
import EmailHeader from '@/components/email/EmailHeader';
import ComposeEmail from '@/components/email/ComposeEmail';

// Import the custom hook
import { useCourrier, EmailData } from '@/hooks/use-courrier';

// Simplified version for this component
function SimplifiedLoadingFix() {
  // In production, don't render anything
  if (process.env.NODE_ENV === 'production') {
    return null;
  }
  
  // Simple debugging component
  return (
    <div className="fixed bottom-4 right-4 z-50 p-2 bg-white/80 shadow rounded-lg text-xs">
      Debug: Email app loaded
    </div>
  );
}

export default function CourrierPage() {
  const router = useRouter();
  
  // Get all the email functionality from the hook
  const {
    emails,
    selectedEmail,
    selectedEmailIds,
    currentFolder,
    mailboxes,
    isLoading,
    isSending,
    error,
    searchQuery,
    page,
    totalPages,
    loadEmails,
    handleEmailSelect,
    markEmailAsRead,
    toggleStarred,
    sendEmail,
    deleteEmails,
    toggleEmailSelection,
    toggleSelectAll,
    changeFolder,
    searchEmails,
    formatEmailForAction,
    setPage,
  } = useCourrier();

  // Local state
  const [showComposeModal, setShowComposeModal] = useState(false);
  const [composeData, setComposeData] = useState<EmailData | null>(null);
  const [composeType, setComposeType] = useState<'new' | 'reply' | 'reply-all' | 'forward'>('new');
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
  const [showLoginNeeded, setShowLoginNeeded] = useState(false);
  
  // Check for more emails
  const hasMoreEmails = page < totalPages;

  // Handle loading more emails on scroll
  const handleLoadMore = () => {
    if (hasMoreEmails && !isLoading) {
      setPage(page + 1);
    }
  };

  // Handle bulk actions
  const handleBulkAction = async (action: 'delete' | 'mark-read' | 'mark-unread' | 'archive') => {
    if (selectedEmailIds.length === 0) return;
    
    switch (action) {
      case 'delete':
        setShowDeleteConfirm(true);
        break;
        
      case 'mark-read':
        // Mark all selected emails as read
        for (const emailId of selectedEmailIds) {
          await markEmailAsRead(emailId, true);
        }
        break;
        
      case 'mark-unread':
        // Mark all selected emails as unread
        for (const emailId of selectedEmailIds) {
          await markEmailAsRead(emailId, false);
        }
        break;
        
      case 'archive':
        // Archive functionality would be implemented here
        break;
    }
  };

  // Handle email reply or forward
  const handleReplyOrForward = (type: 'reply' | 'reply-all' | 'forward') => {
    if (!selectedEmail) return;
    
    const formattedEmail = formatEmailForAction(selectedEmail, type);
    if (!formattedEmail) return;
    
    setComposeData({
      to: formattedEmail.to,
      cc: formattedEmail.cc,
      subject: formattedEmail.subject,
      body: formattedEmail.body,
    });
    
    setComposeType(type);
    setShowComposeModal(true);
  };

  // Handle compose new email
  const handleComposeNew = () => {
    setComposeData({
      to: '',
      subject: '',
      body: '',
    });
    setComposeType('new');
    setShowComposeModal(true);
  };

  // Handle sending email
  const handleSend = async (emailData: EmailData) => {
    await sendEmail(emailData);
    
    setShowComposeModal(false);
    setComposeData(null);
    
    // Refresh the Sent folder if we're currently viewing it
    if (currentFolder.toLowerCase() === 'sent') {
      loadEmails();
    }
  };

  // Handle delete confirmation
  const handleDeleteConfirm = async () => {
    await deleteEmails(selectedEmailIds);
    setShowDeleteConfirm(false);
  };

  // Check login on mount
  useEffect(() => {
    // Check if the user is logged in after a short delay
    const timer = setTimeout(() => {
      if (error?.includes('Not authenticated') || error?.includes('No email credentials found')) {
        setShowLoginNeeded(true);
      }
    }, 2000);
    
    return () => clearTimeout(timer);
  }, [error]);

  // Go to login page
  const handleGoToLogin = () => {
    router.push('/courrier/login');
  };

  // If there's a critical error, show error dialog
  if (error && !isLoading && emails.length === 0 && !showLoginNeeded) {
    return (
      <div className="flex h-screen items-center justify-center">
        <Alert variant="destructive" className="max-w-md">
          <AlertCircle className="h-4 w-4" />
          <AlertTitle>Error loading emails</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      </div>
    );
  }

  // Create a properly formatted email message from composeData for the ComposeEmail component
  const createEmailMessage = () => {
    if (!composeData) return null;
    
    return {
      id: 'temp-id',
      messageId: '',
      subject: composeData.subject || '',
      from: [{ name: '', address: '' }],
      to: [{ name: '', address: composeData.to || '' }],
      cc: composeData.cc ? [{ name: '', address: composeData.cc }] : [],
      bcc: composeData.bcc ? [{ name: '', address: composeData.bcc }] : [],
      date: new Date(),
      content: composeData.body || '',
      html: composeData.body || '',
      hasAttachments: false
    };
  };

  return (
    <div className="h-full flex flex-col">
      <SimplifiedLoadingFix />
      
      {/* Login required dialog */}
      <AlertDialog open={showLoginNeeded} onOpenChange={setShowLoginNeeded}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Login Required</AlertDialogTitle>
            <AlertDialogDescription>
              You need to configure your email account credentials before you can access your emails.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={handleGoToLogin}>Setup Email</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
      
      {/* Delete confirmation dialog */}
      <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Confirm Deletion</AlertDialogTitle>
            <AlertDialogDescription>
              Are you sure you want to delete {selectedEmailIds.length} {selectedEmailIds.length === 1 ? 'email' : 'emails'}?
              This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction 
              onClick={handleDeleteConfirm}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              Delete
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
      
      {/* Compose email dialog */}
      <Dialog open={showComposeModal} onOpenChange={setShowComposeModal}>
        <DialogContent className="sm:max-w-[800px] h-[80vh] p-0">
          {/* Using modern props format for ComposeEmail */}
          <ComposeEmail
            initialEmail={createEmailMessage()}
            type={composeType}
            onClose={() => setShowComposeModal(false)}
            onSend={handleSend}
          />
        </DialogContent>
      </Dialog>
      
      {/* Main email interface */}
      <div className="h-full flex flex-col">
        <EmailHeader 
          onSearch={searchEmails}
        />
        
        <div className="flex-1 flex overflow-hidden">
          <EmailSidebar 
            currentFolder={currentFolder}
            folders={mailboxes}
            onFolderChange={changeFolder}
            onRefresh={() => loadEmails(false)}
            onCompose={handleComposeNew}
            isLoading={isLoading}
          />
          
          <div className="flex-1 h-full flex overflow-hidden">
            <div className={`w-[400px] border-r h-full overflow-hidden ${selectedEmail ? '' : 'flex-1'}`}>
              <EmailList 
                emails={emails}
                selectedEmailIds={selectedEmailIds}
                selectedEmail={selectedEmail}
                currentFolder={currentFolder}
                isLoading={isLoading}
                totalEmails={emails.length}
                hasMoreEmails={hasMoreEmails}
                onSelectEmail={handleEmailSelect}
                onToggleSelect={toggleEmailSelection}
                onToggleSelectAll={toggleSelectAll}
                onBulkAction={handleBulkAction}
                onToggleStarred={toggleStarred}
                onLoadMore={handleLoadMore}
              />
            </div>
            
            {selectedEmail && (
              <div className="flex-1 h-full overflow-hidden flex flex-col">
                <div className="border-b p-3 flex items-center justify-between">
                  <div>
                    <h2 className="text-xl font-semibold">{selectedEmail.subject || '(No subject)'}</h2>
                    <div className="text-sm text-muted-foreground">
                      From: {selectedEmail.from?.[0]?.name || selectedEmail.from?.[0]?.address || 'Unknown'}
                    </div>
                  </div>
                  
                  <div className="flex gap-2">
                    <button 
                      className="text-sm text-primary hover:underline"
                      onClick={() => handleReplyOrForward('reply')}
                    >
                      Reply
                    </button>
                    <button 
                      className="text-sm text-primary hover:underline"
                      onClick={() => handleReplyOrForward('reply-all')}
                    >
                      Reply All
                    </button>
                    <button 
                      className="text-sm text-primary hover:underline"
                      onClick={() => handleReplyOrForward('forward')}
                    >
                      Forward
                    </button>
                  </div>
                </div>
                
                <div className="flex-1 overflow-auto">
                  <EmailContent email={selectedEmail} />
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}