import type { Attachment } from 'fhir/r4';
import { formatElapsedSince, type FrontDeskRow } from './frontDeskQueues';
import { PatientMark } from './PatientMark.tsx';

/**
 * One line per patient at desk widths: time, patient, detail, state and elapsed in fixed columns so each
 * forms a rail the eye can run down. The row never wraps; everything truncates. A phone stacks it into
 * two lines (see the page CSS).
 *
 * Rows carry no action buttons. Every desk action on a visit is taken from its details overlay, which
 * the row opens.
 */

export interface FrontDeskQueueRowProps {
  row: FrontDeskRow;
  /** The board's display clock. Passed in so every row on screen agrees on what "now" is. */
  now: number;
  onOpen: (row: FrontDeskRow) => void;
  photo?: Attachment;
}

export const FrontDeskQueueRow = ({ row, now, onOpen, photo }: FrontDeskQueueRowProps) => {
  const elapsed = row.elapsedSince === undefined ? '' : formatElapsedSince(row.elapsedSince, now);
  // The shared row (ak-row and its cells) draws the type; the page lays the cells out as the deck's columns.
  const classes = [
    'ak-row',
    'ahr-fd-row',
    `ahr-fd-row--${row.rail}`,
    row.flagged ? 'ahr-fd-row--flagged' : '',
  ].filter(Boolean).join(' ');

  return (
    <div
      className={classes}
      role="button"
      tabIndex={0}
      onClick={() => onOpen(row)}
      onKeyDown={(event) => {
        if (event.key === 'Enter' || event.key === ' ') {
          event.preventDefault();
          onOpen(row);
        }
      }}
    >
      <div className="ahr-fd-row__time ak-row__time">{row.time}</div>

      <div className="ahr-fd-row__name">
        <span className="ahr-fd-row__mark">
          <PatientMark name={row.patientName} photo={photo} />
        </span>
        <span className="ahr-fd-row__who ak-row__name">{row.patientName}</span>
      </div>

      <div className="ahr-fd-row__detail ak-row__detail">{row.detail}</div>

      <div className={`ahr-fd-row__state ak-row__state ak-row__state--${row.state.tone}`}>{row.state.label}</div>

      <div className="ahr-fd-row__age ak-row__age">{elapsed}</div>
    </div>
  );
};

export default FrontDeskQueueRow;