let nuiHandlers = {};
let isHudHidden = false;

const batteryElement = document.querySelector('.battery-high');
const signalElement = document.querySelector('.signal-high');
const instructionsBtn = document.getElementById('instructions-btn');
const instructionsOverlay = document.getElementById('instructions-overlay');
const closeInstructions = document.getElementById('close-instructions');

$(() => {
    window.addEventListener('message', (event) => {
        const { name, data } = event.data;
        if (nuiHandlers[name]) {
            nuiHandlers[name](data);
        }
    });

    // Toggle hud
    $(document).keyup((e) => {
        if (e.key !== 'h') return;

        const isVisible = $('body').is(':visible');
        if (isVisible) {
            $('body').hide();
            isHudHidden = true;
        } else if (isHudHidden) {
            $('body').show();
        }
    });

    onNui('showHud', (data) => showHud(data));
    onNui('hideHud', () => hideHud());
    onNui('updateHud', (data) => updateHud(data));

    onNui('copyToClipboard', copyToClipboard);
    onNui('updateBattery', updateBattery);
    onNui('updateRange', updateRange);

    onNui('initialize', (data) => {
        const config = data.config;
        $('.speed-unit').text(config.useMetric ? 'km/h' : 'mph');

        const droneConfig = data.droneConfig;
        const components = droneConfig.components;

        for (const name in components) {
            const value = components[name];
            const element = document.querySelector(`[component-${name}]`);
            if (!element) continue;
            element.style.display = value ? 'block' : 'none';
        }
    });

    $('#button-effect').click(() => {
        emitNui('toggleExtraEffect');
    });

    $('#button-power').click(() => {
        emitNui('exitDrone');
    });

    $('#button-screenshot').click(() => {
        emitNui('captureScreenshot');
        const element = $('#button-screenshot');
        element.prop('disabled', true);
        setTimeout(() => {
            element.prop('disabled', false);
        }, 15000);
    });

    $('#button-togglehud').click(() => {
        isHudHidden = true;
        $('body').hide();
    });

    instructionsBtn.addEventListener('click', () => {
        instructionsOverlay.style.display = 'flex';
    });

    closeInstructions.addEventListener('click', () => {
        instructionsOverlay.style.display = 'none';
    });
});

const emitNui = (action, data = {}, cb) => {
    $.post(`https://${GetParentResourceName()}/${action}`, JSON.stringify(data), cb);
};

const onNui = (name, handler) => {
    nuiHandlers[name] = handler;
};

const showHud = () => {
    $('body').show();
    updateBattery();
    updateRange();
};

const hideHud = () => {
    isHudHidden = false;
    $('body').hide();
};

const updateHud = (data) => {
    for (const name in data) {
        const value = data[name];
        const element = document.querySelector(`[value-${name}]`);

        if (name === 'yaw') {
            const degrees = value * -1;
            const compassArrow = document.querySelector('.compass-arrow');
            compassArrow.style.transform = `translate(calc(-50% + 15px), -50%) rotate(${degrees + 270}deg)`;
            continue;
        }

        if (element) {
            element.textContent = value;
        }
    }
};

const updateBattery = (percentage = 100) => {
    element = document.querySelector('[value-battery]');
    if (!element) return;
    element.textContent = percentage;

    batteryElement.classList.remove('battery-high', 'battery-medium', 'battery-low');
    if (percentage > 60) {
        batteryElement.classList.add('battery-high');
    } else if (percentage > 30) {
        batteryElement.classList.add('battery-medium');
    } else {
        batteryElement.classList.add('battery-low');
    }
};

const updateRange = (percentage = 100) => {
    element = document.querySelector('[value-range]');
    if (!element) return;
    element.textContent = percentage;

    signalElement.classList.remove('signal-high', 'signal-medium', 'signal-low');
    if (percentage > 70) {
        signalElement.classList.add('signal-high');
    } else if (percentage > 40) {
        signalElement.classList.add('signal-medium');
    } else {
        signalElement.classList.add('signal-low');
    }
};

const copyToClipboard = (value) => {
    const clipboardElement = document.createElement('input');
    clipboardElement.value = value;
    document.body.appendChild(clipboardElement);
    clipboardElement.select();
    document.execCommand('copy');
    document.body.removeChild(clipboardElement);
};