import { useState } from "react";
import { Spinner } from "../ui/spinner";

/**
 * The screen a member sees in the bounded wait right after joining a practice (utils/justJoinedHandoff), in
 * place of a bare Loading. It offers no sign-out: the membership is real and the wait ends on its own.
 */
export const SettingUpAccess = () => (
  <div
    className="flex min-h-screen flex-col items-center justify-center gap-4 px-6 text-center"
    data-akashic-portal-frame=""
    data-loading-gate="joining-practice"
    role="status"
  >
    <Spinner />
    <p className="text-lg font-bold">Setting up your access at the practice</p>
    <p className="max-w-md text-sm text-secondary">
      You have joined. This can take up to a minute. Keep this page open.
    </p>
  </div>
);

/**
 * Shown when the session opened at the end of that wait before every part of the workspace admitted the
 * member. It says only what is known, and each press asks once.
 */
export const JoinAccessNotice = ({ onCheckAgain }: { onCheckAgain: () => Promise<boolean> }) => {
  const [checking, setChecking] = useState(false);
  const [stillWaiting, setStillWaiting] = useState(false);

  const checkAgain = async () => {
    setChecking(true);
    try {
      setStillWaiting(!(await onCheckAgain()));
    } finally {
      setChecking(false);
    }
  };

  return (
    <div className="ak-notice" role="status">
      <p>
        {stillWaiting
          ? "Your access at this practice is not ready yet. Check again in a minute."
          : "Your access at this practice is still being set up. If part of your workspace does not load, check again in a minute."}
      </p>
      <button type="button" className="btn btn-amber" onClick={() => void checkAgain()} disabled={checking}>
        {checking ? "Checking…" : "Check again"}
      </button>
    </div>
  );
};