// PrDetail · review timeline inside a slide-out. Renders the PR's events
// (open / comment / change / approve / merge) with first-response latencies.

function PrDetail({ ticketId }) {
  const t = DATA.ticketById(ticketId);
  if (!t) return <div className="drill-empty">PR not found.</div>;
  const pr = t.pr;
  const evs = pr.events;
  const latencyTone = (h) => h >= 16 ? 'bad' : h >= 8 ? 'warn' : null;
  const kindIcon = {
    open: 'git-pull', comment: 'message-square', change: 'alert-triangle',
    approve: 'check-circle', merge: 'git-merge',
  };
  const kindLabel = {
    open: 'opened', comment: 'commented', change: 'requested changes',
    approve: 'approved', merge: 'merged',
  };
  return (
    <>
      <div className="drill-section">
        <div className="drill-section-h">PR · {pr.id}</div>
        <div className="ds-row">
          <span>{t.title}</span>
          <span className="ds-meta">{evs.length} event{evs.length === 1 ? '' : 's'}</span>
        </div>
      </div>
      <div className="drill-section">
        <div className="drill-section-h">Review timeline</div>
        <div className="pr-tl">
          {evs.map((e, i) => {
            const by = DATA.devById(e.by);
            const tone = latencyTone(e.latencyH);
            return (
              <div key={i} className={`pr-tl-row kind-${e.kind}`}>
                <div className="ptl-time">{fmtRelative(-e.dayOffset)}</div>
                <div className="ptl-icon"><Icon name={kindIcon[e.kind]} size={11} /></div>
                <div>
                  <div className="ptl-text">
                    <strong style={{ color: 'var(--text-2)' }}>{by?.name.split(' ')[0]}</strong> {kindLabel[e.kind]}
                    {e.latencyH > 0 && <span className={`pr-latency ${tone ? 'tone-' + tone : ''}`} title={`Latency since open: ${e.latencyH}h`}>+{e.latencyH}h</span>}
                  </div>
                  {e.body && <div className="ptl-sub">{e.body}</div>}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
}

window.PrDetail = PrDetail;