import { Styles, createElement } from './ui_styles.js';
import { Teleport } from './components/teleport.js';
import { Automation } from './components/automation.js';
import { Harvest } from './components/harvest.js';
import { Diet } from './components/diet.js';
import { Visualizers } from './components/visualizers.js';

import { GardenOverlay } from './overlays/garden.js';
import { InventoryOverlay } from './overlays/inventory.js';
import { ShopOverlay } from './overlays/shop.js';
import { PlayersOverlay } from './overlays/players.js';
import { PetsOverlay } from './overlays/pets.js';
import { ModelOverlay } from './overlays/model_overlay.js'; // Added

(function () {
    const MB = window.MagicBot;
    console.log('[MagicBot] Initializing Modular UI...');

    // Expose Overlay helpers to global scope for Visualizers to use
    window.MagicBot_Overlays = {
        openAll: () => {
            GardenOverlay.open();
            InventoryOverlay.open();
            ShopOverlay.open();
            PlayersOverlay.open();
            PetsOverlay.open();
        },
        openPets: () => PetsOverlay.open(),
        openModel: () => ModelOverlay.open() // Added
    };

    const UIManager = {
        sidebar: null,
        isVisible: true,

        init() {
            this.createSidebar();
            this.setupShortcuts();
            this.setupUpdateLoop();

            console.log('[MagicBot] UI Manager Ready.');
        },

        createSidebar() {
            if (document.getElementById('magic-bot-sidebar')) return;

            this.sidebar = createElement('div', Styles.sidebar, { id: 'magic-bot-sidebar' });

            // Header
            const header = createElement('div', 'padding: 20px 20px 10px 20px; display: flex; justify-content: space-between; align-items: center;');
            header.innerHTML = `
                <h3 style="margin: 0; color: #bada55; font-size: 18px;">🌱 Magic Bot</h3>
                <div id="mb-status-ind" style="font-size: 12px; font-weight: bold; color: #ff5252;">● Disconnected</div>
            `;
            this.sidebar.appendChild(header);

            // Scrollable Content
            const content = createElement('div', 'padding: 0 20px 20px 20px; flex: 1; overflow-y: auto;');

            // Initialize Components
            try { Teleport.init(content); } catch (e) { console.error('Teleport Init Failed', e); }
            try { Automation.init(content); } catch (e) { console.error('Automation Init Failed', e); }
            try { Harvest.init(content); } catch (e) { console.error('Harvest Init Failed', e); }
            try { Diet.init(content); } catch (e) { console.error('Diet Init Failed', e); }
            try { Visualizers.init(content); } catch (e) { console.error('Visualizers Init Failed', e); }

            this.sidebar.appendChild(content);
            document.body.appendChild(this.sidebar);

            // Stop Prop on sidebar
            ['keydown', 'keyup', 'keypress'].forEach(evt =>
                this.sidebar.addEventListener(evt, (e) => e.stopPropagation())
            );
        },

        setupShortcuts() {
            window.addEventListener('keydown', (e) => {
                if (e.code === 'Insert' || e.code === 'Backquote') { // Toggle Key
                    this.toggleUI();
                }
            });
        },

        toggleUI() {
            this.isVisible = !this.isVisible;
            if (this.sidebar) {
                this.sidebar.style.opacity = this.isVisible ? '1' : '0';
                this.sidebar.style.pointerEvents = this.isVisible ? 'auto' : 'none';
            }
        },

        setupUpdateLoop() {
            // Bind to state updates to refresh overlays
            MB.on('state_updated', () => {
                GardenOverlay.update();
                InventoryOverlay.update();
                ShopOverlay.update();
                PlayersOverlay.update();
                PetsOverlay.update(); // Added
            });
        }
    };

    // Initialize
    UIManager.init();

})();