import type { PracticeOperability } from "../../../services/OrganizationOwnerService";
import { useEffect, useRef, useState, type CSSProperties } from "react";
import { useDirtyGuard } from "../../../hooks/useDirtyReport";
import { Link, useNavigate, useSearchParams } from "react-router-dom";
import {
  BellRing,
  Building2,
  CalendarCheck2,
  CalendarDays,
  ChevronRight,
  ClipboardPlus,
  CreditCard,
  FlaskConical,
  Hospital,
  IdCardLanyard,
  MessagesSquare,
  RotateCw,
  Share2,
  ShieldCheck,
  TriangleAlert,
  Video,
} from "lucide-react";
import type { Location, Organization } from "fhir/r4";
import { useBillingContext } from "../../../services/BillingContext";
import { useOrgAuthorizationServiceContext } from "../../../services/OrgAuthorizationService";
import { resolveOrgAppointmentPolicy } from "../../../config/appointmentPolicy";
import { getOrganizationPolicyFlags } from "../../../config/bookingPolicy";
import { readOrganizationNpi } from "../../../utils/organizationNpi";
import { offersDiagnosticsSetup, readDiagnosticsDeclaration } from "../../../utils/organizationDiagnostics";
import { acceptsInSystemReferrals, resolveOrgReferralRouting } from "../../../config/referralRouting";
import { readOperatingScope } from "../../../utils/operatingScope";
import { useOrganizationServiceContext } from "../../../services/OrganizationService";
import type { BaaRecord } from "../../../services/BAAService";
import { observedBaaActive, signedRecordFor, type SignProof } from "./BaaPage/baaSignOutcome";
import {
  addressGate,
  buildSetupSteps,
  hidesUntilOperating,
  needsFounderOwnerConfirmation,
  practiceCategoryCodes,
  setupSettledDespiteUnreadStatus,
  setupView,
  portalPagesReady,
  withPortalPages,
  type PracticeStatusRead,
  type SetupFacts,
  type SetupStepId,
} from "../../../utils/practiceSetupSteps";
import { useRunWhenLeaving } from "../../../hooks/useRunWhenLeaving";
import { useOwnedSettingSave } from "../../../hooks/useOwnedSettingSave";
import { formatSingleAddress } from "../../../utils/fhirAddress";
import { formatPhoneNumber } from "../../../utils/phoneNumber";
import { locationTimeZoneOf, validLocationTimeZoneOf } from "../../../utils/practiceTimezone";
import { olderThan } from "../../../utils/versionOrder";

import { formatDayMonthYear } from "../../../utils/dateUtils";

import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "../../../components/ui/sheet";
import { OverlayActions, OverlayFooter, OverlayFooterHost } from "../../../components/ui/overlay-actions";
import { Spinner } from "../../../components/ui/spinner";
import DiscardChangesDialog from "../../../components/DiscardChangesDialog/DiscardChangesDialog";
import { useSheetBackGuard } from "../../../hooks/useSheetBackGuard";
import BookingAndRemindersPage from "./BookingAndRemindersPage";
import AgreementsPage from "./AgreementsPage";
import ClinicianReadinessPage, { useClinicianReadiness } from "./ClinicianReadinessPage";
import { videoVisitsCard } from "./videoVisitsCard";
import FirstClinicianPanel from "./FirstClinicianPanel";
import IdentityPanel from "./IdentityPanel";
import IdentityFacts from "./IdentityFacts";
import AddLocationForm from "./LocationsPage/AddLocationForm";
import ConfirmPracticeOffice from "../../../components/ReceivingOffice/ConfirmPracticeOffice";
import LocationTimeZoneRepair from "./LocationsPage/LocationTimeZoneRepair";
import BaaSignForm from "./BaaPage/BaaSignForm";
import MsaAcceptForm from "./BaaPage/MsaAcceptForm";
import PracticeAddressPanel, { type View as AddressView } from "../../../components/PracticeAddress/PracticeAddressPanel";
import OrganizationOwnerNotice from "../../../components/OrganizationOwnerNotice/OrganizationOwnerNotice";
import ConfirmPracticeOwner from "./ConfirmPracticeOwner";
import { getStaffCreationBlockers } from "../../../utils/organizationSetup";
import { ownerCandidatesOf } from "../../../components/OrganizationOwnerNotice/ownerCandidates";
import { useAuthServiceContext } from "../../../services/AuthService";
import { formatFhirHumanName } from "../../../utils/fhirHumanName";
import { useFhirPractitioners } from "../../../hooks";
import { getOrganizationRoleCodes, STAFF_WORKSPACES } from "../../../utils/staffRoleCatalog";
import PracticeCategoriesStep from "./PracticeCategoriesStep";
import PracticeDoor from "./PracticeDoor";
import PracticeSetupGuide, { setupStepCopy } from "./PracticeSetupGuide";
import PatientPagesDoor from "./PatientPagesDoor";
import PortalPagesPending from "./PortalPagesPending";
import { isHostedMount } from "../../../utils/hostedMount";
import PatientPortalPageSettings from "../PatientPortalPage/PatientPortalPageSettings";
import { getPatientPortalUrl } from "../../../utils/patientPortalUrl";
import { getStaffPortalUrl } from "../../../utils/staffPortalUrl";
import { getPortalPages, type PortalPageState, type PortalPageType } from "../../../utils/wpAdminApi";
import { portalPagesReadable } from "../../../utils/portalPagesReadable";
import { onboardingCollapseKey } from "../../../components/OrgOnboarding/onboardingCollapse";
import PracticeSandboxStep, { SandboxWayBack, showsSandboxStep, showsSandboxWayBack } from "./PracticeSandboxStep";
import SandboxSamplePanel from "../../../components/SandboxMode/SandboxSamplePanel";
import { environment } from "../../../environments/environment";
import { PracticeMark } from "../MyProvidersPage/OrgListCard";
import "./PracticeDashboardPage.css";

// "role-limited" is scope, not a fault: drawn neutral and never counted as needing attention.
type CapabilityStatus = "working" | "needs-setup" | "needs-attention" | "role-limited";

type Capability = {
  id: string;
  icon: React.ReactNode;
  title: string;
  detail: string;
  status: CapabilityStatus;
  statusLabel: string;
  onOpen?: () => void;
};

type ManageCard = {
  id: string;
  icon: React.ReactNode;
  title: string;
  detail: string;
  onOpen?: () => void;
  retry?: { what: string; run: () => void };
};

type PracticeDashboardPageProps = {
  organization?: Organization | null;
  locationsCount: ListCount;
  servicesCount: ListCount;
  peopleCount: ListCount;
  /** Unanswered clinician invitations, e.g. "1 pending invitation"; absent when there are none. */
  pendingInvitations?: string;
  /** The latest invitee still to answer, named on the clinician step while it waits on them. */
  pendingInvitee?: { name: string; email: string };
  /** The latest clinician who joined; the step names them until somebody can be booked. */
  joinedInvitee?: { name: string };
  clinicianSeatCount: ListCount;
  baaRecord: BaaRecord | undefined;
  /** False when this reader is never sent the BAA read (administrators only): a scope, not a failure. */
  baaReadable?: boolean;
  setupFacts: Omit<SetupFacts, "clinicianReady">;
  /** What was observed now, with this practice's own receipt carried as its own fact (see signedRecordFor). */
  onBaaSigned: (record: BaaRecord) => void;
  /** The owner accepted the MSA; the agreement status is read again. */
  onMsaAccepted?: () => void;
  onOwnerChanged: () => void;
  /** The signed-in practitioner is the practice's accepted owner. */
  viewerIsOwner?: boolean;
  /** Set when the owner gate refuses this practice; its message says why and what to do. */
  shut?: PracticeOperability & { message: string };
  addressClaimed: boolean | "checking" | undefined;
  onAddressClaimed: () => void;
  onRetryAddress: () => void;
  statusRead: PracticeStatusRead;
  onRetryStatus: () => void;
  primaryLocation?: Location;
  canManageOrganization: boolean;
  /** staff: view; a door to the staff directory is offered only to someone who may read it. */
  canViewStaff?: boolean;
  onSandboxRestored?: () => void;
  /** The practice chose to operate here; the page shows the full setup from the stored scope. */
  /** The practice as stored after it switched to operating. */
  onOperatingScopeChanged?: (organization: Organization) => void;
};

type Overlay =
  | "address"
  | "identity"
  | "booking-reminders"
  | "agreements"
  | "clinician-readiness"
  | "setup-owner"
  | "setup-msa"
  | "setup-baa"
  | "setup-location"
  | "setup-contact"
  | "setup-services"
  | "setup-clinician"
  | "portal-pages";

// Sheets whose cards stand on the page ground; on the white sheet a card's lift reads on one side only.
const PAPER_OVERLAYS = new Set<Overlay>(["clinician-readiness", "portal-pages"]);

type OverlayCopy = { title: string; step?: SetupStepId; subtitle?: string; unsaved?: string };

// A list that failed or was refused is not loaded, which is not the same as an empty practice.
export type ListCount = number | "checking" | "failed";
// An ownerless practice's reads are refused by the owner gate; "Couldn't load" would send the admin to retry.
const WAITING_FOR_OWNER = "Waiting for an owner";
const WAITING_FOR_AGENCY = "Waiting for the contractor to sign its agreement";
const countLine = (count: ListCount, what: string, one: string, many: string, blocked?: string) =>
  count === "failed"
    ? blocked ?? "Couldn't load " + what
    : count === "checking" ? "Checking " + what : count + " " + (count === 1 ? one : many);

const BOOKING_MODE_LABEL = { direct: "Direct booking", review: "Staff review", "request-only": "Request only" } as const;

const formatMonthly = (cents: number) =>
  new Intl.NumberFormat(undefined, { style: "currency", currency: "USD" }).format(cents / 100);

const PRIMARY_ZONE_HELP =
  "Schedules use this time zone. Patients see appointment times in their own time zone, with a notice when the two differ.";

type LocationStep = { mode: "add" } | { mode: "settle"; location: Location };

// No primary yet: add it. Otherwise the step settles that site, as saved or as needing its zone.
const locationStepFor = (primary: Location | undefined): LocationStep =>
  primary ? { mode: "settle", location: primary } : { mode: "add" };

// The current read of the step site, unless it is an older version of the one the step accepted.
const notOlder = (current: Location | undefined, accepted: Location): Location =>
  current && (current.id !== accepted.id || !olderThan(current, accepted)) ? current : accepted;

// The address sheet is titled by the view it is on, as the deck titles its confirm and saved boards.
const ADDRESS_VIEW_TITLE: Record<Exclude<AddressView, "choose">, string> = {
  confirm: "Save this permanent address?",
  saved: "Practice web address saved",
};

const OVERLAY_COPY: Record<Overlay, OverlayCopy> = {
  address: {
    title: "Choose your practice web address",
    subtitle: "Comes first, before the rest of practice setup",
    unsaved: "Your address has not been saved.",
  },
  identity: { title: "Identity", unsaved: "Your changes to Identity have not been saved." },
  "booking-reminders": { title: "Booking rules", subtitle: "How this practice takes appointments", unsaved: "Your booking rule changes have not been saved." },
  agreements: { title: "Agreements" },
  "clinician-readiness": { title: "Clinician appointment readiness status", subtitle: "Active clinician seats · setup needed first" },
  "setup-owner": {
    title: "Nominate your practice owner",
    step: "owner",
    subtitle: "the person accountable for this practice",
  },
  "setup-msa": {
    title: "Accept the Master Subscription Agreement",
    step: "msa",
    subtitle: "your practice owner accepts it before the BAA",
    unsaved: "The agreement hasn't been accepted. Accepting later leaves this step unfinished. Your other saved setup stays unchanged.",
  },
  "setup-baa": {
    title: "Sign your Business Associate Agreement",
    step: "baa",
    subtitle: "required before patients can use your portal",
    unsaved: "Your agreement hasn't been signed. Signing later leaves this step unfinished. Your other saved setup stays unchanged.",
  },
  "setup-location": {
    title: "Your practice's primary location",
    step: "location",
    subtitle: "it becomes your first location",
    unsaved: "This location hasn't been saved. Discarding it leaves this step unfinished. Your other saved setup stays unchanged.",
  },
  "setup-contact": {
    title: "Practice contact information",
    step: "contact",
    subtitle: "general phone and email",
    unsaved: "Your phone and email changes haven't been saved. Discarding them leaves this step unfinished. Your other saved setup stays unchanged.",
  },
  "setup-services": {
    title: "Add your services",
    step: "services",
    subtitle: "practice service categories",
    unsaved: "The category you chose hasn't been added. Discarding it leaves this step unfinished. Your other saved setup stays unchanged.",
  },
  "setup-clinician": {
    title: "Invite your first clinician",
    step: "clinician",
    subtitle: "invitation details",
    unsaved: "This invitation hasn't been saved or sent. Discarding it leaves this step unfinished. Your other saved setup stays unchanged.",
  },
  "portal-pages": { title: "Create your portal pages", subtitle: "Practice setup · WordPress website" },
};

// The two-letter initials shown on the round mark when there is no uploaded logo — same
// derivation the header avatar elsewhere in the app uses, kept local since this is the only
// caller that needs just the initials rather than the full display component.
const initialsOf = (name: string | undefined): string => {
  const words = (name ?? "").trim().split(/\s+/).filter(Boolean);
  if (words.length === 0) return "?";
  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
  return (words[0][0] + words[1][0]).toUpperCase();
};


// admin-v2 dashboard.html "Practice overview" — the Admin workspace landing surface, renamed
// from a form-first Organization page to a status-first one. See
// mockups/admin-v2/_implementation-notes.md: "The Admin landing surface is Practice Dashboard,
// corresponding to the application's Organization route."
//
// Every status below reads a real signal already computed elsewhere in the app (the same
// resolvers AppointmentPolicySection, ReferralRoutingSection and the billing context itself
// use) rather than a second opinion assembled here. Where the underlying capability has no
// client yet (Stripe Connect for patient payments), the row says "Needs setup" honestly instead
// of guessing.
const PracticeDashboardPage = ({
  organization,
  locationsCount,
  servicesCount,
  peopleCount,
  pendingInvitations,
  pendingInvitee,
  joinedInvitee,
  clinicianSeatCount,
  baaRecord,
  baaReadable = true,
  setupFacts,
  onBaaSigned,
  onMsaAccepted,
  onOwnerChanged,
  viewerIsOwner,
  shut,
  addressClaimed,
  onAddressClaimed,
  onRetryAddress,
  statusRead,
  onRetryStatus,
  primaryLocation,
  canManageOrganization,
  canViewStaff = true,
  onSandboxRestored,
  onOperatingScopeChanged,
}: PracticeDashboardPageProps) => {
  const navigate = useNavigate();
  const billing = useBillingContext();
  const { getAgreements } = useOrgAuthorizationServiceContext();

  const [consentConfigured, setConsentConfigured] = useState<boolean | undefined>(undefined);
  // admin-v2 dashboard.html shows these three as slide-over panels ON the dashboard, not a
  // page navigation away from it ("Booking rules" over a dimmed Practice Dashboard). Locations,
  // Services, Staff and Practice account keep their existing full-page routes - those are
  // pre-existing management surfaces, not new admin-v2 content.
  const [activeOverlay, setActiveOverlay] = useState<Overlay | null>(null);
  // A setup step whose save failed and can be retried says so in its step line.
  const [stepNotSaved, setStepNotSaved] = useState(false);
  useEffect(() => setStepNotSaved(false), [activeOverlay]);
  const [clinicianSetup, setClinicianSetup] = useState(false);
  const inClinicianSetup = activeOverlay === "setup-clinician" && clinicianSetup;
  const [clinicianMode, setClinicianMode] = useState<"invite" | "self">("invite");
  const [addressView, setAddressView] = useState<AddressView>("choose");
  const smsAddOn = billing.entitlements ? billing.entitlements.smsRemindersEnabled === true : undefined;
  const textReminders = smsAddOn === true && billing.smsTransactionalConfigured !== false;
  const inClinicianSelf = activeOverlay === "setup-clinician" && !clinicianSetup && clinicianMode === "self";
  const [clinicianSeat, setClinicianSeat] = useState(false);
  const inClinicianSeat = activeOverlay === "setup-clinician" && !clinicianSetup && clinicianSeat;
  const overlayDirty = useDirtyGuard();
  const [identityUnsaved, setIdentityUnsaved] = useState<string>();
  const [confirmDiscard, setConfirmDiscard] = useState(false);
  const [leavingTo, setLeavingTo] = useState<string | null>(null);

  // What the location step is for, decided as it opens: adding the primary location, repairing a primary that has
  // no usable zone, or showing one already saved. A primary that appears while the add form is in use never swaps the
  // form out from under its own save; the form finishes and closes the step itself.
  const [locationStep, setLocationStep] = useState<LocationStep>({ mode: "add" });
  const locationFormUsed = useRef(false);
  // Every open and close is a new opening; an answer for an earlier one changes nothing on screen.
  const overlayOpening = useRef(0);

  const openOverlay = (overlay: Overlay) => {
    overlayOpening.current += 1;
    overlayDirty.reset();
    if (overlay === "setup-location") {
      locationFormUsed.current = false;
      setLocationStep(locationStepFor(primaryLocation));
    }
    setActiveOverlay(overlay);
  };
  useEffect(() => {
    if (activeOverlay !== "setup-location" || locationStep.mode !== "add" || !primaryLocation || locationFormUsed.current) return;
    setLocationStep(locationStepFor(primaryLocation));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [activeOverlay, locationStep.mode, primaryLocation]);
  // The step keeps the newest version of its site seen while open, so a later, older read never brings back a repair.
  useEffect(() => {
    if (locationStep.mode !== "settle" || !primaryLocation || primaryLocation.id !== locationStep.location.id) return;
    if (olderThan(locationStep.location, primaryLocation)) setLocationStep({ mode: "settle", location: primaryLocation });
  }, [locationStep, primaryLocation]);
  // The step location as accepted: an older read of the same site never replaces the newest one seen.
  const stepLocation = locationStep.mode === "add" ? primaryLocation : notOlder(primaryLocation, locationStep.location);
  const stepZone = validLocationTimeZoneOf(stepLocation);

  // A link with ?open=portal-pages opens that setup step; the request is read once and cleared.
  const [searchParams, setSearchParams] = useSearchParams();
  useEffect(() => {
    if (searchParams.get("open") === "portal-pages") {
      openOverlay("portal-pages");
      setSearchParams((params) => { params.delete("open"); return params; }, { replace: true });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchParams]);

  const closeOverlay = () => {
    overlayOpening.current += 1;
    overlayDirty.reset();
    setActiveOverlay(null);
  };

  // X, Escape, the scrim and browser Back all arrive here. Unsaved edits get the approved choice rather than
  // vanishing; Escape inside that choice keeps editing.
  const requestCloseOverlay = () => {
    if (overlayDirty.isDirty()) {
      setConfirmDiscard(true);
      return;
    }
    closeOverlay();
  };

  const sheetGuard = useSheetBackGuard(activeOverlay !== null, overlayDirty.isDirty, (to) => {
    setLeavingTo(to ?? null);
    requestCloseOverlay();
  });

  // From the Services door the categories sheet also leads to the services themselves, where each is edited and
  // turned on or off for booking. An unsaved category choice gets the same discard choice as any other way out.
  const openServicesList = () => {
    const to = "/dashboard/organization/healthcare-services";
    if (overlayDirty.isDirty()) {
      setLeavingTo(to);
      setConfirmDiscard(true);
      return;
    }
    closeOverlay();
    sheetGuard.leaveTo(to);
  };

  const clinicians = useClinicianReadiness();
  // Seating the clinician and giving them services or hours happen inside the setup sheet; read readiness again when
  // it closes, so the step does not stay "to do" until a reload.
  useRunWhenLeaving(activeOverlay, "setup-clinician", clinicians.retry);
  const { practitionersList } = useFhirPractitioners();
  const operatingScope = readOperatingScope(organization);
  const coordinatorAssigned = practitionersList.some(({ roles }) =>
    roles.some((role) => getOrganizationRoleCodes(role).includes("referral-coordinator")));
  const { updateOperatingScope, fetchOrganizationAsCaller } = useOrganizationServiceContext();
  const { setWpOrganization } = useAuthServiceContext();
  // The switch belongs to this practice as opened here. When its answer is lost, what the practice stores is read
  // before the switch is offered again; nothing is sent twice on its own.
  const { state: operateState, save: saveOperating, check: checkOperating } = useOwnedSettingSave(organization?.id, {
    read: (id, transport) => fetchOrganizationAsCaller(id, undefined, id, transport),
    publish: setWpOrganization,
  });
  const operating = operateState.status === "saving" || operateState.status === "checking";
  const operateHeld = operating || operateState.status === "unconfirmed";
  const operateError = operateState.message
    ?? (operateState.stored && readOperatingScope(operateState.stored) !== "full"
      ? "The earlier switch could not be confirmed. This practice is currently set up to receive referrals."
      : undefined);
  const startOperating = () => saveOperating((transport) => updateOperatingScope("full", transport), {
    onSaved: (answer) => { if (answer.organization) onOperatingScopeChanged?.(answer.organization); },
    refusal: "This practice could not be switched to operating. Nothing has changed; try again.",
  });
  const readyClinician = clinicians.readiness.find((r) => r.inPersonReady || r.telehealthReady);
  const setupSteps = buildSetupSteps({
    ...setupFacts,
    ...(baaRecord?.currentUnconfirmed ? { baaActive: undefined } : {}),
    clinicianReady: clinicians.error ? undefined : clinicians.loading ? "checking" : Boolean(readyClinician),
    operatingScope,
    coordinatorAssigned,
    routingChosen: acceptsInSystemReferrals(organization),
  });
  // A finished practice whose status could not be read shows that, not the setup guide again - but only when the
  // unknown steps are the ones those lists feed. An unread BAA or ownership still opens the guide.
  const guideView = canManageOrganization ? setupView(setupSteps) : "complete";
  const essentialsView =
    guideView === "guide" && (statusRead === "failed" || statusRead === "denied") && setupSettledDespiteUnreadStatus(setupSteps, setupFacts.ownerAssigned)
      ? "complete"
      : guideView;
  // On the WordPress client the guide outlives the essentials until both portal pages exist (admin-v2 notes :47).
  const { availableWorkspaces, currentUser, selectedPractitionerRole, getValidToken } = useAuthServiceContext();
  const [sitePages, setSitePages] = useState<Record<PortalPageType, PortalPageState>>();
  const pagesStage = operatingScope !== "receiving" && !isHostedMount();
  const readSitePages = pagesStage && !(getPatientPortalUrl(organization) && getStaffPortalUrl(organization)) && portalPagesReadable();
  useEffect(() => {
    setSitePages(undefined);
    if (!readSitePages) return;
    let active = true;
    getPortalPages({ getToken: getValidToken, organizationId: organization?.id })
      .then((pages) => { if (active) setSitePages(pages); })
      .catch((err) => console.error("Error reading the portal pages:", err));
    return () => { active = false; };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [readSitePages, organization?.id]);
  const portalPagesPending = pagesStage && !portalPagesReady(organization, sitePages);
  const setup = withPortalPages(essentialsView, portalPagesPending);
  const selfCandidate = currentUser?.fhir?.resourceType === "Practitioner" && currentUser.fhir.id && currentUser.fhir.name?.[0]
    ? { id: currentUser.fhir.id, name: formatFhirHumanName(currentUser.fhir.name[0]) }
    : undefined;
  // Agency wording only when an agency enrolled this practice and the viewer is its Platform Manager: a
  // founding admin holds that workspace too, and an unread enrolment gets the practice wording. The accepted
  // owner is inside the practice, so it never reads the agency's "their".
  const ownerless = setupFacts.ownerAssigned === false;
  const blocked = shut ? (shut.refusal === "agency-baa-not-signed" ? WAITING_FOR_AGENCY : WAITING_FOR_OWNER) : ownerless ? WAITING_FOR_OWNER : undefined;
  const agencySetup = setupFacts.agencyEnrolled === true
    && viewerIsOwner !== true
    && availableWorkspaces.includes(STAFF_WORKSPACES.PLATFORM_MANAGER);

  // Numbered as opened: a step finished inside its sheet can leave the list, as the owner step does.
  const [stepPosition, setStepPosition] = useState({ number: 0, total: 0 });
  const openSetupStep = (id: SetupStepId) => {
    // The two referral steps are settled on their own pages rather than in a setup sheet.
    if (id === "coordinator") { navigate("/dashboard/staff"); return; }
    if (id === "routing") { navigate("referrals", { relative: "route" }); return; }
    setStepPosition({ number: setupSteps.findIndex((s) => s.id === id) + 1, total: setupSteps.length });
    openOverlay(`setup-${id}`);
  };
  // The permanent address comes before the five setup steps (hostname ruling, 2026-09-18).
  const address = canManageOrganization ? addressGate(addressClaimed) : "claimed";
  const needsAddress = address === "choose";
  const confirmOwner = canManageOrganization && address === "claimed" && needsFounderOwnerConfirmation(setupFacts);
  // A count still loading or unread is not a missing location; only a read zero is.
  const staffBlockers = getStaffCreationBlockers(organization, typeof locationsCount === "number" ? locationsCount : 1);

  useEffect(() => {
    let active = true;
    getAgreements(organization?.id)
      .then((agreements) => {
        if (active) setConsentConfigured(agreements.some((a) => a.text?.trim()));
      })
      .catch(() => {
        if (active) setConsentConfigured(undefined);
      });
    return () => {
      active = false;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [organization?.id]);

  const name = organization?.name && organization.name.trim().length > 0 ? organization.name : "Your practice";
  // Day first, as the deck writes it ("Tuesday 8 September"); en-US would put the month first.
  const today = new Intl.DateTimeFormat("en-GB", { weekday: "long", day: "numeric", month: "long" }).format(new Date());
  const npi = readOrganizationNpi(organization ?? undefined);
  const referralPolicy = resolveOrgReferralRouting(organization ?? undefined);
  const telehealthEnabled = resolveOrgAppointmentPolicy(organization ?? undefined).telehealthEnabled;
  const videoCard = videoVisitsCard({ telehealthEnabled, clinicians });
  const baaActive = observedBaaActive(baaRecord);
  const portalReady = baaActive && consentConfigured === true;
  const counts = typeof locationsCount === "number" && typeof peopleCount === "number" && typeof clinicianSeatCount === "number"
    ? { locations: locationsCount, people: peopleCount, seats: clinicianSeatCount }
    : undefined;
  const services = typeof servicesCount === "number" ? servicesCount : undefined;
  const canBookOnline = Boolean(counts && services !== undefined && counts.locations > 0 && services > 0 && counts.seats > 0);
  const referralsReady = Boolean(npi) && referralPolicy.destination !== undefined;
  const messagingReady = counts ? counts.people > 0 : undefined;
  const retryIf = (count: ListCount, what: string) =>
    count === "failed" ? { what, run: onRetryStatus } : undefined;

  const allCapabilities: Capability[] = [
    {
      id: "video",
      icon: <Video />,
      title: "Run video visits",
      detail: videoCard.detail,
      status: videoCard.status,
      statusLabel: videoCard.statusLabel,
      onOpen: canManageOrganization ? () => openOverlay("booking-reminders") : undefined,
    },
    {
      id: "payments",
      icon: <CreditCard />,
      title: "Take payments from patients",
      detail: "Connect your practice's Stripe account to accept payments.",
      // Stripe Connect has no client surface yet — this is the honest state, not a guess.
      status: "needs-setup",
      statusLabel: "Needs setup",
    },
    {
      id: "reminders",
      icon: <BellRing />,
      title: "Remind patients about appointments",
      // Reminder texts wait on the SMS add-on and the platform number, not on carrier registration.
      detail: textReminders
        ? "Email and text reminders are ready."
        : smsAddOn === true
          ? "Email ready. Text reminders are not available yet."
          : smsAddOn === false ? "Email ready. Add the SMS add-on to send text reminders." : "Email reminders are ready.",
      status: "working",
      statusLabel: textReminders ? "Working" : "Email working",
      onOpen: canManageOrganization ? () => openOverlay("booking-reminders") : undefined,
    },
    {
      id: "booking",
      icon: <CalendarDays />,
      title: "Take appointments online",
      detail: counts && services !== undefined ? `${counts.seats} ${counts.seats === 1 ? "clinician" : "clinicians"} · ${counts.locations} ${counts.locations === 1 ? "location" : "locations"} · ${services} ${services === 1 ? "service" : "services"}. ${BOOKING_MODE_LABEL[getOrganizationPolicyFlags(organization ?? undefined).bookingMode]}.` : blocked ? `${blocked}.` : "Couldn't load clinicians, locations and services.",
      status: !counts || services === undefined ? "needs-attention" : canBookOnline ? "working" : "needs-setup",
      statusLabel: !counts || services === undefined ? "Status unavailable" : canBookOnline ? "Working" : "Needs setup",
      onOpen: canManageOrganization ? () => openOverlay("booking-reminders") : undefined,
    },
    {
      id: "portal",
      icon: <ShieldCheck />,
      title: "Let patients use the portal",
      detail: !baaReadable
        ? "The BAA is not available to your role."
        : baaActive === undefined
        ? "BAA status unavailable."
        : baaActive
          ? "BAA signed · patient agreements configured."
          : "Sign the BAA to open the portal.",
      status: portalReady ? "working" : !baaReadable ? "role-limited" : baaActive === undefined ? "needs-attention" : "needs-setup",
      statusLabel: portalReady ? "Working" : !baaReadable ? "Administrators only" : baaActive === undefined ? "Status unavailable" : "Needs setup",
      onOpen: canManageOrganization ? () => openOverlay("agreements") : undefined,
    },
    {
      id: "referrals",
      icon: <Share2 />,
      title: "Receive referrals from other practices",
      detail: npi ? "NPI verified · referrals arrive at the front desk." : "Add your NPI so other practices can find you.",
      status: referralsReady ? "working" : "needs-setup",
      statusLabel: referralsReady ? "Working" : "Needs setup",
      onOpen: canManageOrganization ? () => navigate("referrals", { relative: "route" }) : undefined,
    },
    {
      id: "messaging",
      icon: <MessagesSquare />,
      title: "Message patients",
      detail: messagingReady === undefined ? (blocked ? `${blocked}.` : "Couldn't load staff.") : messagingReady ? "Staff can start patient conversations." : "Add a staff member to message patients.",
      status: messagingReady === undefined ? "needs-attention" : messagingReady ? "working" : "needs-setup",
      statusLabel: messagingReady === undefined ? "Status unavailable" : messagingReady ? "Working" : "Needs setup",
      onOpen: canViewStaff ? () => navigate("/dashboard/staff") : undefined,
    },
  ];
  const capabilities = allCapabilities.filter((c) => !hidesUntilOperating(operatingScope, c.id));

  const categoryNames = (organization?.type ?? [])
    .flatMap((t) => t.coding ?? [])
    .filter((c) => c.code && practiceCategoryCodes(organization).includes(c.code))
    .map((c) => c.display || c.code);
  const primaryZone = locationTimeZoneOf(primaryLocation);
  const setupDoneDetail: Partial<Record<SetupStepId, string>> = {
    msa: baaRecord?.msa?.selected ? `Accepted ${formatDayMonthYear(baaRecord.msa.selected.acceptedAt)}.` : undefined,
    baa: baaRecord?.signedAt
      ? baaRecord.currentUnconfirmed
        ? `Signed ${formatDayMonthYear(baaRecord.signedAt)}; the agreement in force could not be confirmed just now.`
        : `In force since ${formatDayMonthYear(baaRecord.signedAt)}${baaRecord.signedBy?.name ? `, signed by ${baaRecord.signedBy.name}` : ""}.`
      : undefined,
    location: primaryLocation
      ? [primaryLocation.address && formatSingleAddress(primaryLocation.address), primaryZone]
          .filter(Boolean)
          .join(" · ")
      : undefined,
    contact: [
      formatPhoneNumber(organization?.telecom?.find((c) => c.system === "phone")?.value ?? ""),
      organization?.telecom?.find((c) => c.system === "email")?.value,
    ].filter(Boolean).join(" · "),
    services: `${[...new Set(categoryNames)].join(", ")} · ${new Set(categoryNames).size === 1 ? "1 category" : `${new Set(categoryNames).size} categories`}`,
    clinician: readyClinician ? `${readyClinician.name} can take appointments.` : undefined,
  };

  // The deck names the location it added ("Burlington Family Dental added"), so its detail drops the name.
  const setupDoneTitle: Partial<Record<SetupStepId, string>> = {
    location: primaryLocation?.name ? `${primaryLocation.name} added` : undefined,
  };

  // With categories saved the step is a review of them (admin-v2 #s-first-run, "services saved").
  const overlayCopy = activeOverlay === "setup-services" && practiceCategoryCodes(organization).length > 0
    ? { ...OVERLAY_COPY["setup-services"], subtitle: "review your practice categories" }
    : activeOverlay ? OVERLAY_COPY[activeOverlay] : undefined;
  const needingAttention = capabilities.filter((c) => c.status === "needs-setup" || c.status === "needs-attention").length;
  const workingCount = capabilities.filter((c) => c.status === "working").length;

  const allManageCards: ManageCard[] = [
    {
      id: "clinician-readiness",
      icon: <CalendarCheck2 />,
      title: "Clinician appointment readiness",
      detail: `${countLine(clinicianSeatCount, "clinician seats", "active seat", "active seats", blocked)} · services & availability`,
      retry: retryIf(clinicianSeatCount, "clinician seats"),
      onOpen: () => openOverlay("clinician-readiness"),
    },
    {
      id: "identity",
      icon: <Building2 />,
      title: "Identity",
      detail: "Name, logo, contact details, practice types",
      // A viewer keeps the facts: the same sheet opens on a read-only display.
      onOpen: () => openOverlay("identity"),
    },
    {
      id: "locations",
      icon: <Hospital />,
      title: "Locations",
      detail: countLine(locationsCount, "locations", "location", "locations", blocked),
      retry: retryIf(locationsCount, "locations"),
      onOpen: () => navigate("locations", { relative: "route" }),
    },
    {
      id: "services",
      icon: <ClipboardPlus />,
      title: "Services",
      detail: "Practice service categories",
      // The categories the setup step saved: not the clinical services under them.
      // Opened from here it is not a numbered setup step, so no earlier step's number carries over.
      // A viewer reads the services themselves on the view-guarded list.
      onOpen: canManageOrganization
        ? () => { setStepPosition({ number: 0, total: 0 }); openOverlay("setup-services"); }
        : () => navigate("healthcare-services", { relative: "route" }),
    },
    {
      id: "staff-permissions",
      icon: <IdCardLanyard />,
      title: "Staff & permissions",
      // Invitations sit beside the people count: an invitee is not a member or a seat until they accept.
      detail: [
        countLine(peopleCount, "staff", "person", "people", blocked),
        pendingInvitations,
        "who may do what",
      ].filter(Boolean).join(" · "),
      retry: retryIf(peopleCount, "staff"),
      onOpen: canViewStaff ? () => navigate("/dashboard/staff") : undefined,
    },
    {
      id: "booking-reminders",
      icon: <CalendarDays />,
      title: "Booking & reminders",
      detail: "How appointments are taken",
      // Each door follows its own route's guard: a viewer is never handed an editor or a bounce.
      onOpen: canManageOrganization ? () => openOverlay("booking-reminders") : undefined,
    },
    {
      id: "agreements",
      icon: <ShieldCheck />,
      title: "Agreements",
      detail: "The BAA, and what patients agree to",
      onOpen: canManageOrganization ? () => openOverlay("agreements") : undefined,
    },
    // Where the practice adds its labs and the practices that read its studies; the page keeps its own guard.
    ...(canManageOrganization && offersDiagnosticsSetup(readDiagnosticsDeclaration(organization ?? undefined)) ? [{
      id: "lab-imaging-setup",
      icon: <FlaskConical />,
      title: "Lab and imaging setup",
      detail: "Labs, reading practices and your test catalogue",
      onOpen: () => navigate("diagnostics", { relative: "route" }),
    }] : []),
    {
      id: "practice-account",
      icon: <CreditCard />,
      title: "Practice account",
      detail: billing.subscription
        ? `${formatMonthly(billing.subscription.monthlyTotalCents)}/month · billing and contractors`
        : "Billing and contractors",
      onOpen: canManageOrganization ? () => navigate("account", { relative: "route" }) : undefined,
    },
  ];
  const manageCards = allManageCards.filter((c) => !hidesUntilOperating(operatingScope, c.id));

  // The deck lists what still needs doing first; each group keeps its own order.
  const orderedCapabilities = [
    ...capabilities.filter((c) => c.status === "needs-setup" || c.status === "needs-attention"),
    ...capabilities.filter((c) => c.status === "working" || c.status === "role-limited"),
  ];
  const statusUnavailable = setup === "complete" && (statusRead === "failed" || statusRead === "denied");
  const verdict = setup === "complete" && statusRead === "ready"
    ? needingAttention > 0 ? `${needingAttention} need attention` : "All working"
    : undefined;
  const sandboxStep = organization && showsSandboxStep(organization, canManageOrganization)
    ? <PracticeSandboxStep organization={organization} />
    : null;
  const sandboxWayBack = showsSandboxWayBack(organization, canManageOrganization) ? <SandboxWayBack /> : null;

  const doors = (
    <div className="practice-dashboard__doors">
      {manageCards.map((c) => (
        <div key={c.id} className="practice-dashboard__door-cell">
          <PracticeDoor icon={c.icon} title={c.title} detail={c.detail} onOpen={c.onOpen} />
          {c.retry && (
            <button type="button" className="btn btn-blue-ghost-sm practice-dashboard__manage-retry" onClick={c.retry.run}>
              <RotateCw />
              Try again{" "}<span className="sr-only">loading {c.retry.what}</span>
            </button>
          )}
        </div>
      ))}
    </div>
  );

  if (statusRead === "noPractice") return (
    <div className="practice-dashboard">
      <div className="ak-page-body">
        <section className="ak-card ak-card--panel" role="status" aria-label="Practice status">
          <h1 className="ak-page-title">No practice selected</h1>
          <p className="ak-body">Choose a practice to view its setup and current status.</p>
        </section>
      </div>
    </div>
  );

  return (
    <div className={`practice-dashboard${setup === "complete" ? " practice-dashboard--status" : " practice-dashboard--setup"}`}>
      {baaRecord?.currentUnconfirmed && baaRecord.ownReceipt && (
        <p role="status" className="text-sm text-ink-muted">
          Your signature was recorded on {formatDayMonthYear(baaRecord.ownReceipt.signedAt)}; the agreement in force could not be confirmed just now.
        </p>
      )}
      <div className="practice-dashboard__header">
        {organization ? <PracticeMark organization={organization} size="lg" /> : (
          <div className="ak-org-mark ak-org-mark--lg" aria-hidden>
            {initialsOf(name)}
          </div>
        )}
        <div className="practice-dashboard__identity">
          <h1 className="ak-page-title">{name}</h1>
          <p className={`practice-dashboard__meta${verdict ? " practice-dashboard__meta--verdict" : ""}`}>
            <span className="practice-dashboard__meta-full">
              {counts && (
                <>
                  {operatingScope === "receiving"
                    ? `${counts.people} ${counts.people === 1 ? "person" : "people"} `
                    : `${counts.locations} ${counts.locations === 1 ? "location" : "locations"} · ${counts.people} ${counts.people === 1 ? "person" : "people"} · ${counts.seats} clinician ${counts.seats === 1 ? "seat" : "seats"} `}·{" "}
                </>
              )}
              {today}
            </span>
            {verdict && <span className="practice-dashboard__meta-short">{verdict}</span>}
          </p>
        </div>
        {statusUnavailable && (
          <div className="practice-dashboard__summary">
            <div className="practice-dashboard__attention practice-dashboard__attention--error">
              <TriangleAlert aria-hidden />
              Status unavailable
            </div>
          </div>
        )}
        {verdict && (
          <div className="practice-dashboard__summary">
            <div className={`practice-dashboard__attention${needingAttention > 0 ? "" : " practice-dashboard__attention--ok"}`}>
              {verdict}
            </div>
            <div className="practice-dashboard__working">{workingCount} of {capabilities.length} working</div>
          </div>
        )}
      </div>

      <div className="ak-page-body">
      {shut && (
        <section className="ak-notice ak-notice--error flex-col" role="alert" aria-label="Practice cannot be used yet">
          <div className="practice-dashboard__unavailable-head">
            <TriangleAlert aria-hidden />
            This practice cannot be used yet
          </div>
          <p className="practice-dashboard__unavailable-body">{shut.message}</p>
          {shut.refusal === "agency-baa-not-signed" && (
            <a className="btn btn-blue-ghost" href={environment.contractorsConsoleUrl} target="_blank" rel="noopener noreferrer">
              Open the contractors console
            </a>
          )}
        </section>
      )}
      {environment.inSandboxMode && (
        <SandboxSamplePanel
          canManage={canManageOrganization}
          onRestored={onSandboxRestored}
          setupSummary={counts ? `${counts.locations} ${counts.locations === 1 ? "location" : "locations"} · ${counts.people} ${counts.people === 1 ? "person" : "people"} · current schedules` : undefined}
        />
      )}
      {needsAddress && (
        <section className="ak-card ak-card--panel ak-card--rule practice-setup" aria-label="Practice web address">
          <div className="ak-card__title">Choose your practice web address</div>
          <div className="practice-setup__next">
            Required before Practice setup. It is permanent once saved, even if you only use your own website.
          </div>
          <div className="practice-setup__actions">
            <button type="button" className="btn btn-blue" onClick={() => openOverlay("address")}>
              Choose address
            </button>
          </div>
        </section>
      )}
      {address === "checking" && setup !== "complete" && (
        <div className="practice-dashboard__checking">
          <Spinner />
          Checking your practice web address
        </div>
      )}
      {address === "failed" && (
        <section className="ak-card ak-card--panel ak-card--rule practice-setup" aria-label="Practice web address status">
          <div className="ak-card__title">Your practice web address could not be checked</div>
          <div className="practice-setup__next">
            Practice setup continues once we can confirm this practice's permanent address. Nothing has been changed.
          </div>
          <div className="practice-setup__actions">
            <button type="button" className="btn btn-blue-ghost" onClick={onRetryAddress}>
              <RotateCw />
              Try again
            </button>
          </div>
        </section>
      )}
      {confirmOwner && organization?.id && (
        <ConfirmPracticeOwner
          organizationId={organization.id}
          onConfirmed={onOwnerChanged}
          canNameSomeoneElse={ownerCandidatesOf(practitionersList, selfCandidate).some((candidate) => candidate.id !== selfCandidate?.id)}
          onAddStaff={() => navigate("/dashboard/staff/new")}
          staffBlockers={staffBlockers}
          nominatePath={
            <OrganizationOwnerNotice
              organizationId={organization.id}
              canNominate={canManageOrganization}
              candidates={ownerCandidatesOf(practitionersList, selfCandidate)}
              onOwnerAssignedChange={(assigned) => {
                if (assigned) onOwnerChanged();
              }}
            />
          }
        />
      )}
      {!confirmOwner && setup === "guide" && address === "claimed" && (
        <PracticeSetupGuide
          agency={agencySetup}
          steps={setupSteps}
          doneDetail={setupDoneDetail}
          doneTitle={setupDoneTitle}
          unavailableTitle={baaRecord?.currentUnconfirmed ? { baa: "Check current BAA standing" } : undefined}
          todoTitle={joinedInvitee ? { clinician: `Finish setting up ${joinedInvitee.name}` } : pendingInvitee ? { clinician: `${pendingInvitee.name} — invitation pending` } : undefined}
          todoDetail={joinedInvitee
            ? { clinician: "They have joined. Assign their seat, then add the services they provide and their working hours." }
            : pendingInvitee ? { clinician: `Sent to ${pendingInvitee.email}. Waiting for them to accept and sign in.` }
            : operatingScope === "receiving" ? { location: "Your office address. Staff, including whoever works your referrals, are added under it." } : undefined}
          unavailableDetail={shut?.message}
          laterNote={operatingScope === "receiving" ? "More locations, services and clinicians wait until this practice chooses to see its own patients here." : pendingInvitee && !joinedInvitee ? "No seat is held yet. Once they accept and sign in, assign their seat here." : undefined}
          onOpenStep={openSetupStep}
          patientPagesStep={pagesStage ? (
            <PatientPagesDoor
              pagesReady={Boolean(getPatientPortalUrl(organization) && getStaffPortalUrl(organization))}
              onOpen={() => openOverlay("portal-pages")}
            />
          ) : undefined}
          optionalStep={operatingScope === "receiving" ? undefined : sandboxStep ?? sandboxWayBack}
          collapseKey={onboardingCollapseKey(selectedPractitionerRole?.id, organization?.id)}
        />
      )}
      {!confirmOwner && setup === "pages" && address === "claimed" && (
        <PortalPagesPending essentials={setupSteps.length} onOpen={() => openOverlay("portal-pages")} />
      )}
      {setup === "checking" && address === "claimed" && (
        <div className="practice-dashboard__checking">
          <Spinner />
          Checking your practice setup
        </div>
      )}
      {!confirmOwner && setup === "complete" && sandboxStep && (
        <section className="ak-card ak-card--panel ak-card--rule practice-setup" aria-label="Practice setup">
          <div className="ak-card__title">Practice setup complete</div>
          <div className="ak-progress practice-setup__meter" role="progressbar" aria-label="Setup progress" aria-valuemin={0} aria-valuemax={1} aria-valuenow={1}>
            <span className="ak-progress__fill" style={{ "--ak-progress-value": "100%" } as CSSProperties} />
          </div>
          {sandboxStep}
        </section>
      )}
      {/* With the guide gone, this is the only line that still says where Sandbox Mode lives. */}
      {!confirmOwner && setup === "complete" && !sandboxStep && sandboxWayBack && operatingScope !== "receiving" && (
        <section className="ak-card ak-card--panel ak-card--rule practice-setup" aria-label="Sandbox Mode">
          {sandboxWayBack}
        </section>
      )}

      {operatingScope === "receiving" && canManageOrganization && address === "claimed" && !confirmOwner && (
        <section className="ak-card ak-card--panel ak-card--rule practice-setup" aria-label="Operate here">
          <div className="ak-card__title">Set up to receive referrals</div>
          <div className="practice-setup__next">
            More locations, services, schedules, clinician seats and billing stay out of the way until this practice
            chooses to see its own patients here.
          </div>
          {operateError && <div className="practice-setup__next" role="alert">{operateError}</div>}
          <div className="practice-setup__actions">
            {operateState.status === "unconfirmed" ? (
              <button type="button" className="btn btn-blue-ghost" onClick={() => void checkOperating()}>Check again</button>
            ) : null}
            <button type="button" className="btn btn-blue-ghost" disabled={operateHeld} onClick={() => void startOperating()}>
              {operateState.status === "checking" ? "Checking…" : operating ? "Starting…" : "Start operating here"}
            </button>
          </div>
        </section>
      )}
      {setup === "complete" ? (
        <div className="practice-dashboard__columns">
          <section className="practice-dashboard__band" aria-labelledby="practice-dashboard-can-do">
            <h2 id="practice-dashboard-can-do" className="ak-caption practice-dashboard__band-head">What your practice can do</h2>
            {statusRead === "checking" ? (
              <div className="practice-dashboard__checking">
                <Spinner />
                Checking practice status
              </div>
            ) : statusRead === "denied" ? (
              <section className="ak-card ak-card--panel ak-card--rule practice-setup" aria-label="Practice status">
                <div className="ak-card__title">Practice status is not available to you</div>
                <div className="practice-setup__next">
                  Your account cannot read this practice's billing, so its status is not shown. An administrator can see it.
                </div>
              </section>
            ) : statusRead === "failed" ? (
              <section className="ak-notice ak-notice--error flex-col" aria-label="Practice status">
                <div className="practice-dashboard__unavailable-head">
                  <TriangleAlert aria-hidden />
                  Unable to check practice status
                </div>
                <p className="practice-dashboard__unavailable-body">Your settings have not changed. Try again to load the current status.</p>
                <button type="button" className="btn btn-red-ghost" onClick={onRetryStatus}>
                  <RotateCw />
                  Try again
                </button>
              </section>
            ) : (
              <div className="ak-card-list">
                {orderedCapabilities.map((c) => (
                  <button
                    key={c.id}
                    type="button"
                    disabled={!c.onOpen}
                    onClick={c.onOpen}
                    className={`ak-card practice-dashboard__ability practice-dashboard__ability--${c.status}${c.status === "working" || c.status === "role-limited" ? "" : " ak-card--edge ak-card--open"}`}
                  >
                    <span className="practice-dashboard__ability-icon" aria-hidden>{c.icon}</span>
                    <span className="flex min-w-0 flex-col">
                      <span className="ak-card__title ak-card__title--lead">{c.title}</span>
                      <span className="ak-card__description mt-[3px]">{c.detail}</span>
                    </span>
                    <span className="practice-dashboard__ability-status">{c.statusLabel}</span>
                    {c.onOpen ? <ChevronRight aria-hidden className="ak-chev practice-dashboard__go" /> : <span aria-hidden />}
                  </button>
                ))}
              </div>
            )}
          </section>
          <section className="practice-dashboard__band" aria-labelledby="practice-dashboard-manage">
            <h2 id="practice-dashboard-manage" className="ak-caption practice-dashboard__band-head">
              The practice <span className="practice-dashboard__band-sub">Manage your practice</span>
            </h2>
            {doors}
          </section>
        </div>
      ) : (
        <section className="practice-dashboard__band" aria-labelledby="practice-dashboard-manage">
          <h2 id="practice-dashboard-manage" className="ak-caption practice-dashboard__band-head">The practice</h2>
          {doors}
        </section>
      )}
      </div>
      <Sheet open={activeOverlay !== null} onOpenChange={(open) => !open && requestCloseOverlay()}>
        <SheetContent className="ak-panel gap-0 sm:max-w-none">
          <OverlayFooterHost>
          <SheetHeader className="ak-overlay__header">
            <SheetTitle>
              {activeOverlay === "address" && addressView !== "choose" ? ADDRESS_VIEW_TITLE[addressView] : inClinicianSetup ? "Set up clinician appointments" : inClinicianSeat ? "Assign the first clinician seat" : agencySetup && overlayCopy?.step ? setupStepCopy(overlayCopy.step, true).todo : overlayCopy?.title}
            </SheetTitle>
            {overlayCopy?.step && stepPosition.number > 0 ? (
              <SheetDescription className="ak-overlay__description">
                Step {stepPosition.number} of {stepPosition.total} · {stepNotSaved ? "not saved" : inClinicianSetup ? "seat assigned" : inClinicianSeat ? "ready for a seat" : inClinicianSelf ? "or add your own practitioner role" : overlayCopy.subtitle}
              </SheetDescription>
            ) : overlayCopy?.subtitle ? (
              // A step's subtitle is written to follow "Step n of m ·"; standing alone it starts the sentence.
              <SheetDescription className="ak-overlay__description">
                {overlayCopy.step ? overlayCopy.subtitle.charAt(0).toUpperCase() + overlayCopy.subtitle.slice(1) : overlayCopy.subtitle}
              </SheetDescription>
            ) : (
              <SheetDescription className="sr-only">{overlayCopy?.title}</SheetDescription>
            )}
          </SheetHeader>
          {/* The readiness cards stand on the page ground, as the deck draws that sheet. */}
          <div className={`ak-overlay__body flex-1${activeOverlay && PAPER_OVERLAYS.has(activeOverlay) ? " bg-paper" : ""}`}>
          {activeOverlay === "booking-reminders" && <BookingAndRemindersPage onDirtyChange={overlayDirty.report} />}
          {activeOverlay === "identity" && (canManageOrganization
            ? <IdentityPanel onDirtyChange={overlayDirty.report} onUnsavedChange={setIdentityUnsaved} />
            : <IdentityFacts organization={organization} primaryLocation={primaryLocation} />)}
          {activeOverlay === "agreements" && <AgreementsPage inForce={baaActive === true} />}
          {activeOverlay === "portal-pages" && (
            <>
              <PatientPortalPageSettings embedded onPagesChange={setSitePages} />
              <OverlayActions>
                <button type="button" className="btn btn-blue" onClick={closeOverlay}>Back to setup</button>
              </OverlayActions>
            </>
          )}
          {activeOverlay === "clinician-readiness" && <ClinicianReadinessPage onOpenBookingRules={canManageOrganization ? () => openOverlay("booking-reminders") : undefined} />}
          {activeOverlay === "setup-clinician" && <FirstClinicianPanel onDirtyChange={overlayDirty.report} onSetupChange={setClinicianSetup} onModeChange={setClinicianMode} onSeatChange={setClinicianSeat} offerDraft={false} signedInName={currentUser?.fhir?.name ? formatFhirHumanName(currentUser.fhir.name) : null} />}
          {activeOverlay === "setup-location" && (
            locationStep.mode !== "add" && stepLocation && stepZone ? (
              <div className="space-y-4" data-testid="primary-location-saved">
                <p className="text-sm text-muted-foreground">
                  {[stepLocation.name || "Your primary location", stepLocation.address && formatSingleAddress(stepLocation.address), stepZone].filter(Boolean).join(" · ")}
                </p>
                <OverlayActions>
                  <button type="button" className="btn btn-blue" onClick={closeOverlay}>Back to setup</button>
                </OverlayActions>
              </div>
            ) : locationStep.mode !== "add" && stepLocation ? (
              <LocationTimeZoneRepair location={stepLocation} help={PRIMARY_ZONE_HELP} onSaved={closeOverlay} />
            ) : operatingScope === "receiving" ? (
              <ConfirmPracticeOffice
                canManage={canManageOrganization}
                timezoneHelp={PRIMARY_ZONE_HELP}
                onDirtyChange={(dirty) => {
                  if (dirty) locationFormUsed.current = true;
                  overlayDirty.report(dirty);
                }}
                onConfirmed={closeOverlay}
              />
            ) : (
              <AddLocationForm
                makePrimary
                submitLabel="Save"
                nameLabel="Name this location"
                nameHelp="Patients see this when they pick where to be seen."
                timezoneHelp={PRIMARY_ZONE_HELP}
                onDirtyChange={(dirty) => {
                  if (dirty) locationFormUsed.current = true;
                  overlayDirty.report(dirty);
                }}
                onSaved={closeOverlay}
                failedTitle="Location wasn't saved"
                savingText="Saving location…"
                onSaveFailedChange={setStepNotSaved}
              />
            )
          )}
          {activeOverlay === "address" && (
            <PracticeAddressPanel
              onDirtyChange={overlayDirty.report}
              onViewChange={setAddressView}
              onSaved={onAddressClaimed}
              onContinue={closeOverlay}
            />
          )}
          {activeOverlay === "setup-owner" && organization?.id && (
            // The owner an agency named confirms it here; everybody else gets the picker.
            <ConfirmPracticeOwner
              organizationId={organization.id}
              onConfirmed={onOwnerChanged}
              canNameSomeoneElse={ownerCandidatesOf(practitionersList, selfCandidate).some((candidate) => candidate.id !== selfCandidate?.id)}
              onAddStaff={() => navigate("/dashboard/staff/new")}
              staffBlockers={staffBlockers}
              nominatePath={
                <OrganizationOwnerNotice
                  organizationId={organization.id}
                  canNominate={canManageOrganization}
                  candidates={ownerCandidatesOf(practitionersList, selfCandidate)}
                  onOwnerAssignedChange={(assigned) => {
                    if (assigned) onOwnerChanged();
                  }}
                />
              }
            />
          )}
          {activeOverlay === "setup-msa" && (
            baaRecord?.msa?.preview ? (
              <MsaAcceptForm
                key={baaRecord.msa.preview.version + baaRecord.msa.preview.factsDigest}
                preview={baaRecord.msa.preview}
                onDirtyChange={overlayDirty.report}
                onRefresh={() => onMsaAccepted?.()}
                onAccepted={() => {
                  onMsaAccepted?.();
                  closeOverlay();
                }}
              >
                {({ body, actions }) => (
                  <div className="space-y-4">
                    {body}
                    <OverlayActions>{actions}</OverlayActions>
                  </div>
                )}
              </MsaAcceptForm>
            ) : (
              <div className="text-sm text-muted-foreground">The agreement could not be loaded. Close this and try again.</div>
            )
          )}
          {activeOverlay === "setup-baa" && (
            baaRecord?.currentUnconfirmed ? (
              <div className="space-y-3">
                <p>Your signature is recorded. The agreement now in force could not be confirmed.</p>
                <button type="button" className="btn btn-blue-ghost" onClick={() => navigate("baa", { relative: "route" })}>
                  View your agreement
                </button>
              </div>
            ) : baaRecord?.status !== "active" && !baaRecord?.pending && baaRecord?.msa?.standing.state === "outstanding" ? (
              // The first BAA follows the owner's MSA acceptance; the server refuses it until then.
              <div className="space-y-3">
                <div className="text-sm text-muted-foreground">
                  Your practice owner accepts the Master Subscription Agreement before the first Business Associate Agreement.
                </div>
                <button type="button" className="btn btn-blue" onClick={() => openSetupStep("msa")}>
                  Accept the agreement
                </button>
              </div>
            ) : baaRecord?.pending || baaRecord?.status === "pending" ? (
              // A custom agreement awaiting counter-signature is managed where it can be withdrawn.
              <div className="space-y-3">
                <div className="text-sm text-muted-foreground">
                  Your uploaded agreement is waiting for our counter-signature.
                </div>
                <button type="button" className="btn btn-blue-ghost" onClick={() => navigate("baa", { relative: "route" })}>
                  View your agreement
                </button>
              </div>
            ) : (
              <BaaSignForm
                pdfTemplateUrl={baaRecord?.pdfTemplateUrl}
                htmlTemplateUrl={baaRecord?.htmlTemplateUrl}
                published={baaRecord?.document}
                onDirtyChange={overlayDirty.report}
                onSigned={((opened: number) => (record: BaaRecord, proof?: SignProof) => {
                  if (overlayOpening.current !== opened) return;
                  onBaaSigned(signedRecordFor(baaRecord, record, proof));
                  closeOverlay();
                })(overlayOpening.current)}
              >
                {({ body, actions }) => (
                  <div className="space-y-4">
                    {body}
                    <p className="practice-setup__altdoor">
                      <b>Your own agreement instead?</b>{" "}
                      <Link className="ak-link" to="baa" relative="route">Upload it</Link> and we counter-sign it. Your portal
                      opens only once both sides have signed, so this way takes longer.
                    </p>
                    <OverlayActions>{actions}</OverlayActions>
                  </div>
                )}
              </BaaSignForm>
            )
          )}
          {activeOverlay === "setup-contact" && (
            <IdentityPanel variant="contact-step" onDirtyChange={overlayDirty.report} onContactSaved={closeOverlay} onSaveFailedChange={setStepNotSaved} />
          )}
          {activeOverlay === "setup-services" && (
            <>
              {stepPosition.number === 0 && (
                <PracticeDoor icon={<ClipboardPlus />} title="Your services"
                  detail={services === undefined
                    ? "Edit a service or turn it off for booking"
                    : `Edit a service or turn it off for booking · ${services === 1 ? "1 service" : `${services} services`}`}
                  onOpen={openServicesList} />
              )}
              <PracticeCategoriesStep onDirtyChange={overlayDirty.report} onDone={closeOverlay} />
            </>
          )}
          </div>
          <OverlayFooter />
          </OverlayFooterHost>
        </SheetContent>
      </Sheet>

      {confirmDiscard && (
        <DiscardChangesDialog
          description={activeOverlay === "identity" && identityUnsaved ? identityUnsaved : inClinicianSetup ? "Appointment setup has not been saved." : inClinicianSelf ? "Your practitioner role has not been added." : overlayCopy?.unsaved ?? "Your changes have not been saved."}
          onKeepEditing={() => {
            setConfirmDiscard(false);
            setLeavingTo(null);
          }}
          onDiscard={() => {
            setConfirmDiscard(false);
            closeOverlay();
            if (leavingTo !== null) sheetGuard.leaveTo(leavingTo);
            setLeavingTo(null);
          }}
        />
      )}
    </div>
  );
};

export default PracticeDashboardPage;