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

{% block title %}Admin Dashboard - {{ brand_name }}{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/dashboard.css">
{% endblock %}
{% block content %}
{{ ui.page_header(
    brand_name,
    'Executive view of sales, product health, and operational shortcuts.',
    'Admin Dashboard'
) }}

<div class="container">
    <div class="card">
        <h2>Admin Dashboard</h2>

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

        <div class="stats-grid">
            <div class="stat">
                <span class="label">Total Sales</span>
                <div class="value">{{ currency_symbol }}{{ "%.2f"|format(sales) }}</div>
            </div>
            <div class="stat">
                <span class="label">Products</span>
                <div class="value">{{ products }}</div>
            </div>
            <div class="stat">
                <span class="label">Low Stock</span>
                <div class="value">{{ low_stock }}</div>
            </div>
            <div class="stat">
                <span class="label">Out of Stock</span>
                <div class="value">{{ out_of_stock }}</div>
            </div>
            <div class="stat">
                <span class="label">Customers</span>
                <div class="value">{{ customers }}</div>
            </div>
            <div class="stat">
                <span class="label">Profit</span>
                <div class="value">{{ currency_symbol }}{{ "%.2f"|format(profit) }}</div>
            </div>
        </div>
    </div>

    <div class="card">
        <h3>Executive KPI Snapshot</h3>
        <div class="hil-kpi-grid">
            {{ ui.metric_tile('Revenue', currency_symbol ~ ('%.2f'|format(sales)), daily.count ~ ' transactions', 'success') }}
            {{ ui.metric_tile('Profit', currency_symbol ~ ('%.2f'|format(profit)), 'Net performance', 'neutral') }}
            {{ ui.metric_tile('Catalog Size', products, low_stock ~ ' low stock alerts', 'warning') }}
            {{ ui.metric_tile('Customers', customers, out_of_stock ~ ' out of stock', 'neutral') }}
        </div>
        <div class="hil-chart-shell dashboard-chart-shell">
            <canvas id="dashboard-sales-chart" class="hil-chart-canvas" aria-label="Sales trend chart" role="img"></canvas>
            <div class="hil-chart-caption">Daily totals from recent sales history</div>
        </div>
    </div>

    <div class="card">
        <h3>Data Recovery Reminder</h3>
        <p class="muted">After every app update, confirm your products and shop details are visible. If products are missing, use Bulk Import with your last downloaded inventory CSV. After adding or importing many products, regenerate the CSV in AI CSV Agent and download it as your personal backup.</p>
        <div class="actions">
            {{ ui.button('Recover with Bulk Import', '/bulk-import-products') }}
            {{ ui.button('Regenerate / Download CSV', '/ai-csv-agent') }}
        </div>
    </div>

    {% if is_server_owner %}
    <div class="card">
        <h3>Admin Operations</h3>
        <p class="muted">Daily controls for reliability, trust, support, data quality, costs, and disciplined feature focus.</p>
        <div class="actions">
            {{ ui.button('Operations Center', '/operations-center') }}
            {{ ui.button('Automation Command', '/automation') }}
            {{ ui.button('Workflow Rules', '/workflows') }}
            {{ ui.button('Platform Trust', '/platform-trust') }}
            {{ ui.button('Data Governance', '/data-governance') }}
            {{ ui.button('POS Acceleration', '/pos-acceleration') }}
            {{ ui.button('Governance Command', '/organizational-governance') }}
            {{ ui.button('Memory Intelligence', '/operational-memory') }}
            {{ ui.button('Enterprise Experience', '/enterprise-experience') }}
            {{ ui.button('Security Maturity', '/security-maturity') }}
            {{ ui.button('Cost Control', '/cost-management') }}
            {{ ui.button('Feature Focus', '/focus-engine') }}
            {{ ui.button('Deployment Helper', '/devops-assistant') }}
            {{ ui.button('System Operations', '/admin/system-operations') }}
        </div>
    </div>
    {% endif %}

    <div class="card">
        <h3>Sales Updates</h3>
        <div class="summary-grid">
            <div class="summary">
                <span class="label">Daily</span>
                <div class="value">{{ currency_symbol }}{{ "%.2f"|format(daily.amount) }}</div>
                <div class="subvalue">{{ daily.count }} sale(s) in the last 24 hours</div>
            </div>
            <div class="summary">
                <span class="label">Weekly</span>
                <div class="value">{{ currency_symbol }}{{ "%.2f"|format(weekly.amount) }}</div>
                <div class="subvalue">{{ weekly.count }} sale(s) in the last 7 days</div>
            </div>
            <div class="summary">
                <span class="label">Monthly</span>
                <div class="value">{{ currency_symbol }}{{ "%.2f"|format(monthly.amount) }}</div>
                <div class="subvalue">{{ monthly.count }} sale(s) in the last 30 days</div>
            </div>
        </div>
    </div>

    <div class="card">
        <h3>Recent Daily History</h3>
        <table>
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Transactions</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                {% for row in recent_sales %}
                    <tr>
                        <td>{{ row[0] }}</td>
                        <td>{{ row[1] }}</td>
                        <td>{{ currency_symbol }}{{ "%.2f"|format(row[2]) }}</td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="3">No sales history found.</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="card">
        <h3>Cashier Management</h3>
        <p class="muted">Add or manage cashiers for your shop. Cashiers can access the sales page with their credentials.</p>
        <form method="POST" action="/admin/add-cashier" class="brand-form">
            <label for="cashier-username">Cashier Username</label>
            <input id="cashier-username" name="username" placeholder="Enter cashier username" required>
            
            <label for="cashier-password">Password</label>
            <input id="cashier-password" name="password" type="password" placeholder="Enter password (min 4 characters)" required>
            
            <label for="cashier-confirm">Confirm Password</label>
            <input id="cashier-confirm" name="confirm_password" type="password" placeholder="Confirm password" required>
            
            <button type="submit">Add Cashier</button>
        </form>
    </div>

    <div class="card">
        <h3>Business Name Settings</h3>
        <p class="muted">Change the name shown across the app, receipts, and login screen.</p>
        <form method="POST" action="/admin/brand" class="brand-form">
            <label for="brand-name">Brand name</label>
            <input id="brand-name" name="brand_name" value="{{ brand_name }}" placeholder="Enter the shop, mall, or business name" required>
            <button type="submit">Update Brand Name</button>
        </form>
    </div>

    <div class="card">
        <h3>Sales Cleanup</h3>
        <p class="muted">Remove older sales details when you want to keep only recent records in the system.</p>
        <div class="cleanup-grid">
            <form method="POST" action="/admin/sales/cleanup">
                <input type="hidden" name="action" value="daily">
                <button type="submit">Delete Older Than 1 Day</button>
            </form>
            <form method="POST" action="/admin/sales/cleanup">
                <input type="hidden" name="action" value="weekly">
                <button type="submit">Delete Older Than 7 Days</button>
            </form>
            <form method="POST" action="/admin/sales/cleanup">
                <input type="hidden" name="action" value="monthly">
                <button type="submit">Delete Older Than 30 Days</button>
            </form>
            <form method="POST" action="/admin/sales/cleanup" onsubmit="return confirm('This will remove all recorded sales details. Continue?');">
                <input type="hidden" name="action" value="all">
                <button type="submit" class="danger">Delete All Sales History</button>
            </form>
        </div>
    </div>

    <div class="card">
        <h3>Quick Actions</h3>

        <div class="actions dashboard-quick-actions">

            {{ ui.button('Inventory', '/inventory') }}
            {{ ui.button('Add / Restock Product', '/add-product') }}
            {{ ui.button('Add Service', '/add-service') }}
            {{ ui.button('Bulk Import', '/bulk-import-products') }}
            {{ ui.button('Restock Planning', '/restock') }}
            {{ ui.button('Wholesalers', '/restock/suppliers') }}
            {{ ui.button('Automation Command', '/automation') }}
            {{ ui.button('Workflow Rules', '/workflows') }}
            {{ ui.button('Sales', '/sales') }}
            {{ ui.button('Return Goods', '/return-goods') }}
            {{ ui.button('Transactions', '/transactions') }}
            {{ ui.button('Payment Methods', '/payment-methods') }}
            {{ ui.button('Finance', '/finance') }}
            {{ ui.button('Expenses', '/expenses') }}
            {{ ui.button('Analytics', '/analytics') }}
            {{ ui.button('Branch Analytics', '/analytics/branches') }}
            {{ ui.button('POS Acceleration', '/pos-acceleration') }}
            {{ ui.button('Governance Command', '/organizational-governance') }}
            {{ ui.button('Business Memory', '/operational-memory') }}
            {{ ui.button('Global Search & Trust', '/enterprise-experience') }}
            {{ ui.button('AI Predictions', '/ai') }}
            {{ ui.button('AI Help', '/ai-help') }}
            {{ ui.button('AI CSV Agent', '/ai-csv-agent') }}
            {{ ui.button('Scanner Center', '/scanner-center?return_to=/admin&target=/sales') }}
            {{ ui.button('Barcode Hub', '/barcode') }}
            {{ ui.button('Scan Intelligence', '/barcode/intelligence') }}
            {{ ui.button('Training Mode', '/barcode/training') }}
            {{ ui.button('Change Password', '/change-password') }}
            {{ ui.button('Sales Calendar', '/admin/calendar', 'secondary') }}
            {{ ui.button('Alerts', '/alerts') }}
            {{ ui.button('Receipts', '/receipts') }}
            {{ ui.button('Customers', '/customers') }}
            {{ ui.button('Add Customer', '/add-customer') }}
            {{ ui.button('Cashiers', '/cashiers') }}
            {{ ui.button('Add Admin', '/register-admin') }}
            {{ ui.button('Branches', '/admin/branches') }}
            {{ ui.button('Reports', '/reports') }}
            {{ ui.button('Enterprise Reporting', '/reports/enterprise') }}
            {{ ui.button('Smart Exports', '/reports/exports') }}
            {% if is_server_owner %}
            {{ ui.button('Backup', '/backup') }}
            {{ ui.button('Cloud Updates', '/cloud') }}
            {{ ui.button('Release Notes', '/release-notes') }}
            {{ ui.button('Tutorial Videos', '/admin/tutorial-videos') }}
            {{ ui.button('User Reports', '/admin/user-reports') }}
            {{ ui.button('Shop Verification Registry', '/admin/shops', 'secondary') }}
            {{ ui.button('Registered Shops', '/server/shops', 'secondary') }}
            {{ ui.button('App Billing', '/admin/app-billing', 'secondary') }}
            {{ ui.button('Plugins', '/admin/plugins', 'secondary') }}
            {{ ui.button('Documentation', '/documentation') }}
            {% endif %}
            {{ ui.button('App Usage Payment', '/admin/app-billing/pay') }}
            {{ ui.button('Profile', '/profile') }}
            {{ ui.button('Help Center', '/help-center') }}
            {{ ui.button('App Guide', '/app_guide') }}
            {{ ui.button('Logout', '/logout', 'danger') }}
        </div>
    </div>
</div>

<script>
  (function () {
    // Admin dashboard frequently renders many "button-like" links.
    // Disable instant-navigation on this page so every click performs a real navigation.
    document.querySelectorAll('a[href]').forEach(function (a) {
      a.dataset.instant = 'off';
    });

        var canvas = document.getElementById('dashboard-sales-chart');
        if (!canvas || !canvas.getContext) {
            return;
        }

        var points = [
            {% for row in recent_sales %}
            { day: '{{ row[0] }}', amount: {{ row[2] or 0 }} },
            {% endfor %}
        ];

        if (!points.length) {
            return;
        }

        var ctx = canvas.getContext('2d');
        var width = canvas.clientWidth || 640;
        var height = canvas.clientHeight || 220;
        canvas.width = width;
        canvas.height = height;

        var maxValue = Math.max.apply(null, points.map(function (p) { return Number(p.amount) || 0; }));
        var minValue = Math.min.apply(null, points.map(function (p) { return Number(p.amount) || 0; }));
        var padding = 20;
        var graphWidth = width - (padding * 2);
        var graphHeight = height - (padding * 2);

        ctx.clearRect(0, 0, width, height);
        ctx.strokeStyle = 'rgba(14, 165, 233, 0.92)';
        ctx.lineWidth = 2;
        ctx.beginPath();

        points.forEach(function (point, index) {
            var x = padding + (graphWidth * (points.length === 1 ? 0 : index / (points.length - 1)));
            var normalized = maxValue === minValue ? 0.5 : ((Number(point.amount) - minValue) / (maxValue - minValue));
            var y = padding + (graphHeight * (1 - normalized));

            if (index === 0) {
                ctx.moveTo(x, y);
            } else {
                ctx.lineTo(x, y);
            }
        });
        ctx.stroke();

        ctx.fillStyle = 'rgba(14, 165, 233, 0.18)';
        ctx.lineTo(width - padding, height - padding);
        ctx.lineTo(padding, height - padding);
        ctx.closePath();
        ctx.fill();
  })();
</script>
{% endblock %}