index.js

// --- References to screen elements ---
const inputName = document.getElementById('inputName');   // Input field for material name
const inputQty = document.getElementById('inputQty');     // Input field for quantity
const inputMin = document.getElementById('inputMin');     // Input field for minimum stock
const inputUnit = document.getElementById('inputUnit');   // Input field for unit of measurement
const stockList = document.getElementById('stockList');   // Container for the list of items
const footerBar = document.getElementById('footerBar');   // Footer bar for alerts/status
const totalItemsEl = document.getElementById('totalItems'); // Element showing total items count

// --- References to Modal elements ---
const modalOverlay = document.getElementById('modalOverlay'); // Overlay background for modal
const modalTitle = document.getElementById('modalTitle');     // Title inside modal
const modalQty = document.getElementById('modalQty');         // Input field for quantity in modal

// --- State Variables ---
let items = JSON.parse(localStorage.getItem('db_estoque_obra')) || []; // Load items from localStorage or start empty
let currentItemId = null; // Stores the ID of the item currently being edited in the modal

// --- FUNCTION 1: Add Item ---
function addItem() {
    const name = inputName.value.trim();   // Get and clean material name
    const qty = parseFloat(inputQty.value); // Convert quantity to number
    const min = parseFloat(inputMin.value); // Convert minimum stock to number
    const unit = inputUnit.value;           // Get unit of measurement

    // Validation: name must not be empty
    if (!name) {
        alert("Please enter the material name.");
        return;
    }

    // Create new item object
    const newItem = {
        id: Date.now(), // Unique ID based on timestamp
        name: name,
        qty: qty || 0,  // Default to 0 if empty
        min: min || 0,  // Default to 0 if empty
        unit: unit
    };

    // Add item to the beginning of the array (top of the list)
    items.unshift(newItem);
    
    saveToStorage();   // Save updated list to localStorage
    renderScreen();    // Refresh screen with new item
    resetForm();       // Clear form inputs
}

// --- FUNCTION 2: Render Screen ---
function renderScreen() {
    stockList.innerHTML = ''; // Clear current list
    let alerts = 0;           // Counter for items needing attention

    // If no items exist, show placeholder message
    if (items.length === 0) {
        stockList.innerHTML = '<p style="text-align:center; color:#999; padding:20px">No materials registered.</p>';
        updateFooter(0);
        return;
    }

    // Loop through items and build list
    items.forEach(item => {
        let statusClass = ''; // CSS class for stock status

        // Apply color logic based on quantity
        if (item.qty <= 0) {
            statusClass = 'critical'; // Red for out of stock
            alerts++;
        } else if (item.qty <= item.min) {
            statusClass = 'low'; // Yellow for low stock
            alerts++;
        }

        // Create list item element
        const li = document.createElement('li');
        li.className = `stock-item ${statusClass}`;
        li.innerHTML = `
            <div class="item-info">
                <h4>${item.name}</h4>
                <span>Minimum: ${item.min} ${item.unit}</span>
            </div>
            <div class="item-actions">
                <span class="qty-badge">${item.qty} <small>${item.unit}</small></span>
                <button class="btn-move" onclick="openModal(${item.id})">Move</button>
                <button class="btn-del" onclick="deleteItem(${item.id})">🗑️</button>
            </div>
        `;
        stockList.appendChild(li);
    });

    // Update total items count
    totalItemsEl.innerText = `${items.length} items registered`;
    updateFooter(alerts); // Update footer with alerts
}

// --- FUNCTION 3: Modal Control ---
function openModal(id) {
    const item = items.find(i => i.id === id); // Find item by ID
    if (item) {
        currentItemId = id; // Store current item ID
        modalTitle.innerText = `Material: ${item.name} (Current: ${item.qty} ${item.unit})`;
        modalQty.value = ''; // Clear modal input
        modalOverlay.style.display = 'flex'; // Show modal
        setTimeout(() => modalQty.focus(), 100); // Auto-focus input
    }
}

function closeModal() {
    modalOverlay.style.display = 'none'; // Hide modal
    currentItemId = null;                // Reset current item ID
}

function updateStock(type) {
    const amount = parseFloat(modalQty.value); // Get entered amount
    
    // Validate amount
    if (!amount || amount <= 0) {
        alert("Enter a valid quantity.");
        return;
    }

    const index = items.findIndex(i => i.id === currentItemId); // Find item index
    
    if (index !== -1) {
        if (type === 'in') {
            // Stock entry (add)
            items[index].qty += amount;
        } else {
            // Stock exit (subtract with validation)
            if (items[index].qty < amount) {
                alert("Error: Insufficient stock!");
                return;
            }
            items[index].qty -= amount;
        }
        
        saveToStorage(); // Save changes
        renderScreen();  // Refresh screen
        closeModal();    // Close modal
    }
}

// --- FUNCTION 4: Delete and Save ---
function deleteItem(id) {
    if (confirm("Are you sure you want to delete this item?")) {
        items = items.filter(i => i.id !== id); // Remove item by ID
        saveToStorage(); // Save updated list
        renderScreen();  // Refresh screen
    }
}

function saveToStorage() {
    localStorage.setItem('db_estoque_obra', JSON.stringify(items)); // Save items to localStorage
}

function resetForm() {
    inputName.value = ''; // Clear name field
    inputQty.value = 0;   // Reset quantity field
    inputName.focus();    // Focus back on name input
}

function updateFooter(alertCount) {
    if (alertCount > 0) {
        footerBar.style.backgroundColor = '#c0392b'; // Red background for alerts
        footerBar.innerText = `⚠️ ATTENTION: ${alertCount} items need restocking!`;
    } else {
        footerBar.style.backgroundColor = '#141618'; // Default background
        footerBar.innerText = `✅ System Operational - Stock Regular`;
    }
}

// Close modal when clicking outside of it
modalOverlay.addEventListener('click', (e) => {
    if (e.target === modalOverlay) closeModal();
});

// --- Initialize screen on page load ---
renderScreen();