// ProfilePhoto Component
// Display-only profile photo component for headers, menus, and lists

function ProfilePhoto({ photoUrl, userName, size = 'medium', showStatus = false }) {
    const sizes = {
        small: { width: '32px', height: '32px', fontSize: '14px' },
        medium: { width: '48px', height: '48px', fontSize: '20px' },
        large: { width: '80px', height: '80px', fontSize: '32px' }
    };

    const sizeStyle = sizes[size] || sizes.medium;

    // Get user initials for fallback
    const getInitials = (name) => {
        if (!name) return 'U';
        const parts = name.trim().split(' ');
        if (parts.length >= 2) {
            return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
        }
        return name[0].toUpperCase();
    };

    // Generate consistent color from name
    const getAvatarColor = (name) => {
        if (!name) return '#6366f1'; // Default primary color
        const colors = [
            '#6366f1', // Primary blue
            '#8b5cf6', // Purple
            '#ec4899', // Pink
            '#f59e0b', // Amber
            '#10b981', // Green
            '#3b82f6', // Blue
            '#ef4444', // Red
            '#14b8a6', // Teal
        ];
        const index = name.charCodeAt(0) % colors.length;
        return colors[index];
    };

    const containerStyle = {
        position: 'relative',
        width: sizeStyle.width,
        height: sizeStyle.height,
        borderRadius: '50%',
        overflow: 'hidden',
        flexShrink: 0,
        border: '2px solid var(--border-color)',
        ...sizeStyle
    };

    const fallbackStyle = {
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: getAvatarColor(userName),
        color: 'white',
        fontSize: sizeStyle.fontSize,
        fontWeight: '700'
    };

    const statusDotStyle = {
        position: 'absolute',
        bottom: '2px',
        right: '2px',
        width: size === 'small' ? '8px' : '12px',
        height: size === 'small' ? '8px' : '12px',
        borderRadius: '50%',
        background: 'var(--success)',
        border: '2px solid var(--bg-primary)'
    };

    return (
        <div style={containerStyle}>
            {photoUrl ? (
                <img
                    src={photoUrl.startsWith('data:') ? photoUrl : `/uploads/${photoUrl}`}
                    alt={userName}
                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                    onError={(e) => {
                        // Fallback to initials if image fails to load
                        e.target.style.display = 'none';
                        e.target.nextSibling.style.display = 'flex';
                    }}
                />
            ) : null}
            <div style={{ ...fallbackStyle, display: photoUrl ? 'none' : 'flex' }}>
                {getInitials(userName)}
            </div>
            {showStatus && <div style={statusDotStyle}></div>}
        </div>
    );
}

// Export to global scope
window.ProfilePhoto = ProfilePhoto;