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

{% block title %}Inventory Management{% endblock %}
{% block body_class %}inventory-page{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/hil-pages/inventory.css">
{% endblock %}
{% block content %}
<div class="hil-page-tools">
    {{ ui.button('Admin Dashboard', '/admin', 'secondary') }}
    {{ ui.button('Help Center', '/help-center', 'secondary') }}
</div>

<div class="inventory-shell">
    <aside class="inventory-sidebar" aria-label="Inventory navigation">
        <h1 class="sidebar-brand">{{ brand_name }}</h1>
        <p class="sidebar-kicker">Inventory Management</p>

        <h2 class="sidebar-title">Quick Actions</h2>
        <a class="sidebar-link" href="/add-product">Add Product</a>
        <a class="sidebar-link" href="/add-service">Add Service</a>
        <a class="sidebar-link" href="/bulk-import-products">Bulk Import</a>
        <a class="sidebar-link" href="/restock">Restock Planning</a>
        <a class="sidebar-link" href="/inventory-intelligence">Inventory Intelligence</a>
        <a class="sidebar-link" href="/restock/suppliers">Wholesalers</a>

        <h2 class="sidebar-title">Inventory</h2>
        <a class="sidebar-link active" href="/inventory">Products</a>
        <a class="sidebar-link" href="/scan?return_to=/inventory&target=/inventory">Barcode Scanner</a>
        <a class="sidebar-link" href="/scanner-center?return_to=/inventory&target=/inventory">Scanner Center</a>

        <h2 class="sidebar-title">Navigation</h2>
        <a class="sidebar-link" href="/admin">Admin Dashboard</a>
        <a class="sidebar-link" href="/sales">Sales</a>
        <a class="sidebar-link" href="/reports">Reports</a>
    </aside>

    <main class="inventory-content">
        <header class="page-header">
            <div>
                <h1>Inventory Management</h1>
                <p>Update stock, review fund sources, and manage products without moving the sidebar.</p>
            </div>
            <a class="btn secondary" href="/admin">Back to Admin</a>
        </header>

        <div class="safety-banner">
            After major product changes, regenerate and download your personal inventory CSV from
            <a href="/ai-csv-agent">AI CSV Agent</a>. If data is missing after an app update, use
            <a href="/bulk-import-products">Bulk Import</a> with your last downloaded CSV to recover products.
        </div>

        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="flash-message {{ category }}">{{ message }}</div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <section class="inventory-panel">
            <div class="panel-header">
                <h2>Products</h2>
                <span>Total products: {{ total_products or 0 }}</span>
            </div>

            {% for item in products %}
                {% set p = item.product %}
                <article class="product-item">
                    <div class="product-topline">
                        <span class="product-name">{{ p.name }}</span> |
                        Type: {{ (p.item_type or "product")|title }} |
                        Selling: {{ currency_symbol }}{{ "%.2f"|format(p.price or 0) }} |
                        Buying: {{ currency_symbol }}{{ "%.2f"|format(p.buying_price or 0) }} |
                        Stock: {{ p.stock }}
                    </div>

                    <div class="fund-breakdown">
                        Fund source:
                        {% if item.fund_breakdown %}
                            {% for fund in item.fund_breakdown %}
                                <span class="fund-pill">{{ fund.fund_source|title }}: {{ fund.quantity }} unit(s) at {{ currency_symbol }}{{ "%.2f"|format(fund.buying_price or 0) }}</span>
                            {% endfor %}
                        {% else %}
                            <span class="fund-pill">{{ (p.fund_source or "business")|title }}</span>
                        {% endif %}
                    </div>

                    <div class="product-actions">
                        <form method="POST" action="/update-stock/{{ p.id }}">
                            <label for="stock-{{ p.id }}">New Stock:</label>
                            <input id="stock-{{ p.id }}" name="stock" placeholder="Stock" type="number" min="0" required>
                            <button type="submit">Update</button>
                        </form>

                        <form method="POST" action="/delete/{{ p.id }}" onsubmit="return confirm('Are you sure you want to delete this product?');">
                            <button class="delete-button" type="submit">Delete</button>
                        </form>
                    </div>
                </article>
            {% else %}
                <p class="empty">No products found.</p>
            {% endfor %}

            <div class="pagination">
                <div>
                    <strong>Total products:</strong> {{ total_products or 0 }} |
                    <strong>Page:</strong> {{ page or 1 }} / {{ total_pages or 1 }}
                </div>
                <div class="pagination-actions">
                    {% if (page or 1) > 1 %}
                    <a class="btn secondary" href="/inventory?page={{ (page or 1) - 1 }}">Previous</a>
                    {% endif %}
                    {% if (page or 1) < (total_pages or 1) %}
                    <a class="btn secondary" href="/inventory?page={{ (page or 1) + 1 }}">Next</a>
                    {% endif %}
                </div>
            </div>
        </section>
    </main>
</div>
{% endblock %}