// personality_allocation.js

// Personality and color mappings with additional visual properties
const personalityConfig = {
    normal: {
        color: '#227c9d', // cerulean
        name: 'normal',
        icon: 'mdi:account-circle',
        backgroundColor: 'cerulean',
        borderColor: 'border-blue-600'
    },
    genuine_friend: {
        color: '#17c3b2', // light-sea-green
        name: 'genuine friend',
        icon: 'mdi:account-heart',
        backgroundColor: 'light-sea-green',
        borderColor: 'border-teal-600'
    },
    sensitive_to_compliments: {
        color: '#ffcb77', // sunset
        name: 'sensitive to compliments',
        icon: 'mdi:account-star',
        backgroundColor: 'sunset',
        borderColor: 'border-yellow-600'
    },
    /* rebellious: {
        color: '#fe6d73', // light-red
        name: 'rebellious',
        icon: 'mdi:account-alert',
        backgroundColor: 'light-red',
        borderColor: 'border-red-600'
    } */
};

// Get random personality
function getRandomPersonality() {
    const personalities = Object.keys(personalityConfig);
    const randomIndex = Math.floor(Math.random() * personalities.length);
    return personalities[randomIndex];
}

// Create player square with personality
function createPlayerSquare(personality) {
    const config = personalityConfig[personality];
    
    // Create the square container
    const square = document.createElement('div');
    square.className = `w-16 h-16 rounded-md shadow-lg flex flex-col items-center justify-center text-white font-medium pop-in ${config.backgroundColor}`;
    
    // Add icon and label
    square.innerHTML = `
        <span class="iconify mb-1" data-icon="${config.icon}" data-width="24" data-height="24"></span>
        <span class="text-xs">You</span>
    `;
    
    return square;
}

// Initialize personality system
function initializePersonalitySystem() {
    // Get DOM elements
    const personalitySelect = document.getElementById('personality-select');
    const gridContainer = document.getElementById('grid-container');
    const gameInfo = document.getElementById('game-info');
    
    // Get random personality
    const selectedPersonality = getRandomPersonality();
    const config = personalityConfig[selectedPersonality];
    
    // Set the select value programmatically
    personalitySelect.value = selectedPersonality;
    
    // Create personality display
    const personalityDisplay = document.createElement('div');
    personalityDisplay.className = 'bg-white rounded-lg p-4 shadow-md mb-4';
    personalityDisplay.innerHTML = `
        <div class="text-sm text-gray-600 mb-2">Your Personality:</div>
        <div class="flex items-center gap-2">
            <div class="w-3 h-3 rounded-full" style="background-color: ${config.color}"></div>
            <span class="font-medium capitalize">${config.name.replace(/_/g, ' ')}</span>
        </div>
    `;
    
    // Add personality info to game info
    if (gameInfo) {
        gameInfo.insertBefore(personalityDisplay, gameInfo.firstChild);
    }
    
    // Create and add player square to grid
    const playerSquare = createPlayerSquare(selectedPersonality);
    if (gridContainer) {
        // Clear existing squares if any
        gridContainer.innerHTML = '';
        gridContainer.appendChild(playerSquare);
    }
    
    // Update game state with personality
    window.playerPersonality = selectedPersonality;
    
    // Add to chat history
    const chatContent = document.getElementById('chat-content');
    if (chatContent) {
        const personalityMessage = document.createElement('div');
        personalityMessage.className = 'text-gray-600 text-sm italic mb-4';
        personalityMessage.textContent = `You joined as a ${config.name.replace(/_/g, ' ')}`;
        chatContent.appendChild(personalityMessage);
    }
}

// Expose necessary functions and data
window.personalitySystem = {
    config: personalityConfig,
    getRandomPersonality,
    createPlayerSquare,
    initialize: initializePersonalitySystem
};

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', initializePersonalitySystem);

// Handle personality updates in the game logic
document.addEventListener('personalityUpdated', (event) => {
    const newPersonality = event.detail.personality;
    const config = personalityConfig[newPersonality];
    
    // Update the player square
    const playerSquare = document.querySelector('#grid-container > div');
    if (playerSquare) {
        Object.keys(personalityConfig).forEach(personality => {
            const pConfig = personalityConfig[personality];
            playerSquare.classList.remove(pConfig.backgroundColor);
        });
        playerSquare.classList.add(config.backgroundColor);
        playerSquare.querySelector('.iconify').setAttribute('data-icon', config.icon);
    }
});