import { WindowManager } from './window_manager.js';

export const PetsOverlay = {
    open() {
        // Position next to others
        const { win, content } = WindowManager.create('window-pets', '🐾 My Pets', { x: 20, y: 340, width: 220, height: 250 });
        this.update(content);
    },

    update(container) {
        if (!container) container = document.getElementById('window-pets-content');
        if (!container) return;

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

        container.innerHTML = '';
        const list = document.createElement('div');
        list.style.cssText = "display: flex; flex-direction: column; gap: 8px; font-size: 11px;";

        const pets = MB.state.inventory.items.filter(i => i.itemType === 'Pet');

        if (pets.length === 0) {
            container.innerHTML = '<div style="color:#aaa; text-align:center; padding: 10px;">No Pets Found</div>';
            return;
        }

        pets.forEach(p => {
            const row = document.createElement('div');
            row.style.cssText = `background: rgba(255,255,255,0.05); padding: 8px; border-radius: 4px; display: flex; flex-direction: column; gap: 2px;`;

            // Name/Species
            const name = p.name || p.petSpecies;
            const species = p.petSpecies;
            const isAutoFeed = MB.automation && MB.automation.pets && MB.automation.pets[p.id] && MB.automation.pets[p.id].autoFeed;

            const diets = {
                'Bee': ['Strawberry', 'Blueberry', 'Tulip', 'Daffodil', 'Lily'],
                'Goat': ['Pumpkin', 'Coconut', 'Cactus', 'Pepper']
            };
            const diet = diets[species] ? diets[species].join(', ') : 'Unknown Diet';

            row.innerHTML = `
                <div style="font-weight:bold; color: #bada55; display: flex; justify-content: space-between; align-items:center;">
                    <span>${name}</span>
                    <label style="font-size:9px; color:#eee; display:flex; align-items:center;">
                        <input type="checkbox" class="chk-pet-feed" data-id="${p.id}" ${isAutoFeed ? 'checked' : ''}> A-Feed
                    </label>
                </div>
                <div style="display: flex; justify-content: space-between; font-size: 9px; color: #666;">
                    <span>${species}</span>
                    <span>XP: ${p.xp}</span>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span>Hunger: ${Math.floor(p.hunger || 0)}</span>
                </div>
                <div style="color: #aaa; font-size: 9px; margin-top: 4px;">
                   Diet: ${diet}
                </div>
             `;

            // Event listener for checkbox (needs to be attached after innerHTML reflow)
            // We'll trust the parent re-render or attach globally for now to avoid complexity in this simple render loop.
            // Actually, let's attach immediately after this loop finishes or use a delegate.

            list.appendChild(row);
        });

        // Delegate listener
        list.onchange = (e) => {
            if (e.target.classList.contains('chk-pet-feed')) {
                const id = e.target.getAttribute('data-id');
                if (!MB.automation.pets) MB.automation.pets = {};
                if (!MB.automation.pets[id]) MB.automation.pets[id] = {};
                MB.automation.pets[id].autoFeed = e.target.checked;
                console.log(`[MagicBot] Pet ${id} Auto-Feed: ${e.target.checked}`);
            }
        };

        container.appendChild(list);
    }
};