import React from 'react'

const URGENCY_LABEL = {
  overdue: 'OVERDUE',
  critical: '≤ 30 days',
  soon: '≤ 90 days',
  ok: 'on horizon',
  unknown: 'no date',
}

export default function KeyDates({ dates, clauseById, selected, onSelect }) {
  if (!dates.length) return <p className="muted pad">No key dates found.</p>
  return (
    <div className="timeline">
      {dates.map((d) => {
        const clause = clauseById.get(d.clause_id)
        const active = selected && selected.id === d.clause_id
        return (
          <button
            key={d.id}
            className={'date-row ' + d.urgency + (active ? ' active' : '')}
            onClick={() => onSelect(d.clause_id)}
          >
            <span className="dot" />
            <span className="date-col">
              <b>{d.date || '?'}</b>
              <small>
                {d.days_until != null
                  ? d.days_until < 0
                    ? `${-d.days_until}d ago`
                    : `in ${d.days_until}d`
                  : ''}
              </small>
            </span>
            <span className="date-label">
              {d.label}
              {d.derivation && <small className="derivation">computed: {d.derivation}</small>}
              <small>§ {clause?.number || d.clause_id}{clause?.heading ? ` ${clause.heading}` : ''}</small>
            </span>
            <span className={'urgency-chip ' + d.urgency}>{URGENCY_LABEL[d.urgency]}</span>
          </button>
        )
      })}
    </div>
  )
}