import { EnvelopeOpen } from "@phosphor-icons/react";
import { clinicianApi } from "../../api/client";
import { withLine } from "../../logic/patients";
import { Link } from "../router";
import { ErrorNote, Spinner, useLoad } from "../ui";
import { SiteLayout } from "./Landing";
import { RequestAccessForm } from "./RequestAccess";

/** /invite/<token> (INV-9, INV-10, ACC-4): the invite banner, then a pre-filled request. */
export default function InviteLanding({ token }: { token: string }) {
  const invite = useLoad(() => clinicianApi.invitePreview(token), [token]);
  const p = invite.data;
  const withPerson = p?.withPerson ? ` ${withLine(p.withPerson, p.patientPronoun)}` : "";
  return (
    <SiteLayout>
      <div className="narrow">
        {invite.loading && <Spinner label="Opening the invite" />}
        <ErrorNote error={invite.error} />
        {p && (
          <>
            <div className="invite-banner" role="status">
              <span className="icon-chip">
                <EnvelopeOpen size={16} />
              </span>
              <div>
                <strong>{p.patientName} invited you</strong>
                <small>
                  From MARMAR Health{withPerson} · for {p.doctorName}
                  {p.clinicName ? `, ${p.clinicName}` : ""}
                </small>
              </div>
            </div>
            {p.status !== "pending" ? (
              <p className="lead">This invite is {p.status}. Ask {p.patientName.split(" ")[0]} to send a new one from MARMAR Health.</p>
            ) : (
              <>
                <header className="page-head">
                  <h1>Join MARMAR Context to accept</h1>
                  <p>
                    Request access and we verify your licence first. The invite waits for you, and requests from a
                    patient's invite go near the front of the queue. Already verified? <Link to="/sign-in">Sign in</Link>{" "}
                    and the invite is on your Patients page.
                  </p>
                </header>
                <RequestAccessForm invite={p} inviteToken={token} />
              </>
            )}
          </>
        )}
      </div>
    </SiteLayout>
  );
}