Neah/components/email/EmailListItem.tsx

'use client';

import React from 'react';
import { Star, Mail, MailOpen } from 'lucide-react';
import { Checkbox } from '@/components/ui/checkbox';
import { cn } from '@/lib/utils';
import { Email } from '@/hooks/use-courrier';
import { Badge } from '@/components/ui/badge';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';

interface EmailListItemProps {
  email: Email;
  isSelected: boolean;
  isActive: boolean;
  onSelect: () => void;
  onToggleSelect: (e: React.MouseEvent) => void;
  onToggleStarred: (e: React.MouseEvent) => void;
}

export default function EmailListItem({
  email,
  isSelected,
  isActive,
  onSelect,
  onToggleSelect,
  onToggleStarred
}: EmailListItemProps) {
  // Format the date in a readable way
  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    const now = new Date();
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    const yesterday = new Date(today);
    yesterday.setDate(yesterday.getDate() - 1);
    
    // Check if date is today
    if (date >= today) {
      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    }
    
    // Check if date is yesterday
    if (date >= yesterday) {
      return 'Yesterday';
    }
    
    // Check if date is this year
    if (date.getFullYear() === now.getFullYear()) {
      return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
    }
    
    // Date is from a previous year
    return date.toLocaleDateString([], { year: 'numeric', month: 'short', day: 'numeric' });
  };

  // Get the first letter of the sender's name or email for the avatar
  const getSenderInitial = () => {
    if (!email.from || email.from.length === 0) return '?';
    
    const sender = email.from[0];
    if (sender.name && sender.name.trim()) {
      return sender.name.trim()[0].toUpperCase();
    }
    
    if (sender.address && sender.address.trim()) {
      return sender.address.trim()[0].toUpperCase();
    }
    
    return '?';
  };

  // Get sender name or email
  const getSenderName = () => {
    if (!email.from || email.from.length === 0) return 'Unknown';
    
    const sender = email.from[0];
    if (sender.name && sender.name.trim()) {
      return sender.name.trim();
    }
    
    return sender.address || 'Unknown';
  };

  // Generate a stable color based on the sender's email
  const getAvatarColor = () => {
    if (!email.from || email.from.length === 0) return 'hsl(0, 0%, 50%)';
    
    const address = email.from[0].address || '';
    let hash = 0;
    
    for (let i = 0; i < address.length; i++) {
      hash = address.charCodeAt(i) + ((hash << 5) - hash);
    }
    
    const h = hash % 360;
    return `hsl(${h}, 70%, 80%)`;
  };

  return (
    <div 
      className={cn(
        'flex items-start gap-2 p-3 cursor-pointer transition-colors hover:bg-accent/50 relative',
        isActive && 'bg-accent',
        !email.read && 'font-medium'
      )}
      onClick={onSelect}
    >
      <div className="flex items-center gap-2 min-w-[3rem]">
        <Checkbox 
          checked={isSelected}
          onClick={onToggleSelect}
          className="mt-1"
        />
        <div onClick={onToggleStarred}>
          <Star 
            className={cn(
              'h-5 w-5 cursor-pointer transition-colors',
              email.starred ? 'fill-yellow-400 text-yellow-400' : 'text-muted-foreground hover:text-yellow-400'
            )}
          />
        </div>
      </div>
      
      <Avatar className="mt-1 h-8 w-8 font-semibold text-sm" style={{ backgroundColor: getAvatarColor() }}>
        <AvatarFallback>{getSenderInitial()}</AvatarFallback>
      </Avatar>
      
      <div className="flex-1 min-w-0">
        <div className="flex justify-between items-baseline mb-1">
          <div className="font-medium truncate">
            {getSenderName()}
          </div>
          <div className="text-xs text-muted-foreground whitespace-nowrap ml-2">
            {formatDate(email.date)}
          </div>
        </div>
        
        <div className="flex items-baseline">
          <div className="font-medium truncate">
            {email.subject || '(No subject)'}
          </div>
          {email.hasAttachments && (
            <Badge variant="outline" className="ml-2 text-xs">📎</Badge>
          )}
        </div>
        
        <div className="text-sm text-muted-foreground truncate mt-1">
          {email.preview || 'No preview available'}
        </div>
      </div>
      
      {!email.read && (
        <div className="absolute right-3 top-3">
          <div className="h-2 w-2 rounded-full bg-primary"></div>
        </div>
      )}
    </div>
  );
}