box-box/frontend/src/components/live/TimingTower.tsx

import { teamColor } from '../../utils'
import type { LiveStreamData } from '../../types'
import {
  driverCode,
  positionDelta,
  positionDeltaClass,
  sortLiveTimingRows,
  tyreClass,
  tyreLabel,
} from '../../lib/live'

interface Props {
  snapshot: LiveStreamData
}

function posClass(pos: number): string {
  if (pos === 1) return 'pos-p1'
  if (pos === 2) return 'pos-p2'
  if (pos === 3) return 'pos-p3'
  return 'pos-n'
}

export function TimingTower({ snapshot }: Props) {
  const rows = sortLiveTimingRows(snapshot)

  if (rows.length === 0) {
    return (
      <div className="missing-notice">
        Live timing is connected, but no driver timing rows have arrived yet.
      </div>
    )
  }

  return (
    <div className="scroll-x">
      <table className="data-table live-tower" style={{ minWidth: 480 }}>
        <thead>
          <tr>
            <th>Pos</th>
            <th>Δ</th>
            <th>Driver</th>
            <th>Tyre</th>
            <th>Last Lap</th>
            <th>Gap</th>
            <th className="hide-mobile">Best</th>
            <th className="hide-mobile r">Laps</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => {
            const driver = row.Driver
            const delta = positionDelta(driver)
            const deltaClass = positionDeltaClass(driver)
            return (
              <tr
                key={row.RacingNumber}
                className={[
                  driver.InPit ? 'in-pit' : '',
                  driver.PitOut ? 'pit-out' : '',
                  driver.Retired ? 'retired' : '',
                ].filter(Boolean).join(' ')}
              >
                <td className={`mono ${posClass(row.Position)}`}>{row.Position}</td>
                <td className={`pos-delta${deltaClass ? ` ${deltaClass}` : ''}`}>{delta}</td>
                <td>
                  <div className="drv-cell">
                    <div className="drv-bar" style={{ background: teamColor(row.Info?.TeamColour) }} />
                    <span className="drv-code">{driverCode(row)}</span>
                    <span className="drv-num">{row.RacingNumber}</span>
                    {driver.InPit && <span className="badge badge-pit">PIT</span>}
                    {driver.PitOut && !driver.InPit && <span className="badge badge-pit">OUT</span>}
                    {driver.Retired && <span className="badge badge-out">RET</span>}
                    {driver.KnockedOut && <span className="badge badge-knocked">KO</span>}
                    {driver.Cutoff && !driver.KnockedOut && <span className="badge badge-cutoff">CUT</span>}
                    {driver.OnFlyingLap && <span className="badge badge-flying">FL</span>}
                  </div>
                </td>
                <td>
                  <span className={`tyre-badge ${tyreClass(row.Tyre)}`}>{tyreLabel(row.Tyre)}</span>
                </td>
                <td className={driver.LastLapOB ? 'mono lap-ob' : driver.LastLapPB ? 'mono lap-pb' : 'mono'}>
                  {driver.LastLapTime || '-'}
                </td>
                <td className="mono">{driver.GapToLeader || driver.Interval || '-'}</td>
                <td className={`hide-mobile ${driver.BestLapOB ? 'mono lap-ob' : 'mono'}`}>
                  {driver.BestLapTime || '-'}
                </td>
                <td className="hide-mobile mono r">{driver.NumberOfLaps || '-'}</td>
              </tr>
            )
          })}
        </tbody>
      </table>
    </div>
  )
}