{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Add / Restock Product{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/hil-pages/add_products.css">
{% endblock %}
{% block content %}
<div class="container">

    <h1 class="brand">Gvelo Enterprise Platform</h1>

    <div class="card">

        <h2>Add / Restock Product</h2>

        <div class="hil-inline-aadf6a2b8b">
            <span class="hil-inline-bea3ad6b7c">&#127908;</span>
            <div>
                <strong class="hil-inline-dab557b96a">Voice Mode Available</strong>
                <div class="hil-inline-37c2dfb2ec">Tap the mic button (bottom-right) to use voice commands. Try: "Product name milk", "Price fifty", "Stock one hundred"</div>
            </div>
        </div>

        {% if error %}
            <p class="hil-inline-90ad96210e">{{ error }}</p>
        {% endif %}

        <div class="info-box">
            <strong>Restock protection:</strong> Search for an existing product below or enter a product manually.
            If the product ID, barcode, or the same product name with the same selling price already exists, the system
            will ask before adding the new quantity to current stock. Same name with a different
            selling price is saved as a separate product.
        </div>

        {% if duplicate_product and pending_product %}
        <div class="duplicate-alert">
            <h3 class="hil-inline-d462248a40">Duplicate Product Found</h3>
            <p>
                A matching product already exists. Confirm restock to add the latest quantity to current stock,
                or cancel to keep the current product unchanged.
            </p>
            <div class="duplicate-grid">
                <div class="duplicate-panel">
                    <h4>Current Product</h4>
                    <p><strong>Name:</strong> {{ duplicate_product.name }}</p>
                    <p><strong>ID:</strong> {{ duplicate_product.shop_product_id or 'Auto' }}</p>
                    <p><strong>Selling Price:</strong> {{ duplicate_product.price }}</p>
                    <p><strong>Buying Price:</strong> {{ duplicate_product.buying_price }}</p>
                    <p><strong>Stock:</strong> {{ duplicate_product.stock }}</p>
                    <p><strong>Barcode:</strong> {{ duplicate_product.barcode or 'None' }}</p>
                    <p><strong>Fund:</strong> {{ duplicate_product.fund_source }}</p>
                </div>
                <div class="duplicate-panel">
                    <h4>Quantity To Add</h4>
                    <p><strong>Name:</strong> {{ pending_product.name }}</p>
                    <p><strong>ID:</strong> {{ pending_product.product_id or 'Keep current / Auto' }}</p>
                    <p><strong>Selling Price:</strong> {{ pending_product.price }}</p>
                    <p><strong>Buying Price:</strong> {{ pending_product.buying_price }}</p>
                    <p><strong>Stock:</strong> {{ pending_product.stock }}</p>
                    <p><strong>Barcode:</strong> {{ pending_product.barcode or 'None' }}</p>
                    <p><strong>Fund:</strong> {{ pending_product.fund_source }}</p>
                </div>
            </div>
            <div class="duplicate-actions">
                <form method="POST" action="/add-product">
                    <input type="hidden" name="duplicate_action" value="restock">
                    <button type="submit" class="replace-btn">Add To Existing Stock</button>
                </form>
                <form method="POST" action="/add-product">
                    <input type="hidden" name="duplicate_action" value="revoke">
                    <button type="submit" class="revoke-btn">Cancel / Keep Current</button>
                </form>
            </div>
        </div>
        {% endif %}

        <label><strong>Search existing product to restock:</strong></label>
        <input type="text" id="product-search" class="search-box" placeholder="Type product name, ID, or barcode..." autocomplete="off">
        <div id="search-results" class="search-results hil-inline-6b99de8b69"></div>

        <hr>

        <form method="POST" id="add-form">
            <input name="product_id" id="product_id" placeholder="Product ID (optional)" type="number" min="1">
            <input name="name" id="name" placeholder="Product Name" type="text" required>
            <input name="buying_price" id="buying_price" placeholder="Buying Price / Cost per Unit" type="number" min="0" step="0.01" required>
            <input name="price" id="price" placeholder="Selling Price" type="number" min="0" step="0.01" required>
            <input name="stock" id="stock" placeholder="Stock quantity" type="number" min="0" required>
            <label for="fund_source"><strong>Stock Fund Source</strong></label>
            <select name="fund_source" id="fund_source" required>
                <option value="business">Business funds</option>
                <option value="personal">Owner personal funds</option>
                <option value="loans">Loan funds</option>
            </select>
            <input name="barcode" id="barcode" placeholder="Barcode (optional)" type="text" value="{{ barcode }}">

            <button type="submit">Add / Restock Product</button>
        </form>

        <br>
        {{ ui.button('Scan Barcode', '/scanner-center?return_to=/add-product&amp;target=/add-product') }}
        <br>
        <hr>
        <h3>Bulk Import</h3>
        <p>For adding thousands or millions of products, use CSV upload:</p>
        {{ ui.button('Go to Bulk Import', '/bulk-import-products') }}
        <br><br>
        <a href="/inventory">Back to Inventory</a>

    </div>
</div>

<script>
const searchBox = document.getElementById("product-search");
const resultsBox = document.getElementById("search-results");
let searchTimeout;

searchBox.addEventListener("input", function() {
    clearTimeout(searchTimeout);
    const query = this.value.trim();

    if (query.length < 1) {
        resultsBox.style.display = "none";
        resultsBox.innerHTML = "";
        return;
    }

    searchTimeout = setTimeout(() => {
        fetch("/search-inventory?q=" + encodeURIComponent(query))
        .then(res => res.json())
        .then(data => {
            resultsBox.innerHTML = "";
            if (!data.length) {
                resultsBox.style.display = "none";
                return;
            }

            data.forEach(product => {
                const div = document.createElement("div");
                div.className = "search-item";
                div.innerHTML = `
                    <strong>${product.name}</strong>
                    <span class="restock-badge">Existing</span>
                    <br>
                    <span>ID: ${product.shop_product_id || 'Auto'} | Price: ${product.price} | Current Stock: ${product.stock} | Barcode: ${product.barcode || 'None'}</span>
                `;
                div.addEventListener("click", function() {
                    document.getElementById("product_id").value = product.shop_product_id || "";
                    document.getElementById("name").value = product.name;
                    document.getElementById("price").value = product.price;
                    document.getElementById("buying_price").value = product.buying_price || "";
                    document.getElementById("fund_source").value = product.fund_source || "business";
                    document.getElementById("barcode").value = product.barcode || "";
                    document.getElementById("stock").value = "";
                    document.getElementById("stock").focus();
                    document.getElementById("stock").placeholder = `Current stock is ${product.stock}. Enter quantity to add:`;
                    resultsBox.style.display = "none";
                    searchBox.value = "";
                });
                resultsBox.appendChild(div);
            });

            resultsBox.style.display = "block";
        });
    }, 250);
});

// Hide results when clicking outside
document.addEventListener("click", function(e) {
    if (!searchBox.contains(e.target) && !resultsBox.contains(e.target)) {
        resultsBox.style.display = "none";
    }
});
</script>

<script src="/static/voice-commands.js"></script>
<script>
VoiceCommands.init({
    page: 'add-product',
    onCommand: function(cmd) {
        if (cmd.action === 'set_name') {
            document.getElementById('name').value = cmd.value;
            document.getElementById('name').focus();
        } else if (cmd.action === 'set_price') {
            document.getElementById('price').value = cmd.value;
            document.getElementById('price').focus();
        } else if (cmd.action === 'set_buying_price') {
            document.getElementById('buying_price').value = cmd.value;
            document.getElementById('buying_price').focus();
        } else if (cmd.action === 'set_stock') {
            document.getElementById('stock').value = cmd.value;
            document.getElementById('stock').focus();
        } else if (cmd.action === 'set_barcode') {
            document.getElementById('barcode').value = cmd.value;
        } else if (cmd.action === 'set_product_id') {
            document.getElementById('product_id').value = cmd.value;
        } else if (cmd.action === 'submit') {
            document.getElementById('add-form').submit();
        } else if (cmd.action === 'clear') {
            document.getElementById('add-form').reset();
        }
    }
});
</script>
{% endblock %}