// Pipeline alerts — past-due forecast deposits not yet sold
function PipelineAlerts({ deals, currentUser, openDeal }) {
  const today = '2026-05-28';
  const overdue = React.useMemo(() => {
    return deals.filter(d => {
      if (d.stage === 'sold' || d.stage === 'lost') return false;
      if (!d.forecastDepositMonth) return false;
      return d.forecastDepositMonth < today;
    }).sort((a, b) => (a.forecastDepositMonth || '').localeCompare(b.forecastDepositMonth || ''));
  }, [deals]);

  if (overdue.length === 0) return null;

  const totalValue = overdue.reduce((s, d) => s + (d.value || 0), 0);

  return (
    <div className="card" style={{
      marginBottom: 16,
      background: 'var(--lost-soft)',
      border: '1px solid oklch(0.85 0.08 28)',
      padding: '12px 16px',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{
          width: 36, height: 36, borderRadius: 18,
          background: 'var(--lost)', color: 'white',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>
          <Icon name="alert" size={16} color="white"/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'oklch(0.4 0.12 28)' }}>
            {overdue.length} deal{overdue.length > 1 ? 's' : ''} with past-due forecast deposit, not yet sold · {fmt.money(totalValue, true)}
          </div>
          <div style={{ fontSize: 11.5, color: 'oklch(0.45 0.1 28)', marginTop: 2 }}>
            Update the forecast deposit month or mark them as sold/lost.
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }}>
        {overdue.slice(0, 8).map(d => (
          <button
            key={d.id}
            onClick={() => openDeal(d)}
            style={{
              background: 'var(--surface)',
              border: '1px solid var(--border)',
              borderRadius: 4,
              padding: '4px 8px',
              fontSize: 11,
              cursor: 'pointer',
              display: 'inline-flex',
              alignItems: 'center',
              gap: 6,
            }}
          >
            <span className="mono" style={{ color: 'var(--ink-3)' }}>{d.quoteNumber || d.id}</span>
            <span style={{ fontWeight: 500 }}>{d.customer}</span>
            <span style={{ color: 'var(--lost)' }}>· forecast {fmt.shortDate(d.forecastDepositMonth)}</span>
          </button>
        ))}
        {overdue.length > 8 && (
          <span style={{ fontSize: 11, color: 'var(--ink-3)', padding: '4px 8px' }}>
            + {overdue.length - 8} more
          </span>
        )}
      </div>
    </div>
  );
}

window.PipelineAlerts = PipelineAlerts;