// Pipeline kanban — drag deals between stages
function Pipeline({ deals, stages, openDeal, onMoveStage, onBulkReassign, onEditDeal, repFilter, setRepFilter, reps, showrooms, canReassign }) {
  const [dragId, setDragId] = React.useState(null);
  const [dragOver, setDragOver] = React.useState(null);
  const [reassignDeal, setReassignDeal] = React.useState(null);
  const [density, setDensity] = React.useState(() => {
    try {return localStorage.getItem('kub_pipeline_density') || 'comfortable';} catch (e) {return 'comfortable';}
  });
  React.useEffect(() => {
    try {localStorage.setItem('kub_pipeline_density', density);} catch (e) {}
  }, [density]);
  const compact = density === 'compact';
  const [query, setQuery] = React.useState('');

  const active = stages.filter((s) => s.id !== 'sold' && s.id !== 'lost');
  const q = query.trim().toLowerCase();
  const filtered = deals.filter((d) => {
    if (repFilter !== 'all' && d.rep !== repFilter) return false;
    if (q) {
      const hay = [d.customer, d.product, d.id, d.quoteNumber, d.repName, d.suburb, d.phone, d.email].
      filter(Boolean).join(' ').toLowerCase();
      if (!hay.includes(q)) return false;
    }
    return true;
  });
  const matchCount = filtered.filter((d) => active.some((s) => s.id === d.stage)).length;

  const onDragStart = (e, id) => {
    setDragId(id);
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', id);
  };
  const onDragEnd = () => {setDragId(null);setDragOver(null);};
  const onDrop = (e, stageId) => {
    e.preventDefault();
    if (dragId) onMoveStage(dragId, stageId);
    setDragId(null);setDragOver(null);
  };
  const allowDrop = (e, stageId) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    if (stageId !== dragOver) setDragOver(stageId);
  };

  return (
    <React.Fragment>
      {/* View density toggle + quick job search */}
      <div className="pipeline-toolbar">
        <span className="pt-label">Board view</span>
        <div className="pipeline-search">
          <span className="search-icon"><Icon name="search" size={13} /></span>
          <input
            type="text"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Search jobs — customer, product, ID, rep, suburb…"
            aria-label="Search pipeline jobs" />
          {query &&
          <button className="ps-clear" onClick={() => setQuery('')} title="Clear search" aria-label="Clear search">×</button>
          }
        </div>
        {q &&
        <span className="pipeline-match-count num">{matchCount} {matchCount === 1 ? 'match' : 'matches'}</span>
        }
        <div className="seg" role="group" aria-label="Board density">
          <button className={!compact ? 'on' : ''} onClick={() => setDensity('comfortable')} title="Comfortable — full detail">
            <Icon name="dashboard" size={12} style={{ marginRight: 5, verticalAlign: '-1px' }} />Comfortable
          </button>
          <button className={compact ? 'on' : ''} onClick={() => setDensity('compact')} title="Compact — condensed cards">
            <Icon name="table" size={12} style={{ marginRight: 5, verticalAlign: '-1px' }} />Compact
          </button>
        </div>
      </div>

      <div className={`kanban ${compact ? 'compact' : ''}`}>
        {active.map((s) => {
          const stageDeals = filtered.filter((d) => d.stage === s.id).sort((a, b) => b.value - a.value);
          const total = stageDeals.reduce((sm, d) => sm + d.value, 0);
          return (
            <div
              key={s.id}
              className={`kanban-col ${dragOver === s.id ? 'drop' : ''}`}
              onDragOver={(e) => allowDrop(e, s.id)}
              onDragLeave={() => setDragOver(null)}
              onDrop={(e) => onDrop(e, s.id)} style={{ fontSize: "6px", alignItems: "stretch", textAlign: "left", width: "600px" }}>
              
              <div className="kanban-col-hd" style={{ fontSize: "20px" }}>
                <span className={`col-dot ${s.id}`}></span>
                <span className="col-title" style={{ fontSize: "14px" }}>{s.label}</span>
                <span className="col-count num" style={{ fontSize: "12px" }}>{stageDeals.length}</span>
              </div>
              <div className="col-total" style={{ fontSize: "20px" }}>
                <span className="ct-amount">{fmt.money(total, true)}</span>
                <span className="ct-label">{stageDeals.length} {stageDeals.length === 1 ? 'deal' : 'deals'} in pipeline</span>
              </div>
              <div className="kanban-list" style={{ fontSize: "15px", width: "600px" }}>
                {stageDeals.map((d) => {
                  const pastForecast = d.forecastDepositMonth && d.forecastDepositMonth < '2026-05-28' && d.stage !== 'sold';
                  return (
                    <div
                      key={d.id}
                      className={`deal-card ${dragId === d.id ? 'dragging' : ''}`}
                      draggable
                      onDragStart={(e) => onDragStart(e, d.id)}
                      onDragEnd={onDragEnd}
                      onClick={() => openDeal(d)}>
                      
                      <div className="deal-card-hd">
                        <span className="deal-id mono">{d.quoteNumber || d.id}</span>
                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                          {compact && pastForecast && <Icon name="alert" size={10} color="var(--lost)" title="Past forecast" />}
                          <span className="deal-value num">{fmt.money(d.value, true)}</span>
                        </span>
                      </div>
                      <div className="deal-card-customer">{d.customer}</div>

                      {!compact && <div className="deal-card-product">{d.product}</div>}

                      {!compact &&
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10.5, marginBottom: 4 }}>
                          <label
                          onClick={(e) => e.stopPropagation()}
                          style={{ display: 'inline-flex', alignItems: 'center', gap: 4, cursor: 'pointer', padding: '2px 6px', borderRadius: 3, background: d.onsiteVisitDone ? 'var(--won-soft)' : 'var(--surface-2)', color: d.onsiteVisitDone ? 'oklch(0.35 0.1 155)' : 'var(--ink-3)' }}>
                          
                            <input
                            type="checkbox"
                            checked={!!d.onsiteVisitDone}
                            onChange={(e) => {e.stopPropagation();onEditDeal && onEditDeal(d.id, { onsiteVisitDone: e.target.checked });}}
                            style={{ margin: 0, transform: 'scale(0.85)' }} />
                          
                            Onsite visit
                          </label>
                          {pastForecast &&
                        <span style={{ background: 'var(--lost-soft)', color: 'oklch(0.4 0.12 28)', padding: '2px 6px', borderRadius: 3, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 3 }}>
                              <Icon name="alert" size={9} /> Past forecast
                            </span>
                        }
                        </div>
                      }

                      <div className="deal-card-foot">
                        <Avatar name={d.repName} sz="sm" />
                        <span>{d.repName.split(' ')[0]}</span>
                        <span className={`age ${ageBucket(d.lastActivityDaysAgo)}`}>
                          <Icon name="clock" size={11} />
                          <span className="num">{d.lastActivityDaysAgo}d</span>
                        </span>
                        {canReassign &&
                        <button
                          title="Reassign this deal"
                          onClick={(e) => {e.stopPropagation();setReassignDeal(d);}}
                          style={{
                            marginLeft: 4, padding: '3px 5px', border: '1px solid var(--border)',
                            borderRadius: 4, background: 'var(--surface)', cursor: 'pointer',
                            color: 'var(--ink-3)'
                          }}>
                          
                            <Icon name="users" size={11} />
                          </button>
                        }
                      </div>
                    </div>);

                })}
                {stageDeals.length === 0 &&
                <div className="empty">{q ? 'No matches' : 'Drop deals here'}</div>
                }
              </div>
            </div>);

        })}
      </div>

      {reassignDeal &&
      <ReassignModal
        deals={[reassignDeal]}
        reps={reps}
        showrooms={showrooms}
        onClose={() => setReassignDeal(null)}
        onConfirm={(newRepId, note) => {
          onBulkReassign([reassignDeal.id], newRepId, note);
          setReassignDeal(null);
        }} />

      }
    </React.Fragment>);

}

window.Pipeline = Pipeline;