import React from 'react';
import { DoorOpen } from 'lucide-react';
import { useAuthServiceContext } from '../../services';

/**
 * THE SCREEN THAT ASKS BEFORE TAKING A SESSION, INSTEAD OF TAKING IT SILENTLY.
 *
 * WHAT IT REPLACES. Restoring a signed-in STAFF session on the patient mount - or a PATIENT session on
 * the staff mount - matched none of the identity branches in `AuthService.fetchUserData`, so the code fell
 * through to `logout()`. Measured on 2026-08-19 in both directions: every auth key gone, including the
 * REFRESH token, which is what proves it was a deliberate sign-out rather than an expiry.
 *
 * THE COST IS THE RECOVERY, NOT THE FREQUENCY. There is no password - signing in is an emailed
 * one-time code. So a wrong bookmark mid-shift meant: open your email, wait, paste, and find your way
 * back. The two portals sit side by side in bookmarks, and Spencer and Ed switch between them constantly.
 *
 * IT IS NOT ARGUED THAT HOLDING BOTH AT ONCE SHOULD BE ALLOWED. One origin means one storage prefix,
 * and quietly keeping two identities under it is exactly what the single-origin rule warns against. The
 * eviction is fine. **Doing it without asking is the defect**, which is why this is a question and not a
 * change to how sessions are stored.
 *
 * THE SESSION IS STILL LIVE WHILE THIS IS ON SCREEN. Nothing has been cleared; `AuthService` sets a
 * flag and returns. That is what makes the safe choice genuinely free - and it is the control the card
 * insists on, because a confirmation shown *after* the session is gone is decoration.
 */
export const CrossPortalGate: React.FC<{ holding: 'staff' | 'patient' }> = ({ holding }) => {
  const { logout } = useAuthServiceContext();

  const heldLabel = holding === 'staff' ? 'staff portal' : 'patient portal';
  const openedLabel = holding === 'staff' ? 'patient portal' : 'staff portal';

  return (
    <div className="flex min-h-screen items-center justify-center bg-background p-4">
      <div className="w-full max-w-xl rounded-lg border border-border bg-card p-6 shadow-sm">
        <div className="mb-4 flex items-center gap-3">
          <DoorOpen className="w-6 h-6 text-secondary" aria-hidden="true" />
          <h1 className="text-lg font-bold">You are signed in to the {heldLabel}</h1>
        </div>

        {/* 🔑 Says what will happen and WHY it cannot be undone cheaply. "You will be signed out" alone
            reads as a minor inconvenience to somebody who has not yet realised there is no password. */}
        <p className="text-sm text-secondary">
          This is the {openedLabel}, and only one of the two can be open on this device at a time.
          Continuing here will sign you out of the {heldLabel}.
        </p>
        <p className="mt-2 text-sm text-secondary">
          Signing back in needs a new code emailed to you, so if you meant to stay in the {heldLabel},
          go back now.
        </p>

        <div className="mt-6 flex flex-col gap-2 sm:flex-row-reverse sm:flex-wrap">
          {/* The SAFE choice is the prominent one, and it is deliberately first in the DOM so it is what
              a keyboard reaches first. `flex-row-reverse` puts it on the right visually without making
              somebody tab through the destructive option to get to it. */}
          <button
            type="button"
            className="btn btn-blue"
            onClick={() => {
              // Nothing to clean up - the session was never touched. If there is nowhere to go back
              // to (a typed address, or a link opened in a fresh tab) this does nothing visible, and
              // that is still the correct outcome: they keep the session and can use their other
              // bookmark. A portal URL is NOT constructed here - `wpData` carries only `context` and
              // `wpAjaxUrl`, so any path would be a guess at somebody else's WordPress permalinks.
              window.history.back();
            }}
            data-testid="cross-portal-stay"
          >
            Keep me signed in to the {heldLabel}
          </button>

          <button
            type="button"
            className="btn btn-red"
            onClick={() => logout()}
            data-testid="cross-portal-sign-out"
          >
            Sign out and use the {openedLabel}
          </button>
        </div>
      </div>
    </div>
  );
};

export default CrossPortalGate;