import {faRobot} from '@fortawesome/free-solid-svg-icons';
import {useContext, useEffect, useState} from 'react';
import {SessionContext} from "@/context/SessionContext";
import {ConversationProps} from "@/lib/models/QuillSense";
import System from "@/lib/models/System";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {BookContext, BookContextProps} from "@/context/BookContext";
import {LangContext} from "@/context/LangContext";

interface QuillListProps {
    handleSelectConversation: (itemId: string) => void;
}

export default function QuillList({handleSelectConversation}: QuillListProps) {
    const {session} = useContext(SessionContext);
    const {book} = useContext<BookContextProps>(BookContext);
    const {lang} = useContext(LangContext);
    
    const [conversations, setConversations] = useState<ConversationProps[]>([]);
    
    useEffect((): void => {
        getConversations().then();
    }, []);
    
    async function getConversations(): Promise<void> {
        try {
            const response: ConversationProps[] = await System.authGetQueryToServer<ConversationProps[]>(
                `quillsense/conversations`,
                session.accessToken,
                lang,
                {
                    id: book?.bookId,
                }
            );
            if (response.length > 0) {
                setConversations(response);
            }
        } catch (e) {
            console.error(e);
        }
    }
    
    function getStatusColorClass(status: number): string {
        switch (status) {
            case 1:
                return 'bg-muted';
            case 2:
                return 'bg-blue-500';
            case 3:
                return 'bg-primary';
            case 4:
                return 'bg-error';
            default:
                return 'bg-muted';
        }
    }

    return (
        <div className="flex-1 overflow-y-auto p-2">
            {conversations.map((conversation: ConversationProps) => (
                <div key={conversation.id}
                     className="flex items-center justify-between p-3 mb-2 rounded-xl bg-secondary/30 hover:bg-secondary hover:shadow-md cursor-pointer transition-all duration-200 border border-secondary/50 hover:border-secondary hover:scale-102"
                     onClick={(): void => handleSelectConversation(conversation.id)}
                >
                    <div className="flex items-center gap-3">
                        <div
                            className={`w-2.5 h-2.5 rounded-full ${getStatusColorClass(conversation.status)} shadow-sm`}></div>
                        <FontAwesomeIcon icon={faRobot} className="text-primary w-5 h-5"/>
                        <div>
                            <span className="text-text-primary font-medium">{conversation.title || "Sans titre"}</span>
                            {conversation.startDate && (
                                <p className="text-xs text-muted mt-0.5">{conversation.startDate}</p>
                            )}
                        </div>
                    </div>
                    {conversation.mode && (
                        <span
                            className="text-xs bg-primary/20 text-primary px-2.5 py-1 rounded-lg font-medium border border-primary/30">{conversation.mode}</span>
                    )}
                </div>
            ))}
        </div>
    );
}