import { useNavigate } from "react-router-dom";
import { usePatientAccountSummary } from "./usePatientAccountSummary.ts";
import type { SummaryItem } from "./patientAccountSummary.ts";

/**
 * The patient home's account summary., design D3b.
 *
 * It is the NAVIGATION, not a header decoration: every count links into its own full list, so one
 * control answers both *"is there anything I haven't seen?"* and *"take me there"*. Removing the left
 * nav without building this is what made the home feel like it had lost something.
 *
 * The count and the value are amber, the words between them ink. Counts went amber app-wide on
 * 2026-08-30 ("app wide counts and totals should be amber"), superseding the blue count of 08-13;
 * the label stays uncoloured so the tile is not a stripe.
 */

const Item = ({ item }: { item: SummaryItem }) => {
  const navigate = useNavigate();
  // A ZERO IS STILL A DOOR, but it is not a call to action. The tile stays fully clickable - that is
  // the whole point of always rendering it (Spencer, 2026-08-14) - while the number drops out of the
  // navigate colour, so four zeroes read as "nothing waiting" rather than as four things shouting.
  // Do NOT hide it, and do NOT disable it: "0 unread" is how a patient reaches their messages on a
  // quiet day, and it is the only route there from this page.
  const quiet = item.count === 0;
  // THE THIRD STATE. `undefined` is NOT YET KNOWN, and it is not the number zero: on in-app
  // return the band said "0 invoices unpaid" for ~2s while $245 was owed across two - measured, with a
  // cold-load control that never showed it.
  // It is a consequence of a GOOD ruling, which is why the answer is not to hide the tile again:
  // Spencer settled that all four render including zeros, so `0` became a legitimate rendered state and
  // "not loaded" stopped being distinguishable from "nothing owed".
  // A FALSE ZERO IS NOT A LOADING STATE, IT IS AN ASSERTION. Say nothing until the answer is known.
  const unknown = item.count === undefined;

  return (
    <button
      type="button"
      onClick={() => navigate(item.to)}
      /* CARDED (Spencer, 2026-08-14) - a bordered tile, as the mock has it. It used to be a bare
 hover target, which left four counts floating as loose text with nothing to say they were
 controls. The border is the CONTAINER only: the ink rule below is unchanged, and the tile
 must NOT take a tint of its own - an all-amber treatment was tried on 08-13 and rejected as
 heavy. */
      className="ak-card min-w-0 text-left"
    >
      {/* Count INLINE with its label, not stacked above it — two tight lines per item instead of
          three. On a phone, vertical space is the budget everything else is drawn from. */}
      <span className="flex items-baseline gap-0.5">
        {unknown ? (
          /* The tile KEEPS ITS SHAPE - same size, same position, still clickable - because the band is
 the navigation and it must not move about while it loads. Only the number is withheld, and
 `aria-hidden` keeps a screen reader from announcing the placeholder as content: the tile's
 own label already says what it is. */
          <span
            aria-hidden="true"
            className="inline-block h-5 w-6 animate-pulse rounded bg-muted align-baseline"
          />
        ) : (
          <span
            className={`text-[18px] font-semibold tabular-nums tracking-[-0.01em] ${quiet ? "text-secondary" : "text-warning"}`}
          >
            {item.count}
          </span>
        )}
        {/* 🔊 A REAL SPACE, not just the flex `gap`. Gap is layout and contributes nothing to the
            accessible name, so without this the tile announced itself as "0invoices unpaid" — the number
            welded to the noun. A whitespace-only text node in a flex container is not rendered as a flex
            item, so the spacing on screen is unchanged. */}{" "}
        {/* Ink, never black, and the one part of the tile that is not coloured. */}
        <span className="ahr-summary-label truncate text-[13px] text-ink">{item.label}</span>
      </span>
      {/* Only the value is amber, never "Total:" before it. The line exists only when there is a fact
          to state, so a quiet tile stays one line tall. */}
      {item.fact && (
        <span className="block truncate text-[11px] leading-[1.2] text-ink-muted">
          {item.fact.lead ? `${item.fact.lead} ` : ""}
          <b className="font-medium tabular-nums text-warning">{item.fact.value}</b>
        </span>
      )}
    </button>
  );
};

export const AccountSummary = ({ hideMessages = false }: { hideMessages?: boolean }) => {
  // A signed-in 12-17 patient has no messaging (18+), so the band has no messages door for them.
  const items = usePatientAccountSummary().filter((item) => !hideMessages || item.id !== "messages");

  // THE "all caught up" SENTENCE THAT USED TO LIVE HERE IS GONE, deliberately (Spencer,
  // 2026-08-14). It could only appear when the band had collapsed to nothing, and the band no longer
  // collapses: all four counts render, zeroes included, because they ARE the navigation. A patient on
  // a quiet day now reads four zeroes - which says the same thing and still gets them to their
  // messages. Do not reinstate the sentence as an extra row; it would repeat what the zeroes say.

  return (
    // - `ak-home__summary` owns the grid: 2 × 2 up to ~1000px of CONTAINER width, four across
    // above it. Not four across on a tablet: inside the 620px queue column that gives each item
    // ~150px, narrower than the phone's 176, which wraps the labels again.
    <section aria-label="Your account" className="ak-home__summary mb-3">
      {items.map((item) => (
        <Item key={item.id} item={item} />
      ))}
    </section>
  );
};

export default AccountSummary;