// wp-content/plugins/my-ai-gemini-interface/js/myai-app.js

document.addEventListener('DOMContentLoaded', () => {
    const appRoot = document.getElementById('app-root');

    const userData = myaiAppData; // Access global variable from wp_localize_script

    if (appRoot && userData && userData.is_logged_in) {
        // Initialize the app with the dashboard layout
        initializeApp(appRoot, userData);
    } else if (appRoot) {
        // If not logged in, show a basic auth screen or redirect
        appRoot.innerHTML = '<div id="auth-screen"><h2>Please log in to WordPress to access MyAI Interface.</h2></div>';
        const authScreen = document.getElementById('auth-screen');
        if (authScreen) {
            authScreen.style.display = 'flex';
            authScreen.style.flexDirection = 'column';
            authScreen.style.justifyContent = 'center';
            authScreen.style.align-items = 'center';
            authScreen.style.height = '100%';
            authScreen.style.width = '100%';
            authScreen.style.backgroundColor = '#131314';
            authScreen.style.color = '#e3e3e3';
        }
    } else {
        console.error("MyAI App: #app-root element not found. Cannot initialize UI.");
    }
});

function initializeApp(container, userData) {
    if (!container) {
        console.error("initializeApp: Container element not found.");
        return;
    }

    // The PHP block renders the main #myai-dashboard-container with its sections.
    // This JS will initially do basic setup or listen for events.

    // No need to dynamically create the main 9 sections here, PHP block rendering handles it.
    // This function will primarily be for initializing interactive elements within the sections,
    // like resizers (if using Split.js for major panes), or dynamic content loaders.

    // Example: If major panes are resizable via Split.js, you'd add:
    // if (userData.myai_settings.resizable_columns === '1' || userData.myai_settings.resizable_panes === '1') {
    //    // This would require defining the actual split sections with Split.js compatible divs
    //    // and gutters in the PHP output. For a 10x10 grid, Split.js would typically
    //    // apply to the outer columns and then rows within columns, not the overall 10x10 cell grid.
    //    // This is a more advanced integration than simply applying a CSS Grid.
    // }

    console.log("MyAI Dashboard initialized. User settings:", userData.myai_settings);
    // Future: Add JavaScript logic here for:
    // - Loading content into each .myai-grid-section (e.g., fetch from REST API)
    // - Handling clicks on tool icons to update Main Display (2,2)
    // - Implementing command prompt features (history, soft return)
    // - Managing user/AI online/offline status updates
}

// Global function for nested grids (if fractal grid subdivision is enabled)
// This is a simplified version; real implementation needs to create HTML structure.
let nestedPaneCounter = 0;
function createGrid(containerElement, userData) {
    // This function is for creating nested grids within a pane, as per fractal grid subdivision.
    // Its implementation depends on how you want the nested grid to look and behave.
    console.log(`Creating nested grid in ${containerElement.id}. Fractal grid setting: ${userData.myai_settings.fractal_grid}`);

    const nestedGridId = `nested-grid-${nestedPaneCounter++}`;
    const newGridHtml = `
        <div id="${nestedGridId}" style="display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 5px; height: 100%; border: 1px dashed gray; padding: 5px;">
            <div style="background-color: rgba(100,100,100,0.5); padding: 5px;">Sub 1</div>
            <div style="background-color: rgba(100,100,100,0.5); padding: 5px;">Sub 2</div>
            <div style="background-color: rgba(100,100,100,0.5); padding: 5px;">Sub 3</div>
            <div style="background-color: rgba(100,100,100,0.5); padding: 5px;">Sub 4</div>
            <div style="background-color: rgba(100,100,100,0.5); padding: 5px;">Sub 5</div>
            <div style="background-color: rgba(100,100,100,0.5); padding: 5px;">Sub 6</div>
            <div style="background-color: rgba(100,100,100,0.5); padding: 5px;">Sub 7</div>
            <div style="background-color: rgba(100,100,100,0.5); padding: 5px;">Sub 8</div>
            <div style="background-color: rgba(100,100,100,0.5); padding: 5px;">Sub 9</div>
        </div>
    `;
    // Clear existing content and append the new grid
    containerElement.innerHTML = '';
    containerElement.insertAdjacentHTML('beforeend', newGridHtml);
}