BGBlur = true
ActionsOpen = false
ChangedKeys = []
DoorNotify = false
CurrentKeyPage = 1

let translations = {};

async function loadTranslations(lang) {
    try {
        const response = await fetch(`../locales/${lang}.json`);
        translations = await response.json();
        updateText()
    } catch (error) {
        console.error("Error loading translation:", error);
    }
}

function updateText() {
    document.querySelectorAll("[data-i18n]").forEach(element => {
        const key = element.getAttribute("data-i18n");

        if (element.hasAttribute("placeholder")) {
            element.setAttribute("placeholder", translations[key]);
        } else {
            element.innerHTML = translations[key]; 
        }
    });
}

function t(key) {
    return translations[key] || key; 
}

window.addEventListener('message', function(event) {
    let data = event.data

    if (data.action == "NUILanguage") {
        loadTranslations(data.language);
    }
    else if (data.action === "OpenKeysMenu") {
        MyKeys = data.mykeys
        CreateKeyMenu()
        BackgroundBlur("plugin_1", 'key_panel')
        if (ActionsOpen){
            BackgroundBlur("plugin_1", 'key_panel', true)
            MakeKeysDraggable()
        }
        else{
            BackgroundBlur("plugin_1", 'key_panel')
        }
        ChangedKeys = []
    } 
    if (data.action === "OpenLostKeyMenu") {
        MyVehicles = data.myvehicles
        VehicleKeyPrice = data.price
        Currency = data.currencyform
        CreateKeyPurchaseMenu()
        show('key_purchase_menu')
        BackgroundBlur("plugin_2", 'key_purchase_panel')
    }
    if (data.action === "DoorState") {
        DoorState = data.status
        if (DoorState == 'unlocked'){
            $(".key_notify .text").html(t('doors_unlocked'))
            document.getElementById('line').classList.remove("red")
        }
        else{
            $(".key_notify .text").html(t('doors_locked'))
            document.getElementById('line').classList.add("red")
        }
        $('.key_notify').css('display', 'block')
        $('.key_notify .container').css('animation', 'container 1s ease both')
        if (DoorNotify){
            clearTimeout(DoorNotify)
        }
        DoorNotify = setTimeout(() => {
            $('.key_notify .container').css('animation', 'reverse_container 1s ease both')
            setTimeout(() => {
                $('.key_notify').css('display', 'none')
                DoorNotify = false
            }, 800);
        }, 4000);
    }
    else if (data.action === "close") {
        Close()
    }
})

document.onkeydown = function(data) {
    if (event.key == 'Escape') {
        Close()
    }
}

function Close(){
    CloseKeyMenu()
    hide('key_purchase_menu')
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "close", table:ChangedKeys}))
    ChangedKeys = []
}

function CreateKeyPurchaseMenu(){
    $('.vehicles_container').html('')
    for (let i = 0; i < MyVehicles.length; i++) {
        $('.vehicles_container').append(`
            <div class="vehicle_element">
                <div class="element_border"></div>
                <div class="plate">${MyVehicles[i].plate}</div>
                <div class="price">${VehicleKeyPrice.toLocaleString('hu-HU')+' '+Currency}</div>
                <button class="action_btn" onclick="SendBuyKeyForVehicle('${MyVehicles[i].plate}')">${t('buy')}</button>
            </div>
        `)
    }
}

function SendBuyKeyForVehicle(plate){
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "lostKey", plate}))
}

function CreateKeyMenu(){
    $('.key_menu').css('display', 'block')
    $('.key_menu .animation_element').css('animation', 'animation_element 1s ease both')
    $('.key_menu .overflow_container').css('animation', 'overflow_container 1s ease both')
    $('.key_menu .panel').css('animation', 'panel 1s ease both')

    CreatePageSelector()
    InsertDataToPanel()
}

function SendChangeLock(keyid){
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "changeLock", keyid, table:ChangedKeys}))
    ChangedKeys = []
}

function SendCopy(keyid){
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "copyKey", keyid, table:ChangedKeys}))
    ChangedKeys = []
}

function SendDeleteAll(keyid, plate){
    $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "deleteAll", keyid, table:ChangedKeys, plate}))
    ChangedKeys = []
}

function CloseKeyMenu(){
    $('.key_menu .animation_element').css('animation', 'reverse_animation_element 1s ease both')
    $('.key_menu .overflow_container').css('animation', 'reverse_overflow_container 1s ease both')
    $('.key_menu .panel').css('animation', 'reverse_panel 1s ease both')

    if (ActionsOpen){
        document.getElementById('actions_btn').classList.remove("active")
        $('.key_menu .overflow_container').css('transform', 'translate(0px, -50%)') 

        $('.actions_section #actions_panel').css('animation', 'reverse_actions_panel 0.3s both')
        
        MakeKeysNotDraggable()

        setTimeout(() => {
            ActionsOpen = false
            BackgroundBlur("plugin_1", 'key_panel')
            $('.actions_section').css('display', 'none')
        }, 400);
    }

    setTimeout(() => {
        $('.key_menu').css('display', 'none')
    }, 700);
}

function ChooseKeyPage(element, number){
    MakeKeysNotDraggable()
    CurrentKeyPage = number+1
    for (let i = 0; i < NumberOfPages; i++) {
        document.getElementById("page_"+i).classList.remove("choosed")
    }
    element.classList.add("choosed")
    InsertDataToPanel()
    if (ActionsOpen){
        MakeKeysDraggable()
    }
}

function CreatePageSelector(){
    BiggestSlot = 1
    for (let i = 0; i < MyKeys.length; i++) {
        if (MyKeys[i].slot > BiggestSlot){
            BiggestSlot = MyKeys[i].slot
        }
    }
    NumberOfPages = (BiggestSlot-(BiggestSlot%24))/24+1

    $(".page_selector_container").html('')
    if (NumberOfPages > 1){
        for (let i = 0; i < NumberOfPages; i++) {
            if (CurrentKeyPage-1 == i){
                $(".page_selector_container").append(`
                    <div class="page_element choosed" id='page_${i}' onclick='ChooseKeyPage(this, ${i})'></div>
                `)
            }
            else{
                $(".page_selector_container").append(`
                    <div class="page_element" id='page_${i}' onclick='ChooseKeyPage(this, ${i})'></div>
                `)
            }
        }
    }
}

function InsertDataToPanel(){
    $('.keys_container').html('')
    for (let i = (CurrentKeyPage*24)-24; i < CurrentKeyPage*24; i++) {
        if (MyKeys.length != 0){
            for (let _i = 0; _i < MyKeys.length; _i++) {
                if (MyKeys[_i] != undefined && MyKeys[_i].slot-1 == i){
                    let options = {year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit"};
                    let date = new Date(MyKeys[_i].time * 1000);
                    $('.keys_container').append(`
                        <div class="key_element">
                            <div class="key_border"></div>
                            <div class="number">${MyKeys[_i].quantity>1?MyKeys[_i].quantity:''}</div>
                            <div class="name">${MyKeys[_i].label}</div>
                            ${MyKeys[_i].type == 'temporary_key'?`<div class="temporary"></div>`:''}
                            <div class="dropdown">
                                <div class="key_image ${MyKeys[_i].type == 'vehicle_key'?'vehicle':''}" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="key_${i}"></div>
                                <ul class="dropdown-menu">
                                    ${MyKeys[_i].type != 'temporary_key'?`<li><button class="dropdown-item mb-2" onclick='SendCopy("${MyKeys[_i].id}")'>${t('copy')}</button></li>`:''}
                                    ${MyKeys[_i].type == 'vehicle_key'?`<li><button class="dropdown-item mb-2" onclick='SendChangeLock("${MyKeys[_i].id}")'>${t('change_lock')}</button></li>`:''}
                                    <li><button class="dropdown-item" onclick='SendDeleteAll("${MyKeys[_i].id}", "${MyKeys[_i].plate}")'>${t('delete_all')}</button></li>
                                    <div class="time">${date.toLocaleString("hu-HU", options)}</div>
                                </ul>
                            </div>
                        </div>
                    `) 
                    break
                }
                else if(_i+1 == MyKeys.length){
                    $('.keys_container').append(`
                        <div class="key_element" id="empty_${i}">
                            <div class="key_border"></div>
                        </div>
                    `)
                    break
                }
            }
        }
        else{
            $('.keys_container').append(`
                <div class="key_element" id="empty_${i}">
                    <div class="key_border"></div>
                </div>
            `)
        }
    }
    document.querySelectorAll(".key_image").forEach(el => {
        const dropdownMenu = new bootstrap.Dropdown(el);
        el.addEventListener("contextmenu", function (event) {
            event.preventDefault(); 
            document.querySelectorAll(".key_image").forEach(otherEl => {
                if (otherEl !== el) {
                    new bootstrap.Dropdown(otherEl).hide(); 
                }
            });
            dropdownMenu.show(); 
        });
    
        document.addEventListener("click", function () {
            dropdownMenu.hide();
        });
    });
}

function MakeKeysDraggable(){
    for (let i = (CurrentKeyPage*24)-24; i < CurrentKeyPage*24; i++) {
        for (let _i = 0; _i < MyKeys.length; _i++) {
            if (MyKeys[_i] != undefined && MyKeys[_i].slot-1 == i){
                dragElement(document.getElementById('key_'+i), 'key_'+i, MyKeys[_i].id, _i)
            }
        }
    }
}

function MakeKeysNotDraggable(){
    for (let i = (CurrentKeyPage*24)-24; i < CurrentKeyPage*24; i++) {
        for (let _i = 0; _i < MyKeys.length; _i++) {
            if (MyKeys[_i] != undefined && MyKeys[_i].slot-1 == i){
                document.getElementById('key_'+i).onmousedown = null
            }
        }
    }
}

function CreateActionPage(){
    if (!ActionsOpen){
        ActionsOpen = true
        document.getElementById('actions_btn').classList.add("active")
        $('.key_menu .overflow_container').css('transform', 'translate(-100px, -50%)')
        BackgroundBlur("plugin_1", 'key_panel', true)
        
        $('#actions_panel').css('height', $('.key_menu .panel').height()+'px')
        $('.actions_section #actions_panel').css('animation', 'actions_panel 0.3s ease both')
        $('.actions_section').css('display', 'block')
        
        MakeKeysDraggable()

        TriggerCallback('getClosestPlayers', {}).done((cb) => {
            ClosestPlayers = cb
            $('.people_container').html('')
            if (ClosestPlayers.length > 0){
                for (let i = 0; i < ClosestPlayers.length; i++) {
                    $('.people_container').append(`
                        <div class="people_element" id='player_${i}'>
                            <div class="element_border"></div>
                            <div class="people_image"></div>
                            <div class="id">ID ${ClosestPlayers[i].id}</div>
                        </div>
                    `)
                }
            }
            else{
                $('.people_container').append(`
                    <div class="people_element">
                        <div class="element_border"></div>
                        <div class="text">x</div>
                    </div>
                `)
            }
        });
    }
    else{
        document.getElementById('actions_btn').classList.remove("active")
        $('.key_menu .overflow_container').css('transform', 'translate(0px, -50%)') 

        $('.actions_section #actions_panel').css('animation', 'reverse_actions_panel 0.3s both')
        
        MakeKeysNotDraggable()

        setTimeout(() => {
            ActionsOpen = false
            BackgroundBlur("plugin_1", 'key_panel')
            $('.actions_section').css('display', 'none')
        }, 400);
    }
}

function TriggerCallback(event, data) {
    data.action = event;
    return $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify(data)).promise();
}

function BackgroundBlur(element, target, value) {
    if (BGBlur){
        var bodyRect = document.body.getBoundingClientRect();
        let elemRect = getTotalBoundingBox(target); 
        
        if (!elemRect) return;

        let offset = [];
        if (value){
            offset = [
                (elemRect.top - bodyRect.top)-2, 
                ((elemRect.right - bodyRect.right) * (-1))-150, 
                (elemRect.bottom - bodyRect.bottom)+2, 
                (elemRect.left - bodyRect.left)-100
            ];
        }
        else{
            offset = [
                (elemRect.top - bodyRect.top)-2, 
                ((elemRect.right - bodyRect.right) * (-1))-1, 
                (elemRect.bottom - bodyRect.bottom)+2, 
                (elemRect.left - bodyRect.left)-1
            ];
        }
    
        $('#' + element).css('clip-path', `inset(${offset[0]}px ${offset[1]}px calc(100% - ${offset[2]}px) ${offset[3]}px)`);
    }
    else{
        $('#' + element).css('display', 'none')
    }

}

function getTotalBoundingBox(target) {
    const elem = document.getElementById(target);
    if (!elem) return null;

    let elemRect = elem.getBoundingClientRect();
    let minX = elemRect.left;
    let minY = elemRect.top;
    let maxX = elemRect.right;
    let maxY = elemRect.bottom;


    Array.from(elem.children).forEach(child => {
        let childRect = child.getBoundingClientRect();
        minX = Math.min(minX, childRect.left!=0?childRect.left:99999);
        minY = Math.min(minY, childRect.top!=0?childRect.top:99999);
        maxX = Math.max(maxX, childRect.right);
        maxY = Math.max(maxY, childRect.bottom);
    });


    return {
        width: maxX - minX,
        height: maxY - minY,
        left: minX,
        top: minY,
        right: maxX,
        bottom: maxY
    };
}

function show(element) {
    $("#" + element).css("display", "block")
    document.getElementById(element).style.animation = "showmenu 0.35s ease";
}

function hide(element) {
    document.getElementById(element).style.animation = "hidemenu 0.3s ease";
    setTimeout(function() {
        $("#" + element).css("display", "none")
    }, 300)
}

function isNumber(evt) {
    evt = (evt) ? evt : window.event
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false
    }
    return true
}

////////////////////////////////////////////// DRAGGING //////////////////////////////////////////////////

OGPos = {}

function dragElement(elmnt, item, keyid, index) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

  if (OGPos[item] == null){
    OGPos[item] = { x: null, y: null }
    OGPos[item].x = elmnt.offsetLeft
    OGPos[item].y = elmnt.offsetTop
  }

  elmnt.onmousedown = dragMouseDown

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();

    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event
    e.preventDefault()

    pos1 = pos3 - e.clientX
    pos2 = pos4 - e.clientY
    pos3 = e.clientX
    pos4 = e.clientY

    elmnt.style.opacity = "0.8"

    elmnt.style.top = (elmnt.offsetTop - pos2) + "px"
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"

    if (elementsOverlap(elmnt, document.getElementById("key_panel"), true) == false && elementsOverlap(elmnt, document.getElementById("actions_panel")) == false){
        closeDragElement(e)
    }

    for (let i = (CurrentKeyPage*24)-24; i < CurrentKeyPage*24; i++) {
        if (document.getElementById("empty_"+i) != undefined){
            if (elementsOverlapPrecise(document.getElementById("empty_"+i), e.clientX, e.clientY) == false){
                document.getElementById('empty_'+i).classList.remove("hovered")
            }
            else{
                document.getElementById('empty_'+i).classList.add("hovered")
            }
        }
    }

    for (let i = 0; i < ClosestPlayers.length; i++) {
        if (elementsOverlapPrecise(document.getElementById("player_"+i), e.clientX, e.clientY) == false){
            document.getElementById('player_'+i).classList.remove("hovered")
        }
        else{
            document.getElementById('player_'+i).classList.add("hovered")
        }
    }

    if (elementsOverlapPrecise(document.getElementById("key_delete"), e.clientX, e.clientY) == false){
        document.getElementById('key_delete').classList.remove("hovered")
    }
    else{
        document.getElementById('key_delete').classList.add("hovered")
    }
  }

  function closeDragElement(e) {
    UseElement(elmnt, item, e.clientX, e.clientY, keyid, index)
    elmnt.style.opacity = "1"
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

function UseElement(elmnt, item, X, Y, keyid, index){
  let elm = elmnt

    for (let i = (CurrentKeyPage*24)-24; i < CurrentKeyPage*24; i++) {
        if (document.getElementById("empty_"+i) != undefined){
            if (elementsOverlapPrecise(document.getElementById("empty_"+i), X, Y) == false){
                document.getElementById('empty_'+i).classList.remove("hovered")
            }
            else{
                for (const key in ChangedKeys) {
                    if (ChangedKeys[key].keyid == keyid){
                        ChangedKeys.splice(key, 1)
                    }
                }
                for (const key in MyKeys) {
                    if (MyKeys[key].id == keyid){
                        if (MyKeys[key].oldSlot == undefined || MyKeys[key].oldSlot != i+1){
                            ChangedKeys.push({keyid: keyid, slot:i+1, plate:MyKeys[key].plate})
                            break
                        }
                    }
                }
                
                MakeKeysNotDraggable()
                if (MyKeys[index].oldSlot == undefined){
                    MyKeys[index].oldSlot = MyKeys[index].slot
                }
                MyKeys[index].slot = i+1
                InsertDataToPanel()
                MakeKeysDraggable()
                return
            }
        }
    }

    for (let i = 0; i < ClosestPlayers.length; i++) {
        if (elementsOverlapPrecise(document.getElementById("player_"+i), X, Y)){
            $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "giveKey", playerid:ClosestPlayers[i].id, keyid, table:ChangedKeys}))
            document.getElementById('player_'+i).classList.remove("hovered")
            ChangedKeys = []
            return
        }
    }

    if (elementsOverlapPrecise(document.getElementById("key_delete"), X, Y)){
        $.post('https://' + GetParentResourceName() + '/UseButton', JSON.stringify({action: "deleteKey", keyid, table:ChangedKeys, plate:MyKeys[index].plate}))
        document.getElementById('key_delete').classList.remove("hovered")
        ChangedKeys = []
        return
    }

   /* if (elementsOverlap(elm, document.getElementById("head_box")) && Damages.head){
        ItemAnim(elm, item)
    }
    else if(elementsOverlap(elm, document.getElementById("head_box")) && Damages.head == false){
        WrongItemAnim(elm, item)
    }
    else{
        elm.style.top = OGPos[item].y + "px"
        elm.style.left = OGPos[item].x + "px"
    }*/

    elm.style.top = OGPos[item].y + "px"
    elm.style.left = OGPos[item].x + "px"
}

function ItemAnim(elm, item, part){
  elm.style.animation = 'none';
  elm.offsetHeight;
  elm.style.animation = "itemuseanim 1.2s";
  setTimeout(function(){
    elm.style.top = OGPos[item].y + "px"
    elm.style.left = OGPos[item].x + "px"
    elm.style.animation = 'none';
    Close()
  },1200)

  $.post('https://'+GetParentResourceName()+'/UseButton', JSON.stringify({action:"MedicerMenu", type:"useitem", item, you:Mediceryou, part}))
}

function WrongItemAnim(elm, item){
  elm.style.animation = 'none';
  elm.offsetHeight;
  elm.style.animation = "itemnotuseanim 0.8s";
  setTimeout(function(){
    elm.style.top = OGPos[item].y + "px"
    elm.style.left = OGPos[item].x + "px"
    elm.style.animation = 'none';
  },800)
}

function elementsOverlap(el1, el2, value) {
    const domRect1 = el1.getBoundingClientRect();
    const domRect2 = el2.getBoundingClientRect();
  
    if (value){
        return !(
            domRect1.top+50 > domRect2.bottom ||
            domRect1.right-50 < domRect2.left ||
            domRect1.bottom-50 < domRect2.top ||
            domRect1.left-50 > domRect2.right
          );
    }
    else{
        return !(
            domRect1.top+50 > domRect2.bottom ||
            domRect1.right-50 < domRect2.left ||
            domRect1.bottom-50 < domRect2.top ||
            domRect1.left+50 > domRect2.right
          );
    }
}

function elementsOverlapPrecise(el1, X, Y) {
    const domRect1 = el1.getBoundingClientRect();
    
    return !(
        domRect1.top > Y ||
        domRect1.right < X ||
        domRect1.bottom < Y ||
        domRect1.left > X
        );
    
}