// All Deals — sortable, filterable, inline-editable table
function Deals({ deals, stages, reps, showrooms, openDeal, onEditDeal, onBulkReassign, onNewDeal, filters, setFilters, search, showroomScope, isLeadership }) {
  const [sort, setSort] = React.useState({ key: 'created', dir: 'desc' });
  const [editingCell, setEditingCell] = React.useState(null); // {id, field}
  const [selectedIds, setSelectedIds] = React.useState([]);
  const [reassignOpen, setReassignOpen] = React.useState(false);
  const showShowroomCol = showroomScope === 'all';

  let rows = deals;
  // Filters already applied at the App level. Just apply search here (it's local).
  if (search) {
    const q = search.toLowerCase();
    const qDigits = q.replace(/\D/g, '');
    rows = rows.filter(d =>
      d.customer.toLowerCase().includes(q) ||
      (d.product || '').toLowerCase().includes(q) ||
      d.id.toLowerCase().includes(q) ||
      (qDigits && (d.phone || '').replace(/\D/g, '').includes(qDigits)) ||
      (d.quoteNumber || '').toString().toLowerCase().includes(q) ||
      d.repName.toLowerCase().includes(q)
    );
  }

  rows = [...rows].sort((a, b) => {
    let va = a[sort.key], vb = b[sort.key];
    if (sort.key === 'created') { va = a.createdDaysAgo; vb = b.createdDaysAgo; }
    if (sort.key === 'lastActivity') { va = a.lastActivityDaysAgo; vb = b.lastActivityDaysAgo; }
    if (sort.key === 'stage') {
      const order = ['possible','in_progress','on_hold','sold','lost'];
      va = order.indexOf(a.stage); vb = order.indexOf(b.stage);
    }
    if (va == null) va = '';
    if (vb == null) vb = '';
    if (typeof va === 'string') {
      return sort.dir === 'asc' ? va.localeCompare(vb) : vb.localeCompare(va);
    }
    return sort.dir === 'asc' ? va - vb : vb - va;
  });

  const setSortKey = (key) => {
    setSort(prev => prev.key === key
      ? { key, dir: prev.dir === 'asc' ? 'desc' : 'asc' }
      : { key, dir: ['value','created','lastActivity'].includes(key) ? 'desc' : 'asc' }
    );
  };

  const SortHdr = ({ k, label, num }) => (
    <th className={`sortable ${num ? 'num-col' : ''}`} onClick={() => setSortKey(k)}>
      {label}
      <span className="sort-ind">
        {sort.key === k ? (sort.dir === 'asc' ? '▲' : '▼') : '↕'}
      </span>
    </th>
  );

  const total = rows.reduce((s, d) => s + d.value, 0);

  return (
    <div className="card" style={{ overflow: 'hidden' }}>
      <div className="card-hd" style={{ borderBottom: '1px solid var(--border)' }}>
        <div>
          <div className="card-title">
            <span className="num">{rows.length}</span> deals
            <span style={{ color: 'var(--ink-3)', fontWeight: 400, marginLeft: 8 }}>·</span>
            <span style={{ marginLeft: 8, color: 'var(--ink-2)', fontWeight: 500 }} className="num">{fmt.money(total)}</span>
            <span style={{ color: 'var(--ink-3)', fontWeight: 400, marginLeft: 4 }}>total</span>
          </div>
          <div className="card-sub">Click a row for detail · click value/stage/notes to edit inline</div>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          <button
            className="btn sm"
            onClick={() => downloadCSV('deals-' + new Date().toISOString().slice(0, 10) + '.csv', rows, [
              { key: 'id', label: 'Deal ID' },
              { key: 'quoteNumber', label: 'Quote #' },
              { key: 'customer', label: 'Customer' },
              { key: 'phone', label: 'Phone' },
              { key: 'product', label: 'Product / job' },
              { key: 'stage', label: 'Stage', format: (v) => stages.find(s => s.id === v)?.label || v },
              { key: 'statusRaw', label: 'Status' },
              { key: 'value', label: 'Value AUD' },
              { key: 'showroom', label: 'Showroom', format: (v) => showrooms.find(s => s.id === v)?.name || v },
              { key: 'repName', label: 'Designer' },
              { key: 'budgetRange', label: 'Budget range' },
              { key: 'onsiteVisitDone', label: 'Onsite visit done', format: (v) => v ? 'Yes' : 'No' },
              { key: 'designApptDate', label: 'Design appt date' },
              { key: 'quotePresentationDate', label: 'Quote presented' },
              { key: 'forecastDepositMonth', label: 'Forecast deposit' },
              { key: 'created', label: 'Created' },
              { key: 'lastActivity', label: 'Last activity' },
              { key: 'createdDaysAgo', label: 'Age days' },
              { key: 'lastActivityDaysAgo', label: 'Idle days' },
              { key: 'notes', label: 'Notes' },
            ])}
          >
            <Icon name="download" size={12}/> Export
          </button>
          <button className="btn sm primary" onClick={onNewDeal}><Icon name="plus" size={12}/> New lead</button>
        </div>
      </div>

      <div className="tbl-wrap" style={{ maxHeight: 'calc(100vh - 280px)', overflowY: 'auto' }}>
        <table className="tbl">
          <thead>
            <tr>
              {isLeadership && (
                <th className="row-check">
                  <input
                    type="checkbox"
                    checked={rows.length > 0 && rows.every(r => selectedIds.includes(r.id))}
                    onChange={(e) => {
                      if (e.target.checked) setSelectedIds(rows.map(r => r.id));
                      else setSelectedIds([]);
                    }}
                    onClick={(e) => e.stopPropagation()}
                  />
                </th>
              )}
              <SortHdr k="quoteNumber" label="Quote #"/>
              <SortHdr k="customer" label="Customer · Job"/>
              {showShowroomCol && <SortHdr k="showroom" label="Showroom"/>}
              <SortHdr k="stage" label="Status"/>
              <SortHdr k="value" label="Value" num/>
              <SortHdr k="repName" label="Designer"/>
              <SortHdr k="onsiteVisitDone" label="Onsite"/>
              <SortHdr k="quotePresentationDate" label="Quoted" num/>
              <SortHdr k="created" label="Created" num/>
              <SortHdr k="lastActivity" label="Last activity" num/>
              <th></th>
            </tr>
          </thead>
          <tbody key={`${filters.rep}-${filters.stage}-${filters.dateRange}-${filters.agingOnly}-${search}-${showroomScope}`}>
            {rows.map(d => {
              const editingValue = editingCell && editingCell.id === d.id && editingCell.field === 'value';
              const editingStage = editingCell && editingCell.id === d.id && editingCell.field === 'stage';
              const isSelected = selectedIds.includes(d.id);
              return (
                <tr
                  key={d.id}
                  className={isSelected ? 'row-selected' : ''}
                  onClick={(e) => {
                    if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
                    openDeal(d);
                  }}
                >
                  {isLeadership && (
                    <td className="row-check" onClick={(e) => e.stopPropagation()}>
                      <input
                        type="checkbox"
                        checked={isSelected}
                        onChange={(e) => {
                          setSelectedIds(prev => e.target.checked
                            ? [...prev, d.id]
                            : prev.filter(x => x !== d.id)
                          );
                        }}
                      />
                    </td>
                  )}
                  <td className="mono" style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{d.quoteNumber || d.id}</td>
                  <td>
                    <div className="customer-cell">
                      <Avatar name={d.customer} sz="sm"/>
                      <div className="customer-meta">
                        <div className="customer-name">{d.customer}</div>
                        <div className="customer-sub">{d.product}</div>
                      </div>
                    </div>
                  </td>
                  {showShowroomCol && (
                    <td>
                      <span className="pill">
                        <span className={`ss-tab-dot ${d.showroom}`}></span>
                        {showrooms.find(s => s.id === d.showroom)?.name}
                      </span>
                    </td>
                  )}
                  <td onClick={(e) => { e.stopPropagation(); setEditingCell({ id: d.id, field: 'stage' }); }}>
                    {editingStage ? (
                      <select
                        className="sel"
                        autoFocus
                        defaultValue={d.stage}
                        onChange={(e) => { onEditDeal(d.id, { stage: e.target.value }); setEditingCell(null); }}
                        onBlur={() => setEditingCell(null)}
                        onClick={(e) => e.stopPropagation()}
                      >
                        {stages.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
                      </select>
                    ) : <StagePill stage={d.stage} stages={stages}/>}
                  </td>
                  <td
                    className="num-col"
                    onClick={(e) => { e.stopPropagation(); setEditingCell({ id: d.id, field: 'value' }); }}
                  >
                    {editingValue ? (
                      <input
                        type="number"
                        defaultValue={d.value}
                        className="cell-edit num"
                        autoFocus
                        style={{ textAlign: 'right' }}
                        onClick={(e) => e.stopPropagation()}
                        onBlur={(e) => { onEditDeal(d.id, { value: parseInt(e.target.value, 10) || 0 }); setEditingCell(null); }}
                        onKeyDown={(e) => {
                          if (e.key === 'Enter') e.target.blur();
                          if (e.key === 'Escape') setEditingCell(null);
                        }}
                      />
                    ) : <span className="num">{fmt.money(d.value)}</span>}
                  </td>
                  <td>
                    <div className="rep-cell">
                      <Avatar name={d.repName} sz="sm"/>
                      <span style={{ fontSize: 12.5 }}>{d.repName}</span>
                    </div>
                  </td>
                  <td style={{ fontSize: 12.5, color: 'var(--ink-2)' }}>
                    {d.onsiteVisitDone
                      ? <span className="pill" style={{ background: 'var(--won-soft)', color: 'oklch(0.35 0.1 155)' }}><span className="dot" style={{ background: 'var(--won)' }}></span>Yes</span>
                      : <span style={{ color: 'var(--ink-3)' }}>No</span>}
                  </td>
                  <td className="num-col" style={{ color: 'var(--ink-3)' }}>
                    <span className="num">{d.quotePresentationDate ? fmt.shortDate(d.quotePresentationDate) : '—'}</span>
                  </td>
                  <td className="num-col" style={{ color: 'var(--ink-3)' }}>
                    <span className="num">{fmt.shortDate(d.created)}</span>
                  </td>
                  <td className={`num-col age-cell ${ageBucket(d.lastActivityDaysAgo)}`}>
                    <span className="num">{d.lastActivityDaysAgo}d</span>
                  </td>
                  <td>
                    <button className="btn icon sm" onClick={(e) => { e.stopPropagation(); openDeal(d); }}>
                      <Icon name="chevron-right" size={13}/>
                    </button>
                  </td>
                </tr>
              );
            })}
            {rows.length === 0 && (
              <tr><td colSpan={(showShowroomCol ? 11 : 10) + (isLeadership ? 1 : 0)} className="empty">No deals match the current filters.</td></tr>
            )}
          </tbody>
        </table>
      </div>

      {isLeadership && selectedIds.length > 0 && (
        <div className="bulk-bar">
          <span className="bb-count num">{selectedIds.length}</span>
          <span>selected</span>
          <span className="bb-divider"></span>
          <button onClick={() => setReassignOpen(true)}>
            <Icon name="users" size={13}/> Reassign
          </button>
          <button>
            <Icon name="tag" size={13}/> Change stage
          </button>
          <button>
            <Icon name="download" size={13}/> Export
          </button>
          <span className="bb-divider"></span>
          <button onClick={() => setSelectedIds([])}>
            <Icon name="close" size={13}/> Clear
          </button>
        </div>
      )}

      {reassignOpen && (
        <ReassignModal
          deals={deals.filter(d => selectedIds.includes(d.id))}
          reps={reps}
          showrooms={showrooms}
          onClose={() => setReassignOpen(false)}
          onConfirm={(newRepId, note) => {
            onBulkReassign(selectedIds, newRepId, note);
            setSelectedIds([]);
            setReassignOpen(false);
          }}
        />
      )}
    </div>
  );
}

window.Deals = Deals;