// Ticket Forensics · full-page drill destination for a single ticket.

function TicketForensicsPage({ navigate, openSidePanel, id }) {
  const t = DATA.ticketById(id);
  if (!t) {
    return (
      <div className="page page-fade">
        <h1>Ticket not found</h1>
        <p>No ticket with id {id}.</p>
        <a className="btn" href="#/dashboard">Back to dashboard</a>
      </div>
    );
  }
  const dev = DATA.devById(t.assignee);
  const aiSum = (t.commits || []).reduce((a, c) => a + c.aiPct, 0);
  const aiAvg = t.commits && t.commits.length ? Math.round(aiSum / t.commits.length) : 0;
  const totalActive = t.history.reduce((a, s) => a + s.activeDays, 0);
  const totalQueue  = t.history.reduce((a, s) => a + s.queueDays, 0);

  return (
    <div className="page page-fade">
      <div className="card toned-card tone-accent tf-hero">
        <div className="tfh-key">{t.id} · Created {fmtRelative(-t.createdAtDays)}</div>
        <div className="tfh-title">{t.title}</div>
        <div className="tfh-meta">
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <StatusCircle kind={t.currentStage === 'done' ? 'done' : t.currentStage === 'review' ? 'review' : t.currentStage === 'bug' ? 'bug' : 'progress'} />
            <span>{DATA.STAGE_LABEL[t.currentStage]}</span>
          </span>
          <span style={{ color: 'var(--text-4)' }}>·</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <Avatar initials={dev?.initials} size={20} />
            <a href={'#/dev/' + dev.id} style={{ color: 'inherit' }}>{dev?.name}</a>
          </span>
          {t.rootCause && (
            <>
              <span style={{ color: 'var(--text-4)' }}>·</span>
              <span className={`rootcause-tag tone-warn`}>{t.rootCause}</span>
            </>
          )}
        </div>
      </div>

      {/* Per-ticket Gantt · a single row */}
      <div className="section-head">
        <div>
          <div className="section-eyebrow">End-to-end lifecycle</div>
          <div className="section-title">Phase timeline</div>
        </div>
      </div>
      <GanttForensics navigate={navigate} rows={[t]} days={Math.max(21, totalActive + totalQueue + 4)} startDay={t.history[0].startDay - 1} />

      {/* Stat strip */}
      <div className="card profile-stat-strip" style={{ marginTop: 16 }}>
        <div className="profile-stat">
          <div className="pst-label">Active work</div>
          <div className="pst-value">{totalActive}<span style={{ fontSize: 13, color: 'var(--text-3)' }}>d</span></div>
          <div className="pst-sub">Sum across all stages</div>
        </div>
        <div className="profile-stat">
          <div className="pst-label">Queue / wait</div>
          <div className="pst-value" style={{ color: totalQueue > totalActive ? 'var(--warn)' : 'var(--text)' }}>{totalQueue}<span style={{ fontSize: 13, color: 'var(--text-3)' }}>d</span></div>
          <div className="pst-sub">{totalQueue + totalActive > 0 ? Math.round(totalQueue / (totalQueue + totalActive) * 100) : 0}% of elapsed</div>
        </div>
        <div className="profile-stat">
          <div className="pst-label">AI authored</div>
          <div className="pst-value" style={{ color: 'var(--accent)' }}>{aiAvg}<span style={{ fontSize: 13, color: 'var(--text-3)' }}>%</span></div>
          <div className="pst-sub">{(t.commits || []).length} commits</div>
        </div>
        <div className="profile-stat">
          <div className="pst-label">Reviewers</div>
          <div className="pst-value">{t.pr.reviewers.length}</div>
          <div className="pst-sub">PR {t.pr.id}</div>
        </div>
      </div>

      {/* Event timeline (commits + PR events interleaved by dayOffset) */}
      <div className="section-head">
        <div>
          <div className="section-eyebrow">All events · raw</div>
          <div className="section-title">Forensics log</div>
        </div>
      </div>
      <div className="card tf-timeline">
        {(() => {
          const events = [
            ...(t.commits || []).map(c => ({ kind: 'commit', day: c.dayOffset, payload: c })),
            ...(t.pr.events || []).map(e => ({ kind: e.kind, day: e.dayOffset, payload: e })),
          ].sort((a, b) => a.day - b.day);
          if (!events.length) return <div className="empty">No events logged.</div>;
          return events.map((e, i) => {
            if (e.kind === 'commit') {
              const c = e.payload;
              return (
                <div key={i} className="tf-event kind-commit">
                  <div className="tfe-time">{fmtRelative(-e.day)}</div>
                  <div className="tfe-icon"><Icon name="git-commit" size={13} /></div>
                  <div>
                    <div className="tfe-body">{c.message}</div>
                    <div className="tfe-sub">
                      <span className="mono" style={{ color: 'var(--text-3)' }}>{c.sha.slice(0, 8)}</span>
                      <span> · </span>
                      <span style={{ color: 'var(--accent)' }}>AI {c.aiPct}%</span>
                      {c.tool && c.tool !== 'none' && <span> · {c.tool}</span>}
                      <span> · </span>
                      <span className="mono">{c.files.length} file{c.files.length === 1 ? '' : 's'}</span>
                    </div>
                  </div>
                </div>
              );
            }
            const evt = e.payload;
            const by = DATA.devById(evt.by);
            const kindClass = e.kind === 'comment' ? 'kind-review' : e.kind === 'change' ? 'kind-review' : e.kind === 'approve' ? 'kind-deploy' : e.kind === 'merge' ? 'kind-deploy' : 'kind-pr';
            const icon = { open: 'git-pull', comment: 'message-square', change: 'alert-triangle', approve: 'check-circle', merge: 'git-merge' }[e.kind] || 'git-pull';
            const label = { open: 'opened PR', comment: 'commented', change: 'requested changes', approve: 'approved', merge: 'merged' }[e.kind] || e.kind;
            return (
              <div key={i} className={`tf-event ${kindClass}`}>
                <div className="tfe-time">{fmtRelative(-e.day)}</div>
                <div className="tfe-icon"><Icon name={icon} size={13} /></div>
                <div>
                  <div className="tfe-body"><strong style={{ color: 'var(--text-2)' }}>{by?.name.split(' ')[0]}</strong> {label}{evt.latencyH > 0 && <span className="pr-latency" style={{ marginLeft: 6 }}>+{evt.latencyH}h</span>}</div>
                  {evt.body && <div className="tfe-sub">{evt.body}</div>}
                </div>
              </div>
            );
          });
        })()}
      </div>
    </div>
  );
}

window.TicketForensicsPage = TicketForensicsPage;