import React from 'react';

/**
 * BuddyAvatar: A mood-based visual indicator for the Co-Worker agent's state. 
 * Renders different expressions based on quality score and evaluation status.
 */
export const BuddyAvatar = ({ score, status }) => {
    let expression = '😊'; // Neutral/Happy
    let moodColor = 'text-emerald-500';
    let borderColor = 'border-emerald-500/20';
    let bgColor = 'bg-emerald-500/10';
    let label = 'Healthy';

    if (status === 'evaluating') {
        expression = '🧐'; // Analyzing
        moodColor = 'text-indigo-500';
        borderColor = 'border-indigo-500/30';
        bgColor = 'bg-indigo-500/10';
        label = 'Auditing...';
    } else if (status === 'reworking') {
        expression = '🛠️'; // Reworking
        moodColor = 'text-amber-500';
        borderColor = 'border-amber-500/30';
        bgColor = 'bg-amber-500/10';
        label = 'Refining';
    } else if (status === 'failed_limit') {
        expression = '😤'; // Stern/Critical - FAILED AFTER MAX ATTEMPTS
        moodColor = 'text-rose-500';
        borderColor = 'border-rose-500/40';
        bgColor = 'bg-rose-500/20';
        label = 'CRITICAL FAILURE';
    } else if (score < 60 && score > 0) {
        expression = '😟'; // Low score concern
        moodColor = 'text-rose-400';
        borderColor = 'border-rose-400/30';
        bgColor = 'bg-rose-400/5';
        label = 'Sub-Par';
    } else if (score >= 80) {
        expression = '✨'; // Excellent
        moodColor = 'text-emerald-400';
        borderColor = 'border-emerald-400/30';
        bgColor = 'bg-emerald-400/10';
        label = 'Optimal';
    }

    return (
        <div className={`relative group flex flex-col items-center justify-center w-12 h-12 rounded-xl border-2 shadow-sm transition-all duration-500 ${borderColor} ${bgColor}`}>
            <div className={`text-2xl transition-transform duration-500 group-hover:scale-110 ${status === 'evaluating' || status === 'reworking' ? 'animate-pulse' : ''}`}>
                {expression}
            </div>
            
            {/* Hover Mood Label */}
            <div className="absolute -bottom-8 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity bg-gray-900 text-[8px] font-black uppercase tracking-widest text-white px-2 py-0.5 rounded whitespace-nowrap z-50 pointer-events-none">
                MOOD: <span className={moodColor}>{label}</span>
            </div>
            
            {/* Status Indicator Dot */}
             <div className={`absolute -top-1 -right-1 w-2.5 h-2.5 rounded-full border-2 border-white dark:border-gray-800 ${
                 status === 'passed' ? 'bg-emerald-500' : 
                 status === 'failed_limit' ? 'bg-rose-600' : 
                 status === 'reworking' ? 'bg-amber-500' : 
                 'bg-gray-400'
             }`} />
        </div>
    );
};

export default BuddyAvatar;