import { EmptyState } from "../../../../../components/ui/empty-state";
import { useNavigate } from "react-router-dom";
import type { Organization, Task } from "fhir/r4";
import {
  DUE_BY_NEXT_APPOINTMENT,
  DUE_BY_UNSCHEDULED_NEXT_APPOINTMENT,
  getAkashicTaskKind,
  getAppointmentOrganizationDisplay,
  getAppointmentPractitionerDisplay,
  getCustomTaskDueDisplay,
  getCustomTaskDueMode,
  hasPatientFacingTaskScreen,
  isClosedTask,
  isCustomTask,
  isExceptionalTaskStatus,
  isOutstandingTask,
  isPatientsOwnTask,
  isResumableTaskStatus,
  resolveTaskAppointment,
  useAuthServiceContext,
  usePatientServiceContext,
  useTaskServiceContext,
} from "../../../../../services";
import { CustomTaskAssignmentModal, CustomTaskDetails, PacketAssignmentModal, QuestionnaireTaskAssignmentModal, FhirTaskDisplay } from "../../../../../components";
import {
  useFhirTaskBroadcast,
  useFhirTasks,
  useFhirTaskTargetedBroadcast,
  useFhirAppointments,
  useFhirPractitioners,
} from "../../../../../hooks";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import PatientSetupTasks from "./PatientSetupTasks.tsx";
import PatientTaskDialog from "../../../../../components/tasks/PatientTaskDialog.tsx";
import PatientReferralDialog from "../../../../../components/tasks/PatientReferralDialog.tsx";
import { usePatientReferrals } from "../../../../../hooks/usePatientReferrals.ts";
import { referralDay, type PatientReferral } from "../../../../../utils/patientReferrals.ts";
import { isStandingPlanInstruction } from "../../../../../utils/planActivity.ts";
import PatientPacketPackages, { memberDoor, packetOfTask } from "../../../../../components/tasks/PatientPacketPackages.tsx";
import { NO_PACKETS, PacketSummaryReader, type PatientPacketSummaries } from "../../../../../hooks/usePatientPacketSummaries.ts";
import { Check, ChevronRight, Edit, FileCheck, FileText, Plus } from "lucide-react";
import "./PatientTasks.css";
import { DueLine, RowPriority, RowStatus, priorityWord } from "../../../../../components/ui/row-meta.tsx";
import { Skeleton } from "../../../../../components/ui/skeleton.tsx";
import { OrgBadge } from "../../../../../components/ui/org-badge.tsx";
import { useMyOrganizations } from "../../../../../hooks/useMyOrganizations.tsx";
import { appointmentOrgRef, organizationNameOf } from "../../../../../utils/patientOrganizations.ts";
import type { PractitionerWithRoles } from "../../../../../services/PractitionerService.tsx";
// `taskDisplayTitle` - ONE title function, shared with the appointment card's task list. Two surfaces naming
// the same task differently is the defect; a shared resolver is the only thing that stops it recurring.
import { taskDisplayTitle } from "../../../../../utils/appointmentTasks.ts";
// WHERE the visit is, from the helper that already answers it. It anchors on the `Location/`
// prefix rather than a substring, and it already falls back to the organization when an
// appointment names no site - which is exactly the second choice this subline wants, and a
// second implementation would be a second answer to one question.
import { getAppointmentLocationName } from "../../../../../utils/appointmentLocation.ts";
import {
  formatGroupDay,
  formatGroupVisit,
  groupPatientTasks,
  isAbandonedVisit,
  type PatientTaskGroup,
} from "../../../../../utils/patientTaskGroups.ts";
import { readsForAnother, visitListProvesNoneBooked } from "../../../../../utils/visitListProvesNoneBooked.ts";
import { Button } from "../../../../../components/ui/button.tsx";
import { Sheet, SheetContent } from "../../../../../components/ui/sheet.tsx";
import {
  Tabs,
  TabsList,
  TabsTrigger,
} from "../../../../../components/ui/tabs.tsx";
import {
  DropdownMenu,
  DropdownMenuItem,
} from "../../../../../components/ui/dropdown-menu.tsx";

export type TaskAssignmentKind = "questionnaire" | "packet" | "custom";

// The patient's practices and the clinicians' roles, read only where a patient is reading, so the
// staff chart never asks.
const PatientPracticesReader = ({ onRead }: {
  onRead: (read: { organizations: Organization[]; practitioners: readonly PractitionerWithRoles[] }) => void;
}) => {
  const { organizations } = useMyOrganizations();
  // LOADED HERE, not borrowed: on a cold direct entry nothing else has read the clinicians' roles, and a
  // visit naming only its clinician lost its mark. The provider keeps what it read, so this asks once.
  // Pending or failed leaves the list empty, and an empty list marks nothing rather than guessing.
  const { practitionersList } = useFhirPractitioners();
  useEffect(() => { onRead({ organizations, practitioners: practitionersList ?? [] }); }, [organizations, practitionersList, onRead]);
  return null;
};

const PatientTasks = ({
  isHomePage = false,
  embedded = false,
  onOpenTask,
  onStartAssignment,
}: {
  isHomePage?: boolean;
  elevated?: boolean;
  // When embedded in the workspace modal: drill into a task in-place via onOpenTask (no nested Sheet/overlay),
  // and hand assignment up via onStartAssignment so the host drills into the form the same way.
  // The WP-shaped assignment MODALS still cannot portal correctly inside the Dialog - that is why the host
  // renders the same forms inline, and why this component never opens one while embedded.
  embedded?: boolean;
  onOpenTask?: (task: Task) => void;
  onStartAssignment?: (kind: TaskAssignmentKind) => void;
}) => {
  const navigate = useNavigate();
  const { userRole, USER_ROLES, actingAs } = useAuthServiceContext();
  const { patientState } = usePatientServiceContext();
  const { getTaskStatusDisplay } = useTaskServiceContext();
  const { loading, error, tasksList, mayBeIncomplete, recheck } = useFhirTasks();
  const appointmentRead = useFhirAppointments();
  const { appointmentsList } = appointmentRead;
  const [selectedTask, setSelectedTask] = useState<Task | null>(null);
  const [showDisplayModal, setShowDisplayModal] = useState<boolean>(false);
  // Each opening of the sheet is numbered; a close kept by an earlier opening never closes a later one.
  const openingRef = useRef(0);
  const [opening, setOpening] = useState(0);
  // The patient's own task, open over the list; a long form hands off from there to its page.
  const [dialogTaskId, setDialogTaskId] = useState<string | undefined>();
  const [showCustomTaskModal, setShowCustomTaskModal] = useState(false);
  const [showQuestionnaireTaskModal, setShowQuestionnaireTaskModal] = useState(false);
  const [showPacketModal, setShowPacketModal] = useState(false);
  const [taskTab, setTaskTab] = useState<"outstanding" | "completed">(
    "outstanding",
  );
  /**
 * WHAT THE SETUP GROUP BELOW IS ALREADY SHOWING, so neither tab's empty state can deny it.
 *
 * Both halves, because both tabs speak: Outstanding says nothing needs the patient, Completed says
 * nothing has been finished, and the group below can contradict either one.
 *
 * Undefined until the derived reads answer. The host never computes these itself - one computation,
 * asked by whoever needs it, is the whole reason `usePatientSetupSummary` exists.
 */
  const [setupOutstanding, setSetupOutstanding] = useState<number>();
  const [setupCompleted, setSetupCompleted] = useState<number>();
  const handleSetupCounts = useCallback(
    ({ outstanding, completed }: { outstanding: number; completed: number }) => {
      setSetupOutstanding(outstanding);
      setSetupCompleted(completed);
    },
    [],
  );

  useFhirTaskBroadcast();
  useFhirTaskTargetedBroadcast({
    task: selectedTask || undefined,
    isOpen: showDisplayModal,
    onUpdate: (updatedTask) => {
      setSelectedTask(updatedTask);
    },
    onDelete: () => {
      setShowDisplayModal(false);
      setSelectedTask(null);
    },
  });

  const isPatientOrProxy = [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(
    userRole as string,
  );
  const noneBookedIsKnown = visitListProvesNoneBooked(appointmentRead, readsForAnother({ userRole, USER_ROLES, actingAs }));

  // Spencer, 2026-08-25, reading his own Tasks page on a phone: the shell one line above already
  // says "My Tasks", so a second heading here names the page twice - and it was the doubling that made
  // him think he was on a different screen entirely. A patient reaches this component only through that
  // shell (the routed `/dashboard/patient/tasks`), so on that path the heading is pure repetition.
  // Staff keep theirs: the chart's shell names the PATIENT, not the section, so "Patient Tasks" is
  // the only thing naming this panel there. And a patient is never authorized to assign, so hiding the
  // heading empties this row rather than leaving a control stranded in it.
  const namedByShell = isPatientOrProxy && !embedded;

  // Outstanding/Completed tabs on every patient-task view - the patient's own Tasks page, the
  // practitioner chart, and the embedded receptionist-workspace modal.
  const showTaskTabs = true;

  // THE AUDIENCE FILTER, and it is the only one of the four that is conditional. This component is
  // mounted for BOTH the patient's own Tasks page and the staff chart's Tasks section, so the referral
  // tasks that must not reach a patient are exactly the ones a coordinator needs to see - the chart is
  // where they are worked. Gated on the reader, not on the task.
  // A packet's forms are listed once, under the packet, after the server has said what it holds and how far it is.
  // Until then, or if that read fails, they stay in the list as ordinary forms, so none goes missing. With no packet
  // form in the list there is nothing to group, and nothing is asked.
  const packetRefresh = useMemo(
    () => tasksList.filter((task: Task) => packetOfTask(task))
      .map((task: Task) => `${task.id}:${task.status}:${task.meta?.versionId ?? ""}`).join(","),
    [tasksList],
  );
  const [packetRead, setPacketRead] = useState<PatientPacketSummaries>(NO_PACKETS);
  const summarisedPackets = useMemo(
    () => new Set((packetRead.packets ?? []).map((packet) => packet.id)),
    [packetRead.packets],
  );
  const packetsShown = (packetRead.packets ?? []).filter((packet) =>
    (taskTab === "completed" ? packet.lifecycle !== "open" : packet.lifecycle === "open"));
  const openPacketDueAt = (appointmentId: string | undefined) => Boolean(appointmentId)
    && (packetRead.packets ?? []).some((packet) => packet.lifecycle === "open" && packet.due?.appointmentId === appointmentId);

  // A form its package opens is listed only there. A staff reader keeps the row of any form the package cannot open,
  // so no door they had is lost; a patient sees an unconfirmed form only as its package says, never as done.
  const packagedTaskIds = useMemo(() => new Set((packetRead.packets ?? []).flatMap((packet) => packet.members
    .map((member) => memberDoor(packet, member, tasksList, isPatientOrProxy)?.id)
    .filter((id): id is string => Boolean(id)))), [packetRead.packets, tasksList, isPatientOrProxy]);
  const audienceTasks = useMemo(
    () => (isPatientOrProxy
      ? tasksList.filter((task: Task) => isPatientsOwnTask(task) && !isStandingPlanInstruction(task))
      : tasksList).filter((task: Task) => !summarisedPackets.has(packetOfTask(task) ?? "")
        || (!isPatientOrProxy && !packagedTaskIds.has(task.id ?? ""))),
    [isPatientOrProxy, tasksList, summarisedPackets, packagedTaskIds],
  );

  // A plan's standing instruction is how the patient lives, not a job with an end, so it is listed
  // apart from the tasks and counted in none of their groups (planActivity).
  const standingInstructions = useMemo(
    () => (isPatientOrProxy
      ? tasksList.filter((task: Task) => isPatientsOwnTask(task) && isStandingPlanInstruction(task) && isOutstandingTask(task))
      : []),
    [isPatientOrProxy, tasksList],
  );

  // The patient's referrals come from their orders, not from the coordinator's referral Task above.
  const { referrals, markBooked, declineInvite, failed: referralsFailed } = usePatientReferrals(patientState?.id, isPatientOrProxy && !embedded);
  const [openReferralId, setOpenReferralId] = useState<string>();
  const [practices, setPractices] = useState<Organization[]>([]);
  const [clinicians, setClinicians] = useState<readonly PractitionerWithRoles[]>([]);
  const readPractices = useCallback(
    ({ organizations, practitioners }: { organizations: Organization[]; practitioners: readonly PractitionerWithRoles[] }) => {
      setPractices(organizations);
      setClinicians(practitioners);
    },
    [],
  );
  const referralRows = referrals.filter((referral) =>
    taskTab === "completed" ? referral.stage === "booked" : referral.stage !== "booked");
  const referralsDone = referrals.filter((referral) => referral.stage === "booked").length;
  const referralSubline = (referral: PatientReferral) => {
    if (referral.stage === "booked") return "Booked";
    const day = referralDay(referral.authoredOn);
    return [referral.referredBy && `Referred by ${referral.referredBy}`, day].filter(Boolean).join(", ");
  };

  const filteredTasks = useMemo(() => {
    if (showTaskTabs) {
      return audienceTasks.filter(
        taskTab === "completed" ? isClosedTask : isOutstandingTask,
      );
    }
    return isHomePage
      ? audienceTasks.filter((task: Task) => task.status !== "completed")
      : audienceTasks;
  }, [showTaskTabs, taskTab, audienceTasks, isHomePage]);

  // ORDER MATTERS HERE AND IT IS NOT A STYLE POINT. These were written above `filteredTasks` and
  // that threw "Cannot access 'O' before initialization" on the patient's own Tasks page - a blank
  // screen where their list should be. A useMemo CALLBACK is lazy, but its DEPENDENCY ARRAY is
  // evaluated at the declaration, so naming `filteredTasks` there reaches into the temporal dead
  // zone. `tsc` cannot see it and neither can a suite that never renders this component as a
  // patient. Anything deriving from `filteredTasks` belongs after it.
  /**
   * THE GROUPS THE PATIENT'S LIST IS DRAWN IN, and the counts that go beside them.
   *
   * `taskGroups` arranges the CURRENT TAB. `groupTotals` counts over every task in the audience,
   * both tabs - the deck's headings read "1 of 3 done", and a count taken from the filtered list
   * could only ever say "0 of 2" on the Outstanding tab. The count is the thing that stops a group
   * hiding work: it is a statement about the visit, not about what is currently on screen.
   */
  /**
   * A VISIT YOU HAVE FINISHED SAYS SO, INSTEAD OF DISAPPEARING.
   *
   * Groups are built from the tasks the current tab shows, so a visit whose items are all done had no
   * group at all - which makes "you have finished everything for this visit" and "there is no such
   * visit" the same state on screen, at the one moment a patient most wants to be told they are done.
   *
   * So on Outstanding the groups are built from the whole audience and the finished ones are kept,
   * rendering their heading with a ready line in place of rows.
   *
   * ONLY FUTURE VISITS, and only visits. A past visit's heading already says "still needed from your
   * visit on ...", so a past visit with nothing still needed has nothing to say and goes. A date group
   * is a deadline rather than an occasion - there is no event to be ready for - so an empty one is
   * simply absent, exactly as before.
   *
   * AND ONLY VISITS THAT ARE STILL GOING TO HAPPEN. Measured on the re-walk: a cancelled
   * appointment, its tasks correctly voided, was drawn with nothing left and therefore said "You're
   * ready for this visit" - directly above the identical heading for the visit that IS happening,
   * which had four things outstanding. See `isAbandonedVisit`.
   */
  const taskGroups = useMemo(() => {
    const shown = groupPatientTasks(filteredTasks, appointmentsList ?? []);
    if (taskTab !== "outstanding") return shown;

    const now = Date.now();
    return groupPatientTasks(audienceTasks, appointmentsList ?? [])
      .map((group) => shown.find((s) => s.key === group.key) ?? { ...group, tasks: [] })
      .filter((group) =>
        group.tasks.length > 0
        || (group.kind === "appointment"
            && Boolean(group.appointment?.start)
            && !isAbandonedVisit(group.appointment)
            && new Date(group.appointment!.start as string).getTime() >= now),
      );
  }, [filteredTasks, audienceTasks, appointmentsList, taskTab]);

  const groupTotals = useMemo(() => {
    const totals = new Map<string, { total: number; done: number; cancelledOnly: boolean }>();
    for (const group of groupPatientTasks(audienceTasks, appointmentsList ?? [])) {
      const countable = group.tasks.filter((task) => task.status !== "cancelled");
      totals.set(group.key, {
        total: countable.length,
        done: countable.filter(isClosedTask).length,
        cancelledOnly: group.tasks.length > 0 && countable.length === 0,
      });
    }
    return totals;
  }, [audienceTasks, appointmentsList]);

  /**
   * WHAT A ROW IS, IN THE THREE STATES THIS SCREEN ACTUALLY HAS.
   *
   * It had two, and `isClosedTask` was doing the work of both - a predicate answering a DIFFERENT
   * question stretched over this one. It means *not actionable*, so a CANCELLED task took the done
   * arm and wore the success green. Walked on the mount: thirteen of the fifteen rows on the
   * Completed tab were cancelled, every one edged in success green with a filled red pill beside it,
   * so a tab of things that are over read as a wall of alarm.
   *
   * THE THIRD STATE IS THE ONE THE DECK NAMES AND EVERY READING OF IT MISSED: a cancelled task
   * RECEDES. Red, a coloured edge and a place at the top are all ways of saying LOOK AT THIS, and
   * this is the one row that wants none of them - it is over, and it needs to stay findable without
   * competing with the things that are not.
   */
  const rowState = (task: Task): "ended" | "done" | "open" => {
    if (isExceptionalTaskStatus(task)) return "ended";
    return isClosedTask(task) ? "done" : "open";
  };

  // The edge follows the word the row shows (Spencer, 2026-09-01): a plain outstanding row has
  // no word, so it keeps the transparent edge the deck draws.
  const rowEdge = (task: Task): "ended" | "done" | "open" | "plain" => {
    const state = rowState(task);
    if (state !== "open") return state;
    return isResumableTaskStatus(task) ? "open" : "plain";
  };

  // A row outside a visit group names its practice, as the grouped deck draws it; unknown names nobody.
  const rowPractice = (task: Task) => {
    const practice = organizationNameOf(task.owner, practices);
    if (!practice) return undefined;
    return (
      <p className="patient-task-org-line ak-org-line">
        <OrgBadge name={practice} />
        <span className="ak-org-line__name">{practice}</span>
      </p>
    );
  };

  // What a row's due line adds to its heading. A date group's heading is the date and "No deadline"
  // says there is none, so the patient's row keeps only what the heading does not: the repeat, or a
  // visit it is tied to. Staff read one flat list and keep the whole line.
  const dueLineOf = (task: Task) =>
    getCustomTaskDueDisplay(task, resolveTaskAppointment(task, appointmentsList), Date.now(), noneBookedIsKnown);
  // The subline claims no visit is booked only when every row beneath it would say so itself.
  const groupIsUnscheduled = (group: PatientTaskGroup) =>
    group.kind === "next-appointment"
    && group.tasks.every((task) => dueLineOf(task) === `Due by: ${DUE_BY_UNSCHEDULED_NEXT_APPOINTMENT}`);

  const rowDueText = (task: Task, group: PatientTaskGroup): string | undefined => {
    if (task.status === "cancelled") {
      const when = task.lastModified ?? task.meta?.lastUpdated;
      const date = when ? new Date(when) : undefined;
      const day = date && !Number.isNaN(date.getTime())
        ? new Intl.DateTimeFormat("en-US", { year: "numeric", month: "short", day: "numeric" }).format(date)
        : undefined;
      return day ? `Cancelled on: ${day}` : undefined;
    }
    const text = dueLineOf(task);
    // A closed task waits for no visit, so it drops the line that looks ahead to one.
    if (isClosedTask(task) && (text === `Due by: ${DUE_BY_UNSCHEDULED_NEXT_APPOINTMENT}` || text === "Due by: " + DUE_BY_NEXT_APPOINTMENT)) return undefined;
    if (!isPatientOrProxy) return text;
    // The heading and subline already say what this line would.
    if (group.kind === "next-appointment" && (groupIsUnscheduled(group) || text === "Due by: " + DUE_BY_NEXT_APPOINTMENT)) return undefined;
    const mode = getCustomTaskDueMode(task);
    if (mode === "recurring") {
      const repeat = text.match(/repeats.*$/)?.[0];
      return repeat ? repeat.charAt(0).toUpperCase() + repeat.slice(1) : text;
    }
    if (group.kind === "date" && mode === "date") return undefined;
    if (group.kind === "undated" && text === "No due date") return undefined;
    return text;
  };

  const groupCount = (group: PatientTaskGroup) => {
    const totals = groupTotals.get(group.key);
    if (!totals || totals.cancelledOnly) return "";
    return `${totals.done} of ${totals.total} done`;
  };

  /**
   * THE HEADING SAYS WHAT THE GROUP IS; THE SUBLINE SAYS WHICH ONE.
   *
   * Copy taken verbatim from the approved deck (`mockups/patient-portal.html`, "Grouped by what the
   * items share") rather than written here: these are three sentences a patient reads about their own
   * care, and the drawing is the place that decides them.
   *
   * "No deadline" rather than "No due date" is the one worth not tidying. It names the situation -
   * nobody has put a deadline on these - instead of naming an empty field, and those tasks are the
   * ones most likely to be forgotten.
   */
  const groupTitle = (group: PatientTaskGroup) => {
    if (group.kind === "appointment" && group.appointment?.start) {
      const when = formatGroupVisit(group.appointment.start);
      // A PAST VISIT MUST NOT KEEP A FUTURE-SHAPED HEADING. "Everything for this visit" was vague
      // enough to survive a date that had passed; a bare date is not - a group headed "Sun, Sep 6"
      // sitting above Sep 9 tells a patient to prepare for something that already happened.
      // The item is still real (a cancelled visit VOIDS its tasks instead), so the group stays and
      // stops being preparation: it says the practice has not stopped wanting this, and where it
      // came from.
      return new Date(group.appointment.start).getTime() < Date.now()
        ? `Still needed from your visit on ${when}`
        : when;
    }
    if (group.kind === "appointment") return "This visit";
    if (group.kind === "date" && group.dueDate) return `Due ${formatGroupDay(group.dueDate)}`;
    if (group.kind === "next-appointment") return "Due by your next appointment";
    return "No deadline";
  };

  // A GROUP'S HEADING NAMES THE THING THAT MAKES IT A DIFFERENT GROUP FROM ITS NEIGHBOURS.
  // Everything else is subline.
  //
  // The heading used to read "Everything for this visit" on every visit group, which was right in
  // the drawing - where there is ONE - and says nothing on a real patient, where there were five.
  // Measured: five identical bold lines with every distinguishing fact underneath them. The date
  // and time are what tell one visit from the next, so they are the heading; the practitioner and
  // the appointment type describe it and go beneath.
  //
  // The rejected alternative is worth recording because it looks reasonable: keep the phrase when
  // there is only one group and use a date when there are several. That gives one group two
  // different names depending on how many siblings it happens to have that week - a patient learns
  // the phrase in October and meets a date in November. A heading that moves under the reader is
  // worse than one that is merely generic.
  const groupSubline = (group: PatientTaskGroup) => {
    if (group.kind === "next-appointment") {
      return groupIsUnscheduled(group)
        ? <p className="patient-task-group-sub"><span className="truncate">Not scheduled yet</span></p>
        : undefined;
    }
    if (group.kind !== "appointment" || !group.appointment) return undefined;
    // WHERE, THEN WHO - AND NO APPOINTMENT TYPE. "Routine" is the practice's word for its own
    // scheduling and a patient does not prepare differently for one, so it earns no space here.
    //
    // THE PLACE RATHER THAN THE PRACTICE, WHICH REVERSES AN EARLIER RULING AND SHOULD. The ruling
    // was "practice then practitioner", and it asked for something the resource does not carry:
    // measured across 57 of one patient's appointments, NOT ONE has an Organization participant,
    // so the practice rendered as nothing at all and the subline was the practitioner alone.
    // The location is on the resource today, it is the question a visit line answers - which
    // building do I drive to - and it is the ONLY drawn field that differs between two visits at
    // the same minute with the same practitioner, which this patient has two pairs of. The
    // practice is not lost: the mark carries it, in colour, without spending a word.
    //
    // THE PRACTICE IS STILL THE SECOND CHOICE, never nothing. A subline that disappears takes the
    // group's only distinguishing fact with it.
    const organization = getAppointmentOrganizationDisplay(group.appointment);
    const where = getAppointmentLocationName(group.appointment, organization);
    // The mark comes from the visit's own practice or its clinician's role, never from the portal.
    const practice = organization
      ?? organizationNameOf(appointmentOrgRef(group.appointment, clinicians), practices);
    const practitioner = getAppointmentPractitionerDisplay(group.appointment);
    if (!where && !practitioner) return undefined;
    // AND THE PRACTICE'S MARK IN FRONT OF IT, the same square the patient's home queue puts beside
    // the same names. Shared rather than reimplemented: two tone functions would eventually
    // disagree, and one practice wearing two colours on two screens is the confusion the mark
    // exists to prevent.
    //
    // ONLY WHEN THE APPOINTMENT ACTUALLY NAMES ITS PRACTICE. Deriving one from the portal the
    // patient happens to be signed into would put a practice's colour on a visit that may belong
    // to another, which is worse than no mark: the mark's whole job is telling two practices
    // apart, and a wrong one does the opposite confidently.
    return (
      <p className="patient-task-group-sub">
        {practice && <OrgBadge name={practice} />}
        <span className="truncate">
          {[where, practitioner].filter(Boolean).join(" \u00b7 ")}
        </span>
      </p>
    );
  };

  const viewTask = (task: Task) => {
    // Embedded in the workspace modal: drill in-place (no nested Sheet/overlay).
    if (embedded && onOpenTask && task.id) {
      onOpenTask(task);
      return;
    }

    // The SECOND place that made this decision, and it got it wrong independently of the home queue.
    // Asking `isCustomTask` alone meant a patient opening an assigned QUESTIONNAIRE fell through to the
    // read-only Task Details dialog below - Task Status, Business Status, Owner - with no questions on it
    // and nothing to press to finish. `TaskPage` renders the questions and submits them; it always could.
    // Two routers, one shared predicate now, because the duplicated condition is what let the two
    // answers drift apart.
    if (isPatientOrProxy && hasPatientFacingTaskScreen(task) && task.id) {
      setDialogTaskId(task.id);
      return;
    }

    openingRef.current += 1;
    setOpening(openingRef.current);
    setSelectedTask(task);
    setShowDisplayModal(true);
  };

  const closeTaskDetails = (closing?: number) => {
    if (closing !== undefined && closing !== openingRef.current) return;
    setShowDisplayModal(false);
    setSelectedTask(null);
  };

  const editTask = (event: React.MouseEvent, task: Task) => {
    event.stopPropagation();
    navigate(isHomePage ? `task/${task.id}` : (task.id as string), {
      relative: "path",
    });
  };

  const isAuthorizedToAssign = () =>
    Boolean(
      userRole &&
        [USER_ROLES.PRACTITIONER, USER_ROLES.RECEPTIONIST].includes(
          userRole as string,
        ),
    );

  const isAuthorizedToEdit = () =>
    Boolean(
      userRole && [USER_ROLES.PRACTITIONER].includes(userRole as string),
    );

  const startAssignment = (kind: TaskAssignmentKind) => {
    // Embedded: the host owns the surface, so it drills into an inline form and keeps its own Back.
    if (embedded) {
      onStartAssignment?.(kind);
      return;
    }

    if (kind === "questionnaire") {
      setShowQuestionnaireTaskModal(true);
      return;
    }

    if (kind === "packet") {
      setShowPacketModal(true);
      return;
    }

    setShowCustomTaskModal(true);
  };

  const renderContent = () => {
    return (
      <>
        {/* An unread referral list is not an empty one: a patient told there is nothing to do would not book it. */}
        {!error && !loading && referralsFailed && (
          <p role="alert" className="text-sm text-destructive">
            We couldn't check your referrals just now. If a practice has referred you, it may not show here. Reload the page to try again.
          </p>
        )}
        {!error && !loading && referralRows.length > 0 && (
          <div className="patient-task-group ak-card-list" data-testid="patient-referrals">
            <div className="patient-task-group-head">
              <p className="patient-task-group-title ak-card__title">Referrals</p>
              <span className="patient-task-group-count">
                {`${referralsDone} of ${referrals.length} done`}
              </span>
            </div>
            {referralRows.map((referral) => (
              <button
                type="button"
                key={referral.id}
                className={`ak-card ak-card--edge${referral.stage === "booked" ? " ak-card--done" : ""} flex w-full items-center justify-between gap-2 text-left`}
                onClick={() => setOpenReferralId(referral.id)}
              >
                <div className="min-w-0 flex-1">
                  <div className="ahr-list-card-head">
                    <p className="ak-card__title">{referral.title}</p>
                    {referral.stage === "booked" && <RowStatus tone="done">Booked</RowStatus>}
                  </div>
                  {/* The deck's practice line: the mark of the practice to book with, beside who
                      referred them. The name itself stays in the title, said once. */}
                  {referral.stage !== "booked" && referralSubline(referral) && (
                    <p className="patient-task-org-line ak-org-line">
                      {referral.practice && <OrgBadge name={referral.practice} />}
                      <span>{referralSubline(referral)}</span>
                    </p>
                  )}
                </div>
                <ChevronRight size={16} strokeWidth={1.5} className="patient-task-chevron ak-chev" />
              </button>
            ))}
          </div>
        )}

        {!error && !loading && packetRead.failed && (
          <p role="alert" className="text-sm text-destructive" data-testid="patient-packets-unread">
            We couldn't check packets just now, so their forms are listed one by one below. Reload the page to try again.
          </p>
        )}
        {!error && !loading && !packetRead.failed && !packetRead.complete && (
          <p role="note" className="text-sm" data-testid="patient-packets-partial">
            Some packets may not be listed here. Reload the page to check again.
          </p>
        )}
        {!error && !loading && packetsShown.length > 0 && (
          <PatientPacketPackages
            packets={packetsShown}
            tasks={tasksList}
            appointments={appointmentsList ?? []}
            practices={practices}
            forPatient={isPatientOrProxy}
            onOpenTask={viewTask}
          />
        )}

        {/* The list may be missing a task just assigned: its rows stay, and nothing below says it is empty or done. */}
        {!error && mayBeIncomplete && (
          <div role="status" className="flex flex-wrap items-center gap-2 text-sm" data-testid="patient-tasks-may-be-incomplete">
            <span>This list may not show a recent change yet.</span>
            <button type="button" className="btn btn-blue-ghost" onClick={() => void recheck()} disabled={loading}>
              {loading ? "Checking…" : "Check again"}
            </button>
          </div>
        )}
        {error ? (
          <EmptyState
            icon={FileCheck}
            title="Could not load Tasks"
            description="Try again later."
            action={
              <Button className="btn btn-blue" onClick={() => window.location.reload()}>
                Retry
              </Button>
            }
          />
        ) : !loading && !mayBeIncomplete && filteredTasks.length === 0 && referralRows.length === 0 && !referralsFailed && packetsShown.length === 0 ? (
          /* THE SHARED EmptyState. "No Tasks found" is the sentence a failed search returns, and the
 capital T was a resource type showing through on a patient's own screen.
 THE TWO AUDIENCES STAY SPLIT, which is why the branch survives the conversion: the patient
 is told what a task IS and where they come from, because a new patient has never seen one.
 A clinician reading the same chart already knows, and needs the fact about THIS patient. */
          <EmptyState
            icon={FileCheck}
            title={
              showTaskTabs && taskTab === "completed"
                ? isPatientOrProxy && setupCompleted
                  ? "Nothing finished with your practices yet"
                  : "Nothing finished yet"
                : isPatientOrProxy
                  ? setupOutstanding
                    ? "Nothing from your practices right now"
                    : "Nothing to do right now"
                  : audienceTasks.length
                    ? "Nothing outstanding"
                    : "No tasks yet"
            }
            description={
              showTaskTabs && taskTab === "completed"
                ? isPatientOrProxy && setupCompleted
                  ? "What you have finished of your own setup steps is below."
                  : "Anything you finish moves here, so you can check what you have already done."
                : isPatientOrProxy
                  ? setupOutstanding
                    ? "Your own setup steps are below, and they are not a practice's request — they carry across every practice you use."
                    : "When a practice needs something from you — a form to fill in, information to confirm before a visit — it will appear here."
                  : audienceTasks.length
                    ? "Everything assigned to this patient is finished."
                    : "This patient has not been assigned anything yet."
            }
            data-testid="patient-tasks-empty"
          />
        ) : loading ? (
          <div className="space-y-2 mt-3">
            {[...Array(4)].map((_, index) => (
              <div
                key={index}
                className="flex justify-between gap-3 items-center rounded p-1 animate-pulse"
              >
                <div className="space-y-2 w-3/4 items-center">
                  <div className="flex items-center gap-4">
                    <Skeleton className="h-5 w-full rounded" />
                    <Skeleton className="h-5 w-full rounded" />
                  </div>
                  <Skeleton className="h-4 w-full rounded" />
                  <Skeleton className="h-4 w-full rounded" />
                  <Skeleton className="h-5 w-full rounded" />
                </div>
                <Skeleton className="h-12 w-12 rounded-full" />
              </div>
            ))}
          </div>
        ) : (
          filteredTasks.length !== 0 && (
            <div className="patient-task-groups">
              {/* GROUPED FOR THE PATIENT, FLAT FOR STAFF, on the gate this file already uses a few
                  lines above for the audience filter. The grouping is a ruling about the PATIENT's
                  list; the chart is a working surface where a coordinator wants every row in one
                  run. Same component, two readers, one discriminator. */}
              {(isPatientOrProxy ? taskGroups : [{ key: "all", kind: "undated" as const, tasks: filteredTasks }]).map((group) => (
                <div className="patient-task-group ak-card-list" key={group.key}>
                  {isPatientOrProxy && (
                    /* NO FILL BEHIND A GROUP HEADING. The deck has none, and a filled band on this
                       screen reads as a control rather than a heading - the rows beneath it are
                       pressable and it is not. */
                    <div className="patient-task-group-head">
                      <p className="patient-task-group-title ak-card__title">{groupTitle(group)}</p>
                      {/* THE COUNT IS OVER THE WHOLE GROUP AND NOT OVER THE TAB, which is why it is
                          computed from the unfiltered list. "1 of 3 done" on the Outstanding tab is
                          the point: it tells a patient that this visit has three jobs and one is
                          already behind them, which a tab showing only the outstanding two cannot. */}
                      {groupCount(group) !== "" && (
                      <span className="patient-task-group-count">{groupCount(group)}</span>
                      )}
                      {groupSubline(group)}
                    </div>
                  )}
                  {group.tasks.length === 0 && !openPacketDueAt(group.appointment?.id) && (
                    /* The promise "everything for this visit" used to make, cashed at the moment it
                       comes true rather than announced on every group that had not yet. */
                    <p className="patient-task-group-ready ak-notice ak-notice--success ak-notice--sm">
                      <Check size={14} aria-hidden="true" />
                      You&apos;re ready for this visit
                    </p>
                  )}
                  {group.tasks.map((task: Task) => (
                <div
                  /* A CARD WITH A COLOURED LEFT EDGE, KEYED OFF THE ROW'S OWN STATE.
                   *
                   * The deck draws the row as a card and keys the edge off the status:
                   * `.trow:has(.st.done){border-left:3px solid var(--success)}`, amber for an open
                   * one. Its reason sits beside it - *the state is legible while scanning without
                   * reading the corner of every row* - so a plain row does not lose a border, it
                   * loses the scanning channel. Ruled by claude-4 against the frames rather than
                   * from memory (`_CLAUDE/deck-vs-app-answers.md` section 10).
                   *
                   * THE EDGE READS THE TASK, NOT A WORD - the same predicates the group's own count
                   * is built from, so the edge and the "1 of 3 done" above it cannot disagree.
                   *
                   * AND AN ENDED ROW TAKES NO EDGE AT ALL. A colour there is a way of saying LOOK
                   * AT THIS; a cancelled task is the one row that wants none of them, so it recedes
                   * to the sunken ground with its title muted - findable without competing.
                   */
                  className={`ak-card ak-card--edge${rowEdge(task) === "plain" ? "" : ` ak-card--${rowEdge(task)}`} focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 flex gap-2 justify-between items-center`}
                  key={task.id}
                  role="button"
                  tabIndex={0}
                  onClick={() => viewTask(task)}
                  onKeyDown={(event: React.KeyboardEvent) => {
                    // A key pressed on a control inside the row (Edit) belongs to that control.
                    if (event.target !== event.currentTarget) return;
                    if (event.key !== 'Enter' && event.key !== ' ') return;
                    event.preventDefault();
                    viewTask(task);
                  }}
                >
                  <div className="flex w-full justify-between gap-3 group items-center cursor-pointer">
                    <div className="patient-task-body min-w-0 flex-1">
                      <div className="ahr-list-card-head">
                      <p className="ak-card__title">
                        {/* 🏷️ CARD 715 — this read `task.description || "Task name not available"`, so a
                            questionnaire task with no description listed as that sentence and then opened
                            as "Blood Pressure Panel". ⭐ The name was already on the task the whole time:
                            `focus.display` carries the questionnaire's title, written at assignment.
                            ⛔ Shared rather than a second fallback chain here — the appointment card's
                            task list had one and this screen had another, which is how the same task
                            could read two different ways on two screens of the same product. */}
                        {/* A questionnaire is marked by its form icon; no task carries a type pill or a
                            Custom label, and the type comes from the task's coding, never its title. */}
                        {taskDisplayTitle(task)}
                        {getAkashicTaskKind(task) === "questionnaire" && (
                          <FileText className="patient-task-kind-icon" aria-label="Questionnaire" role="img" />
                        )}
                      </p>
                        {/* 🔻 THE ORDINARY STATUS IS GONE. 🗣️ Spencer, 2026-08-25: *"The requested pill
                            isn't consistently placed, isn't everything requested? I'm thinking that has
                            zero value and can be dropped."* He is right on both counts — it sat in a
                            wrapping flex beside the title, so a long name pushed it onto its own line,
                            and the Outstanding tab already says every row in it is outstanding.
                            ⭐ WHAT SURVIVES IS THE EXCEPTIONAL STATE. "Cancelled" and "Could not be
                            completed" are facts the tab does NOT give, and a patient looking for a task
                            that has gone away needs to see why. ⛔ "Requested", "Received", "Accepted",
                            "In progress" and "Completed" all say what their tab already said. */}
                        {/* THREE STATES WORTH A WORD, AND THE COLOUR IS WHICH ONE.

                            INERT (red) is what the tab cannot say: a row the patient is
                            scanning for things to DO that will never respond, and the reason.

                            RESUMABLE (amber) is the one ordinary status the tab genuinely
                            cannot say either - Outstanding is not a synonym for in-progress,
                            it is its superset, and a half-answered questionnaire is picked up
                            where a never-opened one is started.

                            DONE (green) is a case the flat list never had: every heading on this
                            screen claims "1 of 3 done", and the row is where the patient sees
                            WHICH one. Without it the count is a number they cannot check.

                            IT WAS SCOPED TO A VISIT GROUP AND THAT WAS TOO NARROW. Walked at 390
                            on the Completed tab: a finished task under "Due Monday, Jun 22"
                            showed no word while a finished task under "Still needed from your
                            visit on Mon, Jun 29" showed "Completed" - one state wearing a word
                            and no word, three rows apart, on one screen.

                            THE ARGUMENT WAS NEVER ABOUT APPOINTMENTS, IT WAS ABOUT A HEADING
                            THAT COUNTS, and all three kinds count: a visit group, a due-date
                            group and "No deadline" each print "N of M done". Scoping it to one
                            of the three was reading the case it was found in as the rule.

                            The 2026-08-25 ruling is untouched by this and still does its work
                            one tab away: on Outstanding a closed row does not exist, so nothing
                            here puts a word true of every row onto every row.

                            THE WORD COMES FROM THE ONE VOCABULARY, never from a label written
                            here. The deck draws "Submitted"; `statusLabel` says what this
                            product calls a completed task, and `oneStatusVocabularyNoSecondMap`
                            fails on the first surface that disagrees with itself. The deck says
                            WHICH states are worth showing; it does not get to name them twice.

                            AND IT IS TEXT, NEVER A FILLED PILL. The deck's rule above its status
                            block: the status is text, not a token - filled pills made the state the
                            loudest thing on a row, louder than the task itself, and three stacked
                            down a list read as a column of buttons. Measured at thirteen stacked red
                            pills on one tab, four times the count that rule was written against.

                            THE COLOUR IS THE STATE - except on an ENDED row, where the word goes
                            plain. That is the row meant to recede, and a coloured word on it is the
                            edge coming back through the text. */}
                        {(isExceptionalTaskStatus(task)
                          || isResumableTaskStatus(task)
                          || (isPatientOrProxy && isClosedTask(task))) && (
                          <RowStatus
                            tone={
                              rowState(task) === "ended"
                                ? "ended"
                                : isResumableTaskStatus(task)
                                  ? "attention"
                                  : "done"
                            }
                          >
                            {getTaskStatusDisplay(task)}
                          </RowStatus>
                        )}
                      </div>
                      {/* 🗓️ ONE DUE VOCABULARY FOR EVERY KIND OF TASK — Spencer's own ruling, and the
                          questionnaire branch was breaking it twice over. It printed
                          `formatDateForDisplay(task.authoredOn)`, which is the date the task was
                          CREATED, with no "Due by:" in front of it. ⇒ A patient read a creation date as
                          a deadline. 📏 Seen on the running app: "Lose 10 pounds — Due by: this visit"
                          directly above "Complete questionnaire: Contact Us — Friday, August 21, 2026".
                          ⚠️ The helper is named for custom tasks and is not limited to them: an ordinary
                          due date falls straight through to "Due by: <date>", and a task with none says
                          "No due date" rather than borrowing another date to show. */}
                      {/* NOT INSIDE A VISIT GROUP, WHERE IT IS THE HEADING PRINTED AGAIN. The
                          deck's rule for this screen is one sentence: a visit's heading states the
                          practice, the practitioner and the time ONCE, so its rows carry only the
                          task. Measured on a real patient, a row under the heading "Sun, Sep 6 at
                          7:00 PM" read "Due by: appointment on Sun, Sep 6, 2026 at 7:00 PM · Zztest
                          Secondclinician · Walk-in" - the heading and its subline, in full, on every
                          row of the group they already head. Hoisting a shared fact and then
                          repeating it underneath is the repetition this grouping was built to end.

                          A DATE GROUP HOISTS ITS DATE THE SAME WAY: the grouped deck draws its rows
                          with the repeat or the practice and no date (rowDueText). A visit the task
                          is tied to was never hoisted, so that is still the row's to say. */}
                      {/* Priority rides at the right of the due line, apart from the status, and only
                          an urgent task draws it - routine is every row and says nothing. */}
                      {isPatientOrProxy && group.kind !== "appointment" && rowPractice(task)}
                      {((rowDueText(task, group) && (group.kind !== "appointment" || task.status === "cancelled")) || priorityWord(task.priority)) && (
                        <div className="ahr-row-deadline">
                          {rowDueText(task, group) && (group.kind !== "appointment" || task.status === "cancelled") && (
                            <DueLine text={rowDueText(task, group) as string} />
                          )}
                          <RowPriority priority={task.priority} />
                        </div>
                      )}
                      {/* NOT ON THE PATIENT'S LIST - AND THE FIRST REASON THIS GAVE IS NOW FALSE,
                          so it is corrected here rather than left to be inherited.

                          It said the deck defines `.chip` and draws it ZERO times, making the
                          suppression a rule with nothing to contradict it. Measured against
                          `mockups/patient-portal.html` as it stands: of 233 screens, seven draw
                          `.chip` - and those seven are patient "My Tasks" screens. The patient's
                          task list is not where the deck avoids chips; it is the ONLY place the deck
                          uses them, and `Routine` is among the labels it draws there.

                          The claim may well have been true of the deck it was written against - "all
                          nine frames" does not describe a deck of 233 screens - so this corrects a
                          premise that expired rather than one made carelessly.

                          WHAT SURVIVES IS THE SECOND ARGUMENT, and the suppression now rests on it
                          alone until Spencer rules: whether the patient sees these changes what the
                          screen says to them, which is a product decision and not a restyle.

                          EACH ONE FAILS A TEST THIS SCREEN HAS ALREADY APPLIED TO ITSELF.
                          `Routine` is `Task.priority` and is identical on every row here, which is
                          exactly the argument that took the due line out of a visit group's rows.
                          The kind is the deck's own caption on the frame beside this one: *three
                          visits in one week - the case a real patient has, where naming the KIND
                          names nothing.*

                          THE CHART KEEPS THEM, and that is the same two-readers split this file
                          already makes twice above: the deck governs the PATIENT's list, and a
                          coordinator running down a chart wants the type on every row. Not a
                          blanket ban either - a chip carrying something that VARIES and changes
                          what somebody does is a different question. */}
                    </div>
                    <div className="patient-task-chevron flex gap-2">
                      <ChevronRight size={16} strokeWidth={1.5} className="ak-chev" />
                    </div>
                  </div>
                  {isAuthorizedToEdit() && !isCustomTask(task) && (
                    <div>
                      <Button
                        variant="outline"
                        className="btn btn-blue-ghost"
                        onClick={(event: React.MouseEvent) =>
                          editTask(event, task)
                        }
                      >
                        <Edit />
                        Edit
                      </Button>
                    </div>
                  )}
                </div>
              ))}
                </div>
              ))}
            </div>
          )
        )}

        {taskTab === "outstanding" && !loading && !error && standingInstructions.length > 0 && (
          <section className="patient-task-group ak-card-list" aria-label="Standing instructions">
            <div className="patient-task-group-head">
              <p className="patient-task-group-title ak-card__title">Standing instructions</p>
            </div>
            <p className="patient-task-group-sub">From your care plans. Nothing to tick off.</p>
            {standingInstructions.map((task: Task) => (
              <div className="ak-card" key={task.id}>
                <p className="ak-card__title">{task.description}</p>
                {task.basedOn?.[0]?.display && (
                  <p className="text-sm text-muted-foreground">{`From ${task.basedOn[0].display}`}</p>
                )}
              </div>
            ))}
          </section>
        )}

        {/* THE PATIENT'S OWN SETUP STEPS, AND THEY SIT OUTSIDE THE BRANCH ABOVE ON PURPOSE.
            A patient whose practices have asked for nothing still owes these, and the branch above
            renders an empty state instead of a list in exactly that case - so mounting this inside it
            would hide the four global items from the patient most likely to still owe them.
            PATIENT OR PROXY ONLY: these are the patient's own housekeeping, computed from the
            record they hold, and the chart is not where anybody works them. */}
        {isPatientOrProxy && !loading && !error && (
          <PatientSetupTasks tab={taskTab} onCountsChange={handleSetupCounts} />
        )}

        {!embedded && selectedTask && (
          <Sheet
            open={showDisplayModal}
            onOpenChange={(open: boolean) => {
              if (!open) closeTaskDetails();
            }}
          >
            <SheetContent className="sm:max-w-[700px] sm:min-w-[700px] w-4/4">
              {isCustomTask(selectedTask) ? (
                // The body pads only top and bottom; the patient's dialog insets it, so the sheet has to.
                <div className="ak-overlay__body">
                  <CustomTaskDetails
                    task={selectedTask}
                    onTaskUpdated={setSelectedTask}
                  />
                </div>
              ) : (
                <FhirTaskDisplay
                  task={selectedTask}
                  isOpen={showDisplayModal}
                  onClose={() => closeTaskDetails(opening)}
                />
              )}
            </SheetContent>
          </Sheet>
        )}
      </>
    );
  };

  return (
    <div className={`p-2 space-y-2${namedByShell ? " patient-tasks-page" : ""}`}>
      {isPatientOrProxy && !embedded && <PatientPracticesReader onRead={readPractices} />}
      {packetRefresh !== "" && <PacketSummaryReader patientId={patientState?.id} refresh={packetRefresh} onRead={setPacketRead} />}
      {!namedByShell && (
      <div className="flex flex-wrap justify-between items-center gap-3">
        <div className="mb-2 lg:mb-0 sm:mb-0 min-w-0 flex-1">
          <h2 className="font-bold text-xl">
            {isPatientOrProxy ? "Available Tasks" : "Patient Tasks"}
          </h2>
          <p className="text-sm">
            {isPatientOrProxy
              ? "Review and complete tasks assigned by your care team."
              : "Review questionnaires and Custom Tasks assigned to this patient."}
          </p>
        </div>
        {isAuthorizedToAssign() && (!embedded || onStartAssignment) && (
          <div className="shrink-0">
          <DropdownMenu
            label="Assign a Task"
            text="Assign a Task"
            icon={<Plus size={16} />}
            disabled={!patientState}
          >
            <DropdownMenuItem
              onSelect={() => startAssignment("questionnaire")}
            >
              Assign Questionnaire
            </DropdownMenuItem>
            <DropdownMenuItem onSelect={() => startAssignment("packet")}>
              Assign Packet
            </DropdownMenuItem>
            <DropdownMenuItem onSelect={() => startAssignment("custom")}>
              Assign Custom Task
            </DropdownMenuItem>
          </DropdownMenu>
          </div>
        )}
      </div>
      )}

      {showTaskTabs && (
        <Tabs
          value={taskTab}
          onValueChange={(value) =>
            setTaskTab(value as "outstanding" | "completed")
          }
        >
          {/* 🗂️ TWO EQUAL HALVES ACROSS THE FULL WIDTH, as the decks draw it. 🗣️ Spencer, 2026-08-25:
              *"The outstanding/completed should be tabs."* The primitive defaults to `w-fit`, which
              packs them into a small pill pair at the left — it reads as a filter chip rather than as
              the two halves of the list, and on a phone it wastes the row it is already taking. */}
          <TabsList className="patient-tasks-tabs ak-tabs ak-tabs--segmented">
            <TabsTrigger value="outstanding" className="ak-tab">Outstanding</TabsTrigger>
            <TabsTrigger value="completed" className="ak-tab">Completed</TabsTrigger>
          </TabsList>
        </Tabs>
      )}

      {renderContent()}

      {isPatientOrProxy && !embedded && (
        <PatientTaskDialog
          open={!!dialogTaskId}
          onOpenChange={(next) => { if (!next) setDialogTaskId(undefined); }}
          taskId={dialogTaskId}
        />
      )}

      {isPatientOrProxy && !embedded && (
        <PatientReferralDialog
          referral={referrals.find((referral) => referral.id === openReferralId)}
          onClose={() => setOpenReferralId(undefined)}
          onMarkBooked={markBooked}
          onDeclineInvite={declineInvite}
        />
      )}

      {patientState && !embedded && (
        <>
          <QuestionnaireTaskAssignmentModal
            isOpen={showQuestionnaireTaskModal}
            patient={patientState}
            onClose={() => setShowQuestionnaireTaskModal(false)}
          />
          {/* Mounted only while open: its packet and appointment reads belong to one opening. */}
          {showPacketModal && (
            <PacketAssignmentModal
              isOpen
              patient={patientState}
              onClose={() => setShowPacketModal(false)}
            />
          )}
          <CustomTaskAssignmentModal
            isOpen={showCustomTaskModal}
            patient={patientState}
            onClose={() => setShowCustomTaskModal(false)}
          />
        </>
      )}
    </div>
  );
};

export default PatientTasks;

// import { useNavigate } from 'react-router-dom';
// import { FormProvider, useForm } from 'react-hook-form';
// import { QuestionnaireResponse, Task } from 'fhir/r4';
// import {
// IValueSet,
// useValueSetServiceContext,
// useQuestionnaireServiceContext,
// useFhirServiceContext,
// useAuthServiceContext,
// useTaskServiceContext
// } from '../../../../../services';
// import { AppSpinner, ScrollableTab, FhirTaskDisplay } from '../../../../../components';
// import QuestionnairePreview from '../../../QuestionnairesPage/QuestionnairePage/QuestionnairePreview/QuestionnairePreview.tsx';
// import { useFhirTaskBroadcast, useFhirTasks, useFhirTaskTargetedBroadcast } from '../../../../../hooks';
// import React from 'react';

// const PatientTasks = ({ isHomePage = false, elevated = false }: { isHomePage?: boolean; elevated?: boolean }) => {
// const navigate = useNavigate();
// const { userRole, USER_ROLES } = useAuthServiceContext();
// const { loading, error, clearError, tasksList } = useFhirTasks();
// const { getTaskDisplay } = useTaskServiceContext();
// const {
// fetchQuestionnaire,
// fetchQuestionnaireResponse,
// transformFromFhirQuestionnaire,
// } = useQuestionnaireServiceContext();
// const { valueSetUrls, fetchValueSet } = useValueSetServiceContext();
// const { extractReferenceId } = useFhirServiceContext();
// const [showResponse, setShowResponse] = useState(false);
// const [responseLoading, setResponseLoading] = useState<{[key: number]: boolean}>({});
// const [statusFilter, setStatusFilter] = useState('all');
// const [filteredTasks, setFilteredTasks] = useState<Task[]>([]);
// const [taskStatus, setTaskStatus] = useState<IValueSet[]>([]);
// const [isGuideOpen, setIsGuideOpen] = useState<boolean>(false);
// const [selectedTask, setSelectedTask] = useState<Task | null>(null);
// const [showDisplayModal, setShowDisplayModal] = useState<boolean>(false);

// const isPatient = [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string);
// const spacerMargin = '24px';

// useFhirTaskBroadcast();
// useFhirTaskTargetedBroadcast({
// task: selectedTask || undefined,
// isOpen: showDisplayModal,
// onUpdate: (updatedTask) => {
// setSelectedTask(updatedTask);
// },
// onDelete: () => {
// setShowDisplayModal(false);
// setSelectedTask(null);
// }
// });

// const methods = useForm({
// defaultValues: {}
// });

// const { reset, watch } = methods;

// useEffect(() => {
// const loadTaskStatusOptions = async () => {
// try {
// const taskStatusValueSet = await fetchValueSet(valueSetUrls.taskStatus);
// setTaskStatus(taskStatusValueSet)
// } catch (error) {
// console.error('Failed to load task status options:', error);
// }
// };

// loadTaskStatusOptions();
// }, [fetchValueSet, valueSetUrls]);

// useEffect(() => {
// if (tasksList.length > 0) {
// if (statusFilter === 'all') {
// setFilteredTasks(isHomePage ? tasksList.filter((task: Task) => task.status !== 'completed'): tasksList);
// } else {
// setFilteredTasks(tasksList.filter(task => task.status === statusFilter));
// }
// } else {
// setFilteredTasks([]);
// }
// }, [tasksList, statusFilter]);

// const viewTask = (task: Task) => {
// setSelectedTask(task);
// setShowDisplayModal(true);
// };

// const editTask = (event: React.MouseEvent, task: Task) => {
// event.stopPropagation();
// navigate(isHomePage ? `task/${task.id}`: task.id as string, {
// relative: 'path'
// });
// };

// const openTask = (event: React.MouseEvent, task: Task) => {
// event.stopPropagation();
// navigate(isHomePage ? `task/${task.id}`: task.id as string, {
// relative: 'path'
// });
// };

// const addTask = () => {
// navigate('new', {
// relative: 'path'
// });
// };

// const getStatusIcon = (status: string) => {
// switch (status) {
// case 'completed':
// return check;
// case 'cancelled':
// case 'failed':
// return close;
// case 'in-progress':
// return list;
// default:
// return null;
// }
// };

// const getStatusStyle = (status: string) => {
// switch (status) {
// case 'completed':
// return { color: '#4CAF50' };
// case 'cancelled':
// case 'failed':
// return { color: '#F44336' };
// case 'in-progress':
// return { color: '#2196F3' };
// case 'on-hold':
// return { color: '#FF9800' };
// default:
// return { color: '#757575' };
// }
// };

// const getPriorityStyle = (priority: string) => {
// switch (priority) {
// case 'urgent':
// case 'asap':
// return { color: '#F44336', fontWeight: 'bold' };
// case 'high':
// return { color: '#FF9800', fontWeight: 'bold' };
// case 'routine':
// return { color: '#4CAF50' };
// default:
// return {};
// }
// };

// const viewResponse = async (event: any, task: Task) => {
// event.preventDefault();
// event.stopPropagation();

// setResponseLoading(prev => ({...prev, [task.id as string]: true }));

// try {
// const questionnaireId = task.focus?.reference?.split('/').pop();

// if (questionnaireId) {
// const loadedQuestionnaire = await fetchQuestionnaire(questionnaireId);
// const responseId = extractReferenceId(task.output?.[0]?.valueReference);
// const questionnaireResponse: QuestionnaireResponse = await fetchQuestionnaireResponse(responseId as string);
// const transformedQuestionnaire = transformFromFhirQuestionnaire(loadedQuestionnaire, questionnaireResponse);

// reset(transformedQuestionnaire);
// setShowResponse(true);
// }
// } catch (error) {
// console.error('Failed to load questionnaire:', error);
// } finally {
// setResponseLoading(prev => ({...prev, [task.id as string]: false }));
// }
// };

// const isAuthorizedToEdit = () => {
// return userRole && [USER_ROLES.PRACTITIONER].includes(userRole as string);
// };

// const renderContent = () => {
// return (
// <>
// <FhirGuide isOpen={isGuideOpen}
// onFinish={() => setIsGuideOpen(false)}
// resourceType="Task"/>

// {error && (
// <>
// <Notice status="error" onRemove={clearError}>
// {error}
// </Notice>

// <Spacer margin={spacerMargin}/>
// </>
// )}

// {!loading && filteredTasks.length === 0 && (
// <>
// <Notice status="info" isDismissible={false}>
// No {isHomePage ? 'incomplete': ''} tasks found.
// </Notice>

// <Spacer margin={spacerMargin}/>
// </>
// )}

// {loading ? (
// <AppSpinner/>
// ): (
// <ScrollableTab>
// {filteredTasks.length !== 0 && (
// <>
// <ItemGroup isBordered isSeparated isRounded size='large'>
// {filteredTasks.map((task: Task) => {
// const displayTitle = getTaskDisplay(task);
// const statusIcon = getStatusIcon(task.status);
// const statusStyle = getStatusStyle(task.status);
// const priorityStyle = getPriorityStyle(task.priority || 'routine');

// return (
// <Item key={task.id}
// onClick={() => viewTask(task)}>
// <Flex>
// <FlexItem>
// {statusIcon && (
// <Icon icon={statusIcon}
// size={24}
// style={{...statusStyle, marginRight: 12 }}/>
// )}
// </FlexItem>
// <FlexBlock>
// <Flex align="center" justify="space-between">
// <FlexItem>
// <Text style={{ fontWeight: 500 }}>
// {displayTitle}
// </Text>
// {task.priority && (
// <Text variant="muted" style={{ display: 'block',...priorityStyle }}>
// Priority: {task.priority.toUpperCase()}
// </Text>
// )}
// </FlexItem>
// <FlexItem>
// <Flex>
// {task.output && task.output.length !== 0 && (
// <FlexItem>
// <Button variant="secondary"
// size="small"
// icon={external}
// isBusy={responseLoading[task.id as string]}
// disabled={responseLoading[task.id as string]}
// onClick={e => viewResponse(e, task)}>
// View Answers
// </Button>
// </FlexItem>
// )}
// {isHomePage && isPatient && (
// <FlexItem>
// <Button variant="secondary"
// size="small"
// icon={external}
// onClick={(event: React.MouseEvent) => openTask(event, task)}>
// Open
// </Button>
// </FlexItem>
// )}
// {isAuthorizedToEdit() && (
// <FlexItem>
// <Button variant="secondary"
// size="small"
// icon={edit}
// onClick={(event: React.MouseEvent) => editTask(event, task)}>
// Edit
// </Button>
// </FlexItem>
// )}
// </Flex>
// </FlexItem>
// </Flex>
// </FlexBlock>
// </Flex>
// </Item>
// );
// })}
// </ItemGroup>

// {/* Response Modal */}
// {showResponse && (
// <Modal style={{ width: '70%', height: '90%' }}
// title={`Preview: ${watch('title') ?? 'Untitled'}`}
// onRequestClose={() => setShowResponse(false)}>
// <FormProvider {...methods}>
// <Disabled>
// <form>
// <div style={{ paddingBottom: 16 }}>
// <QuestionnairePreview/>
// </div>
// </form>
// </Disabled>
// </FormProvider>
// </Modal>
// )}

// {/* Task Display Modal */}
// {selectedTask && (
// <FhirTaskDisplay task={selectedTask}
// isOpen={showDisplayModal}
// onClose={() => {
// setShowDisplayModal(false);
// setSelectedTask(null);
// }}/>
// )}
// </>
// )}
// </ScrollableTab>
// )}
// </>
// );
// };

// const renderHeaderButtons = () => {
// return (
// <Flex align="center" justify="end">
// <FlexBlock>
// {isHomePage && (
// <Heading level={3}>Tasks</Heading>
// )}
// </FlexBlock>
// <FlexItem>
// <Button variant="primary"
// icon={info}
// onClick={() => setIsGuideOpen(true)}>
// Help
// </Button>
// </FlexItem>
// <FlexItem>
// {isAuthorizedToEdit() && (
// <Button variant="primary"
// icon={plus}
// onClick={addTask}>
// Add Task
// </Button>
// )}
// </FlexItem>
// </Flex>
// );
// };

// if (isHomePage) {
// return (
// <Card style={elevated ? { boxShadow: 'none' }: {}}>
// {elevated && <Elevation value={5}/>}

// <CardHeader>
// {renderHeaderButtons()}
// </CardHeader>
// <CardBody>
// {renderContent()}
// </CardBody>
// </Card>
// );
// }

// return (
// <View style={{ height: '100%' }}>
// <Flex align="center" justify="space-between">
// <FlexItem>
// {filteredTasks.length !== 0 && (
// <CustomSelectControl __next40pxDefaultSize
// label="Filter by status"
// value={taskStatus.find(option => option.code === statusFilter)?.code}
// options={[
// { key: 'all', name: 'All' },
//...taskStatus.map(option => ({
// key: option.code,
// name: option.display
// }))
// ]}
// onChange={(newValue: { selectedItem: { key: string, name: string } }) => {
// setStatusFilter(newValue.selectedItem.key);
// }}/>
// )}
// </FlexItem>
// <FlexItem>
// {renderHeaderButtons()}
// </FlexItem>
// </Flex>
// <Spacer margin={spacerMargin}/>

// {renderContent()}
// </View>
// );
// };

// export default PatientTasks;