'use client';

import React from 'react';
import { MessageCircle } from 'lucide-react';
import type { NewWhatsChat, PresenceState } from '../types/inboxTypes';
import ChatListItem from './ChatListItem';

interface ChatListProps {
    chats: NewWhatsChat[];
    loading: boolean;
    selectedChat: NewWhatsChat | null;
    onSelectChat: (chat: NewWhatsChat) => void;
    onMenuAction: (action: any, chat: NewWhatsChat) => void;
    presenceByJid: Record<string, PresenceState>;
    isFavoriteChat: (chat: NewWhatsChat) => boolean;
    drafts?: Record<string, string>;
}

export default function ChatList({
    chats,
    loading,
    selectedChat,
    onSelectChat,
    onMenuAction,
    presenceByJid,
    isFavoriteChat,
    drafts = {},
}: ChatListProps) {
    if (loading) {
        return (
            <div className="flex items-center justify-center h-40">
                <div className="w-8 h-8 border-3 border-[#00a884] border-t-transparent rounded-full animate-spin"></div>
            </div>
        );
    }

    if (chats.length === 0) {
        return (
            <div className="flex flex-col items-center justify-center h-64 px-10 text-center">
                <div className="w-16 h-16 bg-[#f0f2f5] rounded-full flex items-center justify-center mb-4">
                    <MessageCircle className="w-8 h-8 text-[#8696a0]" />
                </div>
                <p className="text-[#667781] text-sm font-normal">Nenhuma conversa encontrada</p>
            </div>
        );
    }

    return (
        <div className="flex-1 overflow-y-auto bg-white custom-scrollbar">
            {chats.map((chat) => (
                <ChatListItem
                    key={`${chat.instance_name}-${chat.remote_jid}`}
                    chat={chat}
                    isActive={selectedChat?.id === chat.id}
                    onSelect={onSelectChat}
                    onMenuAction={onMenuAction}
                    presenceByJid={presenceByJid}
                    isFavorite={isFavoriteChat(chat)}
                    draft={drafts[chat.remote_jid]}
                />
            ))}
        </div>
    );
}