const modal = document.createElement('div');
  modal.className = 'modal-overlay';
  modal.innerHTML = `
    <div class="modal">
      <div class="modal-header">
        <h3>New Order</h3>
        <button onclick="this.closest('.modal-overlay').remove()" style="background:none;border:none;color:var(--text);font-size:20px;cursor:pointer;">×</button>
      </div>
      <div class="modal-body">
        <div class="form-row">
          <div class="form-group"><label>Channel</label>
            <select id="o-channel"><option value="manual">Manual</option><option value="etsy">Etsy</option><option value="amazon">Amazon</option></select>
          </div>
          <div class="form-group"><label>Customer Name</label><input id="o-name" placeholder="John Doe"></div>
        </div>
        <div class="form-row">
          <div class="form-group"><label>Email</label><input id="o-email" type="email"></div>
          <div class="form-group"><label>Phone</label><input id="o-phone"></div>
        </div>
        <div class="form-group"><label>Shipping Address</label><input id="o-address"></div>
        <div class="form-row">
          <div class="form-group"><label>City</label><input id="o-city"></div>
          <div class="form-group"><label>State</label><input id="o-state" value="TX"></div>
          <div class="form-group"><label>ZIP</label><input id="o-zip"></div>
        </div>
        <div class="form-group"><label>Items (JSON array of {product_id, quantity})</label>
          <textarea id="o-items" rows="3" placeholder='[{"product_id":1,"quantity":2}]'></textarea>
        </div>
        <div class="form-group"><label>Notes</label><textarea id="o-notes" rows="2"></textarea></div>
      </div>
      <div class="modal-footer">
        <button class="btn" onclick="this.closest('.modal-overlay').remove()">Cancel</button>
        <button class="btn btn-primary" onclick="saveOrder()">Create Order</button>
      </div>
    </div>
  `;
  document.body.appendChild(modal);
}

function saveOrder() {
  const items = JSON.parse(document.getElementById('o-items').value || '[]');
  const data = {
    channel: document.getElementById('o-channel').value,
    customer_name: document.getElementById('o-name').value,
    customer_email: document.getElementById('o-email').value,
    customer_phone: document.getElementById('o-phone').value,
    shipping_address: document.getElementById('o-address').value,
    shipping_city: document.getElementById('o-city').value,
    shipping_state: document.getElementById('o-state').value,
    shipping_zip: document.getElementById('o-zip').value,
    items,
    notes: document.getElementById('o-notes').value
  };
  api('POST', '/orders', data).then(() => {
    document.querySelector('.modal-overlay').remove();
    loadPageData();
  }).catch(err => alert(err.message));
}

// ─── PRINT QUEUE ───
function renderPrintQueue() {
  const jobs = state.data.printJobs || [];
  return `
    <h1 class="page-title">Print Queue</h1>
    <p class="page-subtitle">Manage print jobs across all printers</p>
    
    <div style="display:flex;gap:12px;margin-bottom:24px;">
      <select onchange="filterPrintJobs(this.value)" style="max-width:200px;">
        <option value="">All Statuses</option>
        <option value="queued">Queued</option>
        <option value="printing">Printing</option>
        <option value="completed">Completed</option>
      </select>
    </div>
    
    <div class="print-queue">
      ${jobs.map(j => `
        <div class="print-job">
          <div class="print-job-info">
            <div class="print-job-title">${j.product_name} <small style="color:var(--text-muted)">(${j.sku})</small></div>
            <div class="print-job-meta">
              Job #${j.job_number} · Qty: ${j.quantity} · Est: ${j.estimated_hours}h · Priority: ${j.priority}
            </div>
          </div>
          <span class="printer-tag">${j.printer}</span>
          <span class="status-badge status-${j.status}">${j.status}</span>
          <div style="display:flex;gap:8px;">
            ${j.status === 'queued' ? `<button class="btn btn-sm btn-primary" onclick="updatePrintJob(${j.id}, 'printing')">Start</button>` : ''}
            ${j.status === 'printing' ? `<button class="btn btn-sm btn-success" onclick="updatePrintJob(${j.id}, 'completed')">Complete</button>` : ''}
            <button class="btn btn-sm" onclick="updatePrintJob(${j.id}, 'cancelled')">Cancel</button>
          </div>
        </div>
      `).join('') || '<div class="empty-state"><div class="empty-state-icon">🖨️</div><p>No print jobs in queue</p></div>'}
    </div>
  `;
}

function updatePrintJob(id, status) {
  api('PUT', `/print-jobs/${id}/status`, { status }).then(() => loadPageData()).catch(err => alert(err.message));
}

function filterPrintJobs(status) {
  api('GET', `/print-jobs?status=${status}`).then(data => {
    state.data.printJobs = data;
    render();
  });
}

// ─── MATERIALS ───
function renderMaterials() {
  const materials = state.data.materials || [];
  return `
    <h1 class="page-title">Materials</h1>
    <p class="page-subtitle">Track filament inventory and costs</p>
    
    <div style="display:flex;gap:12px;margin-bottom:24px;">
      <button class="btn btn-primary" onclick="showAddMaterialModal()">+ Add Material</button>
    </div>
    
    <div class="card">
      <table>
        <thead><tr><th>Type</th><th>Color</th><th>Brand</th><th>Remaining</th><th>Cost/kg</th><th>Status</th></tr></thead>
        <tbody>
          ${materials.map(m => `
            <tr>
              <td><strong>${m.type}</strong></td>
              <td>${m.color}</td>
              <td>${m.brand || '-'}</td>
              <td style="color:${m.remaining_g < 200 ? 'var(--danger)' : 'var(--success)'}">${m.remaining_g}g</td>
              <td>$${m.cost_per_kg}</td>
              <td><span class="status-badge status-${m.status}">${m.status}</span></td>
            </tr>
          `).join('') || '<tr><td colspan="6" class="empty-state">No materials tracked yet</td></tr>'}
        </tbody>
      </table>
    </div>
  `;
}

function showAddMaterialModal() {
  const modal = document.createElement('div');
  modal.className = 'modal-overlay';
  modal.innerHTML = `
    <div class="modal">
      <div class="modal-header"><h3>Add Material</h3><button onclick="this.closest('.modal-overlay').remove()" style="background:none;border:none;color:var(--text);font-size:20px;cursor:pointer;">×</button></div>
      <div class="modal-body">
        <div class="form-row">
          <div class="form-group"><label>Type</label><select id="m-type"><option>PLA</option><option>PETG</option><option>ABS</option><option>TPU</option></select></div>
          <div class="form-group"><label>Color</label><input id="m-color" placeholder="Black"></div>
        </div>
        <div class="form-row">
          <div class="form-group"><label>Brand</label><input id="m-brand" placeholder="eSun"></div>
          <div class="form-group"><label>Cost/kg ($)</label><input type="number" id="m-cost" value="25"></div>
        </div>
        <div class="form-group"><label>Notes</label><textarea id="m-notes" rows="2"></textarea></div>
      </div>
      <div class="modal-footer">
        <button class="btn" onclick="this.closest('.modal-overlay').remove()">Cancel</button>
        <button class="btn btn-primary" onclick="saveMaterial()">Save</button>
      </div>
    </div>
  `;
  document.body.appendChild(modal);
}

function saveMaterial() {
  const data = {
    type: document.getElementById('m-type').value,
    color: document.getElementById('m-color').value,
    brand: document.getElementById('m-brand').value,
    cost_per_kg: parseFloat(document.getElementById('m-cost').value),
    notes: document.getElementById('m-notes').value
  };
  api('POST', '/materials', data).then(() => {
    document.querySelector('.modal-overlay').remove();
    loadPageData();
  }).catch(err => alert(err.message));
}

// ─── AUTOMATION ───
function renderAutomation() {
  const rules = state.data.automationRules || [];
  return `
    <h1 class="page-title">Automation</h1>
    <p class="page-subtitle">Status-based triggers and actions</p>
    
    <div class="card">
      <div class="card-header"><span class="card-title">Active Rules</span></div>
      <table>
        <thead><tr><th>Name</th><th>Trigger</th><th>Action</th><th>Status</th></tr></thead>
        <tbody>
          ${rules.map(r => `
            <tr>
              <td><strong>${r.name}</strong></td>
              <td><span class="status-badge">${r.trigger_status}</span></td>
              <td>${r.action_type}</td>
              <td>${r.is_active ? 'Active' : 'Inactive'}</td>
            </tr>
          `).join('') || '<tr><td colspan="4" class="empty-state">No automation rules configured</td></tr>'}
        </tbody>
      </table>
    </div>
  `;
}

// ─── DATA LOADER ───
function loadPageData() {
  state.loading = true;
  render();
  
  const promises = [];
  
  if (state.currentPage === 'dashboard') {
    promises.push(api('GET', '/dashboard').then(d => state.data = { ...state.data, ...d }));
  }
  if (state.currentPage === 'products') {
    promises.push(api('GET', '/products').then(d => state.data.products = d));
  }
  if (state.currentPage === 'inventory') {
    promises.push(api('GET', '/inventory').then(d => state.data.inventory = d));
  }
  if (state.currentPage === 'orders') {
    promises.push(api('GET', '/orders').then(d => state.data.orders = d));
  }
  if (state.currentPage === 'print-queue') {
    promises.push(api('GET', '/print-jobs').then(d => state.data.printJobs = d));
  }
  if (state.currentPage === 'materials') {
    promises.push(api('GET', '/materials').then(d => state.data.materials = d));
  }
  if (state.currentPage === 'automation') {
    promises.push(api('GET', '/automation-rules').then(d => state.data.automationRules = d));
  }
  
  Promise.all(promises).then(() => {
    state.loading = false;
    render();
  }).catch(err => {
    state.loading = false;
    console.error(err);
    render();
  });
}

// ─── INIT ───
render();
</script>
</body>
</html>