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

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

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

        const inputsDiv = createElement('div', 'display: flex; gap: 8px;');

        const inpX = createElement('input', Styles.input, { type: 'number', placeholder: 'X', value: '15', id: 'tp-x' });
        const inpY = createElement('input', Styles.input, { type: 'number', placeholder: 'Y', value: '15', id: 'tp-y' });

        const btnGo = createElement('button', Styles.button + 'background: ' + Styles.colors.primary, {
            textContent: 'Go',
            onclick: () => {
                const x = parseInt(inpX.value);
                const y = parseInt(inpY.value);
                if (MB && MB.teleport) MB.teleport(x, y);
            }
        });

        inputsDiv.appendChild(inpX);
        inputsDiv.appendChild(inpY);
        inputsDiv.appendChild(btnGo);

        content.appendChild(inputsDiv);

        // Pre-defined Locations (Bonus feature)
        const quickLocs = createElement('div', 'display: flex; gap: 5px; margin-top: 5px;');
        const locs = [
            { name: 'Home', x: 15, y: 15 },
            { name: 'Market', x: 50, y: 50 } // Example coordinates, adjust if known
        ];

        locs.forEach(loc => {
            const btn = createElement('button', Styles.button + 'background: #333; font-size: 10px; padding: 4px 8px;', {
                textContent: loc.name,
                onclick: () => {
                    inpX.value = loc.x;
                    inpY.value = loc.y;
                    if (MB && MB.teleport) MB.teleport(loc.x, loc.y);
                }
            });
            quickLocs.appendChild(btn);
        });

        content.appendChild(quickLocs);

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

        container.appendChild(wrapper);
    }
};