import type { Encounter } from 'fhir/r4';
import { CalendarClock } from 'lucide-react';
import type { QueueItem } from './encounterLifecycle';

interface OpenVisitsPanelProps {
  visits: QueueItem[];
  failed: boolean;
  /** The board's OWN way into a visit. Never a second one - see below. */
  onEnter: (encounter: Encounter, item: QueueItem) => void;
}

/**
 * - VISITS THIS CLINICIAN LEFT OPEN ON AN EARLIER DAY, and a way into each of them.
 *
 * MEASURED 2026-09-14: the board read "IN PROGRESS 0 - No visit is open right now" while six visits
 * stood open on one patient, the oldest since August 2. The day is built from today's appointments, so a
 * visit that outlives its day cannot appear in it - and the chart's own entry for one is a read-only
 * field panel with no Finish. There was no sequence of clicks that closed it.
 *
 * IT OPENS THE ENCOUNTER SCREEN AND CLOSES NOTHING ITSELF, which is the whole design of this panel. A
 * close button here would be a SECOND path to a terminal clinical transition, and Finish does more than
 * set a status - it finalises the encounter and fires the care-view anchor. Two ways to close a visit is
 * a record that disagrees with itself, and in this area that is company-ending. So a row hands the
 * encounter to the same `onEnter` the day's queue uses, the workspace opens, and the one Finish there has
 * always been does the work.
 *
 * IT IS SEPARATE FROM THE DAY AND SAYS WHAT IT IS. The board answers "who is here now" and is read
 * between patients; folding six-week-old visits into those cells would turn it into a list of everything
 * ever. This sits beside it, named, dated, and renders nothing at all when there is nothing open - the
 * one thing it must not become is furniture.
 */
export const OpenVisitsPanel = ({ visits, failed, onEnter }: OpenVisitsPanelProps) => {
  // NOTHING OPEN IS NOT A STATE WORTH DRAWING. The day's own cells already say a zero where a zero is
  // information; here it would be a permanent empty box on every clinician's screen forever.
  if (!failed && visits.length === 0) return null;

  return (
    <section
      aria-label="Visits left open"
      className="ak-card ak-card--panel"
      data-testid="open-visits-panel"
    >
      <div className="ak-section-head">
        <CalendarClock size={16} className="shrink-0 text-ink-muted" aria-hidden />
        <h3 className="ak-card__title">
          {failed ? 'Visits left open' : `${visits.length} visit${visits.length === 1 ? '' : 's'} left open`}
        </h3>
      </div>

      {/* A FAILED READ SAYS SO. "Nothing is open" and "we could not check" are different sentences, and
          only one of them is safe to render as an empty list. */}
      {failed ? (
        <p className="ak-card__meta">
          We could not check for visits you left open. Reload to try again.
        </p>
      ) : (
        <ul>
          {visits.map((visit) => (
            <li key={visit.key}>
              <button
                type="button"
                className="ak-row w-full text-left"
                onClick={() => visit.encounter && onEnter(visit.encounter, visit)}
              >
                <span className="min-w-0 flex-1">
                  {/* The patient's name, or an honest absence - never the id. */}
                  <span className="ak-row__name block">
                    {visit.patientName ?? 'Patient name unavailable'}
                  </span>
                  {/* THE DATE IS THE POINT OF THE ROW. "Open" says nothing a clinician can act on; "open
                      since 2 August" is what makes them look. */}
                  <span className="ak-row__detail block">
                    {visit.atISO
                      ? `Open since ${new Date(visit.atISO).toLocaleDateString()}`
                      : 'Open, with no start recorded'}
                    {visit.status === 'onleave' ? ' · on leave' : ''}
                  </span>
                </span>
                <span className="ak-section-head__door">Open the visit</span>
              </button>
            </li>
          ))}
        </ul>
      )}
    </section>
  );
};

export default OpenVisitsPanel;