import { MessageBubble } from '@admin/components/chat/message-bubble';
import { MessageInput } from '@admin/components/chat/message-input';
import type { Message } from '@admin/lib/types';
import { useEffect, useRef } from 'react';

interface ChatAreaContentProps {
    messages: Message[];
    onSendMessage?: (message: string) => void;
    onInfoClick?: () => void;
}

export function ChatAreaContent({ messages, onSendMessage, onInfoClick }: ChatAreaContentProps) {
    const messagesEndRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
    }, [messages]);

    return (
        <div className="flex h-full flex-col bg-background">
            <div className="flex-1 overflow-y-auto p-4">
                <div className="mb-6 flex justify-center">
                    <span className="rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground">Today</span>
                </div>

                {messages.map((message, index) => {
                    const isOwn = message.senderId === 'current';
                    const prevMessage = messages[index - 1];
                    const showAvatar = !prevMessage || prevMessage.senderId !== message.senderId;

                    return <MessageBubble key={message.id} message={message} isOwn={isOwn} showAvatar={showAvatar} />;
                })}
                <div ref={messagesEndRef} />
            </div>

            <MessageInput onSend={onSendMessage} />
        </div>
    );
}