'use client';

import React, { useState } from 'react';
import { Loader2 } from 'lucide-react';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Email } from '@/hooks/use-courrier';
import EmailListItem from './EmailListItem';
import EmailListHeader from './EmailListHeader';
import BulkActionsToolbar from './BulkActionsToolbar';

interface EmailListProps {
  emails: Email[];
  selectedEmailIds: string[];
  selectedEmail: Email | null;
  currentFolder: string;
  isLoading: boolean;
  totalEmails: number;
  hasMoreEmails: boolean;
  onSelectEmail: (emailId: string) => void;
  onToggleSelect: (emailId: string) => void;
  onToggleSelectAll: () => void;
  onBulkAction: (action: 'delete' | 'mark-read' | 'mark-unread' | 'archive') => void;
  onToggleStarred: (emailId: string) => void;
  onLoadMore: () => void;
}

export default function EmailList({
  emails,
  selectedEmailIds,
  selectedEmail,
  currentFolder,
  isLoading,
  totalEmails,
  hasMoreEmails,
  onSelectEmail,
  onToggleSelect,
  onToggleSelectAll,
  onBulkAction,
  onToggleStarred,
  onLoadMore
}: EmailListProps) {
  const [scrollPosition, setScrollPosition] = useState(0);

  // Handle scroll to detect when user reaches the bottom
  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
    const target = event.target as HTMLDivElement;
    const { scrollTop, scrollHeight, clientHeight } = target;
    
    setScrollPosition(scrollTop);
    
    // If user scrolls near the bottom and we have more emails, load more
    if (scrollHeight - scrollTop - clientHeight < 200 && hasMoreEmails && !isLoading) {
      onLoadMore();
    }
  };

  // Render loading state
  if (isLoading && emails.length === 0) {
    return (
      <div className="flex justify-center items-center h-full p-8">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
      </div>
    );
  }

  // Render empty state
  if (emails.length === 0) {
    return (
      <div className="flex flex-col justify-center items-center h-full p-8 text-center">
        <h3 className="text-lg font-semibold mb-2">No emails found</h3>
        <p className="text-muted-foreground">
          {currentFolder === 'INBOX' 
            ? "Your inbox is empty. You're all caught up!" 
            : `The ${currentFolder} folder is empty.`}
        </p>
      </div>
    );
  }

  // Are all emails selected
  const allSelected = selectedEmailIds.length === emails.length && emails.length > 0;
  
  // Are some (but not all) emails selected
  const someSelected = selectedEmailIds.length > 0 && selectedEmailIds.length < emails.length;

  return (
    <div className="flex flex-col h-full">
      <EmailListHeader 
        allSelected={allSelected}
        someSelected={someSelected}
        onToggleSelectAll={onToggleSelectAll}
      />
      
      {selectedEmailIds.length > 0 && (
        <BulkActionsToolbar 
          selectedCount={selectedEmailIds.length}
          onBulkAction={onBulkAction}
        />
      )}
      
      <ScrollArea className="flex-1" onScroll={handleScroll}>
        <div className="divide-y">
          {emails.map((email) => (
            <EmailListItem
              key={email.id}
              email={email}
              isSelected={selectedEmailIds.includes(email.id)}
              isActive={selectedEmail?.id === email.id}
              onSelect={() => onSelectEmail(email.id)}
              onToggleSelect={(e) => {
                e.stopPropagation();
                onToggleSelect(email.id);
              }}
              onToggleStarred={(e) => {
                e.stopPropagation();
                onToggleStarred(email.id);
              }}
            />
          ))}
          
          {isLoading && emails.length > 0 && (
            <div className="p-4 flex justify-center">
              <Loader2 className="h-6 w-6 animate-spin text-primary" />
            </div>
          )}
        </div>
      </ScrollArea>
    </div>
  );
}