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

{% block title %}Multi-Branch Command Center{% endblock %}
{% block head_extra %}
<meta name="csrf-token" content="{{ csrf_token() }}">
    
    <link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/hil-pages/enterprise_branches.css">
{% endblock %}
{% block content %}
<main class="page">
    <header class="topbar">
        <div>
            <h1>Multi-Branch Command Center</h1>
            <div class="muted">Operational health, synchronization safety, transfers, alerts, and continuity in one place.</div>
        </div>
        <div class="actions">
            {{ ui.button('Analytics', '/analytics/branches') }}
            {{ ui.button('Branches', '/admin/branches') }}
            {{ ui.button('Operations', '/operations-center') }}
            {{ ui.button('Memory', '/operational-memory') }}
            <button type="button" class="primary" onclick="regenerateReports()">Reports</button>
        </div>
    </header>

    <section class="grid" aria-label="Branch command center metrics">
        <div class="metric"><span>Average Health</span><strong>{{ snapshot.health.average_score }}</strong></div>
        <div class="metric"><span>Open Alerts</span><strong>{{ snapshot.alerts|length }}</strong></div>
        <div class="metric"><span>Sync Integrity</span><strong>{{ snapshot.sync.integrity|replace('_', ' ')|title }}</strong></div>
        <div class="metric"><span>Transfer Queue</span><strong>{{ snapshot.transfers|selectattr("status", "equalto", "requested")|list|length }}</strong></div>
    </section>

    <div class="layout">
        <section>
            <div class="panel">
                <h2>Branch Performance And Health</h2>
                <div class="table-wrap">
                    <table>
                        <thead>
                        <tr>
                            <th>Branch</th>
                            <th>Health</th>
                            <th>Sales</th>
                            <th>Revenue</th>
                            <th>Profit</th>
                            <th>Inventory</th>
                            <th>Sync</th>
                            <th>Priority</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for b in rankings %}
                            <tr>
                                <td>
                                    <strong>{{ b.name }}</strong><br>
                                    <span class="muted small">{{ b.location or "No location" }}</span>
                                </td>
                                <td>
                                    <span class="pill {{ b.risk_level }}">{{ b.score }}</span><br>
                                    <span class="muted small">{{ b.risk_level|title }}</span>
                                </td>
                                <td>{{ b.sales_count }}<br><span class="muted small">{{ b.customer_activity }} customer signals</span></td>
                                <td>{{ "%.2f"|format(b.revenue or 0) }}</td>
                                <td>{{ "%.2f"|format(b.profit or 0) }}<br><span class="muted small">{{ "%.1f"|format(b.margin or 0) }}% margin</span></td>
                                <td>{{ b.stock_pressure }} low<br><span class="muted small">{{ b.stockouts }} out, {{ b.surplus_products }} surplus</span></td>
                                <td>{{ "%.1f"|format(b.sync_reliability or 0) }}%</td>
                                <td>{{ b.summary }}</td>
                            </tr>
                        {% else %}
                            <tr><td colspan="8">No branches found.</td></tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="panel">
                <h2>Smart Transfer Request</h2>
                <form class="transfer-form" onsubmit="requestTransfer(event)">
                    <label>Source branch<input id="from_branch_id" type="number" placeholder="Optional"></label>
                    <label>Target branch<input id="to_branch_id" type="number" required placeholder="Branch ID"></label>
                    <label>Product<input id="product_id" type="number" required placeholder="Product ID"></label>
                    <label>Quantity<input id="quantity" type="number" min="1" value="1"></label>
                    <button class="primary" type="submit">Request</button>
                </form>
                <div id="transfer-result" class="muted small hil-inline-8a77e5a311"></div>
            </div>

            <div class="panel">
                <h2>Recent Transfers</h2>
                <div class="table-wrap">
                    <table>
                        <thead><tr><th>ID</th><th>Product</th><th>Route</th><th>Qty</th><th>Status</th><th>Action</th></tr></thead>
                        <tbody>
                        {% for t in snapshot.transfers %}
                            <tr>
                                <td>#{{ t.id }}</td>
                                <td>{{ t.product_name or t.product_id }}</td>
                                <td>{{ t.from_branch_name or "Central" }} to {{ t.to_branch_name or t.to_branch_id }}</td>
                                <td>{{ t.quantity }}</td>
                                <td><span class="pill">{{ t.status }}</span></td>
                                <td>
                                    {% if t.status == "requested" %}
                                        <button type="button" onclick="approveTransfer({{ t.id }})">Approve</button>
                                    {% elif t.status == "approved" %}
                                        <button type="button" onclick="completeTransfer({{ t.id }})">Complete</button>
                                    {% else %}
                                        <span class="muted small">Done</span>
                                    {% endif %}
                                </td>
                            </tr>
                        {% else %}
                            <tr><td colspan="6">No transfers recorded yet.</td></tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <aside>
            <div class="panel">
                <h2>AI Decision Assistant</h2>
                <div class="stack">
                    {% for item in snapshot.ai_decision_assistant.recommendations %}
                        <div class="line"><span>{{ item }}</span></div>
                    {% endfor %}
                </div>
            </div>

            <div class="panel">
                <h2>Inventory Balancing</h2>
                <div class="stack">
                    {% for r in snapshot.balancing_recommendations[:6] %}
                        <div class="line">
                            <span><strong>{{ r.product_name }}</strong><br><span class="muted small">{{ r.from_branch }} to {{ r.to_branch }}</span></span>
                            <span class="pill {{ 'warning' if r.priority == 'high' else '' }}">{{ r.quantity }}</span>
                        </div>
                    {% else %}
                        <div class="muted">No urgent redistribution recommendation.</div>
                    {% endfor %}
                </div>
            </div>

            <div class="panel">
                <h2>Operational Alerts</h2>
                <div class="stack">
                    {% for alert in snapshot.alerts[:8] %}
                        <div class="line">
                            <span><strong>{{ alert.branch_name or "All branches" }}</strong><br>{{ alert.message }}</span>
                            <span class="pill {{ alert.severity }}">{{ alert.severity }}</span>
                        </div>
                    {% else %}
                        <div class="muted">No open branch alerts.</div>
                    {% endfor %}
                </div>
            </div>

            <div class="panel">
                <h2>Operational Timeline</h2>
                <div class="stack">
                    {% for event in snapshot.timeline[:8] %}
                        <div class="line">
                            <span><strong>{{ event.title }}</strong><br><span class="muted small">{{ event.branch_name or "System" }} - {{ event.created_at }}</span></span>
                        </div>
                    {% else %}
                        <div class="muted">Timeline will populate as branches operate.</div>
                    {% endfor %}
                </div>
            </div>
        </aside>
    </div>
</main>

<script>
async function postJson(url, payload) {
  const token = document.querySelector('meta[name="csrf-token"]')?.content || "";
  const res = await fetch(url, {
    method: "POST",
    headers: {"Content-Type": "application/json", "X-CSRF-Token": token},
    body: JSON.stringify(payload || {})
  });
  const data = await res.json();
  if (!res.ok || data.error || data.ok === false) throw new Error(data.error || "Request failed");
  return data;
}

async function requestTransfer(event) {
  event.preventDefault();
  const box = document.getElementById("transfer-result");
  box.textContent = "Requesting transfer...";
  try {
    const payload = {
      from_branch_id: document.getElementById("from_branch_id").value || null,
      to_branch_id: document.getElementById("to_branch_id").value,
      product_id: document.getElementById("product_id").value,
      quantity: document.getElementById("quantity").value,
      reason: "Manual command-center request"
    };
    const data = await postJson("/api/enterprise/branches/transfers", payload);
    box.textContent = "Transfer #" + data.transfer_id + " requested.";
    setTimeout(() => location.reload(), 700);
  } catch (err) {
    box.textContent = err.message;
  }
}

async function approveTransfer(id) {
  await postJson("/api/enterprise/branches/transfers/" + id + "/approve");
  location.reload();
}

async function completeTransfer(id) {
  await postJson("/api/enterprise/branches/transfers/" + id + "/complete");
  location.reload();
}

async function regenerateReports() {
  const data = await postJson("/api/enterprise/branches/reports/regenerate");
  alert("Generated " + data.reports.length + " branch reports.");
}
</script>
{% endblock %}