{% extends "admin_base.html" %}
{% import "macros/admin_bulk_mapping_grid.html" as bmg %}
{% import "macros/admin_pagination_footer.html" as pag %}

{% block page_title %}Product Profit Breakdown Dashboard{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/product-profit-breakdown/assets/css/product-profit-admin.ui.css">
<link rel="stylesheet" href="/plugins/product-profit-breakdown/assets/css/profit-cost-grid.css">
{% endblock %}

{% block admin_content %}
{% set revenue = revenue | default(value=0) %}
{% set product_profit = product_profit | default(value=0) %}
{% set total_overhead = total_overhead | default(value=0) %}
{% set net = product_profit - total_overhead %}
<main class="blocks-workspace mx-auto w-full max-w-7xl space-y-8 px-4 py-6 sm:px-6" data-profit-dashboard>
<div class="blocks-workspace-notice" data-profit-feedback data-workspace-notice role="status" aria-live="polite" hidden></div>
<header class="flex flex-wrap items-start justify-between gap-4">
    <div>
        <h1 class="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">Profit Dashboard</h1>
        <p class="mt-2 text-sm text-muted">Monitor your margins and overhead expenses.</p>
    </div>
    <div class="flex flex-wrap gap-3">
            <button type="button" class="btn btn-secondary" id="btn-rebuild-profit-history" title="Rebuild profit snapshots from paid orders">
                <i class="fas fa-sync-alt"></i> Rebuild profit history
            </button>
    </div>
</header>

<section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4" aria-label="Profit overview">
    <div class="rounded-xl border border-[var(--border-color)] bg-[var(--bg-card)] p-5 shadow-sm">
        <div class="text-sm text-muted">Total Revenue</div>
        <div class="mt-2 text-2xl font-bold text-foreground">{{ currency_symbol }}{{ revenue | price }}</div>
    </div>
    <div class="rounded-xl border border-[var(--border-color)] bg-[var(--bg-card)] p-5 shadow-sm">
        <div class="text-sm text-muted">Product Profit</div>
        <div class="mt-2 text-2xl font-bold profit-status-green">{{ currency_symbol }}{{ product_profit | price }}</div>
    </div>
    <div class="rounded-xl border border-[var(--border-color)] bg-[var(--bg-card)] p-5 shadow-sm">
        <div class="text-sm text-muted">Overhead Expenses</div>
        <div class="mt-2 text-2xl font-bold profit-status-red">{{ currency_symbol }}{{ total_overhead | price }}</div>
    </div>
    <div class="rounded-xl border border-[var(--border-color)] bg-[var(--bg-card)] p-5 shadow-sm">
        <div class="text-sm text-muted">Net Earnings</div>
        <div class="mt-2 text-2xl font-bold {% if net < 0 %}profit-status-red{% else %}profit-status-green{% endif %}">
            {{ currency_symbol }}{{ net | price }}
        </div>
    </div>
</section>

<section class="grid gap-5 lg:grid-cols-2" aria-label="Product profitability">
    <div class="overflow-hidden rounded-xl border border-[var(--border-color)] bg-[var(--bg-card)]">
        <div class="border-b border-[var(--border-color)] px-4 py-3">
            <h2 class="text-base font-semibold text-foreground">Top Profitable Products</h2>
        </div>
        <div class="overflow-x-auto"><table class="blocks-workspace-table profit-dashboard-table min-w-full">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Total Profit</th>
                </tr>
            </thead>
            <tbody>
                {% for p in top_products | default(value=[]) %}
                <tr>
                    <td data-label="Product">{{ p.title }}</td>
                    <td data-label="Total Profit" class="profit-status-green">{{ currency_symbol }}{{ p.total_profit | price }}</td>
                </tr>
                {% else %}
                <tr><td colspan="2" class="py-10 text-center text-muted">No data yet</td></tr>
                {% endfor %}
            </tbody>
        </table></div>
    </div>

    <div class="overflow-hidden rounded-xl border border-[var(--border-color)] bg-[var(--bg-card)]">
        <div class="border-b border-[var(--border-color)] px-4 py-3">
            <h2 class="text-base font-semibold text-foreground">Loss-Making Products</h2>
        </div>
        <div class="overflow-x-auto"><table class="blocks-workspace-table profit-dashboard-table min-w-full">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Total Loss</th>
                </tr>
            </thead>
            <tbody>
                {% for p in loss_products | default(value=[]) %}
                <tr>
                    <td data-label="Product">{{ p.title }}</td>
                    <td data-label="Total Loss" class="profit-status-red">{{ currency_symbol }}{{ p.total_profit | price }}</td>
                </tr>
                {% else %}
                <tr><td colspan="2" class="py-10 text-center text-muted">No loss-making products found. Great job!</td></tr>
                {% endfor %}
            </tbody>
        </table></div>
    </div>
</section>

<section class="space-y-4" aria-labelledby="profit-cost-bulk-heading" data-plugin="product-profit-breakdown">
    <header class="mb-4">
        <h2 id="profit-cost-bulk-heading" class="text-xl font-semibold text-foreground">Product cost bulk update</h2>
        <p class="mt-2 text-sm text-muted">Set per-unit product, shipping, ads, and misc costs for each catalog product (not overhead expenses).</p>
    </header>

    <div id="profit-cost-mappings-container" class="overflow-hidden rounded-xl border border-[var(--border-color)] bg-[var(--bg-card)]">
        {{ bmg::mount(
            config_url="/plugins/product-profit-breakdown/assets/admin/costs_grid.json",
            pagination_prefix="profit-cost",
            currency_symbol=currency_symbol,
            mount_id="profit-cost-bulk-mapping-mount"
        ) }}
        {{ pag::simple_footer(prefix="profit-cost", page=1, total_pages=1, total=0, item_label="products") }}
    </div>
</section>

<section class="space-y-4" aria-labelledby="profit-expenses-heading">
    <header class="mb-4 flex flex-wrap items-start justify-between gap-4">
        <div>
            <h2 class="text-xl font-semibold text-foreground">Overhead expenses</h2>
            <p class="mt-2 text-sm text-muted">Manage rent, salaries, and other business costs.</p>
        </div>
        <button type="button" class="btn btn-primary" data-profit-action="add-expense"><i class="fas fa-plus" aria-hidden="true"></i> Add Expense</button>
    </header>

    <div class="overflow-hidden rounded-xl border border-[var(--border-color)] bg-[var(--bg-card)]">
        <div class="border-b border-[var(--border-color)] px-4 py-3">
            <h3 id="profit-expenses-heading" class="text-base font-semibold text-foreground">Expense ledger</h3>
        </div>
        <div class="overflow-x-auto">
            <table id="profit-expenses-table" class="blocks-workspace-table min-w-full profit-expenses-table">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Name</th>
                        <th>For</th>
                        <th>Type</th>
                        <th>Amount</th>
                        <th>Paid by</th>
                        <th>Paid to / note</th>
                        <th>Receipt</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% set expense_rows = expenses | default(value=[]) %}
                    {% if expense_rows | length > 0 %}
                    {% for e in expense_rows %}
                    <tr>
                        <td data-label="Date">{{ e.expense_date | date_in_tz(timezone=settings.timezone, format="%d %b %Y") }}</td>
                        <td data-label="Name">{{ e.name }}</td>
                        <td data-label="For">{{ e.category | replace(from="_", to=" ") | title }}</td>
                        <td data-label="Type">
                            <span class="blocks-workspace-badge">{{ e.expense_type | replace(from="_", to=" ") | upper }}</span>
                        </td>
                        <td data-label="Amount" class="profit-status-red">
                            {{ currency_symbol }}{{ e.amount | price }}
                        </td>
                        <td data-label="Paid by">{{ e.payment_method | upper }}</td>
                        <td data-label="Paid to / note">{{ e.vendor_name }}{% if e.reference %} · {{ e.reference }}{% endif %}{% if e.notes %}<div class="text-xs text-muted">{{ e.notes }}</div>{% endif %}</td>
                        <td data-label="Receipt">
                            {% if e.attachment_id %}<button type="button" class="btn btn-secondary btn-download-expense-receipt" data-id="{{ e.attachment_id }}">Download receipt</button>{% else %}<span class="text-muted">None</span>{% endif %}
                        </td>
                        <td data-label="Actions" class="text-right">
                            {% if e.voided_at %}<span class="blocks-workspace-badge">CANCELLED</span>{% else %}
                            <button type="button" class="btn btn-danger btn-void-expense" data-id="{{ e.id }}" title="Cancel this expense entry">
                                <i class="fas fa-undo" aria-hidden="true"></i> Cancel entry
                            </button>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                    {% else %}
                    <tr>
                        <td colspan="9" class="py-10 text-center text-muted">No expenses recorded. Click <strong>Add Expense</strong> to add one.</td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</section>

<section class="space-y-4" aria-labelledby="money-reconciliation-heading" data-money-reconciliation>
    <header>
        <h2 id="money-reconciliation-heading" class="text-xl font-semibold text-foreground">Bank and UPI statement check</h2>
        <p class="mt-2 max-w-3xl text-sm text-muted">Upload a statement saved as a CSV file, or enter a line below. Download the template first if needed. Blocks matches only the same amount and deposit/withdrawal direction. This is a review aid; it does not connect to your bank.</p>
    </header>
    <div class="rounded-xl border border-[var(--border-color)] bg-[var(--bg-card)] p-4">
        <div class="flex flex-wrap items-center gap-3">
            <a class="btn btn-secondary" href="/plugins/product-profit-breakdown/assets/admin/bank_statement_template.csv" download>Download CSV template</a>
            <label class="text-sm">Choose statement CSV<input id="statement-csv-file" class="blocks-control mt-1 block w-full" type="file" accept=".csv,text/csv" /></label>
            <button id="statement-csv-import" class="btn btn-primary" type="button">Import statement lines</button>
        </div>
        <p class="mt-2 text-xs text-muted">The file stays in this browser and is sent to this tenant’s Blocks server. Use the template’s column names. Re-importing the same rows is safe.</p>
    </div>
    <form id="statement-line-form" class="grid gap-3 rounded-xl border border-[var(--border-color)] bg-[var(--bg-card)] p-4 sm:grid-cols-2 lg:grid-cols-6">
        <label class="text-sm">Account name<input class="blocks-control mt-1 w-full" name="account_name" maxlength="100" required placeholder="Main bank" /></label>
        <label class="text-sm">Statement date<input class="blocks-control mt-1 w-full" name="transaction_date" type="date" required /></label>
        <label class="text-sm">Money moved<select class="blocks-control mt-1 w-full" name="direction"><option value="in">Deposit</option><option value="out">Withdrawal</option></select></label>
        <label class="text-sm">Amount<input class="blocks-control mt-1 w-full" name="amount" type="number" min="0.01" step="0.01" required /></label>
        <label class="text-sm">Bank reference<input class="blocks-control mt-1 w-full" name="bank_reference" maxlength="120" /></label>
        <label class="text-sm">Short description<input class="blocks-control mt-1 w-full" name="description" maxlength="240" /></label>
        <div class="sm:col-span-2 lg:col-span-6"><button class="btn btn-primary" type="submit">Save statement line</button></div>
    </form>
    <div id="statement-line-status" class="text-sm text-muted" role="status" aria-live="polite"></div>
    <div class="overflow-x-auto rounded-xl border border-[var(--border-color)] bg-[var(--bg-card)]">
        <table class="blocks-workspace-table min-w-full"><thead><tr><th>Date</th><th>Account</th><th>Reference / details</th><th>Money moved</th><th>Match in Blocks</th><th>Action</th></tr></thead>
            <tbody id="statement-lines-body"><tr><td colspan="6" class="py-6 text-center text-muted">Loading statement lines…</td></tr></tbody>
        </table>
    </div>
</section>

<!-- Add Expense Modal -->
<div id="expense-modal" class="crud-modal" aria-hidden="true">
    <div class="modal-content max-w-500">
        <div class="modal-header">
            <h3 id="expense-modal-title">Add Overhead Expense</h3>
            <button type="button" class="close-btn close-modal" aria-label="Close">&times;</button>
        </div>
        <div class="modal-body">
            <div id="expense-form-fields"></div>
        </div>
    </div>
</div>
</main>
{% endblock %}

{% block scripts %}
<script src="/plugins/product-profit-breakdown/assets/js/profit_costs_grid.js"></script>
<script src="/plugins/product-profit-breakdown/assets/js/statement-csv.js"></script>
<script src="/plugins/product-profit-breakdown/assets/js/profit-breakdown-admin.js"></script>
{% endblock %}