import { environment } from '../../environments/environment';
import { leaveSandboxMode, reloadPage } from '../../environments/sandboxMode';
import { useTenant } from '../../services/TenantService.tsx';

/**
 * THE WAY OUT WHEN NOTHING ELSE OFFERS ONE.
 *
 * The banner's Leave only appears once the API has confirmed `sandbox`, and the header's mode menu only
 * exists inside the signed-in frame. Between those two: the login page, RequireAuth's own pre-frame states
 * (spinner, workspace selector, a redirect back to login), and a sandbox that refuses or fails to
 * answer all leave the mode on with no control anywhere on screen. This is mounted once, in
 * AppRoutesGate immediately above OrganizationCheck, so it is reachable on every route - including
 * the ones OrganizationCheck itself has not resolved yet.
 *
 * IT READS THE LOCAL MODE, NEVER A TENANT CLAIM. `environment.inSandboxMode` is what this browser asked
 * for; `useTenant()` is what the API answered. Gating on the tenant claim instead would hide the exit
 * exactly when the API cannot confirm anything - the moment somebody needs it most. It steps aside once
 * `kind === 'sandbox'`, so the banner's own Leave is the only one shown once the API has confirmed it.
 */
export const SandboxModeEscape = () => {
    const { kind } = useTenant();

    if (!environment.inSandboxMode || kind === 'sandbox') return null;

    return (
        <div
            role="status"
            data-testid="sandbox-mode-escape"
            className="flex items-center justify-center gap-2 bg-amber-soft px-3 py-2 text-sm font-medium text-amber-ink"
        >
            <span>Sandbox Mode is on for this browser.</span>
            <button
                type="button"
                onClick={() => leaveSandboxMode(localStorage, reloadPage)}
                className="rounded border border-[var(--amber-line)] px-2 py-0.5 text-xs font-medium"
            >
                Leave
            </button>
        </div>
    );
};

export default SandboxModeEscape;