const urlParams = new URLSearchParams(window.location.search);
const deviceNumber = urlParams.get('device');

function redirectToAccountPage() {
    window.location.href = `account.html?account=1`;
}

function redirectToDevicePage() {
    window.location.href = `device.html?device=1`;
}

function redirectToHomePage() {
    window.location.href = `Home.html?`;
}

document.addEventListener('DOMContentLoaded', async () =>  {

    const loadingScreen = document.getElementById('loading');
    const content = document.getElementById('content');

    const hamburger = document.getElementById('hamburger');
    const nav = document.querySelector('nav');

    let username;

    try {
        const response = await fetch('getUsername.php');
        const data = await response.json();

        if (data.username) {
            username = data.username;
        } else {
            window.location.href = 'User_Login.html';
        }
    } catch (error) {
        window.location.href = 'User_Login.html';
    }

    async function logError(message, accountnumber, username) {
        const params = new URLSearchParams();
        params.append('message', message);
        params.append('accountnumber', accountnumber || '');
        params.append('username', username || '');

        try {
            await fetch('log_error.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: params.toString()
            });
        } catch (error) {
        }
    }

    hamburger.addEventListener('click', () => {
        nav.classList.toggle('nav-open');
        hamburger.classList.toggle('is-active');
    });

    function toggleVisibility() {
        const yesRadio = document.getElementById('yes');
        const noRadio = document.getElementById('no');
        const typeOfLockDiv = document.getElementById('typeOFLock');
        const PinIP = document.getElementById('PinIP');
        const PassIP = document.getElementById('PassIP');
        const PatIP = document.getElementById('PatIP');

        if (yesRadio.checked) {
            typeOfLockDiv.style.display = 'grid';
        } else {
            typeOfLockDiv.style.display = 'none';
            PinIP.style.display = 'none';
            PassIP.style.display = 'none';
            PatIP.style.display = 'none';
        }
    }

    const lockTypeSelect = document.getElementById('D0S7');
    const messageDiv = document.getElementById('message');

    document.getElementById('yes').addEventListener('change', toggleVisibility);
    document.getElementById('no').addEventListener('change', toggleVisibility);
    toggleVisibility();

    lockTypeSelect.addEventListener('change', function () {
        const selectedValue = this.value;
        const PinIP = document.getElementById('PinIP');
        const PassIP = document.getElementById('PassIP');
        const PatIP = document.getElementById('PatIP');

        PinIP.style.display = 'none';
        PassIP.style.display = 'none';
        PatIP.style.display = 'none';

        if (selectedValue === 'Pin') {
            PinIP.style.display = 'grid';
        } else if (selectedValue === 'Password') {
            PassIP.style.display = 'grid';
        } else if (selectedValue === 'Pattern') {
            PatIP.style.display = 'grid';
        }
    });

    document.getElementById('device-title').textContent = `Device ${deviceNumber} Settings`;

    async function loadDeviceData(deviceNumber) {
        try {
            const url = `read_Dev_data.php?device=${encodeURIComponent(deviceNumber)}&username=${encodeURIComponent(username)}`;
            const response = await fetch(url);

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const deviceData = await response.json();
            const device = deviceData.find(device => device.id == deviceNumber);

            if (device) {
                document.getElementById('D0S1').value = device.deviceLabel || '';
                document.getElementById('D0S2').value = device.DeviceName || '';
                document.getElementById('D0S3').value = device.UDID || '';
                document.getElementById('D0S4').value = device.PlatName || '';
                document.getElementById('D0S5').value = device.AndroidVersion || '';

                if (device.hasLock === 'true') {
                    document.getElementById('yes').checked = true;
                } else {
                    document.getElementById('no').checked = true;
                }

                document.getElementById('D0S7').value = device.lockType || '';
                document.getElementById('D0S8').value = device.pin || '';
                document.getElementById('D0S9').value = device.password || '';
                document.getElementById('D0S10').value = device.pattern || '';
                document.getElementById('D0S11').value = device.consoleDims || '';

                toggleVisibility();
                lockTypeSelect.dispatchEvent(new Event('change'));
            }
        } catch (error) {
            logError(('Error loading device data:', error), deviceNumber, username);
        }
    }

    loadDeviceData(deviceNumber);

    document.getElementById('UpdateSetting').addEventListener('click', async function () {
        const data = {
            id: String(deviceNumber),
            deviceLabel: document.getElementById('D0S1').value || '',
            DeviceName: document.getElementById('D0S2').value || '',
            UDID: document.getElementById('D0S3').value || '',
            PlatName: document.getElementById('D0S4').value || '',
            AndroidVersion: document.getElementById('D0S5').value || '',
            hasLock: document.querySelector('input[name="lock"]').checked,
            lockType: document.getElementById('D0S7').value || '',
            pin: document.getElementById('D0S8').value || '',
            password: document.getElementById('D0S9').value || '',
            pattern: document.getElementById('D0S10').value || '',
            consoleDims: document.getElementById('D0S11').value || ''
        };

        try {
            const url = `read_Dev_data.php?device=${encodeURIComponent(deviceNumber)}&username=${username}`;
            const response = await fetch(url);
            const jsonData = await response.json();

            const index = jsonData.findIndex(device => device.id == deviceNumber);
            if (index !== -1) {
                jsonData[index] = data;
            } else {
                jsonData.push(data);
            }

            await fetch('update_Dev_data.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, deviceNumber, data })
            });

            messageDiv.style.display = 'grid';
            setTimeout(() => {
                messageDiv.style.display = 'none';
                window.location.reload();
            }, 3000);
        } catch (error) {
            logError(('Error updating device data:', error),deviceNumber, username);
        }
    });
    loadingScreen.style.display = 'none';
    content.style.display = 'block';
});