import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Check, ChevronsDown, Circle } from "lucide-react";
import { useBookAppointmentDialog } from "../../../components/BookAppointmentDialog/BookAppointmentDialogProvider.tsx";
import { type PatientSystemTaskDefinition } from "../../../utils/patientSystemTasks.ts";
import {
  chooseBannerOccupant,
  offersMessageAction,
  recordImportOfferEligible,
  type UrgentNotice,
} from "./patientHomeBanner.ts";
import { usePatientUrgentNotice } from "./usePatientUrgentNotice.ts";
import { usePatientSetupSummary } from "./usePatientSetupSummary.ts";
import PatientTaskDialog from "../../../components/tasks/PatientTaskDialog.tsx";
import { useMountedFirstSignInGateStatus } from "../../../components/FirstSignInGate/firstSignInGateStatus.tsx";
import { isOrglessPatientsHost } from "../../../utils/hostedMount";
import { RecordImportOfferSlot } from "./RecordImportOffer.tsx";
import "./PatientHomeBanner.css";

/**
 * The patient home's ONE banner slot., design spec §4.
 *
 * The two states are told apart by STRUCTURE, not by hue: heavier rail, coloured title, no progress
 * meter, actions on the face of it. Do not make the urgent state louder - three solid fills were
 * tried in the design session and all three were rejected as hard on the eyes. *Nothing in this
 * product should be unpleasant to look at, including the alarm*, and a patient reading that their
 * procedure is cancelled is at the worst possible moment to also be assaulted.
 * The two are never on screen together, so the requirement is recognition over time rather than
 * discrimination at a glance - much weaker than it first appears, and what makes a comfortable urgent
 * state possible at all.
 *
 * DEPENDENCY, declared rather than worked around: the setup state's ground and rail are specified
 * as `--rose-soft` / `--rose`, and **those tokens do not exist** - the palette landed blue/green/amber/
 * red soft only. Defining a token value is lane, so the setup banner renders on the card
 * ground with its 4px rail in the ink family until they land. Every STRUCTURAL difference the design
 * leans on is built and pinned; only the tint is owed.
 *
 * R2, SETTLED (Spencer, 2026-08-14): *"The red card (banner) should be the urgent notice piece."* That
 * CORRECTS the mock, which showed "Finish setting up - 4 of 7 done" in the rose treatment. Red is reserved
 * for the thing that actually needs the patient now; a setup checklist is not that. The assignment below
 * already followed the rule - what did not exist was the TREATMENT itself:
 * - `border-l-6` is not a Tailwind class, so the urgent rail fell back to 1px;
 * - `border-l-destructive` and `border-l-secondary` were never generated, so BOTH banners drew their
 * rail in the neutral border colour and the accent that tells the states apart was never on screen.
 * Both are fixed - see the rail comment below and the `border-l-*` block in index.css.
 */

const SetupBanner = ({
  tasks,
  completedCount,
  totalCount,
}: {
  tasks: PatientSystemTaskDefinition[];
  completedCount: number;
  totalCount: number;
}) => {
  const navigate = useNavigate();
  const next = tasks.find((task) => !task.completed);
  const [expanded, setExpanded] = useState(completedCount === 0);

  return (
    <section
      aria-label="Finish setting up"
      className="mb-3 overflow-hidden rounded-lg bg-card border border-border border-l-4 border-l-secondary"
    >
      <button
        type="button"
        onClick={() => setExpanded((open) => !open)}
        aria-expanded={expanded}
        className="flex w-full items-center gap-2 px-3 py-2 text-left sm:px-4 sm:py-3"
      >
        <span className="min-w-0 flex-1">
          <span className="block text-[13px] font-medium leading-tight text-ink-strong">
            Finish setting up · {completedCount} of {totalCount} done
          </span>
          {next && !expanded && (
            <span className="mt-0.5 block text-[13px] leading-snug text-ink-muted">
              Next: <b className="font-medium text-ink">{next.shortLabel}</b>
            </span>
          )}
          {/* The meter is one of the structural differences: the urgent state never has one. The
              empty track is --border so a patient at 0 of N still sees where progress will fill. */}
          {/* Hidden: the count above says it, and Chrome would append the value to the button's name. */}
          <progress
            className="ahr-setup-meter"
            aria-hidden="true"
            value={completedCount}
            max={totalCount}
          />
        </span>
        {/* The double chevron opens a whole checklist, not one row. */}
        <ChevronsDown
          aria-hidden="true"
          className={`size-[19px] shrink-0 text-ink-muted transition-transform ${expanded ? "rotate-180" : ""}`}
        />
        <span className="sr-only">{expanded ? "Hide" : "Show"}</span>
      </button>
      {expanded && (
        <ul className="border-t border-border">
          {tasks.map((task) => (
            <li key={task.id} className="border-t border-border first:border-t-0">
              <button
                type="button"
                onClick={() => navigate(task.route)}
                className={`flex min-h-[42px] w-full items-center gap-2 px-3 text-left text-[13px] hover:bg-accent sm:px-4 ${
                  task.completed ? "bg-sunken text-ink-muted" : "bg-card"
                }`}
              >
                {/* A state marker, not a checkbox: the row navigates to the screen that finishes the
                    step, so a tickbox would promise a toggle that does not exist. */}
                <span aria-hidden="true" className="grid size-4 shrink-0 place-items-center">
                  {task.completed ? (
                    <span className="grid size-4 place-items-center rounded-full bg-success text-white">
                      <Check size={10} strokeWidth={3} />
                    </span>
                  ) : (
                    <Circle size={16} strokeWidth={1.5} className="text-border" />
                  )}
                </span>
                <span className="min-w-0 flex-1">
                  {task.id === "system-profile" ? "Complete your profile" : task.title}
                  {/* A practice-scoped step names its practice, or a set-up patient cannot see why
                      another practice still asks for something. */}
                  {"organizationName" in task && Boolean(task.organizationName) && (
                    <span className="text-ink-muted"> · {String(task.organizationName)}</span>
                  )}
                </span>
                {task === next && <span className="shrink-0 text-[13px] text-primary">Continue</span>}
              </button>
            </li>
          ))}
        </ul>
      )}
    </section>
  );
};

const UrgentBanner = ({ notice, canMessage }: { notice: UrgentNotice; canMessage: boolean }) => {
  const navigate = useNavigate();
  const { openBookAppointment } = useBookAppointmentDialog();
  const [openTaskId, setOpenTaskId] = useState<string>();
  const primary = notice.primaryAction;

  return (
    <>
    <section
      aria-label="Needs your attention"
      // Heavier rail (8px against the setup state's 4px) and a title that takes the hue.
      //
      // THIS WAS `border-l-6`, AND THERE IS NO SUCH CLASS. Tailwind v3's border-width scale is
      // 0 - 2 - 4 - 8 (plus the 1px default) and the config extends `colors` and `fontSize` only - so it
      // compiled to nothing and the rail silently fell back to the 1px `border` beside it. Checked
      // against the installed Tailwind's resolved config rather than from memory, and now pinned by a
      // test that validates every `border-l-N` in the codebase against that scale.
      // 8, NOT a new 6 in the config. A ninth border width is a design-system change of the same class
      // as a ninth type step; and the rule this rail exists to serve is "visibly heavier than the setup
      // state's 4px", which 8 delivers more legibly than 6 would at zero cost to the scale.
      className="mb-4 rounded-lg bg-red-soft border border-border border-l-8 border-l-destructive p-3"
    >
      <h2 className="ak-section-title ak-section-title--danger">{notice.title}</h2>
      {notice.detail && <p className="mt-1 text-sm">{notice.detail}</p>}
      {notice.deadline && <p className="mt-1 text-sm font-medium">{notice.deadline}</p>}

      <div className="mt-3 flex flex-wrap items-center gap-2">
        {primary.href ? (
          <a href={primary.href} className="btn btn-blue">
            {primary.label}
          </a>
        ) : (
          <button
            type="button"
            className="btn btn-blue"
            // `opens` is checked BEFORE `to`, and the cancelled-appointment notice is the only thing
            // that sets it. Its destination stopped being a route when the booking page was retired.
            onClick={() =>
              primary.opens === "book-appointment"
                ? openBookAppointment()
                : primary.opens === "task" && primary.taskId
                  ? setOpenTaskId(primary.taskId)
                  : navigate(primary.to ?? "/dashboard/home")
            }
          >
            {primary.label}
          </button>
        )}

        {/* 🔑 The "or" is not cosmetic: two stacked buttons read as a SEQUENCE — do this, then that —
            and on a cancelled-procedure notice a patient reading it that way either does both or
            stalls. The message option exists because a call is not available to everyone at that
            moment, a call leaves NO RECORD in a product whose thesis is continuity, and the pooled
            front desk is already the correct recipient. */}
        {canMessage && offersMessageAction(notice) && (
          <>
            <span className="text-sm text-secondary">or</span>
            <button
              type="button"
              className="btn btn-blue-tonal"
              onClick={() => navigate("/dashboard/messages?desk=1")}
            >
              Message the front desk
            </button>
          </>
        )}
      </div>
    </section>

    <PatientTaskDialog
      open={!!openTaskId}
      onOpenChange={(next) => !next && setOpenTaskId(undefined)}
      taskId={openTaskId}
    />
    </>
  );
};

/** The slot. One occupant, chosen by `chooseBannerOccupant` - never by two components each deciding. */
// `canMessage` is false for a signed-in 12-17 patient: messaging is 18+, so no message action shows.
export const PatientHomeBanner = ({ canMessage = true }: { canMessage?: boolean } = {}) => {
  // The three approved triggers, read from records the product already holds.
  const urgent = usePatientUrgentNotice();

  /**
 * THE SETUP SUMMARY IS ASKED FOR, NOT COMPUTED HERE, and the move is what fixed a defect one cell
 * below this banner.
 *
 * It was private to this component, so the home page - the only thing that renders the banner and the
 * queue as siblings - could not ask whether the banner was already offering the patient something.
 * The cell beneath therefore read "Nothing needs you yet" over a banner listing five outstanding
 * setup items. The computation, its starved-inputs history and its not-yet-read guard all moved
 * intact into the hook.
 */
  const summary = usePatientSetupSummary();

  const gate = useMountedFirstSignInGateStatus();
  const offer = recordImportOfferEligible({ personalHost: isOrglessPatientsHost(), gate, setup: summary });

  const occupant = chooseBannerOccupant(urgent, summary, offer);

  if (occupant.kind === "urgent") return <UrgentBanner notice={occupant.notice} canMessage={canMessage} />;
  if (occupant.kind === "records-offer") {
    // Put off, or with no account to key that to, the slot falls back to what it would otherwise hold.
    const otherwise = chooseBannerOccupant(undefined, summary);
    return (
      <RecordImportOfferSlot
        otherwise={otherwise.kind === "setup" ? (
          <SetupBanner
            tasks={otherwise.summary.tasks}
            completedCount={otherwise.summary.completedCount}
            totalCount={otherwise.summary.totalCount}
          />
        ) : null}
      />
    );
  }
  if (occupant.kind === "setup") {
    return (
      <SetupBanner
        tasks={occupant.summary.tasks}
        completedCount={occupant.summary.completedCount}
        totalCount={occupant.summary.totalCount}
      />
    );
  }
  return null;
};

export default PatientHomeBanner;