{% extends 'base.html' %}
{% block title %}Management Panel — Shiba Meals{% endblock %}
{% block page_title %}Management Panel{% endblock %}
{% block content %}
<div class="page-title">Management Panel</div>
<div class="page-sub">{% if role == 'general_manager' %}General Manager · Full CRUD{% else %}Manager · Create · Read · Update{% endif %}</div>

<div class="tab-bar">
  <div class="tab active" data-tab="products">Products</div>
  <div class="tab" data-tab="ingredients">Ingredients</div>
  <div class="tab" data-tab="recipes">Recipes</div>
  <div class="tab" data-tab="users">Users</div>
  <div class="tab" data-tab="outlets">Outlets</div>
  <div class="tab" data-tab="assignments">Today's Assignments</div>
  <div class="tab" data-tab="roles">Role Management</div>
  <div class="tab" data-tab="settings">Settings</div>
</div>

<!-- PRODUCTS -->
<div class="tab-panel active" data-panel="products">
<div class="card">
  <div class="card-title">All Products
    <button class="btn btn-sm btn-primary" style="float:right" onclick="openModal('add-product-modal')">+ Add Product</button>
    <button class="btn btn-sm" style="float:right;margin-right:.5rem" onclick="openAdminCatMgmt('product')">🗂 Categories</button>
  </div>
  <div class="table-wrap"><table id="products-table">
    <tr><th>#</th><th>Name</th><th>Category</th><th>Unit</th><th>Price</th><th>Cost/Unit</th><th>Margin</th><th></th></tr>
  </table></div>
</div>
</div>

<!-- INGREDIENTS -->
<div class="tab-panel" data-panel="ingredients">
<div class="card">
  <div class="card-title">All Ingredients &amp; Consumables
    <button class="btn btn-sm btn-primary" style="float:right" onclick="openIng()">+ Add Item</button>
    <button class="btn btn-sm" style="float:right;margin-right:.5rem" onclick="openAdminCatMgmt('ingredient')">🗂 Categories</button>
  </div>
  <div style="margin-bottom:.5rem;display:flex;gap:.5rem;flex-wrap:wrap">
    <button class="btn btn-sm btn-primary" id="filter-all" onclick="filterIng('all')">All</button>
    <button class="btn btn-sm" id="filter-ingredient" onclick="filterIng('ingredient')">Ingredients</button>
    <button class="btn btn-sm" id="filter-consumable" onclick="filterIng('consumable')">Consumables</button>
  </div>
  <div class="table-wrap"><table id="ingredients-table">
    <tr><th>#</th><th>Name</th><th>Type</th><th>Unit</th><th>Cost/Unit</th><th>In Stock</th><th>Reorder</th><th></th></tr>
  </table></div>
</div>
</div>

<!-- RECIPES -->
<div class="tab-panel" data-panel="recipes">
<div class="card">
  <div class="card-title">Recipe Editor</div>
  <div class="form-row" style="max-width:420px">
    <label class="form-label">Select Product to Edit Recipe</label>
    <select id="recipe-product-select" onchange="loadRecipe()">
      <option value="">— choose a product —</option>
    </select>
  </div>
  <div id="recipe-area"><div class="alert alert-info">Select a product above to view and edit its recipe.</div></div>
</div>
<!-- Product recipe summary table -->
<div class="card" id="recipe-summary-card">
  <div class="card-title">All Products — Recipe Status</div>
  <div class="table-wrap"><table id="recipe-summary-table">
    <tr><th>Product</th><th>Category</th><th>Price</th><th>Ingredients in Recipe</th><th>Cost/Unit</th><th>Margin</th></tr>
  </table></div>
</div>
</div>

<!-- USERS -->
<div class="tab-panel" data-panel="users">
<div class="card">
  <div class="card-title">Staff &amp; Users
    <button class="btn btn-sm btn-primary" style="float:right" onclick="openUser()">+ Add User</button>
  </div>
  <div class="table-wrap"><table id="users-table">
    <tr><th>#</th><th>Name</th><th>Role</th><th>Outlet</th><th>Pay Period</th><th>Daily KES</th><th>Weekly KES</th><th>Monthly KES</th><th></th></tr>
  </table></div>
</div>
</div>

<!-- OUTLETS -->
<div class="tab-panel" data-panel="outlets">
<div class="card">
  <div class="card-title">Sales Outlets
    <button class="btn btn-sm btn-primary" style="float:right" onclick="openOutlet()">+ Add Outlet</button>
  </div>
  <div class="table-wrap"><table id="outlets-table">
    <tr><th>#</th><th>Outlet Name</th><th>Location</th><th>Till / M-Pesa Number</th><th>Staff Assigned</th><th></th></tr>
  </table></div>
</div>
</div>

<!-- ASSIGNMENTS -->
<div class="tab-panel" data-panel="assignments">
<div class="card">
  <div class="card-title">Today's Cashier → Outlet Assignments
    <span style="float:right;font-size:.78rem;color:var(--text3);font-weight:400">{{ today }} · Reassign daily as needed</span>
  </div>
  <div class="alert alert-info">
    Cashiers are not permanently tied to any outlet. Assign them here each morning.
    A cashier can only be assigned to one outlet per day. Reassigning overwrites the previous assignment.
  </div>
  <!-- Current assignments -->
  <div class="card-title" style="font-size:.82rem;margin-bottom:.5rem">Current Assignments Today</div>
  <div id="assignments-list">
    {% if assignments %}
    <div class="table-wrap"><table>
      <tr><th>Cashier</th><th>Assigned Outlet</th><th>Assigned At</th><th>Action</th></tr>
      {% for a in assignments %}
      <tr id="asgn-row-{{ a.cashier_id }}">
        <td style="font-weight:600">{{ a.cashier_name }}</td>
        <td><span class="badge badge-blue">{{ a.outlet_name }}</span></td>
        <td class="ts">{{ a.assigned_at[:16] }}</td>
        <td><button class="btn btn-sm btn-danger" onclick="removeAssignment({{ a.cashier_id }})">Remove</button></td>
      </tr>
      {% endfor %}
    </table></div>
    {% else %}
    <div class="alert alert-warning">No cashiers assigned yet today. Assign below.</div>
    {% endif %}
  </div>
  <!-- Assign form -->
  <div class="card-title" style="font-size:.82rem;margin-top:1rem;margin-bottom:.5rem">Assign Cashier</div>
  <div class="form-grid">
    <div class="form-row">
      <label class="form-label">Cashier</label>
      <select id="asgn-cashier">
        {% for c in cashiers %}
        <option value="{{ c.id }}">{{ c.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-row">
      <label class="form-label">Outlet</label>
      <select id="asgn-outlet">
        {% for o in outlets %}
        <option value="{{ o.id }}">{{ o.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-row">
      <label class="form-label">Date</label>
      <input type="date" id="asgn-date" value="{{ today }}">
    </div>
    <div class="form-row">
      <label class="form-label">&nbsp;</label>
      <button class="btn btn-primary btn-block" onclick="saveAssignment()">Assign</button>
    </div>
  </div>
</div>
</div>

<!-- ROLES -->
<div class="tab-panel" data-panel="roles">
<div class="card">
  <div class="card-title">Role Management
    <button class="btn btn-sm btn-primary" style="float:right" onclick="openAddRole()">+ Add Role</button>
  </div>
  <div class="alert alert-info" style="font-size:.8rem">Define custom roles and choose exactly which pages and actions they can access. Built-in roles (General Manager, Manager, Chef, Cashier, Waiter, Storekeeper, Logistics) cannot be edited here.</div>
  <div class="table-wrap"><table id="roles-table">
    <tr><th>Role Key</th><th>Display Name</th><th>Allowed Pages</th><th>Notes</th><th></th></tr>
  </table></div>
</div>
<div class="card">
  <div class="card-title">Built-in Role Permissions Reference</div>
  <div class="table-wrap"><table>
    <tr><th>Role</th><th>Pages &amp; Capabilities</th></tr>
    <tr><td><span class="badge badge-purple">general_manager</span></td><td>All pages · Full CRUD · Delete records · Payroll · Analytics</td></tr>
    <tr><td><span class="badge badge-blue">manager</span></td><td>Dashboard · Reports · Analytics · Finance · Production · Store · Logistics · Cashier · Management (no delete)</td></tr>
    <tr><td><span class="badge badge-green">chef</span></td><td>Production · Requisitions</td></tr>
    <tr><td><span class="badge badge-amber">cashier</span></td><td>Cashier station · Stock submission · Cash events</td></tr>
    <tr><td><span class="badge badge-amber">waiter</span></td><td>Waiter Orders · Send orders to chef</td></tr>
    <tr><td><span class="badge badge-gray">storekeeper</span></td><td>Store · Restock · Approve requisitions</td></tr>
    <tr><td><span class="badge badge-gray">logistics</span></td><td>Logistics · Dispatch</td></tr>
  </table></div>
</div>
</div>

<!-- SETTINGS -->
<div class="tab-panel" data-panel="settings">
<div class="card">
  <div class="card-title">Business Settings</div>
  <div class="form-row" style="max-width:480px"><label class="form-label">Business Name</label><input id="s-business_name" placeholder="Shiba Meals"></div>
  <div class="form-row" style="max-width:480px"><label class="form-label">Contact Number</label><input id="s-contact" placeholder="+254..."></div>
  <div class="form-row" style="max-width:480px"><label class="form-label">SMS Template</label><textarea id="s-sms_template" rows="3"></textarea></div>
  <button class="btn btn-primary" onclick="saveSettings()">Save Settings</button>
</div>
</div>

<!-- ══ MODALS ══ -->
<div class="modal-backdrop" id="add-product-modal">
  <div class="modal">
    <button class="modal-close" data-close-modal="add-product-modal">✕</button>
    <div class="modal-title" id="product-modal-title">Add Product</div>
    <input type="hidden" id="product-edit-id">
    <div class="form-row"><label class="form-label">Name</label><input id="p-name" placeholder="e.g. Beef Burger"></div>
    <div class="form-grid">
      <div class="form-row"><label class="form-label">Category</label>
        <select id="p-cat"><option>Burgers &amp; Hotdogs</option><option>Chicken</option><option>Pasta</option><option>Staples</option><option>Potatoes</option><option>Vegetables</option><option>Bread &amp; Snacks</option><option>Sides</option><option>Beverages</option></select>
      </div>
        <select id="p-unit"><option>portion</option><option>piece</option><option>cup</option><option>glass</option><option>plate</option></select>
      </div>
      <div class="form-row"><label class="form-label">Selling Price (KES)</label><input type="number" id="p-price" placeholder="0"></div>
    </div>
    <div style="display:flex;gap:.5rem">
      <button class="btn btn-primary" onclick="saveProduct()">Save</button>
      <button class="btn" data-close-modal="add-product-modal">Cancel</button>
    </div>
  </div>
</div>

<div class="modal-backdrop" id="add-ing-modal">
  <div class="modal">
    <button class="modal-close" data-close-modal="add-ing-modal">✕</button>
    <div class="modal-title" id="ing-modal-title">Add Item</div>
    <input type="hidden" id="ing-edit-id">
    <div class="form-row"><label class="form-label">Name</label><input id="i-name" placeholder="e.g. Coriander"></div>
    <div class="form-grid">
      <div class="form-row"><label class="form-label">Type</label>
        <select id="i-cat"><option value="ingredient">Ingredient</option><option value="consumable">Consumable</option></select>
      </div>
      <div class="form-row"><label class="form-label">Unit</label>
        <select id="i-unit"><option>kg</option><option>g</option><option>L</option><option>ml</option><option>piece</option><option>pack</option><option>bunch</option><option>bottle</option><option>portion</option><option>cylinder</option><option>bag</option><option>roll</option><option>box</option></select>
      </div>
      <div class="form-row"><label class="form-label">Cost per Unit (KES)</label><input type="number" id="i-cost" placeholder="0"></div>
      <div class="form-row"><label class="form-label">Reorder Level</label><input type="number" id="i-reorder" placeholder="5" value="5"></div>
    </div>
    <div style="display:flex;gap:.5rem;margin-top:.25rem">
      <button class="btn btn-primary" onclick="saveIngredient()">Save</button>
      <button class="btn btn-danger" id="del-ing-btn" style="display:none" onclick="deleteIngredient()">Delete</button>
      <button class="btn" data-close-modal="add-ing-modal">Cancel</button>
    </div>
  </div>
</div>

<div class="modal-backdrop" id="add-recipe-ing-modal">
  <div class="modal">
    <button class="modal-close" data-close-modal="add-recipe-ing-modal">✕</button>
    <div class="modal-title">Add Ingredient to Recipe</div>
    <div class="formula" id="recipe-preview" style="min-height:1.5rem;font-size:.8rem"></div>
    <div class="form-row"><label class="form-label">Ingredient</label><select id="ri-ing" onchange="updateRecipePreview()"></select></div>
    <div class="form-grid">
      <div class="form-row"><label class="form-label">Qty used</label><input type="number" id="ri-qty" step="0.001" placeholder="e.g. 2" oninput="updateRecipePreview()"></div>
      <div class="form-row"><label class="form-label">Yields (portions)</label><input type="number" id="ri-yields" step="1" placeholder="e.g. 30" oninput="updateRecipePreview()"></div>
    </div>
    <div class="form-row"><label class="form-label">Note (optional)</label><input id="ri-note" placeholder="e.g. 2kg flour → 30 chapatis"></div>
    <div style="display:flex;gap:.5rem">
      <button class="btn btn-primary" onclick="saveRecipeItem()">Add to Recipe</button>
      <button class="btn" data-close-modal="add-recipe-ing-modal">Cancel</button>
    </div>
  </div>
</div>

<div class="modal-backdrop" id="add-user-modal">
  <div class="modal">
    <button class="modal-close" data-close-modal="add-user-modal">✕</button>
    <div class="modal-title" id="user-modal-title">Add Staff Member</div>
    <input type="hidden" id="user-edit-id">
    <div class="form-grid">
      <div class="form-row"><label class="form-label">Full Name</label><input id="u-name" placeholder="Full name"></div>
      <div class="form-row"><label class="form-label">Email</label><input type="email" id="u-email" placeholder="email@shiba.co.ke"></div>
      <div class="form-row"><label class="form-label">Role</label>
        <select id="u-role">
          <option value="general_manager">General Manager</option>
          <option value="manager">Manager</option>
          <option value="chef">Chef</option>
          <option value="cashier">Cashier</option>
          <option value="waiter">Waiter</option>
          <option value="storekeeper">Storekeeper</option>
          <option value="logistics">Logistics</option>
        </select>
      </div>
      <div class="form-row"><label class="form-label">Outlet Assignment</label>
        <select id="u-outlet"><option value="">— unassigned —</option></select>
      </div>
      <div class="form-row"><label class="form-label">Pay Period</label>
        <select id="u-pay">
          <option value="daily">Daily</option>
          <option value="weekly">Weekly</option>
          <option value="monthly">Monthly</option>
        </select>
      </div>
      <div class="form-row"><label class="form-label">Pay Amount (KES)</label><input type="number" id="u-amount" placeholder="0"></div>
      <div class="form-row"><label class="form-label">Line / Dept</label><input id="u-line" placeholder="e.g. Main Kitchen"></div>
      <div class="form-row"><label class="form-label">Password</label><input type="password" id="u-password" placeholder="leave blank to keep current"></div>
    </div>
    <div style="display:flex;gap:.5rem;margin-top:.25rem">
      <button class="btn btn-primary" onclick="saveUser()">Save</button>
      <button class="btn btn-danger" id="del-user-btn" style="display:none" onclick="deleteUser()">Deactivate</button>
      <button class="btn" data-close-modal="add-user-modal">Cancel</button>
    </div>
  </div>
</div>

<div class="modal-backdrop" id="add-outlet-modal">
  <div class="modal">
    <button class="modal-close" data-close-modal="add-outlet-modal">✕</button>
    <div class="modal-title" id="outlet-modal-title">Add Outlet</div>
    <input type="hidden" id="outlet-edit-id">
    <div class="form-row"><label class="form-label">Outlet Name</label><input id="o-name" placeholder="e.g. Shiba CBD"></div>
    <div class="form-row"><label class="form-label">Location</label><input id="o-location" placeholder="e.g. Moi Avenue, Nairobi"></div>
    <div class="form-row"><label class="form-label">Till Number (M-Pesa)</label><input id="o-till" placeholder="e.g. 174382"></div>
    <div style="display:flex;gap:.5rem">
      <button class="btn btn-primary" onclick="saveOutlet()">Save</button>
      <button class="btn btn-danger" id="del-outlet-btn" style="display:none" onclick="deleteOutlet()">Deactivate</button>
      <button class="btn" data-close-modal="add-outlet-modal">Cancel</button>
    </div>
  </div>
</div>

<!-- Category Management Modal (Admin) -->
<div class="modal-backdrop" id="add-role-modal">
  <div class="modal" style="max-width:600px">
    <button class="modal-close" data-close-modal="add-role-modal">✕</button>
    <div class="modal-title" id="role-modal-title">Add Custom Role</div>
    <input type="hidden" id="role-edit-key">
    <div class="form-grid">
      <div class="form-row"><label class="form-label">Role Key (no spaces)</label><input id="r-key" placeholder="e.g. supervisor"></div>
      <div class="form-row"><label class="form-label">Display Name</label><input id="r-name" placeholder="e.g. Supervisor"></div>
    </div>
    <div class="form-row"><label class="form-label">Notes / Description</label><input id="r-notes" placeholder="e.g. Can view reports and manage cashiers"></div>
    <div class="sdiv">Page Access Permissions</div>
    <div class="form-grid" style="grid-template-columns:1fr 1fr 1fr">
      <label style="display:flex;align-items:center;gap:6px;font-size:.82rem"><input type="checkbox" id="rp-dashboard"> Dashboard</label>
      <label style="display:flex;align-items:center;gap:6px;font-size:.82rem"><input type="checkbox" id="rp-reports"> Reports</label>
      <label style="display:flex;align-items:center;gap:6px;font-size:.82rem"><input type="checkbox" id="rp-analytics"> Analytics</label>
      <label style="display:flex;align-items:center;gap:6px;font-size:.82rem"><input type="checkbox" id="rp-finance"> Finance</label>
      <label style="display:flex;align-items:center;gap:6px;font-size:.82rem"><input type="checkbox" id="rp-production"> Production</label>
      <label style="display:flex;align-items:center;gap:6px;font-size:.82rem"><input type="checkbox" id="rp-store"> Store</label>
      <label style="display:flex;align-items:center;gap:6px;font-size:.82rem"><input type="checkbox" id="rp-logistics"> Logistics</label>
      <label style="display:flex;align-items:center;gap:6px;font-size:.82rem"><input type="checkbox" id="rp-cashier"> Cashier</label>
      <label style="display:flex;align-items:center;gap:6px;font-size:.82rem"><input type="checkbox" id="rp-waiter"> Waiter Orders</label>
      <label style="display:flex;align-items:center;gap:6px;font-size:.82rem"><input type="checkbox" id="rp-admin"> Management Panel</label>
    </div>
    <div style="display:flex;gap:.5rem;margin-top:1rem">
      <button class="btn btn-primary" onclick="saveRole()">Save Role</button>
      <button class="btn btn-danger" id="del-role-btn" style="display:none" onclick="deleteRole()">Delete</button>
      <button class="btn" data-close-modal="add-role-modal">Cancel</button>
    </div>
  </div>
</div>
<div class="modal-backdrop" id="admin-cat-mgmt-modal">
  <div class="modal" style="max-width:520px">
    <button class="modal-close" data-close-modal="admin-cat-mgmt-modal">✕</button>
    <div class="modal-title" id="admin-cat-mgmt-title">Manage Categories</div>
    <div class="tab-bar" style="margin-bottom:.75rem">
      <div class="tab active" id="admin-pcat-tab-btn" onclick="adminSwitchCatTab('product')">Product Categories</div>
      <div class="tab" id="admin-icat-tab-btn" onclick="adminSwitchCatTab('ingredient')">Ingredient Categories</div>
    </div>
    <div id="admin-pcat-tab">
      <div style="display:flex;gap:.5rem;margin-bottom:.75rem">
        <input id="admin-new-pcat-name" placeholder="New product category name…" style="flex:1">
        <button class="btn btn-primary btn-sm" onclick="adminAddCategory('product')">+ Add</button>
      </div>
      <div id="admin-pcat-list" style="max-height:280px;overflow-y:auto"></div>
    </div>
    <div id="admin-icat-tab" style="display:none">
      <div style="display:flex;gap:.5rem;margin-bottom:.75rem">
        <input id="admin-new-icat-name" placeholder="New ingredient category name…" style="flex:1">
        <button class="btn btn-primary btn-sm" onclick="adminAddCategory('ingredient')">+ Add</button>
      </div>
      <div id="admin-icat-list" style="max-height:280px;overflow-y:auto"></div>
    </div>
    <div id="admin-cat-note" style="font-size:.75rem;color:var(--text3);margin-top:.5rem"></div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
var ALL_INGREDIENTS = [], ALL_OUTLETS = [], ALL_USERS = [], ALL_PRODUCTS = [];
var CURRENT_RECIPE_PRODUCT = null;
var IS_GM = '{{ role }}' === 'general_manager';
var ingFilter = 'all';

// ── Payroll helpers ─────────────────────────────────────────────────────
function calcPay(period, amount) {
  amount = parseFloat(amount) || 0;
  if (period === 'daily')   return { d: amount,      w: amount * 5,    m: amount * 22 };
  if (period === 'weekly')  return { d: amount / 5,  w: amount,        m: amount * 4.33 };
  return                           { d: amount / 22, w: amount / 4.33, m: amount };
}
function fmtN(n) { return Math.round(n).toLocaleString(); }

// ── Init: load everything immediately ───────────────────────────────────
(async function init() {
  try {
    await Promise.all([loadProducts(), loadIngredients(), loadOutlets(), loadSettings()]);
    await loadUsers(); // depends on ALL_OUTLETS
    populateProductSelect();
    loadRecipeSummary();
  } catch(e) {
    console.error('Admin init error:', e);
    document.getElementById('products-table').innerHTML =
      '<tr><td colspan="8" style="color:var(--red);padding:1rem">Failed to load data: ' + e.message + '</td></tr>';
  }
})();

// ── PRODUCTS ─────────────────────────────────────────────────────────────
async function loadProducts() {
  ALL_PRODUCTS = await api('/api/products');
  var rows = '<tr><th>#</th><th>Name</th><th>Category</th><th>Unit</th><th>Price</th><th>Cost/Unit</th><th>Margin</th><th></th></tr>';
  ALL_PRODUCTS.forEach(function(p, i) {
    var m = p.price - p.cost_per_unit, mp = p.price ? Math.round(m/p.price*100) : 0;
    rows += `<tr>
      <td style="color:var(--text3)">${i+1}</td>
      <td style="font-weight:600">${p.name}</td>
      <td><span class="badge badge-gray">${p.category}</span></td>
      <td>${p.unit}</td>
      <td>KES ${p.price.toLocaleString()}</td>
      <td>KES ${Math.round(p.cost_per_unit).toLocaleString()}</td>
      <td><span class="badge ${mp>=40?'badge-green':mp>=20?'badge-amber':'badge-red'}">${mp}%</span></td>
      <td>
        <button class="btn btn-sm" onclick="editProduct(${p.id})">Edit</button>
        ${IS_GM ? `<button class="btn btn-sm btn-danger" onclick="deleteProduct(${p.id})">Delete</button>` : ''}
      </td>
    </tr>`;
  });
  document.getElementById('products-table').innerHTML = rows;
}

function editProduct(id) {
  var p = ALL_PRODUCTS.find(x => x.id === id); if (!p) return;
  document.getElementById('product-edit-id').value = id;
  document.getElementById('product-modal-title').textContent = 'Edit Product';
  document.getElementById('p-name').value = p.name;
  document.getElementById('p-cat').value = p.category;
  document.getElementById('p-unit').value = p.unit;
  document.getElementById('p-price').value = p.price;
  openModal('add-product-modal');
}

async function saveProduct() {
  var id = document.getElementById('product-edit-id').value;
  var d = { name: document.getElementById('p-name').value, category: document.getElementById('p-cat').value, unit: document.getElementById('p-unit').value, price: parseFloat(document.getElementById('p-price').value) };
  if (!d.name || !d.price) { toast('Enter name and price', 'error'); return; }
  if (id) await api('/api/products/' + id, 'PUT', d); else await api('/api/products', 'POST', d);
  toast('Saved ✓', 'success'); closeModal('add-product-modal');
  document.getElementById('product-edit-id').value = '';
  document.getElementById('product-modal-title').textContent = 'Add Product';
  await loadProducts(); populateProductSelect(); loadRecipeSummary();
}

async function deleteProduct(id) {
  if (!confirm('Delete this product?')) return;
  await api('/api/products/' + id, 'DELETE');
  toast('Deleted', 'success'); await loadProducts(); populateProductSelect(); loadRecipeSummary();
}

// ── INGREDIENTS ──────────────────────────────────────────────────────────
async function loadIngredients() {
  ALL_INGREDIENTS = await api('/api/ingredients');
  renderIngTable();
  // Populate recipe ingredient dropdown
  document.getElementById('ri-ing').innerHTML = ALL_INGREDIENTS
    .map(i => `<option value="${i.id}" data-unit="${i.unit}" data-cost="${i.cost_per_unit}">${i.name} (${i.unit})</option>`)
    .join('');
}

function filterIng(cat) {
  ingFilter = cat;
  ['all','ingredient','consumable'].forEach(c => {
    var btn = document.getElementById('filter-' + c);
    if (btn) btn.className = c === cat ? 'btn btn-sm btn-primary' : 'btn btn-sm';
  });
  renderIngTable();
}

function renderIngTable() {
  var filtered = ingFilter === 'all' ? ALL_INGREDIENTS : ALL_INGREDIENTS.filter(i => i.category === ingFilter);
  var rows = '<tr><th>#</th><th>Name</th><th>Type</th><th>Unit</th><th>Cost/Unit</th><th>In Stock</th><th>Reorder</th><th></th></tr>';
  filtered.forEach(function(i, idx) {
    rows += `<tr>
      <td style="color:var(--text3)">${idx+1}</td>
      <td style="font-weight:600">${i.name}</td>
      <td><span class="badge ${i.category==='consumable'?'badge-amber':'badge-blue'}">${i.category}</span></td>
      <td>${i.unit}</td>
      <td>KES ${i.cost_per_unit.toLocaleString()}</td>
      <td><span class="badge ${i.stock<3?'badge-red':i.stock<10?'badge-amber':'badge-green'}">${(i.stock||0).toFixed(2)}</span></td>
      <td>${i.reorder_level}</td>
      <td><button class="btn btn-sm" onclick="editIngredient(${i.id})">Edit</button></td>
    </tr>`;
  });
  document.getElementById('ingredients-table').innerHTML = rows;
}

function openIng() {
  document.getElementById('ing-edit-id').value = '';
  document.getElementById('ing-modal-title').textContent = 'Add Item';
  document.getElementById('i-name').value = ''; document.getElementById('i-cost').value = '';
  document.getElementById('i-reorder').value = 5; document.getElementById('del-ing-btn').style.display = 'none';
  openModal('add-ing-modal');
}

function editIngredient(id) {
  var i = ALL_INGREDIENTS.find(x => x.id === id); if (!i) return;
  document.getElementById('ing-edit-id').value = id;
  document.getElementById('ing-modal-title').textContent = 'Edit: ' + i.name;
  document.getElementById('i-name').value = i.name; document.getElementById('i-unit').value = i.unit;
  document.getElementById('i-cost').value = i.cost_per_unit; document.getElementById('i-reorder').value = i.reorder_level || 5;
  document.getElementById('i-cat').value = i.category || 'ingredient';
  document.getElementById('del-ing-btn').style.display = IS_GM ? 'inline-flex' : 'none';
  openModal('add-ing-modal');
}

async function saveIngredient() {
  var id = document.getElementById('ing-edit-id').value;
  var d = { name: document.getElementById('i-name').value, unit: document.getElementById('i-unit').value, cost: parseFloat(document.getElementById('i-cost').value), reorder_level: parseFloat(document.getElementById('i-reorder').value || 5), category: document.getElementById('i-cat').value };
  if (!d.name || !d.cost) { toast('Enter name and cost', 'error'); return; }
  if (id) await api('/api/ingredients/' + id, 'PUT', d); else await api('/api/ingredients', 'POST', d);
  toast('Saved ✓', 'success'); closeModal('add-ing-modal');
  document.getElementById('ing-edit-id').value = '';
  document.getElementById('del-ing-btn').style.display = 'none';
  await loadIngredients(); loadRecipeSummary();
}

async function deleteIngredient() {
  if (!IS_GM) { toast('Only GM can delete', 'error'); return; }
  var id = document.getElementById('ing-edit-id').value;
  if (!confirm('Delete ingredient and remove from all recipes?')) return;
  await api('/api/ingredients/' + id, 'DELETE');
  toast('Deleted', 'success'); closeModal('add-ing-modal'); await loadIngredients(); loadRecipeSummary();
}

// ── RECIPES ──────────────────────────────────────────────────────────────
function populateProductSelect() {
  var sel = document.getElementById('recipe-product-select');
  sel.innerHTML = '<option value="">— choose a product —</option>' +
    ALL_PRODUCTS.map(p => `<option value="${p.id}">${p.name} (${p.category})</option>`).join('');
}

async function loadRecipeSummary() {
  if (!ALL_PRODUCTS.length) return;
  var rows = '<tr><th>Product</th><th>Category</th><th>Price</th><th>Ingredients in Recipe</th><th>Cost/Unit</th><th>Margin %</th></tr>';
  // Fetch all recipes in one pass using cost_per_unit from products API
  ALL_PRODUCTS.forEach(function(p) {
    var cpu = p.cost_per_unit || 0;
    var margin = p.price ? Math.round((p.price - cpu) / p.price * 100) : 0;
    rows += `<tr>
      <td style="font-weight:600">${p.name}</td>
      <td><span class="badge badge-gray">${p.category}</span></td>
      <td>KES ${p.price.toLocaleString()}</td>
      <td><button class="btn btn-sm" onclick="document.getElementById('recipe-product-select').value='${p.id}';loadRecipe()">View/Edit Recipe</button></td>
      <td>KES ${Math.round(cpu).toLocaleString()}</td>
      <td><span class="badge ${margin>=40?'badge-green':margin>=20?'badge-amber':'badge-red'}">${margin}%</span></td>
    </tr>`;
  });
  document.getElementById('recipe-summary-table').innerHTML = rows;
}

async function loadRecipe() {
  var pid = document.getElementById('recipe-product-select').value;
  if (!pid) { document.getElementById('recipe-area').innerHTML = '<div class="alert alert-info">Select a product above to view and edit its recipe.</div>'; return; }
  CURRENT_RECIPE_PRODUCT = parseInt(pid);
  var recipe = await api('/api/recipes/' + pid);
  var pname = ALL_PRODUCTS.find(p => p.id == pid)?.name || 'Product';
  var html = `<div class="alert alert-info" style="margin-bottom:.5rem">Recipe for <strong>${pname}</strong> — defines ingredient cost per portion</div>`;
  if (recipe.length) {
    html += '<div class="table-wrap"><table><tr><th>Ingredient</th><th>Qty Used</th><th>Unit</th><th>Yields</th><th>Per Portion</th><th>Cost/Portion</th><th></th></tr>';
    var total = 0;
    recipe.forEach(function(r) {
      var pu = r.qty_used / r.yields; total += pu * r.cost_per_unit;
      html += `<tr><td style="font-weight:600">${r.ing_name}</td><td>${r.qty_used}</td><td>${r.unit}</td><td>${r.yields}</td>
        <td style="font-family:monospace">${pu.toFixed(4)} ${r.unit}</td>
        <td>KES ${(pu * r.cost_per_unit).toFixed(2)}</td>
        <td>${IS_GM ? `<button class="btn btn-sm btn-danger" onclick="deleteRecipeItem(${r.id})">×</button>` : ''}</td></tr>`;
    });
    html += `<tr class="hl"><td colspan="5" style="font-size:.78rem;color:var(--text3)">Total ingredient cost per unit</td><td style="font-weight:700">KES ${total.toFixed(2)}</td><td></td></tr></table></div>`;
  } else {
    html += '<p style="color:var(--text3);font-style:italic;margin:.75rem 0">No ingredients defined yet for this product.</p>';
  }
  html += `<button class="btn btn-primary" style="margin-top:.75rem" onclick="openModal('add-recipe-ing-modal')">+ Add Ingredient</button>`;
  document.getElementById('recipe-area').innerHTML = html;
}

async function deleteRecipeItem(rid) {
  if (!IS_GM) { toast('Only GM can delete', 'error'); return; }
  await api('/api/recipes/' + CURRENT_RECIPE_PRODUCT + '?recipe_id=' + rid, 'DELETE');
  toast('Removed ✓', 'success'); loadRecipe(); loadRecipeSummary();
}

function updateRecipePreview() {
  var sel = document.getElementById('ri-ing'), opt = sel.options[sel.selectedIndex];
  var unit = opt?.dataset.unit || '', cost = parseFloat(opt?.dataset.cost || 0);
  var qty = parseFloat(document.getElementById('ri-qty').value || 0);
  var yields = parseFloat(document.getElementById('ri-yields').value || 0);
  var prev = document.getElementById('recipe-preview');
  if (qty > 0 && yields > 0 && opt) {
    var pu = qty / yields;
    prev.textContent = `Per portion: ${pu.toFixed(4)} ${unit}  ·  Cost per portion: KES ${(pu * cost).toFixed(2)}`;
  } else { prev.textContent = ''; }
}

async function saveRecipeItem() {
  var pid = CURRENT_RECIPE_PRODUCT;
  if (!pid) { toast('Select a product first', 'error'); return; }
  var ing_id = parseInt(document.getElementById('ri-ing').value);
  var qty_used = parseFloat(document.getElementById('ri-qty').value || 0);
  var yields = parseInt(document.getElementById('ri-yields').value || 1);
  var note = document.getElementById('ri-note').value;
  if (!qty_used || !yields) { toast('Enter quantity and yield', 'error'); return; }
  await api('/api/recipes/' + pid, 'POST', { ingredient_id: ing_id, qty_used, yields, note });
  toast('Added to recipe ✓', 'success');
  document.getElementById('ri-qty').value = ''; document.getElementById('ri-yields').value = ''; document.getElementById('ri-note').value = '';
  closeModal('add-recipe-ing-modal'); loadRecipe(); loadRecipeSummary();
}

// ── USERS ─────────────────────────────────────────────────────────────────
async function loadUsers() {
  ALL_USERS = await api('/api/users');
  var rows = '<tr><th>#</th><th>Name</th><th>Role</th><th>Outlet</th><th>Pay Period</th><th>Daily</th><th>Weekly</th><th>Monthly</th><th></th></tr>';
  ALL_USERS.forEach(function(u, i) {
    var pay = calcPay(u.pay_period, u.pay_amount);
    var roleBadge = { general_manager:'badge-red', manager:'badge-amber', chef:'badge-green', cashier:'badge-blue' }[u.role] || 'badge-gray';
    rows += `<tr>
      <td style="color:var(--text3)">${i+1}</td>
      <td style="font-weight:600">${u.name}</td>
      <td><span class="badge ${roleBadge}">${u.role.replace('_',' ').replace(/\b\w/g,c=>c.toUpperCase())}</span></td>
      <td>${u.outlet_name || '—'}</td>
      <td><span class="badge badge-gray">${u.pay_period}</span></td>
      <td>KES ${fmtN(pay.d)}</td>
      <td>KES ${fmtN(pay.w)}</td>
      <td>KES ${fmtN(pay.m)}</td>
      <td><button class="btn btn-sm" onclick="editUser(${u.id})">Edit</button></td>
    </tr>`;
  });
  document.getElementById('users-table').innerHTML = rows;
  // Keep outlet dropdown in sync
  var outSel = document.getElementById('u-outlet');
  if (outSel) outSel.innerHTML = '<option value="">— unassigned —</option>' + ALL_OUTLETS.map(o => `<option value="${o.id}">${o.name}</option>`).join('');
}

function openUser() {
  document.getElementById('user-edit-id').value = '';
  document.getElementById('user-modal-title').textContent = 'Add Staff Member';
  ['u-name','u-email','u-line'].forEach(id => { var el=document.getElementById(id); if(el) el.value=''; });
  document.getElementById('u-password').value = '';
  document.getElementById('u-role').value = 'cashier';
  document.getElementById('u-pay').value = 'monthly';
  document.getElementById('u-amount').value = '';
  document.getElementById('u-outlet').value = '';
  document.getElementById('del-user-btn').style.display = 'none';
  openModal('add-user-modal');
}

function editUser(id) {
  var u = ALL_USERS.find(x => x.id === id); if (!u) return;
  document.getElementById('user-edit-id').value = u.id;
  document.getElementById('user-modal-title').textContent = 'Edit: ' + u.name;
  document.getElementById('u-name').value = u.name;
  document.getElementById('u-email').value = u.email;
  document.getElementById('u-password').value = '';
  document.getElementById('u-role').value = u.role;
  document.getElementById('u-line').value = u.line || '';
  document.getElementById('u-outlet').value = u.outlet_id || '';
  document.getElementById('u-pay').value = u.pay_period;
  document.getElementById('u-amount').value = u.pay_amount || 0;
  document.getElementById('del-user-btn').style.display = IS_GM ? 'inline-flex' : 'none';
  openModal('add-user-modal');
}

async function saveUser() {
  var id = document.getElementById('user-edit-id').value;
  var d = {
    name: document.getElementById('u-name').value,
    email: document.getElementById('u-email').value,
    role: document.getElementById('u-role').value,
    line: document.getElementById('u-line').value,
    outlet_id: document.getElementById('u-outlet').value || null,
    pay_period: document.getElementById('u-pay').value,
    pay_amount: parseFloat(document.getElementById('u-amount').value || 0)
  };
  var pw = document.getElementById('u-password').value;
  if (pw) d.password = pw;
  if (!d.name || !d.email) { toast('Name and email required', 'error'); return; }
  if (id) { await api('/api/users/' + id, 'PUT', d); }
  else { if (!pw) { toast('Password required for new user', 'error'); return; } d.password = pw; await api('/api/users', 'POST', d); }
  toast('Saved ✓', 'success'); closeModal('add-user-modal');
  document.getElementById('user-edit-id').value = ''; document.getElementById('del-user-btn').style.display = 'none';
  document.getElementById('user-modal-title').textContent = 'Add Staff Member';
  await loadUsers();
}

async function deleteUser() {
  if (!IS_GM) { toast('Only GM can deactivate', 'error'); return; }
  var id = document.getElementById('user-edit-id').value;
  if (!confirm('Deactivate this user? They will no longer be able to log in.')) return;
  await api('/api/users/' + id, 'DELETE');
  toast('Deactivated', 'success'); closeModal('add-user-modal'); await loadUsers();
}

// ── OUTLETS ───────────────────────────────────────────────────────────────
async function loadOutlets() {
  ALL_OUTLETS = await api('/api/outlets');
  // Build assigned staff map
  var staffMap = {};
  ALL_OUTLETS.forEach(o => { staffMap[o.id] = []; });
  // We'll fill staff from ALL_USERS (may be empty at init, refreshed after loadUsers)
  ALL_USERS.forEach(u => { if (u.outlet_id && staffMap[u.outlet_id]) staffMap[u.outlet_id].push(u.name); });

  var rows = '<tr><th>#</th><th>Outlet Name</th><th>Location</th><th>Till / M-Pesa</th><th>Staff Assigned</th><th></th></tr>';
  ALL_OUTLETS.forEach(function(o, i) {
    var staff = staffMap[o.id] || [];
    rows += `<tr>
      <td style="color:var(--text3)">${i+1}</td>
      <td style="font-weight:600">${o.name}</td>
      <td>${o.location || '—'}</td>
      <td style="font-family:monospace">${o.till_number || '—'}</td>
      <td style="font-size:.8rem;color:var(--text2)">${staff.length ? staff.join(', ') : '<em style="color:var(--text3)">none assigned</em>'}</td>
      <td>
        <button class="btn btn-sm" onclick="editOutlet(${o.id})">Edit</button>
        ${IS_GM ? `<button class="btn btn-sm btn-danger" onclick="deleteOutlet2(${o.id})">Delete</button>` : ''}
      </td>
    </tr>`;
  });
  document.getElementById('outlets-table').innerHTML = rows;

  // Keep user-outlet dropdown in sync
  var outSel = document.getElementById('u-outlet');
  if (outSel) outSel.innerHTML = '<option value="">— unassigned —</option>' + ALL_OUTLETS.map(o => `<option value="${o.id}">${o.name}</option>`).join('');
}

function openOutlet() {
  document.getElementById('outlet-edit-id').value = '';
  document.getElementById('outlet-modal-title').textContent = 'Add Outlet';
  ['o-name','o-location','o-till'].forEach(id => { var el=document.getElementById(id); if(el) el.value=''; });
  document.getElementById('del-outlet-btn').style.display = 'none';
  openModal('add-outlet-modal');
}

function editOutlet(id) {
  var o = ALL_OUTLETS.find(x => x.id === id); if (!o) return;
  document.getElementById('outlet-edit-id').value = o.id;
  document.getElementById('outlet-modal-title').textContent = 'Edit: ' + o.name;
  document.getElementById('o-name').value = o.name;
  document.getElementById('o-location').value = o.location || '';
  document.getElementById('o-till').value = o.till_number || '';
  document.getElementById('del-outlet-btn').style.display = IS_GM ? 'inline-flex' : 'none';
  openModal('add-outlet-modal');
}

async function saveOutlet() {
  var id = document.getElementById('outlet-edit-id').value;
  var d = { name: document.getElementById('o-name').value, location: document.getElementById('o-location').value, till_number: document.getElementById('o-till').value };
  if (!d.name) { toast('Enter outlet name', 'error'); return; }
  if (id) await api('/api/outlets/' + id, 'PUT', d); else await api('/api/outlets', 'POST', d);
  toast('Saved ✓', 'success'); closeModal('add-outlet-modal');
  document.getElementById('outlet-edit-id').value = ''; document.getElementById('del-outlet-btn').style.display = 'none';
  await loadOutlets(); await loadUsers();
}

function deleteOutlet() { if (!IS_GM) { toast('Only GM can delete', 'error'); return; } deleteOutlet2(document.getElementById('outlet-edit-id').value, true); }
async function deleteOutlet2(id, closeAfter) {
  if (!confirm('Deactivate this outlet?')) return;
  await api('/api/outlets/' + id, 'DELETE');
  toast('Deactivated', 'success'); if (closeAfter) closeModal('add-outlet-modal');
  await loadOutlets();
}

// ── SETTINGS ─────────────────────────────────────────────────────────────
async function loadSettings() { var data = await api('/api/settings'); for (var k in data) { var el = document.getElementById('s-'+k); if (el) el.value = data[k]; } }
async function saveSettings() {
  var d = {};
  ['business_name','contact','sms_template'].forEach(k => { var el = document.getElementById('s-'+k); if (el) d[k] = el.value; });
  await api('/api/settings', 'POST', d); toast('Settings saved ✓', 'success');
}

// ── OUTLET ASSIGNMENTS ────────────────────────────────────────────────────
async function saveAssignment() {
  var cashier_id = parseInt(document.getElementById('asgn-cashier').value);
  var outlet_id  = parseInt(document.getElementById('asgn-outlet').value);
  var date_str   = document.getElementById('asgn-date').value;
  if (!cashier_id || !outlet_id) { toast('Select cashier and outlet', 'error'); return; }
  await api('/api/outlet_assignments', 'POST', { cashier_id, outlet_id, date: date_str });
  toast('Assigned ✓', 'success');
  var list = document.getElementById('assignments-list');
  try {
    var rows = await api('/api/outlet_assignments?date=' + date_str);
    if (!rows.length) { list.innerHTML = '<div class="alert alert-warning">No assignments yet.</div>'; return; }
    var html = '<div class="table-wrap"><table><tr><th>Cashier</th><th>Outlet</th><th>Assigned At</th><th>Action</th></tr>';
    rows.forEach(function(a) {
      html += `<tr id="asgn-row-${a.cashier_id}"><td style="font-weight:600">${a.cashier_name}</td><td><span class="badge badge-blue">${a.outlet_name}</span></td><td class="ts">${(a.assigned_at||'').slice(0,16)}</td><td><button class="btn btn-sm btn-danger" onclick="removeAssignment(${a.cashier_id})">Remove</button></td></tr>`;
    });
    html += '</table></div>';
    list.innerHTML = html;
  } catch(e) { toast('Assigned but could not refresh', 'error'); }
}

async function removeAssignment(cashier_id) {
  var date_str = document.getElementById('asgn-date')?.value || '{{ today }}';
  await api('/api/outlet_assignments', 'DELETE', { cashier_id, date: date_str });
  var row = document.getElementById('asgn-row-' + cashier_id);
  if (row) { row.style.opacity='0.3'; setTimeout(function(){ row.remove(); }, 600); }
  toast('Removed ✓', 'success');
}

// ── Category Management (Admin) ───────────────────────────────────────────────
var _adminCatTab = 'product';

async function loadProductCategoriesIntoSelect() {
  try {
    var data = await api('/api/product_categories');
    var cats = data.categories || [];
    var sel = document.getElementById('p-cat');
    var current = sel.value;
    sel.innerHTML = cats.map(c => `<option value="${c}">${c}</option>`).join('');
    if (current && cats.includes(current)) sel.value = current;
  } catch(e) { /* keep static options on fail */ }
}

function openAdminCatMgmt(type) {
  _adminCatTab = type;
  var note = document.getElementById('admin-cat-note');
  note.textContent = IS_GM
    ? 'As General Manager, you can add and delete categories.'
    : 'As Manager, you can add categories. Only the General Manager can delete categories.';
  openModal('admin-cat-mgmt-modal');
  adminSwitchCatTab(type);
}

function adminSwitchCatTab(type) {
  _adminCatTab = type;
  document.getElementById('admin-pcat-tab').style.display = type === 'product' ? '' : 'none';
  document.getElementById('admin-icat-tab').style.display = type === 'ingredient' ? '' : 'none';
  document.getElementById('admin-pcat-tab-btn').className = 'tab' + (type === 'product' ? ' active' : '');
  document.getElementById('admin-icat-tab-btn').className = 'tab' + (type === 'ingredient' ? ' active' : '');
  adminLoadCategoryList(type);
}

async function adminLoadCategoryList(type) {
  var listId = type === 'product' ? 'admin-pcat-list' : 'admin-icat-list';
  var div = document.getElementById(listId); if (!div) return;
  div.innerHTML = '<div style="color:var(--text3);font-size:.82rem">Loading…</div>';
  try {
    var endpoint = type === 'product' ? '/api/product_categories' : '/api/ingredient_categories';
    var data = await api(endpoint);
    var cats = data.categories || [];
    var staticCats = data.static || [];
    if (!cats.length) { div.innerHTML = '<div style="color:var(--text3);font-size:.82rem">No categories yet.</div>'; return; }
    var html = '';
    cats.forEach(function(c) {
      var isStatic = staticCats.includes(c);
      html += `<div style="display:flex;align-items:center;justify-content:space-between;padding:.35rem .5rem;border-bottom:1px solid var(--border);font-size:.85rem">
        <span>${c} ${isStatic ? '<span style="font-size:.7rem;color:var(--text3)">(built-in)</span>' : ''}</span>
        ${IS_GM && !isStatic
          ? `<button class="btn btn-sm btn-danger" style="padding:2px 8px;font-size:.72rem" onclick="adminDeleteCategory('${type}','${c.replace(/'/g,"\\'")}')">Delete</button>`
          : (IS_GM && isStatic ? '<span style="font-size:.7rem;color:var(--text3)">Cannot delete</span>' : '')
        }
      </div>`;
    });
    div.innerHTML = html;
  } catch(e) { div.innerHTML = '<div style="color:var(--red);font-size:.82rem">Could not load.</div>'; }
}

async function adminAddCategory(type) {
  var inputId = type === 'product' ? 'admin-new-pcat-name' : 'admin-new-icat-name';
  var name = document.getElementById(inputId).value.trim();
  if (!name) { toast('Enter a category name', 'error'); return; }
  var endpoint = type === 'product' ? '/api/product_categories' : '/api/ingredient_categories';
  try {
    await api(endpoint, 'POST', { name });
    document.getElementById(inputId).value = '';
    toast('Category added ✓', 'success');
    adminLoadCategoryList(type);
    if (type === 'product') loadProductCategoriesIntoSelect();
  } catch(e) { toast('Could not add category', 'error'); }
}

async function adminDeleteCategory(type, name) {
  if (!IS_GM) { toast('Only GM can delete categories', 'error'); return; }
  if (!confirm('Delete category "' + name + '"?\nThis will fail if any items still use it.')) return;
  var endpoint = type === 'product' ? '/api/product_categories/' + encodeURIComponent(name) : '/api/ingredient_categories/' + encodeURIComponent(name);
  try {
    await api(endpoint, 'DELETE');
    toast('Category deleted ✓', 'success');
    adminLoadCategoryList(type);
    if (type === 'product') loadProductCategoriesIntoSelect();
  } catch(e) { toast(e.message || 'Could not delete — items may still use this category', 'error'); }
}

// Load product categories into select on init
loadProductCategoriesIntoSelect();

// ── ROLE MANAGEMENT ───────────────────────────────────────────────────────
var ALL_CUSTOM_ROLES = [];
var ROLE_PAGES = ['dashboard','reports','analytics','finance','production','store','logistics','cashier','waiter','admin'];

async function loadRoles() {
  try {
    ALL_CUSTOM_ROLES = await api('/api/roles');
  } catch(e) { ALL_CUSTOM_ROLES = []; }
  var tbl = document.getElementById('roles-table');
  if (!tbl) return;
  var rows = '<tr><th>Role Key</th><th>Display Name</th><th>Allowed Pages</th><th>Notes</th><th></th></tr>';
  if (!ALL_CUSTOM_ROLES.length) {
    rows += '<tr><td colspan="5" style="color:var(--text3);padding:1rem;text-align:center">No custom roles yet. Click "+ Add Role" to create one.</td></tr>';
  } else {
    ALL_CUSTOM_ROLES.forEach(function(r) {
      var pages = (r.permissions || '').split(',').filter(Boolean).map(function(p){ return '<span class="badge badge-blue" style="margin:1px">'+p+'</span>'; }).join(' ');
      rows += `<tr>
        <td><code style="font-size:.8rem">${r.role_key}</code></td>
        <td style="font-weight:600">${r.display_name}</td>
        <td>${pages || '<span style="color:var(--text3)">none</span>'}</td>
        <td style="color:var(--text3);font-size:.78rem">${r.notes||''}</td>
        <td><button class="btn btn-sm" onclick="editRole('${r.role_key}')">Edit</button></td>
      </tr>`;
    });
  }
  tbl.innerHTML = rows;
  // Also update user role dropdown with custom roles
  updateUserRoleSelect();
}

function updateUserRoleSelect() {
  var sel = document.getElementById('u-role');
  if (!sel) return;
  // Remove previously added custom options
  sel.querySelectorAll('option[data-custom]').forEach(function(o){ o.remove(); });
  ALL_CUSTOM_ROLES.forEach(function(r) {
    var opt = document.createElement('option');
    opt.value = r.role_key;
    opt.textContent = r.display_name + ' (custom)';
    opt.setAttribute('data-custom', '1');
    sel.appendChild(opt);
  });
}

function openAddRole() {
  document.getElementById('role-edit-key').value = '';
  document.getElementById('role-modal-title').textContent = 'Add Custom Role';
  document.getElementById('r-key').value = '';
  document.getElementById('r-name').value = '';
  document.getElementById('r-notes').value = '';
  document.getElementById('del-role-btn').style.display = 'none';
  ROLE_PAGES.forEach(function(p){ var el=document.getElementById('rp-'+p); if(el) el.checked=false; });
  openModal('add-role-modal');
}

function editRole(key) {
  var r = ALL_CUSTOM_ROLES.find(function(x){ return x.role_key === key; });
  if (!r) return;
  document.getElementById('role-edit-key').value = r.role_key;
  document.getElementById('role-modal-title').textContent = 'Edit Role: ' + r.display_name;
  document.getElementById('r-key').value = r.role_key;
  document.getElementById('r-name').value = r.display_name;
  document.getElementById('r-notes').value = r.notes || '';
  document.getElementById('del-role-btn').style.display = IS_GM ? 'inline-flex' : 'none';
  var perms = (r.permissions || '').split(',').filter(Boolean);
  ROLE_PAGES.forEach(function(p){ var el=document.getElementById('rp-'+p); if(el) el.checked=perms.includes(p); });
  openModal('add-role-modal');
}

async function saveRole() {
  var editKey = document.getElementById('role-edit-key').value;
  var key = document.getElementById('r-key').value.trim().toLowerCase().replace(/\s+/g,'_');
  var name = document.getElementById('r-name').value.trim();
  if (!key || !name) { toast('Role key and display name required', 'error'); return; }
  var perms = ROLE_PAGES.filter(function(p){ var el=document.getElementById('rp-'+p); return el && el.checked; });
  var notes = document.getElementById('r-notes').value.trim();
  try {
    if (editKey) {
      await api('/api/roles/' + encodeURIComponent(editKey), 'PUT', { display_name: name, permissions: perms.join(','), notes });
    } else {
      await api('/api/roles', 'POST', { role_key: key, display_name: name, permissions: perms.join(','), notes });
    }
    toast('Role saved ✓', 'success');
    closeModal('add-role-modal');
    loadRoles();
  } catch(e) { toast(e.message || 'Could not save role', 'error'); }
}

async function deleteRole() {
  if (!IS_GM) { toast('Only GM can delete roles', 'error'); return; }
  var key = document.getElementById('role-edit-key').value;
  if (!key || !confirm('Delete role "' + key + '"? Users with this role will still exist but may lose access.')) return;
  try {
    await api('/api/roles/' + encodeURIComponent(key), 'DELETE');
    toast('Role deleted ✓', 'success');
    closeModal('add-role-modal');
    loadRoles();
  } catch(e) { toast(e.message || 'Could not delete', 'error'); }
}

// Load roles on init
loadRoles();
</script>
{% endblock %}