import { QueueKindChip } from "./QueueKindChip.tsx";
import "./PatientQueue.css";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { CheckCircle2, ChevronRight } from "lucide-react";
import { usePatientQueue, usePatientQueueStatus, queueTotal } from "./usePatientQueue.ts";
import { LIST_ROUTE_FOR_KIND, type RankedItem } from "./patientQueue.ts";
import { EmptyState } from "../../../components/ui/empty-state.tsx";
import { OrgBadge } from "../../../components/ui/org-badge.tsx";
import { DueLine } from "../../../components/ui/row-meta.tsx";
import PatientAppointmentDialog from "../../../components/appointments/PatientAppointmentDialog.tsx";
import PatientMessageDialog from "../../../components/messages/PatientMessageDialog.tsx";
import PatientTaskDialog from "../../../components/tasks/PatientTaskDialog.tsx";
import PatientReferralDialog from "../../../components/tasks/PatientReferralDialog.tsx";
import { usePatientHomeReferrals } from "./patientHomeReferrals.ts";
import type { PatientPacketSummaries } from "../../../hooks/usePatientPacketSummaries.ts";

/**
 * The patient home's ranked queue., design D1/D2/D4, spec §6.
 *
 * One list ordered by urgency - never a section per KIND, because a section can be pushed to the
 * bottom and the bottom does not get read.
 *
 * IT IS NOW ONE LIST ON SCREEN TOO. Spencer's 2026-08-24 mockup replaced the Now / Before end of day /
 * This week band headings with a single *Needs attention* heading and put the deadline on each row.
 * The RANKING is untouched - `usePatientQueue` still tiers and still promotes a neglected item to the
 * top - so what a patient reads first has not moved. Only the headings went, and they went for the same
 * reason there is no section per kind: a heading is something a reader can scroll past.
 */

// The per-KIND default for the ACTION. An item may name itself instead (`actionLabel`), which is what
// stops every outstanding task being announced as a form - see `TASK_LABELS` in usePatientQueue.
//
/*
 * `KIND_LABEL` WAS REMOVED HERE, 2026-09-09, and this is what it leaves behind.
 *
 * It held "Form" / "Message" / "Payment" / "Appointment" and was rendered as a text pill above each
 * title. Spencer replaced that pill with an inline glyph on 2026-09-08, and the map stayed behind -
 * declared, referenced nowhere, the same shape as the `KIND_CHIP` tone map tombstoned three lines
 * above it. Deleted rather than left, because a reader looking for "what does this app call a payment
 * row" would have found a dead answer first.
 *
 * The kind is back in words, as the deck's chip (QueueKindChip.tsx). It maps by queue
 * kind, so a questionnaire reads Task as it does on the deck, and `item.kindLabel` still has no
 * renderer.
 */
const ACTION_LABEL: Record<RankedItem["kind"], string> = {
  form: "Start form",
  message: "Read message",
  payment: "Pay now",
  appointment: "View appointment",
};

/*
 * THE `KIND_CHIP` PILL MAP WAS REMOVED HERE, 2026-09-09, and this note is what it leaves behind.
 *
 * The pill itself went when Spencer replaced it with an inline icon, but the tone map stayed -
 * declared, exported to nothing, referenced nowhere. It held `bg-purple-100 text-purple-800`, `bg-blue-100 text-blue-700`, `bg-teal-100 text-teal-700`,
 * `bg-indigo-100 text-indigo-700`.
 *
 * IT IS DELETED RATHER THAN LEFT, because it is dead code carrying the exact four off-palette
 * colours the palette pass just took out of the icons - purple and indigo are not colours this
 * product has. A reader looking for "what colour is a payment row" would have found this first, and
 * the honest reason those hues survived a whole palette review is that nothing connects a Tailwind
 * colour class to a token. Leaving them here re-arms that.
 *
 * The live mapping is QUEUE_KIND_CHIP in QueueKindChip.tsx, on the shared pill tones.
 */

/*
 * THE KIND IS A CHIP AGAIN (provisional). The inline kind glyph and its tone map were removed here:
 * Spencer asked for the queue to be built as the patient-portal deck draws it for now, and the deck
 * draws a TASK / MESSAGE / PAYMENT chip in the card corner and no glyph. The chip and its map live
 * in QueueKindChip.tsx, so his later coloured-text refinement is a one-file change.
 */

const Card = ({
  item,
  onOpen,
}: {
  item: RankedItem;
  // The WHOLE item, not just what it opens. The row already renders the practice and the practitioner,
  // and the dialog it opens has fields for both - passing only `opens` was how the detail ended up
  // saying less than the row that opened it.
  onOpen: (item: RankedItem) => void;
}) => {
  const navigate = useNavigate();

  // R5 (Spencer, 2026-08-14): *"they'd only have to navigate off this page if they actually need the
  // full page for that item."* So opening in place is the DEFAULT and navigating is the exception - the
  // row asks what it opens before it asks where it goes.
  const act = () => (item.opens ? onOpen(item) : navigate(item.to));

  /*
 * THE ROW IS THE CONTROL - there is no button on it.
 *
 * Spencer, 2026-08-25: *"those big action buttons don't even exist in the mockups, they need to go
 * away."* And the deck says why: tapping the item and tapping a button on the item did the same thing.
 * The button only said so louder, on every row, in the space the next two items would have used.
 * Measured in the drawing: five rows give back 170px of the 682 they took - a quarter of the list.
 *
 * The action's WORD survives as the row's accessible name, so "Complete task" and "Pay now" are
 * still what a screen reader announces. The label was never the thing that was wrong; the box was.
 *
 * The "+ N more" line stays a button of its OWN and must not be nested inside this one - it goes
 * somewhere else entirely (the list for that kind), and a button inside a button is invalid markup a
 * browser resolves by dropping one of them.
 */
  return (
    <div className="ak-card ak-card--edge relative ahr-queue-card" data-kind={item.kind}>
      {/* THE HIT AREA IS THE WHOLE CARD, and it is a stretched overlay rather than a button wrapped
          around the content — because the title has to stay an `<h4>`. A heading is flow content and is
          not valid inside a button, so wrapping would have silently deleted a heading from the page
          outline to gain a click target.  The overlay carries the action's word as its name, the
          content sits above it and lets clicks fall through, and the "+ N more" line opts back in
          because it goes somewhere else entirely. */}
      <button
        type="button"
        onClick={act}
        aria-label={item.actionLabel ?? ACTION_LABEL[item.kind]}
        className="absolute inset-0 z-0"
      />

      <div className="pointer-events-none relative z-10 flex items-start gap-2">
        <div className="ahr-queue-item-body min-w-0 flex-1">
          <div className="flex items-start gap-[7px]">
            {/* 🚨 `aria-label` IS THE HEADING'S NAME, AND WITHOUT IT THE MARK BECOMES PART OF IT.
                The `promoted` span below sits INSIDE this h4, so the heading's computed accessible
                name was "<title> promoted" - a heading named a thing that does not exist, which is
                Spencer's own "name the thing" rule broken by a decoration. Caught by the Captain
                2026-09-09 against `patientQueue.render`, and the TEST was right.
                ⚖️ WHY THE LABEL RATHER THAN MOVING THE SPAN OUT: this h4 is `flex-1` inside the row,
                which is what makes a long title truncate instead of shoving the chevron off the end.
                Lifting the mark to a sibling makes it a flex item and parks it against the right
                edge, away from the words it qualifies - a different design from the one that was
                approved. The label fixes the name and leaves the layout alone.
                📌 The mark is NOT `aria-hidden`: it stays in the row's content, so a reader moving
                through the row still meets the word. It is only excluded from the HEADING's name. */}
            <h4 className="ak-card__title min-w-0 flex-1" aria-label={item.title}>
              {item.title}
              {item.promoted && (
                // A MARK, not a count: counting a neglected item is not surfacing it. This says the
                // queue raised it, which is a different fact from its own deadline arriving.
                <span className="ak-card__status ahr-row-status--attention ml-2">
                  promoted
                </span>
              )}
            </h4>
          </div>

          {/* Always shown, never inferred. A patient at three practices gets messages, bills and
              forms from all of them: a lab result FROM one practice ORDERED BY another's doctor. Saying
              both is what stops someone calling the wrong practice — or paying the wrong one. */}
          {(item.organizationName || item.practitionerName) && (
            <p className="ak-org-line mt-1.5">
              {item.organizationName && (
                <>
                  <OrgBadge name={item.organizationName} />
                  <span className="ak-org-line__name">{item.organizationName}</span>
                </>
              )}
              {/* The dot leads the doctor, so when the doctor wraps it falls outside the line and is clipped. */}
              {item.practitionerName && (
                <span className="ahr-queue-who">
                  {item.organizationName && <span className="ak-org-line__sep">·</span>}
                  {item.practitionerName}
                </span>
              )}
            </p>
          )}

          {/* WHEN. It sits BELOW the practice rather than up in the head line, and the deck says why:
              above the title it competes with the title for the first thing read, and the title is what
              tells the patient which item this is.
               It also carries urgency now that the Now / Before end of day / This week bands are gone —
              this is the only thing on the row that says when, so a row without one says nothing at all.
              Amber, per the drawing: the same tone `promoted` uses, because both mean "look at this one". */}
          {item.dueLine && (
            <p className="ahr-queue-item-due"><DueLine text={item.dueLine} /></p>
          )}
          {item.progressLine && <p className="ahr-queue-item-progress">{item.progressLine}</p>}
        </div>

        <div className="ahr-queue-item-aside">
          {/* › The one mark that says the row opens, and it is always painted. An arrow that appears on
              hover does not exist on a touch screen — the all-list-items-are-clickable ruling. */}
          <ChevronRight className="ak-chev" aria-hidden="true" />
          {/* The kind chip heads the corner column, with "+ N more" under it, per the deck. */}
          <QueueKindChip kind={item.kind} />
          {/* The rest of this kind sit under the top-right mark, per the deck. It opens the kind's full
              list, never this card's own item, even where the row opens in place. */}
          {item.peerLabel && (
            <button
              type="button"
              onClick={() => navigate(LIST_ROUTE_FOR_KIND[item.kind])}
              className="ahr-queue-item-more"
            >
              {item.peerLabel}
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

/** A queue read failed. Said beside what did load, too, so a partial list never passes for a whole one. */
const CouldNotCheck = ({ className = "" }: { className?: string }) => (
  <p className={`${className} ak-status-line ak-status-line--error`} role="alert">
    We couldn&rsquo;t check what needs you just now. Please reload to try again.
  </p>
);

/**
 * `setupBannerOffersItems` - THE BANNER ABOVE IS ALREADY ASKING THE PATIENT FOR SOMETHING.
 *
 * Measured on the patient portal 2026-09-13: the setup banner listed FIVE outstanding items and this
 * cell, directly beneath it, read *"Nothing needs you yet"*. Two surfaces on one screen making opposite
 * claims, and the false one is the reassuring one - which is how it survived.
 *
 * A PROP, ANSWERED BY THE PAGE, for the same reason its sibling above is: only the home page renders
 * the banner and the queue together and can see both, and reading it here would give this component a
 * service dependency it does not otherwise have.
 */
export const PatientQueue = ({
  urgentBannerOffersMessaging = false,
  canMessage = true,
  setupBannerOffersItems = false,
  packetRead,
  readerIsHelper = false,
}: {
  urgentBannerOffersMessaging?: boolean;
  setupBannerOffersItems?: boolean;
  canMessage?: boolean;
  /** The page's packet read, when a packet form is listed. A packet is grouped only once its summary is known. */
  packetRead?: PatientPacketSummaries;
  readerIsHelper?: boolean;
} = {}) => {
  const tiers = usePatientQueue(undefined, packetRead?.packets, readerIsHelper);
  const packetNote = !packetRead ? null : packetRead.failed ? (
    <p className="ak-status-line" role="note" data-testid="queue-packets-unread">
      We couldn&rsquo;t check your packets just now, so their forms are listed one by one.
    </p>
  ) : !packetRead.complete ? (
    <p className="ak-status-line" role="note" data-testid="queue-packets-partial">
      Some packets may not be grouped here. Your Tasks page lists every form.
    </p>
  ) : null;
  const queueStatus = usePatientQueueStatus();
  const tasksNote = queueStatus.incomplete && !queueStatus.failed ? (
    <div role="status" className="ak-status-line flex flex-wrap items-center gap-2" data-testid="queue-tasks-may-be-incomplete">
      <span>Your tasks may not show a recent change yet.</span>
      <button type="button" className="btn btn-blue-ghost" onClick={queueStatus.recheckTasks} disabled={queueStatus.checking}>
        {queueStatus.checking ? "Checking…" : "Check again"}
      </button>
    </div>
  ) : null;
  const total = queueTotal(tiers);
  const countSettled = !queueStatus.loading && !queueStatus.failed && !queueStatus.incomplete;
  const [opened, setOpened] = useState<RankedItem>();
  const navigate = useNavigate();
  const { referrals, markBooked, declineInvite } = usePatientHomeReferrals();
  const openedReferralId = opened?.opens?.kind === "referral" ? opened.opens.referralId : undefined;

  // - THIS USED TO `return null`, ON A CLAIM THAT IS NO LONGER TRUE.
  //
  // The reasoning it carried was *"the band above already says they are caught up, so this stays silent
  // rather than adding a second way of saying so."* That sentence was DELETED from the summary band on
  // 2026-08-14 (Spencer) - the band no longer collapses, and the "all caught up" line went with it. So
  // nothing said it, and at 1280+ the 620px queue column simply rendered as a hole beside the appointment
  // card. Ed read it as *"the home screen is broken for a new patient on a laptop"*, which is exactly what
  // a large empty cell looks like.
  //
  // AND THE OBVIOUS FIX IS THE WRONG ONE, twice over:
  // - Collapsing the grid when the left cell is empty would destroy the designed layout for every patient
  // who HAS tasks - which is every patient after their first appointment. A permanently wrong home
  // screen traded for a better first run.
  // - A cheerful "You're all caught up" here is the sentence Spencer removed, one column across. His
  // objection was that *"it would repeat what the zeroes say"*, and the four zeroes in the band still
  // say it.
  //
  // SO THIS SAYS WHAT THE SPACE IS FOR, and never asserts a count. It cannot duplicate the zeroes
  // because it makes no claim about the present - and it is the one thing a NEW patient, who has never
  // seen a queue item, actually needs told.
  //
  // SPENCER, 2026-08-22: "We need something in the empty views. Especially a brand new patient
  // logging in sees an empty overview and it looks bad."
  //
  // THE ONE LINE THAT USED TO BE HERE WAS RIGHT IN SUBSTANCE AND WRONG IN WEIGHT. It said the correct
  // thing in `text-sm text-secondary`, top-aligned, in a 620px cell - beside a 380px card carrying an
  // icon, an 18px heading, a description and a Book button with a min-height. **The WIDER cell carried
  // the LIGHTER content**, so the left half read as the broken one. That asymmetry is the whole of
  // "it looks bad", and it is why the fix is weight rather than words.
  //
  // THE SHARED `EmptyState`, NOT A NEW ONE. That component's own opening line is the ruling this
  // implements - *"an empty screen is an INVITATION TO ACT, not a status report"* - and it already carries
  // the ruled type scale (18px title, not Tailwind's off-scale `text-xl`) and
  // `!text-[var(--muted-foreground)]` fix. Only 2 of 10 patient surfaces used it before this one.
  //
  // STILL NO "You're all caught up" - that is the sentence Spencer deleted on 2026-08-14, and the four
  // zeroes above still say it. The copy makes no claim about the present, so it cannot repeat them.
  // STILL NO CARDS AND NO COUNTS: *"extra width buys air and placement, never density."* One state,
  // centred, is not density.
  //
  // THE ACTION IS THE PART THAT NEEDED CARE, because two other controls on this same screen could
  // duplicate it:
  // - a setup step - the banner directly above already offers the next one;
  // - Book - the appointment card beside it already is.
  // *"Message the front desk"* is the one useful thing that appears nowhere else here, and it is what a
  // new patient with a question actually wants.
  //
  // AND IT STANDS DOWN WHEN THE BANNER IS ALREADY OFFERING IT. `UrgentBanner` renders the identical
  // button when `offersMessageAction(notice)`, so on an urgent notice the two would sit one above the
  // other - and worse, this cell would be claiming nothing needs the patient while the banner above says
  // something does. The coordination is about TRUTHFULNESS, not tidiness.
  //
  // A PROP, NOT A HOOK, AND THE FIRST DRAFT PROVED WHY. Calling `usePatientUrgentNotice()` here reads
  // as the self-contained option - but that hook reaches `usePatientServiceContext`, so it gave this
  // component a service dependency for a button. **All five of tests went red on a context
  // error**, not on anything about the empty state. The parent already renders the banner and the queue
  // as siblings and can answer this once; the queue stays renderable with nothing but a router.
  // Defaulted to `false` so every existing call site - and the 618 guard - keeps working untouched.
  if (total === 0) {
    return (
      <section aria-label="What needs you" className="space-y-3">
        {/* A CARD WITH A HEADER BAR, MATCHING THE APPOINTMENT CARD BESIDE IT — and this is the half
            that fixes the LOOK rather than the copy.
             Measured on the mockup Spencer reviewed: the appointment card has a header bar and this
            cell did not, so their bodies started at different heights; and with nothing left-aligned
            here, a block centred in 620px could never line up with one centred in 380px. Giving both
            cards the same frame puts their bodies at the same y and gives each a left anchor.
             It also repairs card 240/B10 properly: that made the empty state's title a <p> because the
            section had no heading of its own, so "what you do not have" was the only thing in the
            outline. The section now has a real heading and the title stays a <p>. */}
        <div className="ak-card ak-card--panel">
          <div className="ak-card__header border-b border-border">
            <h3 className="ak-card__title">What needs you</h3>
          </div>
          {/* THE CELL STANDS DOWN RATHER THAN CONTRADICTING THE BANNER. Spencer, on his own
              patient-home run: it *"stands down when the banner is already offering it - for
              truthfulness, not tidiness: otherwise this cell announces nothing needs the patient while
              the banner says something does."*
              ⇒ It still says what IS true of this queue - nothing from the care team is waiting - and
              stops claiming the patient has nothing to do, which is the banner's answer to give. */}
          {queueStatus.loading ? (
            <p className="ak-status-line py-6">Checking what needs you…</p>
          ) : queueStatus.failed ? (
            <CouldNotCheck className="py-6" />
          ) : tasksNote ? (
            <div className="py-6">{tasksNote}</div>
          ) : (
          <EmptyState
            icon={CheckCircle2}
            title={setupBannerOffersItems ? "Your setup steps are above" : "Nothing needs you yet"}
            description={
              setupBannerOffersItems
                ? "Nothing from your care team is waiting. Finish the setup steps above."
                : "When your care team needs something — a form to fill in, a message to answer, a bill to pay — it will show up here."
            }
            action={
              // A signed-in 12-17 patient has no messaging (18+), so the empty state offers nothing.
              urgentBannerOffersMessaging || !canMessage ? undefined : (
                <button
                  type="button"
                  className="btn btn-blue-tonal"
                  onClick={() => navigate("/dashboard/messages?desk=1")}
                >
                  Message the front desk
                </button>
              )
            }
            data-testid="patient-queue-empty"
          />
          )}
        </div>
      </section>
    );
  }

  return (
    <section aria-label="What needs you" className="space-y-3">
      {/* ONE HEADING WITH THE COUNT BESIDE IT, replacing the "N things need you." lead line and the
          Now / Before end of day / This week bands beneath it. Spencer's 2026-08-24 mockup.
           THE ORDER IS UNCHANGED AND STILL DOES THE WORK. `usePatientQueue` still ranks by tier and
          still promotes a neglected item to the top; what goes is the band HEADING, not the ranking. So
          nothing about which item is read first has moved — the deadline moved onto the row, where it
          says the same thing per item instead of once per group.
           `items-baseline`, not `items-center`: the heading is 12px uppercase and the count is 12.5px
          sentence case, so centring them leaves the two texts sitting on different lines. */}
      <div className="patient-queue-head flex items-baseline gap-2">
        {/* ONE HEADING WITH THE COUNT INSIDE IT, matching the approved patient-portal deck, which draws
            the count as the first word of the sentence rather than a tally on the right.
            This replaces "Needs attention" plus a separate "N things", which came from Spencer's
            2026-08-24 mockup and is superseded by the deck approved with him in the fortnight to
            2026-09-04. It now reads as one sentence instead of a label and a number.
            Singular is "1 item needs attention", not "1 items need" - the verb moves with the noun, and
            the deck draws both forms. */}
        {/* The number claims everything waiting, so it is shown only once every read behind the queue has settled.
            A list that may not show a recent change gives no lower bound either: it may be missing a removal. */}
        <h2 className="ak-section-title">
          {countSettled ? (
            <>
              <span className="tabular-nums">{total}</span>{" "}
              {total === 1 ? "item needs" : "items need"} attention
            </>
          ) : (
            "Items needing attention"
          )}
        </h2>
      </div>

      {/* One flat list. A section per KIND is what the queue exists to prevent — see `patientQueue.ts`
          — and a section per TIER had the same failure mode from the other direction: "This week" is a
          heading, and a heading can be scrolled past. */}
      {/* `ahr-queue-list` owns the spacing and the card edge now - see PatientQueue.css. The
          utility gap came off with the border it was compensating for. */}
      {queueStatus.failed && <CouldNotCheck />}
      {tasksNote}
      {packetNote}

      <div className="ahr-queue-list">
        {tiers.flatMap((tier) => tier.items).map((item) => (
          <Card key={`${item.kind}-${item.id}`} item={item} onOpen={setOpened} />
        ))}
      </div>

      <PatientAppointmentDialog
        open={opened?.opens?.kind === "appointment"}
        onOpenChange={(next) => !next && setOpened(undefined)}
        appointment={opened?.opens?.kind === "appointment" ? opened.opens.appointment : undefined}
        practitionerName={opened?.practitionerName}
        organizationName={opened?.organizationName}
      />

      <PatientMessageDialog
        open={opened?.opens?.kind === "message"}
        onOpenChange={(next) => !next && setOpened(undefined)}
        request={opened?.opens?.kind === "message" ? opened.opens.request : undefined}
      />

      <PatientTaskDialog
        open={opened?.opens?.kind === "task"}
        onOpenChange={(next) => !next && setOpened(undefined)}
        taskId={opened?.opens?.kind === "task" ? opened.opens.taskId : undefined}
      />

      <PatientReferralDialog
        referral={openedReferralId ? referrals?.find((referral) => referral.id === openedReferralId) : undefined}
        onClose={() => setOpened(undefined)}
        onMarkBooked={markBooked}
        onDeclineInvite={declineInvite}
      />
    </section>
  );
};

export default PatientQueue;