import { WindowManager } from './window_manager.js';
import { Styles, createElement } from '../ui_styles.js';

export const ModelOverlay = {
    interval: null,

    open() {
        const { win, content } = WindowManager.create('window-model', '🧠 Model Visualization', { x: 260, y: 340, width: 300, height: 400 });
        this.update(content);

        if (this.interval) clearInterval(this.interval);
        this.interval = setInterval(() => this.update(content), 1000); // 1s refresh

        // Cleanup on close (hacky but works for now if window maps to ID)
        const closeBtn = win.querySelector('button'); // THe X button
        if (closeBtn) {
            const oldClick = closeBtn.onclick;
            closeBtn.onclick = () => {
                if (this.interval) clearInterval(this.interval);
                if (oldClick) oldClick();
            }
        }
    },

    update(container) {
        if (!container) container = document.getElementById('window-model-content');
        if (!container) {
            if (this.interval) clearInterval(this.interval);
            return;
        }

        const MB = window.MagicBot;
        if (!MB || !MB.state || !MB.state.inventory) {
            container.innerHTML = '<div style="color:red">No State Data</div>';
            return;
        }

        container.innerHTML = '';
        const list = createElement('div', 'display: flex; flex-direction: column; gap: 4px; font-size: 10px;');

        // Header Info
        const header = createElement('div', 'padding: 5px; background: rgba(0,0,0,0.2); margin-bottom: 5px; border-radius: 4px;');
        const rainProb = MB.weatherTracker ? (MB.weatherTracker.probabilities.rain * 100).toFixed(0) : '?';
        const frostProb = MB.weatherTracker ? (MB.weatherTracker.probabilities.frost * 100).toFixed(0) : '?';
        header.innerHTML = `
            <div><b>Weather Probabilities:</b> Rain: ${rainProb}% | Frost: ${frostProb}%</div>
            <div><b>Smart Harvest:</b> ${MB.automation && MB.automation.smartHarvest ? '<span style="color:#bada55">ON</span>' : '<span style="color:#ff5252">OFF</span>'}</div>
        `;
        list.appendChild(header);

        const plots = MB.state.inventory.items.filter(i => i.itemType === 'Plot');
        if (plots.length === 0) {
            container.innerHTML += '<div style="padding:10px">No Plots Found</div>';
            return;
        }

        plots.forEach(plot => {
            if (!plot.properties) return;
            const crop = plot.properties.crop;
            if (!crop) return; // Empty plot

            const row = createElement('div', 'background: rgba(255,255,255,0.05); padding: 5px; border-radius: 4px; display: flex; flex-direction: column; gap: 2px;');

            // Basic Crop Info
            const name = crop.name;
            const stage = crop.stage;
            const totalStages = crop.stages;
            const isReady = stage >= totalStages;

            // Value Calculation (Simple approximation if actual vals not available)
            const sellPrice = crop.sellPrice || 0;
            const currentVal = isReady ? sellPrice : 0;

            // Decision Logic Inspection
            // We can't easily "spy" on the exact decision function result without modifying it to store state,
            // but we can replicate the visual indicators.

            let statusColor = '#aaa';
            let statusText = 'Growing';

            if (isReady) {
                // Check mutation potential
                const nextWeather = MB.weatherTracker ? MB.weatherTracker.nextEvent : 'Unknown';
                const hasMutation = crop.mutations && crop.mutations.length > 0;

                if (hasMutation) {
                    statusText = 'Ready (Mutated!)';
                    statusColor = '#bada55'; // Green
                } else {
                    // This is where we'd ideally show the "Wait vs Harvest" logic
                    // For now, let's show the current value and a theoretical max if waiting
                    statusText = 'Ready';
                    statusColor = '#fff';
                }
            }

            row.innerHTML = `
                <div style="font-weight:bold; display:flex; justify-content:space-between;">
                    <span style="color:${Styles.colors.primary}">${name}</span>
                    <span style="color:${statusColor}">${statusText}</span>
                </div>
                <div style="display:flex; justify-content:space-between; color:#888;">
                    <span>Stage: ${stage}/${totalStages}</span>
                    <span>Value: ${currentVal}</span>
                </div>
                <!-- 
                <div style="font-size:9px; color:#666;">
                    EV: ??? | Boundary: ???
                </div>
                -->
            `;
            list.appendChild(row);
        });

        container.appendChild(list);
    }
};
