// CommitDetail · modal-sized detail panel for a single commit.
// Currently surfaced through the Gantt tooltip; full modal opens from
// Ticket Forensics commit rows.

function CommitDetail({ commit, ticketId, onClose }) {
  if (!commit) return null;
  return (
    <div className="modal-scrim" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="modal" onMouseDown={e => e.stopPropagation()}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 18px', borderBottom: '1px solid var(--border)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon name="git-commit" size={14} />
            <span style={{ fontWeight: 600 }}>Commit</span>
            <span className="mono" style={{ color: 'var(--text-3)', fontSize: 11 }}>{commit.sha.slice(0, 10)}</span>
          </div>
          <button className="row-action" onClick={onClose}><Icon name="x" size={14} /></button>
        </div>
        <div style={{ padding: '16px 18px' }}>
          <div style={{ fontSize: 13, marginBottom: 10 }}>{commit.message}</div>
          <div className="kv-grid">
            <span className="kv-label">Ticket</span>
            <span className="mono">{ticketId}</span>
            <span className="kv-label">AI authored</span>
            <span><AuthorshipSplit aiPct={commit.aiPct} label /></span>
            <span className="kv-label">Tool</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              {commit.tool === 'none' || !commit.tool ?
                <><Icon name="pen" size={12} style={{ color: 'var(--human)' }} /> hand-written</> :
                <><Icon name="bot" size={12} style={{ color: 'var(--accent)' }} /> {commit.tool}</>
              }
            </span>
            <span className="kv-label">Files</span>
            <span className="mono" style={{ fontSize: 11 }}>{commit.files.join(', ')}</span>
            <span className="kv-label">When</span>
            <span className="mono" style={{ fontSize: 11 }}>{fmtRelative(-commit.dayOffset)}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

window.CommitDetail = CommitDetail;