// api.js
document.addEventListener("DOMContentLoaded", () => {
    const profileBtn = document.getElementById('profile-btn');
    const dropdownMenu = document.getElementById('dropdown-menu');
    const menuBtn = document.getElementById('menu-btn');
    const mainNav = document.getElementById('main-nav');
    const logoutBtn = document.getElementById('logout-btn');

    if (profileBtn && dropdownMenu) {
        profileBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            dropdownMenu.classList.toggle('show');
            if (mainNav) mainNav.classList.remove('show');
        });
    }

    if (menuBtn && mainNav) {
        menuBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            e.preventDefault();
            mainNav.classList.toggle('show');
            if (dropdownMenu) dropdownMenu.classList.remove('show');
        });
    }

    logoutBtn.addEventListener('click', () => {
        console.log("Logout")
        localStorage.removeItem('access_token');
        localStorage.removeItem('refresh_token');
        document.cookie = "access_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC;";
        document.cookie = "refresh_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC;";
    });

    document.addEventListener('click', () => {
        if (dropdownMenu) dropdownMenu.classList.remove('show');
        if (mainNav) mainNav.classList.remove('show');
    });

    if (document.getElementById('items-table-body')) loadItems();
    if (document.getElementById('locations-table-body')) loadLocations();
    if (document.getElementById('projects-table-body')) loadProjects();
    if (document.getElementById('account-settings-content')) loadAccountSettings();

    setupPasswordVisibilityToggles();
    loadProfile();
});

function closeModal(id) {
    document.getElementById(id).classList.remove('show');
}

async function apiRequest(endpoint, method = 'GET', body = null) {
    const options = {
        method,
        headers: { 'Content-Type': 'application/json' }
    };
    if (body) options.body = JSON.stringify(body);

    try {
        const response = await fetch(endpoint, options);
        if (!response.ok && response.status !== 204) {
            const errText = await response.text();
            throw new Error(errText || `HTTP Error ${response.status}`);
        }
        if (response.status === 204) return null;
        return await response.json();
    } catch (err) {
        alert("Action failed: " + err.message);
        throw err;
    }
}

// ---- ITEMS ----
async function loadItems() {
    const data = await apiRequest('/api/item');
    const tbody = document.getElementById('items-table-body');
    tbody.innerHTML = '';

    if (!data.items || data.items.length === 0) {
        tbody.innerHTML = '<tr><td colspan="4" style="text-align: center;">No items found.</td></tr>';
        return;
    }

    data.items.forEach(item => {
        tbody.innerHTML += `
            <tr>
                <td style="font-weight: 600;">${item.name}</td>
                <td><span class="badge">${item.category}</span></td>
                <td style="font-family: monospace; font-size: 1.05rem;">${item.total_quantity || 0}</td>
                <td style="text-align: right;">
                    <button class="btn btn-secondary" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem; border-color: var(--success); color: var(--success);" onclick='openStockModal(${JSON.stringify(item).replace(/'/g, "&#39;")})'>Stock</button>
                    <button class="btn btn-secondary" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick='editItem(${JSON.stringify(item).replace(/'/g, "&#39;")})'>Edit</button>
                    <button class="btn btn-secondary danger-btn" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick="deleteItem(${item.id})">Del</button>
                </td>
            </tr>
        `;
    });
}

function openItemModal() {
    document.getElementById('item-form').reset();
    document.getElementById('item-id').value = '';
    document.getElementById('item-modal-title').innerText = 'New Item';
    document.getElementById('item-modal').classList.add('show');
}

function editItem(item) {
    document.getElementById('item-id').value = item.id;
    document.getElementById('item-name').value = item.name;
    document.getElementById('item-category').value = item.category;
    document.getElementById('item-desc').value = item.description;
    //document.getElementById('item-qty').value = item.total_quantity;
    document.getElementById('item-modal-title').innerText = 'Edit Item';
    document.getElementById('item-modal').classList.add('show');
}

async function saveItem(event) {
    event.preventDefault();
    const id = document.getElementById('item-id').value;
    const payload = {
        name: document.getElementById('item-name').value,
        category: document.getElementById('item-category').value,
        description: document.getElementById('item-desc').value,
        //total_quantity: parseInt(document.getElementById('item-qty').value, 10)
    };

    const method = id ? 'PUT' : 'POST';
    const endpoint = id ? `/api/item?id=${id}` : '/api/item';

    await apiRequest(endpoint, method, payload);
    closeModal('item-modal');
    loadItems();
}

async function deleteItem(id) {
    if (confirm("Are you sure you want to delete this item?")) {
        await apiRequest(`/api/item?id=${id}`, 'DELETE');
        loadItems();
    }
}

// ---- LOCATIONS ----
async function loadLocations() {
    const data = await apiRequest('/api/location');
    const tbody = document.getElementById('locations-table-body');
    tbody.innerHTML = '';

    if (!data.locations || data.locations.length === 0) {
        tbody.innerHTML = '<tr><td colspan="2" style="text-align: center;">No locations found.</td></tr>';
        return;
    }

    data.locations.forEach(loc => {
        tbody.innerHTML += `
            <tr>
                <td style="font-weight: 600;">${loc.name}</td>
                <td style="text-align: right;">
                    <button class="btn btn-secondary" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick="editLocation(${loc.id}, '${loc.name}')">Edit</button>
                    <button class="btn btn-secondary danger-btn" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick="deleteLocation(${loc.id})">Delete</button>
                </td>
            </tr>
        `;
    });
}

function openLocationModal() {
    document.getElementById('location-form').reset();
    document.getElementById('location-id').value = '';
    document.getElementById('location-modal-title').innerText = 'New Location';
    document.getElementById('location-modal').classList.add('show');
}

function editLocation(id, name) {
    document.getElementById('location-id').value = id;
    document.getElementById('location-name').value = name;
    document.getElementById('location-modal-title').innerText = 'Edit Location';
    document.getElementById('location-modal').classList.add('show');
}

async function saveLocation(event) {
    event.preventDefault();
    const id = document.getElementById('location-id').value;
    const payload = { name: document.getElementById('location-name').value };

    const method = id ? 'PUT' : 'POST';
    const endpoint = id ? `/api/location?id=${id}` : '/api/location';

    await apiRequest(endpoint, method, payload);
    closeModal('location-modal');
    loadLocations();
}

async function deleteLocation(id) {
    if (confirm("Are you sure you want to delete this location?")) {
        await apiRequest(`/api/location?id=${id}`, 'DELETE');
        loadLocations();
    }
}

// ---- PROJECTS ----
async function loadProjects() {
    const data = await apiRequest('/api/project');
    const tbody = document.getElementById('projects-table-body');
    tbody.innerHTML = '';

    if (!data.projects || data.projects.length === 0) {
        tbody.innerHTML = '<tr><td colspan="3" style="text-align: center;">No projects found.</td></tr>';
        return;
    }

    data.projects.forEach(proj => {
        tbody.innerHTML += `
            <tr>
                <td style="font-weight: 600;">${proj.name}</td>
                <td style="color: var(--text-muted);">${proj.description}</td>
                <td style="text-align: right;">
                    <button class="btn btn-secondary" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem; border-color: var(--accent); color: var(--accent);" onclick='openAssociationModal(${JSON.stringify(proj).replace(/'/g, "&#39;")})'>Items</button>
                    <button class="btn btn-secondary" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick='editProject(${JSON.stringify(proj).replace(/'/g, "&#39;")})'>Edit</button>
                    <button class="btn btn-secondary danger-btn" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick="deleteProject(${proj.id})">Del</button>
                </td>
            </tr>
        `;
    });
}

function openProjectModal() {
    document.getElementById('project-form').reset();
    document.getElementById('project-id').value = '';
    document.getElementById('project-modal-title').innerText = 'New Project';
    document.getElementById('project-modal').classList.add('show');
}

function editProject(proj) {
    document.getElementById('project-id').value = proj.id;
    document.getElementById('project-name').value = proj.name;
    document.getElementById('project-desc').value = proj.description;
    document.getElementById('project-modal-title').innerText = 'Edit Project';
    document.getElementById('project-modal').classList.add('show');
}

async function saveProject(event) {
    event.preventDefault();
    const id = document.getElementById('project-id').value;
    const payload = {
        name: document.getElementById('project-name').value,
        description: document.getElementById('project-desc').value
    };

    const method = id ? 'PUT' : 'POST';
    const endpoint = id ? `/api/project?id=${id}` : '/api/project';

    await apiRequest(endpoint, method, payload);
    closeModal('project-modal');
    loadProjects();
}

async function deleteProject(id) {
    if (confirm("Are you sure you want to delete this project?")) {
        await apiRequest(`/api/project?id=${id}`, 'DELETE');
        loadProjects();
    }
}

// ---- STOCK ----
async function openStockModal(item) {
    document.getElementById('stock-modal-title').innerText = `Stock: ${item.name}`;
    document.getElementById('stock-item-id').value = item.id;
    document.getElementById('stock-qty').value = '';
    document.getElementById('stock-modal').classList.add('show');

    await reloadStockTable(item.id);

    const locData = await apiRequest('/api/location');
    const locSelect = document.getElementById('stock-location');
    locSelect.innerHTML = '<option value="">Select Location...</option>';
    if (locData.locations) {
        locData.locations.forEach(loc => {
            locSelect.innerHTML += `<option value="${loc.id}">${loc.name}</option>`;
        });
    }
}

async function reloadStockTable(itemId) {
    const tbody = document.getElementById('stock-table-body');
    tbody.innerHTML = '<tr><td colspan="3" style="text-align:center;">Loading...</td></tr>';

    try {
        const data = await apiRequest(`/api/stock?item_id=${itemId}`);
        tbody.innerHTML = '';
        if (!data.stock || data.stock.length === 0) {
            tbody.innerHTML = '<tr><td colspan="3" style="text-align: center;">No stock entries.</td></tr>';
            return;
        }

        for (const st of data.stock) {
            const locData = await apiRequest(`/api/location?id=${st.location_id}`);
            tbody.innerHTML += `
                <tr>
                    <td>${locData.name || `Location #${st.location_id}`}</td>
                    <td><span class="badge success">${st.quantity}</span></td>
                    <td style="text-align: right;">
                        <button class="btn btn-secondary danger-btn" style="padding: 0.2rem 0.5rem; font-size: 0.75rem;" onclick="deleteStock(${st.id}, ${itemId})">Del</button>
                    </td>
                </tr>
            `;
        }
    } catch (e) {
        tbody.innerHTML = '<tr><td colspan="3" style="text-align: center;">Failed to load.</td></tr>';
    }
}

async function saveStock(event) {
    event.preventDefault();
    const itemId = document.getElementById('stock-item-id').value;
    const payload = {
        item_id: parseInt(itemId, 10),
        location_id: parseInt(document.getElementById('stock-location').value, 10),
        quantity: parseInt(document.getElementById('stock-qty').value, 10)
    };

    await apiRequest('/api/stock', 'POST', payload);
    document.getElementById('stock-qty').value = '';
    await reloadStockTable(itemId);
    loadItems();
}

async function deleteStock(stockId, itemId) {
    if (confirm("Remove this stock entry?")) {
        await apiRequest(`/api/stock?id=${stockId}`, 'DELETE');
        await reloadStockTable(itemId);
        loadItems();
    }
}

// ---- ASSOCIATIONS ----
async function openAssociationModal(project) {
    document.getElementById('association-modal-title').innerText = `Items for: ${project.name}`;
    document.getElementById('assoc-project-id').value = project.id;
    document.getElementById('assoc-qty').value = '';
    document.getElementById('association-modal').classList.add('show');

    await reloadAssociationTable(project.id);

    const itemData = await apiRequest('/api/item');
    const itemSelect = document.getElementById('assoc-item');
    itemSelect.innerHTML = '<option value="">Select Item...</option>';
    if (itemData.items) {
        itemData.items.forEach(it => {
            itemSelect.innerHTML += `<option value="${it.id}">${it.name} (Avail: ${it.total_quantity})</option>`;
        });
    }
}

async function reloadAssociationTable(projectId) {
    const tbody = document.getElementById('association-table-body');
    tbody.innerHTML = '<tr><td colspan="3" style="text-align:center;">Loading...</td></tr>';

    try {
        const data = await apiRequest(`/api/association?project_id=${projectId}`);
        tbody.innerHTML = '';
        if (!data.associations || data.associations.length === 0) {
            tbody.innerHTML = '<tr><td colspan="3" style="text-align: center;">No allocated items.</td></tr>';
            return;
        }

        for (const asc of data.associations) {
            const itemData = await apiRequest(`/api/item?id=${asc.item_id}`);
            console.log(itemData)
            tbody.innerHTML += `
                <tr>
                    <td>${itemData.name || `Item #${asc.item_id}`}</td>
                    <td><span class="badge success">${asc.quantity}</span></td>
                    <td style="text-align: right;">
                        <button class="btn btn-secondary danger-btn" style="padding: 0.2rem 0.5rem; font-size: 0.75rem;" onclick="deleteAssociation(${asc.id}, ${projectId})">Del</button>
                    </td>
                </tr>
            `;
        }
    } catch (e) {
        tbody.innerHTML = '<tr><td colspan="3" style="text-align: center;">Failed to load.</td></tr>';
    }
}

async function saveAssociation(event) {
    event.preventDefault();
    const projectId = document.getElementById('assoc-project-id').value;
    const payload = {
        project_id: parseInt(projectId, 10),
        item_id: parseInt(document.getElementById('assoc-item').value, 10),
        quantity: parseInt(document.getElementById('assoc-qty').value, 10)
    };

    await apiRequest('/api/association', 'POST', payload);
    document.getElementById('assoc-qty').value = '';
    await reloadAssociationTable(projectId);
}

async function deleteAssociation(assocId, projectId) {
    if (confirm("Remove this item from the project?")) {
        await apiRequest(`/api/association?id=${assocId}`, 'DELETE');
        await reloadAssociationTable(projectId);
    }
}

async function handleDashboardView() {
    const locTbody = document.getElementById('dash-locations-body');
    const projTbody = document.getElementById('dash-projects-body');
    if (!locTbody && !projTbody) return;

    try {
        const locData = await apiRequest('/api/location');
        if (locTbody && locData && locData.locations) {
            locTbody.innerHTML = '';
            if (locData.locations.length === 0) {
                locTbody.innerHTML = '<tr><td style="color: var(--text-muted); padding: 1rem;">No locations found.</td></tr>';
            } else {
                locData.locations.forEach(loc => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `<td style="cursor: pointer; color: var(--accent); font-weight: 500; padding: 0.75rem 1rem;">${loc.name}</td>`;
                    tr.onclick = () => openDashboardModal(`/api/location?id=${loc.id}&content=true`, `Items in ${loc.name}`, 'contents');
                    locTbody.appendChild(tr);
                });
            }
        }

        const projData = await apiRequest('/api/project');
        if (projTbody && projData && projData.projects) {
            projTbody.innerHTML = '';
            if (projData.projects.length === 0) {
                projTbody.innerHTML = '<tr><td style="color: var(--text-muted); padding: 1rem;">No projects found.</td></tr>';
            } else {
                projData.projects.forEach(p => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `<td style="cursor: pointer; color: var(--accent); font-weight: 500; padding: 0.75rem 1rem;">${p.name}</td>`;
                    tr.onclick = () => openDashboardModal(`/api/project?id=${p.id}&details=true`, `Items assigned to ${p.name}`, 'items');
                    projTbody.appendChild(tr);
                });
            }
        }
    } catch (err) {
        console.error(err);
    }
}

async function openDashboardModal(url, title, dataKey) {
    document.getElementById('dash-modal-title').innerText = title;
    const tbody = document.getElementById('dash-modal-body');
    if (!tbody) return;
    tbody.innerHTML = '<tr><td colspan="2" style="text-align:center; padding:1.5rem; color:var(--text-muted);">Loading...</td></tr>';
    document.getElementById('dash-details-modal').classList.add('show');

    try {
        const data = await apiRequest(url);
        tbody.innerHTML = '';
        const list = data[dataKey] || [];
        if (list.length === 0) {
            tbody.innerHTML = '<tr><td colspan="2" style="color:var(--text-muted); text-align:center; padding:1.5rem;">No active items found.</td></tr>';
            return;
        }
        list.forEach(i => {
            tbody.innerHTML += `
                <tr>
                    <td style="color:var(--text); padding:0.75rem 1rem;">${i.item_name}</td>
                    <td style="text-align:right; padding:0.75rem 1rem;"><span class="badge success">${i.quantity}</span></td>
                </tr>
            `;
        });
    } catch (e) {
        tbody.innerHTML = '<tr><td colspan="2" style="color:var(--error); text-align:center; padding:1.5rem;">Failed to load data.</td></tr>';
    }
}

// ---- PROFILE ----
async function loadProfile() {
    const avatar = document.getElementById("avatar");
    const username = document.getElementById('username');

    try {
        const data = await apiRequest('/api/profile');

        avatar.innerText = data.username[0].toLocaleUpperCase();
        username.innerText = data.username;
    } catch (e) {
        username.innerHTML = '<tr><td colspan="2" style="color:var(--error); text-align:center; padding:1.5rem;">Failed to load data.</td></tr>';
    }
}

// ---- ACCOUNT SETTINGS ----
let latestRecoveryCodes = [];
let pendingTwoFactorSetupToken = "";
let currentPasskeys = [];

function showAccountSettingsMessage(message, type = 'success') {
    const box = document.getElementById('account-settings-message');
    if (!box) return;
    box.textContent = message;
    box.className = `message ${type}`;
    box.style.display = 'block';
}

function setupPasswordVisibilityToggles(root = document) {
    const eyeIcon = `
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M2.25 12s3.5-6.75 9.75-6.75S21.75 12 21.75 12 18.25 18.75 12 18.75 2.25 12 2.25 12Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
            <circle cx="12" cy="12" r="2.75" fill="none" stroke="currentColor" stroke-width="1.8"/>
        </svg>`;
    const eyeOffIcon = `
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M3 3l18 18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
            <path d="M10.58 10.58A2.75 2.75 0 0 0 13.42 13.42" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
            <path d="M7.1 7.7C3.95 9.55 2.25 12 2.25 12s3.5 6.75 9.75 6.75c1.65 0 3.08-.47 4.29-1.15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M9.8 5.55A9.2 9.2 0 0 1 12 5.25c6.25 0 9.75 6.75 9.75 6.75a15.3 15.3 0 0 1-2.3 2.95" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>`;

    root.querySelectorAll('input[type="password"]').forEach((input) => {
        if (input.dataset.visibilityToggleAttached === 'true') return;
        input.dataset.visibilityToggleAttached = 'true';

        let wrapper = input.closest('.password-input-wrapper');
        if (!wrapper) {
            wrapper = document.createElement('div');
            wrapper.className = 'password-input-wrapper';
            input.parentNode.insertBefore(wrapper, input);
            wrapper.appendChild(input);
        }

        const toggle = document.createElement('button');
        toggle.type = 'button';
        toggle.className = 'password-toggle';
        toggle.innerHTML = eyeIcon;
        toggle.setAttribute('aria-label', `Show ${input.placeholder || 'password'}`);
        toggle.setAttribute('title', 'Show password');

        toggle.addEventListener('click', () => {
            const show = input.type === 'password';
            input.type = show ? 'text' : 'password';
            toggle.innerHTML = show ? eyeOffIcon : eyeIcon;
            toggle.setAttribute('aria-label', `${show ? 'Hide' : 'Show'} ${input.placeholder || 'password'}`);
            toggle.setAttribute('title', show ? 'Hide password' : 'Show password');
        });

        wrapper.appendChild(toggle);
    });
}

function setTwoFactorPanels(enabled) {
    const badge = document.getElementById('two-factor-badge');
    const status = document.getElementById('two-factor-status');
    const disabledPanel = document.getElementById('two-factor-disabled-panel');
    const enabledPanel = document.getElementById('two-factor-enabled-panel');

    if (!badge || !status || !disabledPanel || !enabledPanel) return;

    if (enabled) {
        badge.textContent = 'Enabled';
        badge.classList.add('success');
        status.textContent = '2FA is enabled for your account.';
        disabledPanel.style.display = 'none';
        enabledPanel.style.display = 'block';
    } else {
        badge.textContent = 'Disabled';
        badge.classList.remove('success');
        status.textContent = '2FA is disabled. Enable it to protect your account with an authenticator app.';
        disabledPanel.style.display = 'block';
        enabledPanel.style.display = 'none';
    }
}

function updateRecoveryCodeWarning(remaining, warning) {
    const warningBox = document.getElementById('recovery-codes-warning');
    if (!warningBox) return;

    if (warning) {
        warningBox.textContent = `You only have ${remaining} recovery code${remaining === 1 ? '' : 's'} left. Generate and download new codes soon.`;
        warningBox.style.display = 'block';
    } else {
        warningBox.style.display = 'none';
    }
}

function renderRecoveryCodes(codes) {
    latestRecoveryCodes = codes || [];
    const panel = document.getElementById('recovery-codes-panel');
    const list = document.getElementById('recovery-codes-list');
    if (!panel || !list) return;

    if (latestRecoveryCodes.length === 0) {
        panel.style.display = 'none';
        list.textContent = '';
        return;
    }

    list.textContent = latestRecoveryCodes.join('\n');
    panel.style.display = 'block';
}

async function loadAccountSettings() {
    try {
        const data = await apiRequest('/api/profile');

        const usernameInput = document.getElementById('settings-username');
        const remaining = document.getElementById('recovery-codes-remaining');

        if (usernameInput) usernameInput.value = data.username || '';
        if (remaining) remaining.innerText = data.recovery_codes_remaining || 0;
        updateRecoveryCodeWarning(data.recovery_codes_remaining || 0, !!data.recovery_codes_warning);

        setTwoFactorPanels(!!data.two_factor_enabled);
        setPasskeyPanels(!!data.passkeys_enabled, data.passkey_count || 0);
        renderRecoveryCodes([]);
        loadPasskeys();
        setupPasswordVisibilityToggles(document.getElementById('account-settings-content') || document);
    } catch (err) {
        showAccountSettingsMessage(err.message || 'Failed to load account settings.', 'error');
    }
}

async function saveAccountUsername(event) {
    event.preventDefault();

    try {
        const data = await apiRequest('/api/account/username', 'POST', {
            username: document.getElementById('settings-username').value.trim(),
            password: document.getElementById('settings-username-password').value
        });

        document.getElementById('settings-username-password').value = '';
        showAccountSettingsMessage('Username updated.');

        const username = document.getElementById('username');
        const avatar = document.getElementById('avatar');
        if (username) username.innerText = data.username;
        if (avatar && data.username) avatar.innerText = data.username[0].toLocaleUpperCase();
    } catch (err) {
        showAccountSettingsMessage(err.message || 'Could not update username.', 'error');
    }
}

async function saveAccountPassword(event) {
    event.preventDefault();

    const currentPassword = document.getElementById('settings-current-password').value;
    const newPassword = document.getElementById('settings-new-password').value;
    const confirmPassword = document.getElementById('settings-confirm-password').value;

    if (newPassword !== confirmPassword) {
        showAccountSettingsMessage('New passwords do not match.', 'error');
        return;
    }

    try {
        const data = await apiRequest('/api/account/password', 'POST', {
            current_password: currentPassword,
            new_password: newPassword
        });

        if (data && data.access_token && data.refresh_token) {
            localStorage.setItem('access_token', data.access_token);
            localStorage.setItem('refresh_token', data.refresh_token);
        }

        document.getElementById('password-form').reset();
        showAccountSettingsMessage('Password updated. Your session was refreshed.');
    } catch (err) {
        showAccountSettingsMessage(err.message || 'Could not update password.', 'error');
    }
}

async function startTwoFactorSetup() {
    try {
        const data = await apiRequest('/api/2fa/setup', 'POST');
        const panel = document.getElementById('two-factor-setup-panel');
        const qr = document.getElementById('two-factor-qr');
        const secret = document.getElementById('two-factor-secret');
        const otpauth = document.getElementById('two-factor-otpauth');

        pendingTwoFactorSetupToken = data.setup_token || '';

        if (panel) panel.style.display = 'block';
        if (qr) {
            qr.src = data.qr_code;
            qr.style.display = data.qr_code ? 'block' : 'none';
        }
        if (secret) secret.textContent = data.secret || '';
        if (otpauth) {
            otpauth.href = data.otpauth_url || '#';
            otpauth.textContent = data.otpauth_url || 'No otpauth URL available';
        }

        showAccountSettingsMessage('Scan the QR code or enter the setup key manually, then confirm the 6-digit code.');
    } catch (err) {
        showAccountSettingsMessage(err.message || 'Could not start 2FA setup.', 'error');
    }
}

async function enableTwoFactor(event) {
    event.preventDefault();

    try {
        const data = await apiRequest('/api/2fa/enable', 'POST', {
            code: document.getElementById('two-factor-enable-code').value.trim(),
            setup_token: pendingTwoFactorSetupToken
        });

        document.getElementById('two-factor-enable-form').reset();
        document.getElementById('two-factor-setup-panel').style.display = 'none';
        pendingTwoFactorSetupToken = '';
        setTwoFactorPanels(true);
        renderRecoveryCodes(data.recovery_codes || []);

        const remaining = document.getElementById('recovery-codes-remaining');
        if (remaining) remaining.innerText = data.recovery_codes_remaining || (data.recovery_codes || []).length;
        updateRecoveryCodeWarning(data.recovery_codes_remaining || (data.recovery_codes || []).length, !!data.recovery_codes_warning);

        if (data.access_token && data.refresh_token) {
            localStorage.setItem('access_token', data.access_token);
            localStorage.setItem('refresh_token', data.refresh_token);
        }

        showAccountSettingsMessage('2FA enabled. Download your recovery codes now.');
        loadProfile();
    } catch (err) {
        showAccountSettingsMessage(err.message || 'Could not enable 2FA.', 'error');
    }
}

async function disableTwoFactor(event) {
    event.preventDefault();

    try {
        await apiRequest('/api/2fa/disable', 'POST', {
            password: document.getElementById('two-factor-disable-password').value,
            code: document.getElementById('two-factor-disable-code').value.trim()
        });

        document.getElementById('two-factor-disable-form').reset();
        localStorage.removeItem('access_token');
        localStorage.removeItem('refresh_token');
        setTwoFactorPanels(false);
        renderRecoveryCodes([]);
        updateRecoveryCodeWarning(0, false);
        showAccountSettingsMessage('2FA disabled. Redirecting to login because sessions were revoked.');
        setTimeout(() => {
            window.location.href = '/login';
        }, 1200);
    } catch (err) {
        showAccountSettingsMessage(err.message || 'Could not disable 2FA.', 'error');
    }
}

async function regenerateRecoveryCodes(event) {
    event.preventDefault();

    try {
        const data = await apiRequest('/api/2fa/recovery-codes/regenerate', 'POST', {
            password: document.getElementById('recovery-password').value,
            code: document.getElementById('recovery-code').value.trim()
        });

        document.getElementById('recovery-regenerate-form').reset();
        renderRecoveryCodes(data.recovery_codes || []);

        const remaining = document.getElementById('recovery-codes-remaining');
        if (remaining) remaining.innerText = (data.recovery_codes || []).length;
        updateRecoveryCodeWarning((data.recovery_codes || []).length, false);

        showAccountSettingsMessage('New recovery codes generated. Download them now.');
    } catch (err) {
        showAccountSettingsMessage(err.message || 'Could not regenerate recovery codes.', 'error');
    }
}

function downloadRecoveryCodes() {
    if (!latestRecoveryCodes || latestRecoveryCodes.length === 0) {
        showAccountSettingsMessage('No recovery codes available to download.', 'error');
        return;
    }

    const text = [
        'MiauInv recovery codes',
        'Save these somewhere safe. Each code can be used once.',
        '',
        ...latestRecoveryCodes,
        ''
    ].join('\n');

    const blob = new Blob([text], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'miauinv-recovery-codes.txt';
    document.body.appendChild(link);
    link.click();
    link.remove();
    URL.revokeObjectURL(url);
}

function webauthnSupported() {
    return window.PublicKeyCredential && navigator.credentials;
}

function webauthnBase64URLToBuffer(value) {
    const base64 = value.replace(/-/g, "+").replace(/_/g, "/");
    const padded = base64.padEnd(base64.length + (4 - base64.length % 4) % 4, "=");
    const binary = atob(padded);
    const bytes = new Uint8Array(binary.length);
    for (let i = 0; i < binary.length; i++) {
        bytes[i] = binary.charCodeAt(i);
    }
    return bytes.buffer;
}

function webauthnBufferToBase64URL(buffer) {
    const bytes = new Uint8Array(buffer);
    let binary = "";
    for (const byte of bytes) {
        binary += String.fromCharCode(byte);
    }
    return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/g, "");
}

function prepareCredentialCreationOptions(options) {
    const publicKey = options.publicKey || options;
    publicKey.challenge = webauthnBase64URLToBuffer(publicKey.challenge);
    publicKey.user.id = webauthnBase64URLToBuffer(publicKey.user.id);
    if (Array.isArray(publicKey.excludeCredentials)) {
        publicKey.excludeCredentials = publicKey.excludeCredentials.map((credential) => ({
            ...credential,
            id: webauthnBase64URLToBuffer(credential.id)
        }));
    }
    return publicKey;
}

function attestationCredentialToJSON(credential) {
    const response = credential.response;
    return {
        id: credential.id,
        rawId: webauthnBufferToBase64URL(credential.rawId),
        type: credential.type,
        response: {
            clientDataJSON: webauthnBufferToBase64URL(response.clientDataJSON),
            attestationObject: webauthnBufferToBase64URL(response.attestationObject),
            transports: typeof response.getTransports === 'function' ? response.getTransports() : []
        },
        clientExtensionResults: credential.getClientExtensionResults()
    };
}

function setPasskeyPanels(enabled, count) {
    const badge = document.getElementById('passkey-badge');
    const status = document.getElementById('passkey-status');
    const unsupported = document.getElementById('passkey-unsupported-message');
    const addForm = document.getElementById('passkey-add-form');

    if (unsupported) unsupported.style.display = webauthnSupported() ? 'none' : 'block';
    if (addForm) {
        for (const element of addForm.elements) {
            element.disabled = !webauthnSupported();
        }
    }
    if (!badge || !status) return;

    if (enabled) {
        badge.textContent = 'Enabled';
        badge.classList.add('success');
        status.textContent = `${count} passkey${count === 1 ? '' : 's'} registered for this account.`;
    } else {
        badge.textContent = 'Disabled';
        badge.classList.remove('success');
        status.textContent = 'No passkeys are registered for this account.';
    }
}

function renderPasskeys(passkeys) {
    currentPasskeys = passkeys || [];
    const list = document.getElementById('passkey-list');
    if (!list) return;

    if (currentPasskeys.length === 0) {
        list.innerHTML = '<p style="color: var(--text-muted); margin: 0;">No passkeys registered.</p>';
        return;
    }

    list.innerHTML = currentPasskeys.map((passkey) => {
        const created = passkey.created_at ? new Date(passkey.created_at * 1000).toLocaleString() : 'unknown';
        const lastUsed = passkey.last_used_at ? new Date(passkey.last_used_at * 1000).toLocaleString() : 'never';
        const id = escapeAttr(passkey.id);
        return `
            <div style="border: 1px solid var(--border); border-radius: 12px; padding: 1rem; display: grid; gap: 0.75rem;">
                <div style="display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap;">
                    <div>
                        <strong style="color: var(--text);">${escapeHTML(passkey.name || 'Passkey')}</strong>
                        <div style="color: var(--text-muted); font-size: 0.85rem; margin-top: 0.25rem;">Created: ${escapeHTML(created)}</div>
                        <div style="color: var(--text-muted); font-size: 0.85rem; margin-top: 0.25rem;">Last used: ${escapeHTML(lastUsed)}</div>
                    </div>
                    <button type="button" class="btn btn-secondary danger-btn" style="width: auto; padding: 0.45rem 0.8rem;" onclick="showPasskeyDeleteForm('${id}')">Remove</button>
                </div>
                <div id="passkey-delete-form-${id}" style="display: none; border-top: 1px solid var(--border); padding-top: 0.75rem;">
                    <p style="color: var(--text-muted); margin-bottom: 0.75rem;">Confirm with your current password to remove this passkey.</p>
                    <div class="form-group" style="margin-bottom: 0.75rem;">
                        <input type="password" id="passkey-delete-password-${id}" placeholder="Current password" autocomplete="current-password">
                    </div>
                    <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
                        <button type="button" class="btn btn-secondary danger-btn" style="width: auto; padding: 0.45rem 0.8rem;" onclick="confirmDeletePasskey('${id}')">Confirm removal</button>
                        <button type="button" class="btn btn-secondary" style="width: auto; padding: 0.45rem 0.8rem;" onclick="hidePasskeyDeleteForm('${id}')">Cancel</button>
                    </div>
                </div>
            </div>
        `;
    }).join('');

    setupPasswordVisibilityToggles(list);
}

async function loadPasskeys() {
    if (!document.getElementById('passkey-list')) return;
    try {
        const data = await apiRequest('/api/passkeys');
        renderPasskeys(data.passkeys || []);
        setPasskeyPanels(!!data.passkeys_enabled, data.passkey_count || 0);
    } catch (err) {
        showAccountSettingsMessage(err.message || 'Could not load passkeys.', 'error');
    }
}

async function addPasskey(event) {
    event.preventDefault();

    if (!webauthnSupported()) {
        showAccountSettingsMessage('Passkeys are not supported by this browser.', 'error');
        return;
    }

    const name = document.getElementById('passkey-name').value.trim() || 'Passkey';
    const password = document.getElementById('passkey-add-password').value;

    try {
        const optionsData = await apiRequest('/api/passkeys/register/options', 'POST', { name, password });
        const publicKey = prepareCredentialCreationOptions(optionsData.options);
        const credential = await navigator.credentials.create({ publicKey });
        if (!credential) {
            throw new Error('Passkey creation was cancelled.');
        }

        const data = await apiRequest('/api/passkeys/register/finish', 'POST', {
            session_token: optionsData.session_token,
            name,
            credential: attestationCredentialToJSON(credential)
        });

        if (data.access_token && data.refresh_token) {
            localStorage.setItem('access_token', data.access_token);
            localStorage.setItem('refresh_token', data.refresh_token);
        }

        document.getElementById('passkey-add-form').reset();
        renderPasskeys(data.passkeys || []);
        setPasskeyPanels(!!data.passkeys_enabled, data.passkey_count || 0);
        showAccountSettingsMessage('Passkey added. Your session was refreshed.');
    } catch (err) {
        showAccountSettingsMessage(err.message || 'Could not add passkey.', 'error');
    }
}

function showPasskeyDeleteForm(id) {
    const form = document.getElementById(`passkey-delete-form-${id}`);
    const input = document.getElementById(`passkey-delete-password-${id}`);
    if (!form) return;
    form.style.display = 'block';
    setupPasswordVisibilityToggles(form);
    if (input) input.focus();
}

function hidePasskeyDeleteForm(id) {
    const form = document.getElementById(`passkey-delete-form-${id}`);
    const input = document.getElementById(`passkey-delete-password-${id}`);
    if (input) input.value = '';
    if (form) form.style.display = 'none';
}

async function confirmDeletePasskey(id) {
    if (!id) return;
    const input = document.getElementById(`passkey-delete-password-${id}`);
    const password = input ? input.value : '';
    if (!password) {
        showAccountSettingsMessage('Current password required to remove passkey.', 'error');
        return;
    }

    try {
        const data = await apiRequest('/api/passkeys', 'DELETE', { id, password });
        if (data.access_token && data.refresh_token) {
            localStorage.setItem('access_token', data.access_token);
            localStorage.setItem('refresh_token', data.refresh_token);
        }
        renderPasskeys(data.passkeys || []);
        setPasskeyPanels(!!data.passkeys_enabled, data.passkey_count || 0);
        showAccountSettingsMessage('Passkey removed. Your session was refreshed.');
    } catch (err) {
        showAccountSettingsMessage(err.message || 'Could not remove passkey.', 'error');
    }
}

async function deletePasskey(id) {
    showPasskeyDeleteForm(id);
}

async function disablePasskeys(event) {
    event.preventDefault();

    try {
        const data = await apiRequest('/api/passkeys/disable', 'POST', {
            password: document.getElementById('passkey-disable-password').value
        });
        if (data.access_token && data.refresh_token) {
            localStorage.setItem('access_token', data.access_token);
            localStorage.setItem('refresh_token', data.refresh_token);
        }
        document.getElementById('passkey-disable-form').reset();
        renderPasskeys([]);
        setPasskeyPanels(false, 0);
        showAccountSettingsMessage('Passkeys disabled. Your session was refreshed.');
    } catch (err) {
        showAccountSettingsMessage(err.message || 'Could not disable passkeys.', 'error');
    }
}

function escapeHTML(value) {
    return String(value)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
}

function escapeAttr(value) {
    return escapeHTML(value).replace(/`/g, '&#96;');
}