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

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

        const content = createElement('div', 'display: flex; flex-direction: column; gap: 8px;', { id: 'section-auto' });

        const createToggle = (label, prop, tooltip = '') => {
            const row = createElement('label', Styles.flexBetween + 'cursor: pointer;', { title: tooltip });
            const txt = createElement('span', '', { textContent: label });
            const chk = createElement('input', 'cursor: pointer;', {
                type: 'checkbox',
                onchange: (e) => {
                    if (MB.automation) MB.automation[prop] = e.target.checked;
                }
            });

            // Set initial state if available
            if (MB.automation && MB.automation[prop]) chk.checked = true;

            row.appendChild(txt);
            row.appendChild(chk);
            return row;
        };

        content.appendChild(createToggle('Auto Plant', 'autoPlant'));
        content.appendChild(createToggle('Auto Harvest', 'autoHarvest'));
        content.appendChild(createToggle('Auto Sell', 'autoSell'));
        content.appendChild(createToggle('Auto Feed Pets', 'autoFeed'));

        // Smart Harvest Special
        const div = createElement('div', 'border-top: 1px solid #444; margin: 4px 0;');
        content.appendChild(div);

        const smartToggle = createToggle('Smart Harvest', 'smartHarvest', 'Waits for optimal mutations (Gold->Frozen, Long->Wet)');
        smartToggle.querySelector('span').style.color = Styles.colors.accent;
        content.appendChild(smartToggle);

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