import React, { useMemo, useState } from 'react';
import { Sheet, SheetContent, SheetTitle } from '../../../components/ui/sheet';
import type { ClinicalTier } from '../../../utils/roleTier';
import type { PatientTaskCount } from '../../../utils/patientTaskCount';
import type { PatientNameResolution } from '../../../utils/appointmentParticipants';
import { useOrgAuthorizationStatusByPatient } from '../ReceptionistHomePage/useOrgAuthorizationStatusByPatient';
import type { BucketKey, QueueItem } from './encounterLifecycle';
import { groupQueueByBucket, queueBucketsFor, QueueBucketRows, type QueueBucket } from './EncounterQueue';
import './QueueCountCards.css';

interface Props {
  items: QueueItem[];
  tier: ClinicalTier;
  selectedKey?: string;
  onSelect: (item: QueueItem) => void;
  taskCountByRowKey?: Record<string, PatientTaskCount>;
  patientNames?: PatientNameResolution;
  /** The practice's virtual Location, so a booked video visit is marked before it has an Encounter. */
  virtualLocationId?: string;
  // The bucket the panel beside the cards is showing, drawn as the selected card.
  currentKey?: BucketKey;
  /** Whether this practice rooms patients. */
  rooming?: boolean;
}

interface SheetBodyProps extends Omit<Props, 'items' | 'tier' | 'currentKey'> {
  bucket: QueueBucket;
  list: QueueItem[];
}

// Mounted only while the sheet is open, so the authorization read covers one bucket, not the day.
const BucketSheetBody: React.FC<SheetBodyProps> = ({
  bucket, list, selectedKey, onSelect, taskCountByRowKey = {}, patientNames, virtualLocationId,
}) => {
  const authorizationByPatientId = useOrgAuthorizationStatusByPatient(
    useMemo(() => list.map((item) => item.patientId), [list]),
  );
  return (
    <>
      <SheetTitle className="ak-clinday__sheettitle">{bucket.title}</SheetTitle>
      <QueueBucketRows
        list={list}
        empty={bucket.empty}
        selectedKey={selectedKey}
        onSelect={onSelect}
        taskCountByRowKey={taskCountByRowKey}
        patientNames={patientNames}
        authorizationByPatientId={authorizationByPatientId}
        virtualLocationId={virtualLocationId}
      />
    </>
  );
};

/**
 * The overview's day as counts. Each card is a heading and a number; pressing one opens that bucket's
 * patients in a side sheet. A zero still opens and says so, because a count that refuses to open reads
 * as broken.
 */
export const QueueCountCards: React.FC<Props> = ({
  items, tier, selectedKey, onSelect, taskCountByRowKey, patientNames, currentKey, rooming: roomsInUse = true, virtualLocationId,
}) => {
  const buckets = queueBucketsFor(tier, roomsInUse);
  const byBucket = useMemo(() => groupQueueByBucket(items, buckets, tier), [items, buckets, tier]);
  const [openKey, setOpenKey] = useState<BucketKey | undefined>();
  const openBucket = buckets.find((bucket) => bucket.key === openKey);

  return (
    <>
      <ul className="ak-clinday__counts" aria-label="Your day">
        {buckets.map((bucket) => (
          <li key={bucket.key}>
            <button
              type="button"
              className="ak-clinday__count"
              aria-haspopup="dialog"
              aria-expanded={openKey === bucket.key}
              aria-current={bucket.key === currentKey ? 'true' : undefined}
              onClick={() => setOpenKey(bucket.key)}
            >
              <span className="ak-clinday__count-label">{bucket.title}</span>
              <span className="ak-clinday__count-value">{byBucket[bucket.key].length}</span>
            </button>
          </li>
        ))}
      </ul>
      <Sheet open={Boolean(openBucket)} onOpenChange={(open) => { if (!open) setOpenKey(undefined); }}>
        <SheetContent side="right" className="ak-clinday__sheet" aria-describedby={undefined}>
          {openBucket && (
            <BucketSheetBody
              bucket={openBucket}
              list={byBucket[openBucket.key]}
              selectedKey={selectedKey}
              onSelect={(item) => { setOpenKey(undefined); onSelect(item); }}
              taskCountByRowKey={taskCountByRowKey}
              patientNames={patientNames}
              virtualLocationId={virtualLocationId}
            />
          )}
        </SheetContent>
      </Sheet>
    </>
  );
};