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

export const Diet = {
    init(container) {
        const MB = window.MagicBot;

        const wrapper = createElement('div', Styles.panel);

        // Header
        const header = createElement('div', Styles.flexBetween + 'margin-bottom: 5px; cursor: pointer; user-select: none;', {
            onclick: () => {
                const section = wrapper.querySelector('#section-diet');
                const arrow = wrapper.querySelector('#arrow-diet');
                if (section.style.display === 'none') {
                    section.style.display = 'block';
                    arrow.textContent = '▼';
                } else {
                    section.style.display = 'none';
                    arrow.textContent = '▶';
                }
            }
        });
        header.innerHTML = `
            <label style="${Styles.label} cursor: pointer;">Pet Diet</label>
            <span id="arrow-diet" style="font-size: 10px; color: #aaa;">▼</span>
        `;

        const content = createElement('div', '', { id: 'section-diet' }); // Default open? or closed? Display logic handles it.

        // Controls
        const controls = createElement('div', 'display: flex; gap: 5px; margin-bottom: 5px;');
        const createCtrl = (txt, fn) => {
            return createElement('button', Styles.button + 'background: #444; font-size: 10px; padding: 2px 6px; flex: 1;', {
                textContent: txt,
                onclick: fn
            });
        };

        controls.appendChild(createCtrl('All', () => {
            const list = document.getElementById('diet-list');
            if (!list) return;
            list.querySelectorAll('input').forEach(cb => { if (!cb.checked) cb.click(); });
        }));

        controls.appendChild(createCtrl('None', () => {
            const list = document.getElementById('diet-list');
            if (!list) return;
            list.querySelectorAll('input').forEach(cb => { if (cb.checked) cb.click(); });
        }));

        content.appendChild(controls);

        // List Container
        const listContainer = createElement('div', 'max-height: 150px; overflow-y: auto; background: rgba(0,0,0,0.2); padding: 5px; border-radius: 4px;', {
            id: 'diet-list'
        });
        content.appendChild(listContainer);

        wrapper.appendChild(header);
        wrapper.appendChild(content);
        container.appendChild(wrapper);

        // Initial Populate
        this.populate(listContainer);

        // Subscribe to state updates to refresh list
        if (MB.on) {
            MB.on('state_updated', () => {
                if (listContainer.children.length === 0) this.populate(listContainer);
            });
        }
    },

    populate(list) {
        const MB = window.MagicBot;
        if (!list) return;

        // Preserve checks if re-populating not fully implemented but okay for now to clear
        list.innerHTML = '';

        let crops = ["Carrot", "Tomato", "Potato", "Corn", "Wheat", "Strawberry", "Blueberry", "Pumpkin", "Watermelon", "Radish", "Cabbage", "Lettuce", "Pepper", "Apple", "Orange", "Banana", "Coconut", "Grape", "Lemon", "Lime", "Peach", "Pear", "Plum", "Cherry", "Mango", "Pineapple", "Aloe", "Daffodil", "OrangeTulip"];

        // Try to merge with shop data if present
        if (MB && MB.state && MB.state.shops && MB.state.shops.seed && MB.state.shops.seed.inventory) {
            const shopCrops = MB.state.shops.seed.inventory.map(i => i.species);
            crops = [...new Set([...crops, ...shopCrops])];
        } else if (MB.state && MB.state.inventory && MB.state.inventory.items) {
            // Also scan inventory for seeds
            MB.state.inventory.items.forEach(i => {
                if (i.itemType === 'Seed' && i.species) crops.push(i.species);
            });
            crops = [...new Set(crops)];
        }

        crops.sort();

        crops.forEach(crop => {
            const label = createElement('label', 'display: flex; align-items: center; gap: 4px; font-size: 10px; cursor: pointer; user-select: none; padding: 2px 0;');

            const checkbox = createElement('input', 'cursor: pointer;', { type: 'checkbox' });

            if (MB.automation && MB.automation.petDiet && MB.automation.petDiet.has(crop)) {
                checkbox.checked = true;
            }

            checkbox.onchange = (e) => {
                if (!MB.automation) return;
                if (!MB.automation.petDiet) MB.automation.petDiet = new Set();

                if (e.target.checked) MB.automation.petDiet.add(crop);
                else MB.automation.petDiet.delete(crop);
            };

            label.appendChild(checkbox);
            label.appendChild(document.createTextNode(crop));
            list.appendChild(label);
        });
    }
};