// At-Risk Tickets widget · 3-5 tickets sorted by aging in current stage.

function AtRiskList({ navigate }) {
  const [weeks, setWeeks] = useWindowPref('atRisk', DATA.DEFAULT_WEEKS);
  const rows = DATA.atRiskInWindow(weeks);
  const stageTone = (days) => days >= 6 ? 'bad' : days >= 4 ? 'warn' : null;
  const rcTone = (rc) => {
    if (!rc) return null;
    if (/blocked|loop/i.test(rc)) return 'bad';
    if (/reviewer|overloaded|scope/i.test(rc)) return 'warn';
    return 'accent';
  };

  return (
    <div className="card">
      <div className="card-head">
        <div>
          <div className="ch-eyebrow">At-risk tickets · last {weeks * 7} days</div>
          <div className="ch-title" style={{ marginTop: 4 }}>
            <Icon name="alert-triangle" size={13} style={{ color: 'var(--warn)' }} />
            <span>{rows.length} tickets ageing in stage</span>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span className="mono" style={{ color: 'var(--text-3)', fontSize: 11 }}>Sorted by days stuck</span>
          <WindowSizeChip value={weeks} onChange={setWeeks} />
        </div>
      </div>
      <div className="risk-list">
        {rows.map(t => {
          const dev = DATA.devById(t.assignee);
          return (
            <div key={t.id} className="risk-row" onClick={() => navigate('#/ticket/' + t.id)}>
              <div className="rr-top">
                <div className="rr-key">
                  <span className="rr-id">{t.id}</span>
                  <span className="rr-title" title={t.title}>{t.title}</span>
                </div>
                <span className="rr-stage">{DATA.STAGE_LABEL[t.currentStage]}</span>
                <span className={`rr-days ${stageTone(t.daysInStage) ? 'tone-' + stageTone(t.daysInStage) : ''}`}>{t.daysInStage}d</span>
                <div className="rr-owner">
                  {dev && <Avatar initials={dev.initials} size={20} />}
                </div>
              </div>
              <div className="rr-bottom">
                {t.rootCause && <span className={`rootcause-tag ${rcTone(t.rootCause) ? 'tone-' + rcTone(t.rootCause) : ''}`}>{t.rootCause}</span>}
                <span className="rr-evidence" title={t.evidence}>{t.evidence}</span>
              </div>
            </div>
          );
        })}
        {rows.length === 0 && <div className="empty">No tickets at risk · clean window</div>}
      </div>
    </div>
  );
}

window.AtRiskList = AtRiskList;