// Aging & Stuck deals view
function Aging({ deals, stages, reps, openDeal, filters }) {
  const active = deals.filter(d => d.stage !== 'sold' && d.stage !== 'lost');

  // Buckets by last activity
  const buckets = [
    { id: '0-7', label: '0–7 days', min: 0, max: 7, tone: 'fresh' },
    { id: '8-21', label: '8–21 days', min: 8, max: 21, tone: 'fresh' },
    { id: '22-30', label: '22–30 days', min: 22, max: 30, tone: 'warm' },
    { id: '31-60', label: '31–60 days', min: 31, max: 60, tone: 'hot' },
    { id: '60+', label: '60+ days', min: 61, max: Infinity, tone: 'hot' },
  ];
  const bucketCounts = buckets.map(b => ({
    ...b,
    deals: active.filter(d => d.lastActivityDaysAgo >= b.min && d.lastActivityDaysAgo <= b.max),
  }));
  const maxBucket = Math.max(...bucketCounts.map(b => b.deals.length), 1);

  // Time in current stage
  const tisAgg = stages.filter(s => s.id !== 'sold' && s.id !== 'lost').map(s => {
    const ds = active.filter(d => d.stage === s.id);
    const avg = ds.length ? ds.reduce((sm, d) => sm + d.stageEnteredDaysAgo, 0) / ds.length : 0;
    return { ...s, avg, count: ds.length, maxStuck: Math.max(...ds.map(d => d.stageEnteredDaysAgo), 0) };
  });
  const maxTis = Math.max(...tisAgg.map(t => t.avg), 1);

  // Stuck deals table
  const stuckDeals = active
    .filter(d => d.lastActivityDaysAgo > 21)
    .sort((a, b) => b.lastActivityDaysAgo - a.lastActivityDaysAgo);

  return (
    <div>
      <div className="grid-kpis">
        <Kpi label="Total stuck (>21d)" value={stuckDeals.length} foot={fmt.money(stuckDeals.reduce((s, d) => s + d.value, 0), true) + ' at risk'} alert deltaPct={0.08} deltaInvert/>
        <Kpi label="Critical (>30d idle)" value={active.filter(d => d.lastActivityDaysAgo > 30).length} foot="needs immediate action" alert deltaPct={0.12} deltaInvert/>
        <Kpi label="Avg pipeline age" value={Math.round(active.reduce((s, d) => s + d.createdDaysAgo, 0) / active.length) + 'd'} foot="from first contact" deltaPct={-0.04}/>
        <Kpi label="Median time in stage" value={Math.round(active.reduce((s, d) => s + d.stageEnteredDaysAgo, 0) / active.length) + 'd'} foot="across active stages" deltaPct={0.02} deltaInvert/>
      </div>

      <div className="grid-2-eq">
        <div className="card">
          <div className="card-hd">
            <div>
              <div className="card-title">Pipeline age — days since last touch</div>
              <div className="card-sub">Active deals only</div>
            </div>
          </div>
          <div className="card-pad">
            {bucketCounts.map(b => (
              <div className="chart-row" key={b.id}>
                <div className="lbl">{b.label}</div>
                <div className="bar-wrap">
                  <div
                    className="bar"
                    style={{
                      width: (b.deals.length / maxBucket * 100) + '%',
                      background: b.tone === 'hot' ? 'var(--lost)' : b.tone === 'warm' ? 'oklch(0.65 0.13 60)' : 'var(--ink-2)',
                    }}
                  >
                    {b.deals.length > 0 && (b.deals.length / maxBucket > 0.18) && (
                      <span>{fmt.money(b.deals.reduce((s, d) => s + d.value, 0), true)}</span>
                    )}
                  </div>
                </div>
                <div className="val"><span className="num">{b.deals.length}</span> deals</div>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-hd">
            <div>
              <div className="card-title">Avg time in stage</div>
              <div className="card-sub">How long deals sit before moving</div>
            </div>
          </div>
          <div className="card-pad">
            {tisAgg.map(t => (
              <div className="chart-row" key={t.id}>
                <div className="lbl">
                  <span className="dot" style={{ width: 8, height: 8, borderRadius: 4, background: `var(--s-${t.id})`, display: 'inline-block' }}></span>
                  {t.label}
                </div>
                <div className="bar-wrap">
                  <div className={`bar ${t.id}`} style={{ width: (t.avg / maxTis * 100) + '%' }}>
                    <span>{Math.round(t.avg)}d avg</span>
                  </div>
                </div>
                <div className="val"><span className="num">{t.maxStuck}d</span> worst</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-hd">
          <div>
            <div className="card-title">Deals needing action</div>
            <div className="card-sub">{stuckDeals.length} deals haven't been touched in 21+ days</div>
          </div>
          <button
            className="btn sm accent"
            onClick={() => {
              if (stuckDeals.length === 0) {
                alert('No stuck deals to nudge.');
                return;
              }
              const byRep = {};
              for (const d of stuckDeals) {
                if (!byRep[d.repName]) byRep[d.repName] = [];
                byRep[d.repName].push(d);
              }
              const summary = Object.entries(byRep)
                .map(([rep, list]) => `${rep}: ${list.length} deal${list.length > 1 ? 's' : ''}`)
                .join('\n');
              if (confirm(`Send a nudge email to:\n\n${summary}\n\nProceed?`)) {
                alert(`Nudges sent to ${Object.keys(byRep).length} designer${Object.keys(byRep).length > 1 ? 's' : ''}.\n\nIn production this would email each designer with a list of their stuck deals + a direct link to follow up.`);
              }
            }}
          ><Icon name="mail" size={12}/> Nudge all reps</button>
        </div>
        <div className="tbl-wrap" style={{ maxHeight: 'calc(100vh - 540px)', overflowY: 'auto' }}>
          <table className="tbl">
            <thead>
              <tr>
                <th>Deal</th>
                <th>Stage</th>
                <th className="num-col">Value</th>
                <th>Rep</th>
                <th className="num-col">Last activity</th>
                <th className="num-col">In stage</th>
                <th>Risk</th>
              </tr>
            </thead>
            <tbody key={`aging-${(filters && filters.rep) || 'all'}-${(filters && filters.stage) || 'all'}-${(filters && filters.dateRange) || 'all'}`}>
              {stuckDeals.map(d => {
                const risk = d.lastActivityDaysAgo > 45 ? 'Critical' : d.lastActivityDaysAgo > 30 ? 'High' : 'Watch';
                const riskColor = risk === 'Critical' ? 'lost' : risk === 'High' ? 'warn' : 'info';
                return (
                  <tr key={d.id} onClick={() => openDeal(d)}>
                    <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}{d.phone ? ` · ${d.phone}` : ''}</div>
                        </div>
                      </div>
                    </td>
                    <td><StagePill stage={d.stage} stages={stages}/></td>
                    <td className="num-col"><span className="num">{fmt.money(d.value, true)}</span></td>
                    <td><div className="rep-cell"><Avatar name={d.repName} sz="sm"/><span style={{ fontSize: 12.5 }}>{d.repName.split(' ')[0]}</span></div></td>
                    <td className={`num-col age-cell ${ageBucket(d.lastActivityDaysAgo)}`}>
                      <span className="num">{d.lastActivityDaysAgo}d</span>
                    </td>
                    <td className="num-col"><span className="num" style={{ color: 'var(--ink-2)' }}>{d.stageEnteredDaysAgo}d</span></td>
                    <td>
                      <span className={`pill ${riskColor === 'lost' ? '' : riskColor}`} style={riskColor === 'lost' ? { background: 'var(--lost-soft)', color: 'oklch(0.4 0.12 28)' } : null}>
                        <span className="dot" style={{ background: `var(--${riskColor === 'lost' ? 'lost' : riskColor === 'warn' ? 'warn' : 'info'})` }}></span>
                        {risk}
                      </span>
                    </td>
                  </tr>
                );
              })}
              {stuckDeals.length === 0 && (
                <tr><td colSpan="7" className="empty">No stuck deals — pipeline is healthy.</td></tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

window.Aging = Aging;