Neah version mail remove mail correction

app/mail/page.tsx

@@ -692,29 +692,81 @@ export default function MailPage() {
   };
 
   // Handles bulk actions for selected emails
-  const handleBulkAction = (action: 'delete' | 'mark-read' | 'mark-unread' | 'archive') => {
-    selectedEmails.forEach(emailId => {
-      const email = emails.find(e => e.id.toString() === emailId);
-      if (email) {
-        switch (action) {
-          case 'delete':
-            setEmails(emails.filter(e => e.id.toString() !== emailId));
-            break;
-          case 'mark-read':
-            handleMarkAsRead(emailId, true);
-            break;
-          case 'mark-unread':
-            handleMarkAsRead(emailId, false);
-            break;
-          case 'archive':
-            setEmails(emails.map(e => 
-              e.id.toString() === emailId ? { ...e, folder: 'Archive' } : e
-            ));
-            break;
-        }
+  const handleBulkAction = async (action: 'delete' | 'mark-read' | 'mark-unread' | 'archive') => {
+    if (action === 'delete') {
+      setDeleteType('emails');
+      setShowDeleteConfirm(true);
+      return;
+    }
+
+    try {
+      const response = await fetch('/api/mail/bulk-actions', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          emailIds: selectedEmails,
+          action: action
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to perform bulk action');
       }
-    });
-    setSelectedEmails([]);
+
+      // Update local state based on the action
+      setEmails(emails.map(email => {
+        if (selectedEmails.includes(email.id.toString())) {
+          switch (action) {
+            case 'mark-read':
+              return { ...email, read: true };
+            case 'mark-unread':
+              return { ...email, read: false };
+            case 'archive':
+              return { ...email, folder: 'Archive' };
+            default:
+              return email;
+          }
+        }
+        return email;
+      }));
+
+      // Clear selection after successful action
+      setSelectedEmails([]);
+    } catch (error) {
+      console.error('Error performing bulk action:', error);
+      alert('Failed to perform bulk action. Please try again.');
+    }
+  };
+
+  // Add handleDeleteConfirm function
+  const handleDeleteConfirm = async () => {
+    try {
+      const response = await fetch('/api/mail/bulk-actions', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          emailIds: selectedEmails,
+          action: 'delete'
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to delete emails');
+      }
+
+      // Remove deleted emails from state
+      setEmails(emails.filter(email => !selectedEmails.includes(email.id.toString())));
+      setSelectedEmails([]);
+    } catch (error) {
+      console.error('Error deleting emails:', error);
+      alert('Failed to delete emails. Please try again.');
+    } finally {
+      setShowDeleteConfirm(false);
+    }
   };
 
   // Add infinite scroll handler
@@ -824,7 +876,7 @@ export default function MailPage() {
     </div>
   );
 
-  // Update the bulk actions toolbar to fit within email list panel
+  // Update the bulk actions toolbar to include confirmation dialog
   const renderBulkActionsToolbar = () => {
     if (selectedEmails.length === 0) return null;
 
@@ -1463,6 +1515,24 @@ export default function MailPage() {
     setAttachments([]);
   };
 
+  // Add the confirmation dialog component
+  const renderDeleteConfirmDialog = () => (
+    <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete Emails</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to delete {selectedEmails.length} selected email{selectedEmails.length > 1 ? 's' : ''}? This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleDeleteConfirm}>Delete</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+
   if (error) {
     return (
       <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
@@ -1731,6 +1801,7 @@ export default function MailPage() {
           </div>
         </div>
       )}
+      {renderDeleteConfirmDialog()}
     </>
   );
 }