Neah/components/email/EmailSidebar.tsx

'use client';

import React from 'react';
import { 
  Inbox, Send, Trash, Archive, Star, 
  File, RefreshCw, Plus, MailOpen
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Badge } from '@/components/ui/badge';

interface EmailSidebarProps {
  currentFolder: string;
  folders: string[];
  onFolderChange: (folder: string) => void;
  onRefresh: () => void;
  onCompose: () => void;
  isLoading: boolean;
}

export default function EmailSidebar({
  currentFolder,
  folders,
  onFolderChange,
  onRefresh,
  onCompose,
  isLoading
}: EmailSidebarProps) {
  // Get the appropriate icon for a folder
  const getFolderIcon = (folder: string) => {
    const folderLower = folder.toLowerCase();
    
    switch (folderLower) {
      case 'inbox':
        return <Inbox className="h-4 w-4" />;
      case 'sent':
      case 'sent items':
        return <Send className="h-4 w-4" />;
      case 'drafts':
        return <File className="h-4 w-4" />;
      case 'trash':
      case 'deleted':
      case 'bin':
        return <Trash className="h-4 w-4" />;
      case 'archive':
      case 'archived':
        return <Archive className="h-4 w-4" />;
      case 'starred':
      case 'important':
        return <Star className="h-4 w-4" />;
      default:
        return <MailOpen className="h-4 w-4" />;
    }
  };

  // Group folders into standard and custom
  const standardFolders = ['INBOX', 'Sent', 'Drafts', 'Trash', 'Archive', 'Junk'];
  const visibleStandardFolders = standardFolders.filter(f => 
    folders.includes(f) || folders.some(folder => folder.toLowerCase() === f.toLowerCase())
  );
  
  const customFolders = folders.filter(f => 
    !standardFolders.some(sf => sf.toLowerCase() === f.toLowerCase())
  );

  return (
    <aside className="w-60 border-r h-full flex flex-col bg-white/95 backdrop-blur-sm">
      <div className="p-2 border-b border-gray-100">
        <Button 
          className="w-full gap-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm" 
          size="sm" 
          onClick={onCompose}
        >
          <Plus className="h-3.5 w-3.5" />
          Compose
        </Button>
      </div>
      
      <div className="px-2 py-2 border-b border-gray-100 flex items-center gap-2">
        <Button 
          variant="ghost" 
          size="icon"
          className="text-gray-600 hover:text-gray-900 hover:bg-gray-100 h-8 w-8"
          onClick={onRefresh}
          disabled={isLoading}
        >
          <RefreshCw className={cn(
            "h-4 w-4", 
            isLoading && "animate-spin"
          )} />
        </Button>
      </div>
      
      <ScrollArea className="flex-1">
        <div className="p-3">
          <div className="text-sm font-medium text-gray-500 mb-2">
            Folders
          </div>
          
          {/* Standard folders */}
          <ul className="space-y-0.5 px-2">
            {visibleStandardFolders.map(folder => (
              <li key={folder}>
                <Button
                  variant={currentFolder === folder ? "secondary" : "ghost"}
                  className={`w-full justify-start py-2 ${
                    currentFolder === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
                  }`}
                  onClick={() => onFolderChange(folder)}
                >
                  <div className="flex items-center justify-between w-full">
                    <div className="flex items-center">
                      {getFolderIcon(folder)}
                      <span className="ml-2 capitalize">{folder.toLowerCase()}</span>
                    </div>
                    {folder === 'INBOX' && (
                      <span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
                        {/* Unread count would go here */}
                      </span>
                    )}
                  </div>
                </Button>
              </li>
            ))}
          </ul>
          
          {/* Custom folders section */}
          {customFolders.length > 0 && (
            <>
              <div className="text-sm font-medium text-gray-500 mt-4 mb-2">
                Custom Folders
              </div>
              <ul className="space-y-0.5 px-2">
                {customFolders.map(folder => (
                  <li key={folder}>
                    <Button
                      variant={currentFolder === folder ? "secondary" : "ghost"}
                      className={`w-full justify-start py-2 ${
                        currentFolder === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
                      }`}
                      onClick={() => onFolderChange(folder)}
                    >
                      <div className="flex items-center">
                        {getFolderIcon(folder)}
                        <span className="ml-2 truncate">{folder}</span>
                      </div>
                    </Button>
                  </li>
                ))}
              </ul>
            </>
          )}
        </div>
      </ScrollArea>
    </aside>
  );
}