import { SquareArrowRight } from "lucide-react";

/**
 * LEAVING FOR ANOTHER PRACTICE'S PORTAL, drawn the one way Spencer settled.
 *
 * > **Spencer, 2026-08-30, ruling on the practice switcher:** the copy sits ABOVE and the button is
 * > right-aligned in its own shaded card, and the line reads *"You will need to sign in again at
 * > <domain>/patient-portal"* with no heading over it.
 *
 * THE PORTAL IS NOT A THIRD CONTACT BUTTON. Message and Call reach a practice from where the patient
 * already is; this LEAVES for somebody else's site and asks them to sign in again. Drawn beside the
 * other two it wrapped onto its own line and read as the same kind of thing, so it sits in its own
 * shaded card. Amber because it is a departure to notice, not a warning to be alarmed by.
 *
 * DELIBERATELY NO HEADING. "Their portal is a separate sign-in" under a warning heading says separate
 * ACCOUNT, and it is the same account - only the address where they type it differs.
 *
 * IT IS SHARED BECAUSE IT IS ONE RULING, NOT TWO SCREENS THAT HAPPEN TO LOOK ALIKE. The practice
 * switcher and the practices list both hand a patient the same door at the same moment, and the second
 * copy of a settled treatment is where the drift starts.
 */
export const PortalDepartureCard = ({ portalUrl }: { portalUrl: string }) => (
  <div className="flex flex-col gap-2.5 rounded-lg border border-warning/30 bg-amber-soft px-3 py-2.5">
    <span className="text-[12px] leading-snug text-muted-foreground">
      You will need to sign in again at{" "}
      {/* The address wraps as a unit. Broken across a line as "patient-" / "portal" it reads as two
          things, and it is the one string a patient may need to type. */}
      {/* The scheme goes, and so does a trailing slash. Neither is information a patient acts on, and
          this is the one string here they may have to type into an address bar - observed rendering as
          "akashic-test-2.local/patient-portal/" against a deck that shows no slash. */}
      <span className="whitespace-nowrap">{portalUrl.replace(/^https?:\/\//, "").replace(/\/+$/, "")}</span>
    </span>
    {/*
     * `btn btn-amber-sm` NOW, and the hand-rolled ramp that stood here is gone. It said the variant
     * "does not exist", which was true and is the reason it was written that way; `index.css` defines
     * the amber family as of today, so the hand-roll is the thing that would drift.
     *
     * Leaving a departure to another practice's portal AMBER is the standard's own reading of it - a
     * non-primary act - and the card around it is already the amber card.
     */}
    <a
      href={portalUrl}
      target="_blank"
      rel="noreferrer noopener"
      className="btn btn-amber-sm inline-flex items-center gap-1.5 self-end whitespace-nowrap"
    >
      <SquareArrowRight className="size-4" aria-hidden="true" />
      Go to portal
      {/* SAID OUT LOUD, because the sighted cue for this is the icon and the icon is aria-hidden. A
          new tab that opens unannounced strands a screen-reader user: back does not return them, and
          nothing said they had moved. The practice switcher had no such text and gained it here. */}
      <span className="sr-only">(opens in a new tab)</span>
    </a>
  </div>
);

export default PortalDepartureCard;