// 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');

    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');
        });
    }

    window.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();
});

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;
        }

        data.stock.forEach(st => {
            tbody.innerHTML += `
                <tr>
                    <td>${st.location_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;
        }

        data.associations.forEach(asc => {
            tbody.innerHTML += `
                <tr>
                    <td>${asc.item_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);
    }
}