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

export const Harvest = {
    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-hv');
                const arrow = wrapper.querySelector('#arrow-hv');
                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;">Harvest</label>
            <span id="arrow-hv" style="font-size: 10px; color: #aaa;">▼</span>
        `;

        const content = createElement('div', '', { id: 'section-hv' });

        // Range Inputs
        const rangeGrid = createElement('div', 'display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px;');

        const createInput = (label, id, val) => {
            const div = createElement('div');
            div.appendChild(createElement('span', 'font-size: 10px; color: #888;', { textContent: label }));
            div.appendChild(createElement('input', Styles.input, { type: 'number', id, value: val }));
            return div;
        };

        rangeGrid.appendChild(createInput('Start Slot', 'hv-start', '140'));
        rangeGrid.appendChild(createInput('End Slot', 'hv-end', '160'));
        content.appendChild(rangeGrid);

        // Options Inputs
        const optGrid = createElement('div', 'display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px;');
        optGrid.appendChild(createInput('Iter. (Count)', 'hv-count', '1'));
        optGrid.appendChild(createInput('Delay (ms)', 'hv-delay', '20'));
        content.appendChild(optGrid);

        // Quick Buttons for Range
        const quickRange = createElement('div', 'display: flex; gap: 4px; margin-bottom: 8px;');
        const addQuickBtn = (txt, s, e) => {
            quickRange.appendChild(createElement('button', Styles.button + 'background: #444; font-size: 9px; padding: 2px 6px; flex: 1;', {
                textContent: txt,
                onclick: () => {
                    document.getElementById('hv-start').value = s;
                    document.getElementById('hv-end').value = e;
                }
            }));
        };
        addQuickBtn('All (0-199)', 0, 199);
        addQuickBtn('Left (0-99)', 0, 99);
        addQuickBtn('Right (100-199)', 100, 199);
        content.appendChild(quickRange);

        // Actions
        const btnRun = createElement('button', Styles.button + 'background: ' + Styles.colors.success + '; width: 100%;', {
            textContent: 'Run Harvest',
            onclick: () => {
                const s = parseInt(document.getElementById('hv-start').value);
                const e = parseInt(document.getElementById('hv-end').value);
                const c = parseInt(document.getElementById('hv-count').value);
                const d = parseInt(document.getElementById('hv-delay').value);
                if (MB && MB.harvestLoop) MB.harvestLoop(s, e, c, d);
            }
        });
        content.appendChild(btnRun);

        // Sell All (moved here from root)
        const btnSell = createElement('button', Styles.button + 'background: ' + Styles.colors.warning + '; width: 100%; margin-top: 10px;', {
            textContent: 'Sell All Crops',
            onclick: () => {
                if (MB && MB.sellAll) MB.sellAll();
            }
        });
        content.appendChild(btnSell);

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