script.js

// Global state management
const state = {
    currentProject: 'Espace Codage - Projet 1',
    tools: ['La Baleine', 'Rosalinda', 'CodeExplainer', 'ThemeGenerator'],
    currentTool: null,
    generatedCode: '',
    codeExplanation: '',
    generatedImage: null
};

// DOM Elements
const elements = {
    sidebar: document.querySelector('custom-sidebar'),
    codeExplanation: document.querySelector('custom-code-explanation'),
    imageGenerator: document.querySelector('custom-image-generator')
};

// Event Listeners
document.addEventListener('DOMContentLoaded', () => {
    // Initialize the first project
    updateUI();
});

function updateUI() {
    // Update all components based on current state
    if (elements.sidebar) {
        elements.sidebar.setAttribute('current-project', state.currentProject);
        elements.sidebar.setAttribute('current-tool', state.currentTool || '');
    }
    
    if (elements.codeExplanation) {
        elements.codeExplanation.setAttribute('explanation', state.codeExplanation);
        elements.codeExplanation.setAttribute('generated-code', state.generatedCode);
    }
    
    if (elements.imageGenerator) {
        elements.imageGenerator.setAttribute('image-data', state.generatedImage || '');
    }
}

// Example function to generate code explanation
function generateCodeExplanation(code) {
    // This would be replaced with actual AI explanation logic
    return `The generated CSS defines visual styles for the application:
- Background color: Sets the main background
- Scrollbar: Customizes the scrollbar appearance
- Animations: Adds subtle pulse animation
- Transitions: Smooth hover effects`;
}

// Example function to simulate image generation
function generateImageFromCode(code) {
    // In a real app, this would use Canvas or similar to render the code visually
    return 'http://static.photos/technology/640x360/42';
}

// Export functions for components to use
window.appState = {
    ...state,
    updateUI,
    generateCodeExplanation,
    generateImageFromCode
};