// Order detail view with inline editing for vendors
// Vendor can edit orders in 'new' or 'received' status
// Edits are tracked with old/new values in a changes array
// Price-affecting changes prompt for confirmation

// Fields that affect pricing
const PRICE_FIELDS = ['w', 'wu', 'h', 'hu', 'd', 'du', 'doors', 'drawers', 'shelves',
  'finishedSide', 'finishedWhich', 'boxMaterial', 'cabType'];
const TOE_PRICE_FIELDS = ['linearFt'];

function OrderDetailPage({ orderId, onBack, isVendor }) {
  const [order, setOrder] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [qrDataUrl, setQrDataUrl] = React.useState(null);
  const [qrEnlarged, setQrEnlarged] = React.useState(false);
  const [actionLoading, setActionLoading] = React.useState(false);

  // Edit state
  const [editing, setEditing] = React.useState(false);
  const [editData, setEditData] = React.useState(null); // working copy
  const [saving, setSaving] = React.useState(false);
  const [priceConfirm, setPriceConfirm] = React.useState(null); // { oldTotal, newTotal, onConfirm }

  React.useEffect(() => {
    if (!orderId) return;
    const unsub = db.collection('orders').doc(orderId).onSnapshot((doc) => {
      if (doc.exists) setOrder({ id: doc.id, ...doc.data() });
      setLoading(false);
    });
    return () => unsub();
  }, [orderId]);

  // QR code
  React.useEffect(() => {
    if (!order) return;
    const url = 'https://precision-cabinets-admin.web.app/orders/' + order.id;
    try {
      if (window.QRCode && window.QRCode.toDataURL) {
        window.QRCode.toDataURL(url, { width: 400, margin: 2, color: { dark: '#1a1a1a', light: '#ffffff' } })
          .then(setQrDataUrl).catch(console.error);
      }
    } catch (err) { console.error('QR error:', err); }
  }, [order?.id]);

  // Start editing
  const startEdit = () => {
    setEditData(JSON.parse(JSON.stringify(order))); // deep clone
    setEditing(true);
  };

  const cancelEdit = () => {
    setEditing(false);
    setEditData(null);
  };

  // Update a top-level field in editData
  const updateField = (key, value) => {
    setEditData(prev => ({ ...prev, [key]: value }));
  };

  // Update a cabinet field
  const updateCabinet = (idx, key, value) => {
    setEditData(prev => {
      const cabs = [...prev.cabinets];
      cabs[idx] = { ...cabs[idx], [key]: value };
      return { ...prev, cabinets: cabs };
    });
  };

  // Update toe kick
  const updateToeKick = (key, value) => {
    setEditData(prev => ({
      ...prev,
      toeKick: { ...(prev.toeKick || {}), [key]: value }
    }));
  };

  // Compute changes between original and edited
  const computeChanges = () => {
    if (!order || !editData) return [];
    const changes = [];
    const fields = ['vendorContact', 'vendorPhone', 'vendorEmail', 'vendorPO',
      'clientName', 'clientPhone', 'clientEmail', 'address', 'accessNotes',
      'completionRequested', 'timeframe', 'specialInstructions'];

    for (const f of fields) {
      if ((order[f] || '') !== (editData[f] || '')) {
        changes.push({ section: 'order', field: f, old: order[f] || '', new: editData[f] || '' });
      }
    }

    // Cabinets
    const origCabs = order.cabinets || [];
    const editCabs = editData.cabinets || [];
    const maxLen = Math.max(origCabs.length, editCabs.length);
    for (let i = 0; i < maxLen; i++) {
      const oc = origCabs[i] || {};
      const ec = editCabs[i] || {};
      const cabFields = ['name', 'w', 'wu', 'h', 'hu', 'd', 'du', 'doors', 'drawers', 'shelves',
        'finishedSide', 'finishedWhich', 'boxMaterial', 'boxThickness', 'cabType', 'notes'];
      for (const f of cabFields) {
        if (String(oc[f] || '') !== String(ec[f] || '')) {
          changes.push({
            section: `cabinet_${i}`, field: f,
            old: String(oc[f] || ''), new: String(ec[f] || ''),
            cabIdx: i, cabName: ec.name || oc.name || `Cab ${i + 1}`,
          });
        }
      }
    }

    // Toe kick
    const otk = order.toeKick || {};
    const etk = editData.toeKick || {};
    for (const f of ['height', 'setback', 'thickness', 'linearFt']) {
      if (String(otk[f] || '') !== String(etk[f] || '')) {
        changes.push({ section: 'toeKick', field: f, old: String(otk[f] || ''), new: String(etk[f] || '') });
      }
    }

    return changes;
  };

  // Check if changes affect pricing
  const changeAffectsPrice = (changes) => {
    return changes.some(c => {
      if (c.section.startsWith('cabinet_') && PRICE_FIELDS.includes(c.field)) return true;
      if (c.section === 'toeKick' && TOE_PRICE_FIELDS.includes(c.field)) return true;
      if (c.field === 'timeframe') return true;
      return false;
    });
  };

  // Save edits
  const saveEdits = async (confirmed) => {
    const changes = computeChanges();
    if (changes.length === 0) { cancelEdit(); return; }

    // Check price impact
    if (!confirmed && changeAffectsPrice(changes)) {
      const oldEstimate = order.estimate?.total || 0;
      const newEstimate = computeEstimate(editData, editData.pricingSnapshot ?
        (() => { const p = {...DEFAULT_PRICING}; for (const [k,v] of Object.entries(editData.pricingSnapshot)) { if(p[k]) p[k] = {...p[k], price: v.price}; } return p; })()
        : DEFAULT_PRICING
      ).total;

      setPriceConfirm({ oldTotal: oldEstimate, newTotal: newEstimate, changes });
      return;
    }

    setSaving(true);
    try {
      // Recompute estimate
      const pricing = editData.pricingSnapshot ?
        (() => { const p = {...DEFAULT_PRICING}; for (const [k,v] of Object.entries(editData.pricingSnapshot)) { if(p[k]) p[k] = {...p[k], price: v.price}; } return p; })()
        : DEFAULT_PRICING;
      const newEstimate = computeEstimate(editData, pricing);

      // Build the change log entry
      const changeEntry = {
        timestamp: new Date(),
        changedBy: 'vendor',
        changedByName: order.vendorName,
        changes: changes,
      };

      // Get existing edit history
      const existingEdits = order.editHistory || [];

      // Strip photo field from cabinets
      const cleanCabs = (editData.cabinets || []).map(({ photo, ...rest }) => rest);

      await db.collection('orders').doc(orderId).update({
        vendorContact: editData.vendorContact || '',
        vendorPhone: editData.vendorPhone || '',
        vendorEmail: editData.vendorEmail || '',
        vendorPO: editData.vendorPO || '',
        clientName: editData.clientName || '',
        clientPhone: editData.clientPhone || '',
        clientEmail: editData.clientEmail || '',
        address: editData.address || '',
        accessNotes: editData.accessNotes || '',
        completionRequested: editData.completionRequested || '',
        timeframe: editData.timeframe || '',
        specialInstructions: editData.specialInstructions || '',
        cabinets: cleanCabs,
        toeKick: editData.toeKick || {},
        estimate: newEstimate,
        editHistory: [...existingEdits, changeEntry],
        updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
      });

      setEditing(false);
      setEditData(null);
      setPriceConfirm(null);
    } catch (err) {
      alert('Failed to save: ' + (err.message || 'Unknown error'));
    } finally {
      setSaving(false);
    }
  };

  // Employee/Admin status changes
  const handleStatusAction = async (action) => {
    const labels = { receive: 'Mark as Received?', advance: 'Advance status?', deliver: 'Mark as Delivered?' };
    if (!confirm(labels[action] || 'Change status?')) return;
    setActionLoading(true);
    try {
      await callFunction('pc_updateOrderStatus', { orderId: order.id, action });
    } catch (err) { alert('Error: ' + err.message); }
    finally { setActionLoading(false); }
  };

  if (loading) return <div className="dashboard-loading"><div className="spinner"></div><p>Loading order...</p></div>;
  if (!order) return <div className="dashboard-loading"><p>Order not found.</p><button className="btn ghost" onClick={onBack}>Go back</button></div>;

  const STATUS_ORDER_LIST = ['new', 'received', 'in_production', 'complete', 'delivered'];
  const currentIdx = STATUS_ORDER_LIST.indexOf(order.status);
  const isEmployee = !isVendor;
  const canEdit = isVendor && (order.status === 'new' || order.status === 'received');

  // Use editData when editing, order when viewing
  const d = editing ? editData : order;
  const cabs = d?.cabinets || [];
  const tk = d?.toeKick || {};

  return (
    <div className="order-detail">
      {/* Header */}
      <header className="order-detail-header">
        <button className="btn ghost" onClick={editing ? cancelEdit : onBack}>
          <Icon.ArrowL /> {editing ? 'Cancel' : 'Back'}
        </button>
        <div style={{ flex: 1 }}>
          <h2 className="mono">{order.orderNumber || 'Order'}</h2>
          <StatusBadge status={order.status} />
        </div>
        {!editing && canEdit && (
          <button className="btn primary edit-order-btn" onClick={startEdit}>
            <Icon.Pencil /> Edit Order
          </button>
        )}
        {editing && (
          <button className="btn primary" onClick={() => saveEdits(false)} disabled={saving}>
            {saving ? 'Saving...' : 'Save Changes'}
          </button>
        )}
      </header>

      {editing && (
        <div className="edit-banner">
          <Icon.Pencil /> Editing — changes will be tracked. Tap Save when done.
        </div>
      )}

      {/* Status timeline */}
      <div className="status-timeline">
        {STATUS_ORDER_LIST.map((s, i) => (
          <div key={s} className={'timeline-step' + (i <= currentIdx ? ' done' : '') + (i === currentIdx ? ' current' : '')}>
            <div className="timeline-dot"></div>
            <div className="timeline-label">{STATUS_LABELS[s]}</div>
          </div>
        ))}
      </div>

      {/* QR Code */}
      {!editing && (
        <div className="order-qr-section" onClick={() => qrDataUrl && setQrEnlarged(true)} style={{ cursor: qrDataUrl ? 'pointer' : 'default' }}>
          <h3>Work Order QR Code</h3>
          {isVendor && <p className="hint">Show this to Precision Cabinets at drop-off or pickup.{qrDataUrl ? ' Tap to enlarge.' : ''}</p>}
          {qrDataUrl ? (
            <img src={qrDataUrl} alt="QR Code" className="order-qr-img" />
          ) : (
            <div style={{ padding: 20, background: 'var(--bg)', borderRadius: 8, marginTop: 8 }}>
              <div className="spinner" style={{ margin: '0 auto 8px' }}></div>
              <p className="hint" style={{ textAlign: 'center' }}>Generating QR code...</p>
            </div>
          )}
          {qrDataUrl && (
            <div style={{ display: 'flex', gap: 8, marginTop: 10, justifyContent: 'center' }}>
              <a href={qrDataUrl} download={`${order.orderNumber}-qr.png`} className="btn secondary"
                onClick={e => e.stopPropagation()} style={{ fontSize: 12 }}>Download</a>
            </div>
          )}
        </div>
      )}

      {/* QR enlarged overlay */}
      {qrEnlarged && qrDataUrl && (
        <div className="qr-overlay" onClick={() => setQrEnlarged(false)}>
          <div className="qr-overlay-inner" onClick={e => e.stopPropagation()}>
            <div className="qr-overlay-order">{order.orderNumber}</div>
            <img src={qrDataUrl} alt="QR Code" className="qr-overlay-img" />
            <div className="qr-overlay-status"><StatusBadge status={order.status} /></div>
            {isVendor && <p className="qr-overlay-hint">Show this to Precision Cabinets staff</p>}
            <button className="btn ghost" onClick={() => setQrEnlarged(false)} style={{ marginTop: 16 }}>Close</button>
          </div>
        </div>
      )}

      {/* Employee status actions */}
      {isEmployee && order.status === 'new' && (
        <div className="order-action-box">
          <p><strong>New order from {order.vendorName}</strong></p>
          <button className="btn primary lg" onClick={() => handleStatusAction('receive')} disabled={actionLoading}>
            {actionLoading ? 'Processing...' : 'Mark as Received (Dropped Off)'}
          </button>
        </div>
      )}
      {isEmployee && order.status === 'received' && (
        <div className="order-action-box" style={{ background: 'var(--bg-raised)', borderColor: 'var(--rule)' }}>
          <button className="btn primary" onClick={() => handleStatusAction('advance')} disabled={actionLoading}>
            {actionLoading ? 'Processing...' : 'Move to In Production'}
          </button>
        </div>
      )}
      {isEmployee && order.status === 'in_production' && (
        <div className="order-action-box" style={{ background: 'var(--bg-raised)', borderColor: 'var(--rule)' }}>
          <button className="btn primary" onClick={() => handleStatusAction('advance')} disabled={actionLoading}>
            {actionLoading ? 'Processing...' : 'Mark as Complete'}
          </button>
        </div>
      )}
      {isEmployee && order.status === 'complete' && (
        <div className="order-action-box">
          <button className="btn primary lg" onClick={() => handleStatusAction('deliver')} disabled={actionLoading}>
            {actionLoading ? 'Processing...' : 'Mark as Delivered (Picked Up)'}
          </button>
        </div>
      )}
      {order.status === 'delivered' && (
        <div className="order-action-box" style={{ background: 'oklch(95% 0.04 140)', borderColor: 'oklch(70% 0.12 140)' }}>
          <p style={{ color: 'oklch(40% 0.12 140)', margin: 0 }}><strong>Order delivered.</strong></p>
        </div>
      )}

      {/* Price change confirmation modal */}
      {priceConfirm && (
        <div className="qr-overlay" onClick={() => setPriceConfirm(null)}>
          <div className="qr-overlay-inner" onClick={e => e.stopPropagation()} style={{ maxWidth: 340 }}>
            <h3 style={{ margin: '0 0 12px' }}>Price Change</h3>
            <p style={{ fontSize: 14, color: 'var(--ink-soft)', margin: '0 0 16px' }}>
              Your changes affect the estimated price:
            </p>
            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <span className="mono" style={{ fontSize: 18, textDecoration: 'line-through', color: 'var(--ink-faint)' }}>
                {fmtMoney(priceConfirm.oldTotal)}
              </span>
              <span style={{ color: 'var(--ink-faint)' }}>→</span>
              <span className="mono" style={{ fontSize: 22, fontWeight: 700, color: priceConfirm.newTotal > priceConfirm.oldTotal ? 'var(--danger)' : 'oklch(50% 0.15 150)' }}>
                {fmtMoney(priceConfirm.newTotal)}
              </span>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button className="btn ghost" style={{ flex: 1 }} onClick={() => setPriceConfirm(null)}>Cancel</button>
              <button className="btn primary" style={{ flex: 1 }} onClick={() => saveEdits(true)} disabled={saving}>
                {saving ? 'Saving...' : 'Confirm Change'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Order detail sections */}
      <div className="order-detail-sections">
        {/* Vendor info */}
        <div className="order-detail-section">
          <h3>Vendor</h3>
          <div className="detail-grid">
            <div><span className="label">Name</span><span>{d.vendorName}</span></div>
            {editing ? (
              <>
                <EditField label="Contact" value={d.vendorContact} orig={order.vendorContact} onChange={v => updateField('vendorContact', v)} />
                <EditField label="Phone" value={d.vendorPhone} orig={order.vendorPhone} onChange={v => updateField('vendorPhone', v)} mono />
                <EditField label="Email" value={d.vendorEmail} orig={order.vendorEmail} onChange={v => updateField('vendorEmail', v)} />
                <EditField label="PO #" value={d.vendorPO} orig={order.vendorPO} onChange={v => updateField('vendorPO', v)} mono />
              </>
            ) : (
              <>
                <DetailVal label="Contact" value={d.vendorContact} orig={order.vendorContact} edits={order.editHistory} field="vendorContact" />
                <DetailVal label="Phone" value={d.vendorPhone} orig={order.vendorPhone} edits={order.editHistory} field="vendorPhone" mono />
                <DetailVal label="Email" value={d.vendorEmail} orig={order.vendorEmail} edits={order.editHistory} field="vendorEmail" />
                {d.vendorPO && <DetailVal label="PO #" value={d.vendorPO} edits={order.editHistory} field="vendorPO" mono />}
              </>
            )}
          </div>
        </div>

        {/* Customer */}
        <div className="order-detail-section">
          <h3>Customer</h3>
          <div className="detail-grid">
            {editing ? (
              <>
                <EditField label="Name" value={d.clientName} orig={order.clientName} onChange={v => updateField('clientName', v)} />
                <EditField label="Phone" value={d.clientPhone} orig={order.clientPhone} onChange={v => updateField('clientPhone', v)} mono />
                <EditField label="Email" value={d.clientEmail} orig={order.clientEmail} onChange={v => updateField('clientEmail', v)} />
                <EditField label="Address" value={d.address} orig={order.address} onChange={v => updateField('address', v)} full />
              </>
            ) : (
              <>
                <DetailVal label="Name" value={d.clientName} edits={order.editHistory} field="clientName" />
                <DetailVal label="Phone" value={d.clientPhone} edits={order.editHistory} field="clientPhone" mono />
                {d.clientEmail && <DetailVal label="Email" value={d.clientEmail} edits={order.editHistory} field="clientEmail" />}
                <DetailVal label="Address" value={d.address} edits={order.editHistory} field="address" />
              </>
            )}
          </div>
        </div>

        {/* Cabinets */}
        {cabs.length > 0 && (
          <div className="order-detail-section">
            <h3>Cabinets ({cabs.length})</h3>
            {cabs.map((cab, i) => (
              <div key={cab.id || i} className="order-cabinet-card">
                {editing ? (
                  <CabinetEditCard cab={cab} idx={i} origCab={(order.cabinets || [])[i]}
                    onChange={(k, v) => updateCabinet(i, k, v)} />
                ) : (
                  <>
                    <CabinetViewCard cab={cab} idx={i} editHistory={order.editHistory} />
                    {window.CabinetSchematicVendor && (
                      <CabinetSchematicVendor cab={cab} idx={i} showCutList={!isVendor || !!order.showCutListToVendor} />
                    )}
                  </>
                )}
              </div>
            ))}
          </div>
        )}

        {/* Toe Kick */}
        {(tk.linearFt || tk.height || editing) && (
          <div className="order-detail-section">
            <h3>Toe Kick</h3>
            <div className="detail-grid">
              {editing ? (
                <>
                  <EditField label="Height" value={tk.height} orig={(order.toeKick||{}).height} onChange={v => updateToeKick('height', v)} mono />
                  <EditField label="Setback" value={tk.setback} orig={(order.toeKick||{}).setback} onChange={v => updateToeKick('setback', v)} mono />
                  <EditField label="Thickness" value={tk.thickness} orig={(order.toeKick||{}).thickness} onChange={v => updateToeKick('thickness', v)} mono />
                  <EditField label="Linear ft" value={tk.linearFt} orig={(order.toeKick||{}).linearFt} onChange={v => updateToeKick('linearFt', v)} mono />
                </>
              ) : (
                <>
                  {tk.height && <DetailVal label="Height" value={`${tk.height} ${tk.heightU || 'in'}`} />}
                  {tk.setback && <DetailVal label="Setback" value={`${tk.setback} ${tk.setbackU || 'in'}`} />}
                  {tk.thickness && <DetailVal label="Thickness" value={tk.thickness} />}
                  {tk.linearFt && <DetailVal label="Linear ft" value={tk.linearFt} mono />}
                </>
              )}
            </div>
          </div>
        )}

        {/* Special Instructions */}
        <div className="order-detail-section">
          <h3>Special Instructions</h3>
          {editing ? (
            <textarea className="textarea" value={d.specialInstructions || ''}
              onChange={e => updateField('specialInstructions', e.target.value)}
              placeholder="Color match, hardware, notes…" style={{ minHeight: 60 }} />
          ) : (
            <p style={{ margin: 0, fontSize: 14 }}>{d.specialInstructions || '—'}</p>
          )}
        </div>

        {/* Estimate */}
        {order.estimate && (
          <div className="order-detail-section">
            <h3>Estimate</h3>
            <div className="estimate-table">
              {(order.estimate.lineItems || []).map((item, i) => (
                <div key={i} className="est-row">
                  <span className="est-label">{item.label}</span>
                  <span className="est-detail">{item.detail}</span>
                  <span className="est-amount mono">{fmtMoney(item.amount)}</span>
                </div>
              ))}
              <div className="est-row est-total">
                <span>Total</span><span></span>
                <span className="mono">{fmtMoney(order.estimate.total)}</span>
              </div>
            </div>
          </div>
        )}

        {/* Edit history */}
        {order.editHistory && order.editHistory.length > 0 && (
          <div className="order-detail-section">
            <h3>Edit History</h3>
            {order.editHistory.map((entry, i) => (
              <div key={i} className="edit-history-entry">
                <div className="edit-history-header">
                  <span className="edit-history-by">{entry.changedByName}</span>
                  <span className="edit-history-time mono">
                    {entry.timestamp?.toDate ? entry.timestamp.toDate().toLocaleString() : new Date(entry.timestamp).toLocaleString()}
                  </span>
                </div>
                <div className="edit-history-changes">
                  {(entry.changes || []).map((c, j) => (
                    <div key={j} className="edit-change-row">
                      <span className="edit-change-field">{c.cabName ? `${c.cabName} · ` : ''}{c.field}</span>
                      <span className="edit-change-old">{c.old || '—'}</span>
                      <span className="edit-change-arrow">→</span>
                      <span className="edit-change-new">{c.new || '—'}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        )}

        {/* Status history */}
        {order.statusHistory && order.statusHistory.length > 0 && (
          <div className="order-detail-section">
            <h3>Status History</h3>
            <div className="status-history">
              {order.statusHistory.map((entry, i) => (
                <div key={i} className="history-entry">
                  <StatusBadge status={entry.status} />
                  <span className="history-by">{entry.changedByName || 'System'}</span>
                  <span className="history-method">{entry.method === 'qr_scan' ? 'QR Scan' : ''}</span>
                  <span className="history-time mono">
                    {entry.timestamp?.toDate ? entry.timestamp.toDate().toLocaleString() : ''}
                  </span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// Inline edit field
function EditField({ label, value, orig, onChange, mono, full }) {
  const changed = orig !== undefined && (value || '') !== (orig || '');
  return (
    <div className={full ? 'edit-field full' : 'edit-field'}>
      <span className="label">{label}</span>
      {changed && orig && <span className="edit-old-value">{orig}</span>}
      <input className={'input' + (mono ? ' mono' : '') + (changed ? ' edited' : '')}
        value={value || ''} onChange={e => onChange(e.target.value)} />
    </div>
  );
}

// Read-only detail value — shows edit history strikethrough if changed
function DetailVal({ label, value, edits, field, mono }) {
  // Find the most recent old value for this field from edit history
  let oldValue = null;
  if (edits && field) {
    for (let i = edits.length - 1; i >= 0; i--) {
      const change = (edits[i].changes || []).find(c => c.field === field && c.section === 'order');
      if (change) { oldValue = change.old; break; }
    }
  }
  return (
    <div>
      <span className="label">{label}</span>
      {oldValue && oldValue !== value && (
        <span className="detail-old-value">{oldValue}</span>
      )}
      <span className={mono ? 'mono' : ''}>{value || '—'}</span>
    </div>
  );
}

// Cabinet view card — shows edit history
function CabinetViewCard({ cab, idx, editHistory }) {
  return (
    <>
      <div className="order-cab-head">
        <strong>Cab {String(idx + 1).padStart(2, '0')}{cab.name ? ' — ' + cab.name : ''}</strong>
        <span className="mono">{cab.w}{cab.wu} × {cab.h}{cab.hu} × {cab.d}{cab.du}</span>
      </div>
      <div className="order-cab-specs">
        <span>{cab.doors || 0} doors</span>
        <span>{cab.drawers || 0} drawers</span>
        <span>{cab.shelves || 0} shelves</span>
        <span>{cab.boxMaterial}</span>
        {cab.finishedSide === 'Yes' && <span>Finished: {cab.finishedWhich}</span>}
        {cab.cabType !== 'Standard wall' && <span>{cab.cabType}</span>}
      </div>
      {cab.notes && <div className="order-cab-notes">{cab.notes}</div>}
    </>
  );
}

// Cabinet edit card — inline editing
function CabinetEditCard({ cab, idx, origCab, onChange }) {
  const oc = origCab || {};
  const changed = (field) => String(cab[field] || '') !== String(oc[field] || '');

  return (
    <div className="cab-edit-card">
      <div className="edit-field full">
        <span className="label">Name</span>
        <input className={'input' + (changed('name') ? ' edited' : '')} value={cab.name || ''} onChange={e => onChange('name', e.target.value)} />
      </div>
      <div className="v-fields" style={{ marginTop: 8 }}>
        <div className="edit-field">
          <span className="label">Width</span>
          {changed('w') && <span className="edit-old-value">{oc.w}</span>}
          <input className={'input mono' + (changed('w') ? ' edited' : '')} value={cab.w || ''} onChange={e => onChange('w', e.target.value)} />
        </div>
        <div className="edit-field">
          <span className="label">Height</span>
          {changed('h') && <span className="edit-old-value">{oc.h}</span>}
          <input className={'input mono' + (changed('h') ? ' edited' : '')} value={cab.h || ''} onChange={e => onChange('h', e.target.value)} />
        </div>
        <div className="edit-field">
          <span className="label">Depth</span>
          {changed('d') && <span className="edit-old-value">{oc.d}</span>}
          <input className={'input mono' + (changed('d') ? ' edited' : '')} value={cab.d || ''} onChange={e => onChange('d', e.target.value)} />
        </div>
      </div>
      <div className="v-fields" style={{ marginTop: 8 }}>
        <div className="edit-field">
          <span className="label">Doors</span>
          <input className={'input mono' + (changed('doors') ? ' edited' : '')} type="number" min="0" value={cab.doors || 0} onChange={e => onChange('doors', parseInt(e.target.value) || 0)} />
        </div>
        <div className="edit-field">
          <span className="label">Drawers</span>
          <input className={'input mono' + (changed('drawers') ? ' edited' : '')} type="number" min="0" value={cab.drawers || 0} onChange={e => onChange('drawers', parseInt(e.target.value) || 0)} />
        </div>
        <div className="edit-field">
          <span className="label">Shelves</span>
          <input className={'input mono' + (changed('shelves') ? ' edited' : '')} type="number" min="0" value={cab.shelves || 0} onChange={e => onChange('shelves', parseInt(e.target.value) || 0)} />
        </div>
      </div>
      <div className="v-fields" style={{ marginTop: 8 }}>
        <div className="edit-field">
          <span className="label">Material</span>
          {changed('boxMaterial') && <span className="edit-old-value">{oc.boxMaterial}</span>}
          <select className={'select' + (changed('boxMaterial') ? ' edited' : '')} value={cab.boxMaterial || ''} onChange={e => onChange('boxMaterial', e.target.value)}>
            <option value="">Select…</option>
            {BOX_MATERIALS.map(m => <option key={m}>{m}</option>)}
          </select>
        </div>
        <div className="edit-field">
          <span className="label">Finished side</span>
          <div className="segmented">{['Yes', 'No'].map(opt => (
            <button key={opt} className={(cab.finishedSide === opt ? 'on' : '') + (changed('finishedSide') ? ' edited' : '')} onClick={() => onChange('finishedSide', opt)}>{opt}</button>
          ))}</div>
        </div>
      </div>
      <div className="edit-field full" style={{ marginTop: 8 }}>
        <span className="label">Notes</span>
        <textarea className={'textarea' + (changed('notes') ? ' edited' : '')} value={cab.notes || ''} onChange={e => onChange('notes', e.target.value)} />
      </div>
    </div>
  );
}

Object.assign(window, { OrderDetailPage });