{% extends 'base.html' %}
{% block title %}Order Monitor — Shiba Meals{% endblock %}
{% block page_title %}Order Monitor{% endblock %}
{% block extra_head %}
<style>
/* Status color mapping per spec */
.order-card-monitor{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:.75rem .9rem;transition:border-color .2s}
.order-card-monitor.s-pending  {border-left:4px solid var(--amber-bd);background:var(--amber-bg)}
.order-card-monitor.s-preparing{border-left:4px solid var(--blue-bd);background:var(--blue-bg)}
.order-card-monitor.s-ready    {border-left:4px solid var(--green-bd);background:var(--green-bg)}
.order-card-monitor.s-served   {border-left:4px solid var(--border2);opacity:.7}
.order-card-monitor.s-cancelled{border-left:4px solid var(--red-bd);opacity:.55}
</style>
{% endblock %}
{% block content %}
<div class="page-title">Order Monitor</div>
<div class="page-sub">Live view of all customer orders · Read-only overview for managers</div>

<!-- Status Legend -->
<div style="display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem">
  <span class="badge badge-amber">⏳ Pending</span>
  <span class="badge badge-blue">🔥 Preparing</span>
  <span class="badge badge-green">✅ Ready</span>
  <span class="badge badge-gray">🍽 Served</span>
  <span class="badge badge-red">✕ Cancelled</span>
</div>

<div class="tab-bar">
  <div class="tab active" data-tab="live">Live Orders</div>
  <div class="tab" data-tab="history">Today's History</div>
</div>

<div class="tab-panel active" data-panel="live">
  <div class="card">
    <div class="card-title" style="display:flex;justify-content:space-between;align-items:center">
      <span>Active Orders <span id="live-count" style="font-weight:400;color:var(--text3)"></span></span>
      <button class="btn btn-sm" onclick="loadOrders()">↺ Refresh</button>
    </div>
    <div class="alert alert-info" style="margin-bottom:.75rem">
      Orders created by <strong>waiters</strong>, cooked by <strong>chefs</strong>. Managers can update status manually if needed.
    </div>
    <div id="orders-board" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.75rem;padding:.25rem 0">
      <div style="color:var(--text3);padding:1rem">Loading…</div>
    </div>
  </div>
</div>

<div class="tab-panel" data-panel="history">
  <div class="card">
    <div class="card-title" style="display:flex;justify-content:space-between;align-items:center">
      <span>All Orders Today</span>
      <button class="btn btn-sm" onclick="loadHistory()">↺ Refresh</button>
    </div>
    <div id="orders-history"><div style="color:var(--text3);padding:1rem">Loading…</div></div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
var TODAY   = '{{ today }}';
var OUTLETS = {{ outlets | tojson }};
var CHEFS   = {{ chefs | tojson }};

/* Status colour matrix per audit spec */
var STATUS_BADGE = { pending:'badge-amber', preparing:'badge-blue', ready:'badge-green', served:'badge-gray', cancelled:'badge-red' };
var STATUS_LABEL = { pending:'⏳ Pending', preparing:'🔥 Preparing', ready:'✅ Ready', served:'🍽 Served', cancelled:'✕ Cancelled' };

async function loadOrders() {
  var board = document.getElementById('orders-board');
  try {
    var all    = await api('/api/orders?date=' + TODAY);
    var active = all.filter(function(o){ return o.status !== 'served' && o.status !== 'cancelled'; });
    document.getElementById('live-count').textContent = '— ' + active.length + ' active';
    if (!active.length) {
      board.innerHTML = '<div style="color:var(--text3);padding:1.5rem;text-align:center;grid-column:1/-1"><div style="font-size:1.5rem;margin-bottom:.4rem">📋</div><div>No active orders right now.</div></div>';
      return;
    }
    board.innerHTML = active.map(function(o) {
      var sc    = STATUS_BADGE[o.status] || 'badge-gray';
      var label = STATUS_LABEL[o.status] || o.status;
      var items = (o.items || []).map(function(i){
        return '<div style="padding:2px 0;font-size:.82rem"><strong>' + i.qty + '×</strong> ' + i.product_name +
               (i.notes ? ' <em style="color:var(--text3)">(' + i.notes + ')</em>' : '') + '</div>';
      }).join('');
      var age = '';
      if (o.created_at) {
        var mins = Math.floor((Date.now() - new Date(o.created_at.replace(' ','T'))) / 60000);
        age = ' · <span style="color:' + (mins > 15 ? 'var(--red)' : 'var(--text3)') + '">' + mins + ' min</span>';
      }
      return '<div class="order-card-monitor s-' + o.status + '">' +
        '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem">' +
          '<span style="font-weight:700;font-size:.95rem">#' + o.id + ' · ' + (o.table_ref || '—') + '</span>' +
          '<span class="badge ' + sc + '">' + label + '</span>' +
        '</div>' +
        '<div style="font-size:.77rem;color:var(--text2);margin-bottom:.35rem">' +
          o.outlet_name + ' · Chef: ' + (o.chef_name || '<em>Any</em>') + age +
        '</div>' +
        '<div style="margin-bottom:.5rem">' + items + '</div>' +
        (o.notes ? '<div style="font-size:.76rem;color:var(--text3);border-top:1px solid var(--border);padding-top:.35rem;margin-top:.35rem">📝 ' + o.notes + '</div>' : '') +
        '<div style="margin-top:.6rem;display:flex;gap:.4rem;flex-wrap:wrap">' +
          '<select style="font-size:.75rem;padding:4px;flex:1;border-radius:var(--r);border:1px solid var(--border2)" onchange="managerUpdateOrder(' + o.id + ', this.value, this)">' +
            ['pending','preparing','ready','served','cancelled'].map(function(s){
              return '<option value="' + s + '"' + (s === o.status ? ' selected' : '') + '>' + s + '</option>';
            }).join('') +
          '</select>' +
        '</div>' +
      '</div>';
    }).join('');
  } catch(e) {
    board.innerHTML = '<div style="color:var(--red);padding:1rem;grid-column:1/-1">⚠ Could not load orders: ' + e.message + '</div>';
  }
}

async function managerUpdateOrder(id, status, selectEl) {
  try {
    await api('/api/orders/' + id, 'PUT', { status: status });
    toast('Order #' + id + ' → ' + status + ' ✓', 'success');
    setTimeout(loadOrders, 400);
  } catch(e) {
    toast('Failed: ' + e.message, 'error');
    loadOrders();
  }
}

async function loadHistory() {
  var div = document.getElementById('orders-history');
  div.innerHTML = '<div style="color:var(--text3);padding:1rem">Loading…</div>';
  try {
    var orders = await api('/api/orders?date=' + TODAY);
    if (!orders.length) { div.innerHTML = '<div style="color:var(--text3);padding:1rem;text-align:center">No orders today.</div>'; return; }
    var html = '<div class="table-wrap"><table><thead><tr><th>#</th><th>Time</th><th>Table</th><th>Outlet</th><th>Waiter</th><th>Chef</th><th>Items</th><th>Status</th></tr></thead><tbody>';
    orders.forEach(function(o) {
      var items = (o.items || []).map(function(i){ return i.qty + '× ' + i.product_name; }).join(', ');
      var sc = STATUS_BADGE[o.status] || 'badge-gray';
      html += '<tr>' +
        '<td style="color:var(--text3)">#' + o.id + '</td>' +
        '<td class="ts">' + (o.created_at || '').slice(11, 16) + '</td>' +
        '<td style="font-weight:600">' + (o.table_ref || '—') + '</td>' +
        '<td>' + o.outlet_name + '</td>' +
        '<td>' + o.waiter_name + '</td>' +
        '<td>' + (o.chef_name || '<span style="color:var(--text3)">Any</span>') + '</td>' +
        '<td style="font-size:.78rem;max-width:220px">' + items + '</td>' +
        '<td><span class="badge ' + sc + '">' + o.status + '</span></td>' +
        '</tr>';
    });
    html += '</tbody></table></div>';
    div.innerHTML = html;
  } catch(e) {
    div.innerHTML = '<div style="color:var(--red);padding:1rem">⚠ Could not load: ' + e.message + '</div>';
  }
}

loadOrders();
setInterval(loadOrders, 30000);

document.addEventListener('click', function(e) {
  var tab = e.target.closest('.tab');
  if (!tab) return;
  if (tab.dataset.tab === 'history') setTimeout(loadHistory, 50);
  if (tab.dataset.tab === 'live') setTimeout(loadOrders, 50);
});
</script>
{% endblock %}