import { useState } from "react";import { useAtomValue, useAtomSet } from "@effect/atom-react";import { useNavigate } from "@tanstack/react-router";import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";import * as Exit from "effect/Exit";import { authWriteKeys } from "@executor-js/react/api/reactivity-keys";import { trackEvent } from "@executor-js/react/api/analytics";import { Button } from "@executor-js/react/components/button"; import { AUTH_PATHS } from "../../auth/api";import { acceptInvitation, pendingInvitationsAtom, useAuth } from "../auth";import {  CreateOrganizationFields,  useCreateOrganizationForm,} from "../components/create-organization-form"; type PendingInvitation = {  id: string;  organizationId: string;  organizationName: string;  createdAt: string;  inviter: { email: string; name: string | null } | null;}; const formatRelativeTime = (iso: string): string => {  const then = new Date(iso).getTime();  if (Number.isNaN(then)) return "";  const diffMs = Date.now() - then;  const min = Math.floor(diffMs / 60_000);  if (min < 1) return "just now";  if (min < 60) return `${min}m ago`;  const hrs = Math.floor(min / 60);  if (hrs < 24) return `${hrs}h ago`;  const days = Math.floor(hrs / 24);  if (days < 7) return `${days}d ago`;  const weeks = Math.floor(days / 7);  if (weeks < 5) return `${weeks}w ago`;  const months = Math.floor(days / 30);  if (months < 12) return `${months}mo ago`;  return `${Math.floor(days / 365)}y ago`;}; export const CreateOrgPage = () => {  const auth = useAuth();  const navigate = useNavigate();  const invitationsResult = useAtomValue(pendingInvitationsAtom);  const doAccept = useAtomSet(acceptInvitation, { mode: "promiseExit" });   const [acceptingId, setAcceptingId] = useState<string | null>(null);  const [errorByInvitationId, setErrorByInvitationId] = useState<Record<string, string>>({});   const handleAccept = async (invitation: PendingInvitation) => {    setAcceptingId(invitation.id);    setErrorByInvitationId((prev) => {      if (!(invitation.id in prev)) return prev;      const next = { ...prev };      delete next[invitation.id];      return next;    });    const exit = await doAccept({      payload: { invitationId: invitation.id },      reactivityKeys: authWriteKeys,    });    setAcceptingId(null);    trackEvent("org_invitation_accepted", { success: Exit.isSuccess(exit) });    if (!Exit.isSuccess(exit)) {      setErrorByInvitationId((prev) => ({        ...prev,        [invitation.id]: "Couldn't accept this invitation. Try again or ask the inviter to resend.",      }));    }  };   const suggestedName =    auth.status === "authenticated" && auth.user.name != null && auth.user.name.trim() !== ""      ? `${auth.user.name}'s Organization`      : "";   const form = useCreateOrganizationForm({    defaultName: suggestedName,    onSuccess: () => {      void navigate({ to: "/setup-mcp" });    },  });   // Almost no new user has a pending invitation, so we never show a loading  // placeholder for them — the create form renders immediately and stays put.  // Invitations (when they exist) just appear above it once the fetch resolves;  // a refetch (the create-org submit invalidates the auth-keyed atom) keeps the  // last value, so nothing flickers.  const invitations = AsyncResult.match(invitationsResult, {    onInitial: () => [] as readonly PendingInvitation[],    onFailure: () => [] as readonly PendingInvitation[],    onSuccess: ({ value }) => value.invitations,  });   const count = invitations.length;  const sole = count === 1 ? invitations[0]! : null;   return (    <div className="flex min-h-screen items-center justify-center bg-background px-4">      <div className="mx-auto flex w-full max-w-sm flex-col gap-6">        <header className="flex flex-col gap-2">          <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">            Step 1 of 2          </p>          <h1 className="font-serif text-3xl">            {count > 0 ? "You've been invited" : "Create your organization"}          </h1>          {count === 0 && (            <p className="text-sm text-muted-foreground">              Organizations group your sources, secrets, and teammates. You can invite others once              it's set up.            </p>          )}        </header>         {sole && (          <SingleInvitationView            invitation={sole}            accepting={acceptingId === sole.id}            error={errorByInvitationId[sole.id] ?? null}            onAccept={() => void handleAccept(sole)}          />        )}         {count > 1 && (          <MultiInvitationsView            invitations={invitations}            acceptingId={acceptingId}            errorByInvitationId={errorByInvitationId}            onAccept={(inv) => void handleAccept(inv)}          />        )}         <CreateOrgSection isPrimary={count === 0} form={form} />         <footer className="flex items-center justify-center">          {/* oxlint-disable-next-line react/forbid-elements */}          <button            type="button"            className="text-xs text-muted-foreground transition-colors hover:text-foreground"            onClick={async () => {              await fetch(AUTH_PATHS.logout, { method: "POST" });              window.location.href = "/";            }}          >            Sign out          </button>        </footer>      </div>    </div>  );}; // --------------------------------------------------------------------------- const InviterAttribution = ({ invitation }: { invitation: PendingInvitation }) => {  const inviterLabel = invitation.inviter    ? invitation.inviter.name && invitation.inviter.name.length > 0      ? `${invitation.inviter.name} (${invitation.inviter.email})`      : invitation.inviter.email    : null;  const time = formatRelativeTime(invitation.createdAt);  return (    <p className="truncate text-xs text-muted-foreground">      {inviterLabel ? (        <>          Invited by <span className="text-foreground/80">{inviterLabel}</span>          {time && <span> · {time}</span>}        </>      ) : (        <>Invited{time ? ` ${time}` : ""}</>      )}    </p>  );}; // --------------------------------------------------------------------------- const SingleInvitationView = ({  invitation,  accepting,  error,  onAccept,}: {  invitation: PendingInvitation;  accepting: boolean;  error: string | null;  onAccept: () => void;}) => (  <section aria-label="Invitation" className="flex flex-col gap-3">    <div className="flex flex-col gap-0.5 rounded-md border border-border px-3 py-2.5">      <p className="truncate text-sm font-medium leading-tight">{invitation.organizationName}</p>      <InviterAttribution invitation={invitation} />    </div>     {error && <p className="text-xs text-destructive">{error}</p>}     <Button onClick={onAccept} disabled={accepting} className="w-full" size="sm">      {accepting ? "Joining…" : "Accept invitation"}    </Button>  </section>); // --------------------------------------------------------------------------- const MultiInvitationsView = ({  invitations,  acceptingId,  errorByInvitationId,  onAccept,}: {  invitations: readonly PendingInvitation[];  acceptingId: string | null;  errorByInvitationId: Record<string, string>;  onAccept: (invitation: PendingInvitation) => void;}) => (  <section aria-label="Invitations" className="flex flex-col gap-2">    <ul className="flex flex-col gap-2">      {invitations.map((invitation) => {        const isAccepting = acceptingId === invitation.id;        const isOtherAccepting = acceptingId !== null && !isAccepting;        const error = errorByInvitationId[invitation.id] ?? null;        return (          <li key={invitation.id} className="flex flex-col gap-1.5">            <div className="flex items-center gap-3 rounded-md border border-border px-3 py-2.5">              <div className="min-w-0 flex-1">                <p className="truncate text-sm font-medium leading-tight">                  {invitation.organizationName}                </p>                <InviterAttribution invitation={invitation} />              </div>              <Button                size="sm"                onClick={() => onAccept(invitation)}                disabled={isAccepting || isOtherAccepting}              >                {isAccepting ? "Joining…" : "Accept"}              </Button>            </div>            {error && <p className="text-xs text-destructive">{error}</p>}          </li>        );      })}    </ul>  </section>); // --------------------------------------------------------------------------- const CreateOrgSection = ({  isPrimary,  form,}: {  isPrimary: boolean;  form: ReturnType<typeof useCreateOrganizationForm>;}) => {  const [expanded, setExpanded] = useState(isPrimary);   if (!isPrimary && !expanded) {    return (      <div className="text-center text-xs text-muted-foreground">        {/* oxlint-disable-next-line react/forbid-elements */}        <button          type="button"          onClick={() => setExpanded(true)}          className="underline-offset-4 transition-colors hover:text-foreground hover:underline"        >          Or create a new organization        </button>      </div>    );  }   return (    <section aria-label="Create organization" className="flex flex-col gap-3">      <CreateOrganizationFields        name={form.name}        onNameChange={(name) => {          form.setName(name);          if (form.error) form.setError(null);        }}        error={form.error}        onSubmit={() => void form.submit()}      />      <div className="flex justify-end">        <Button          size="sm"          onClick={() => void form.submit()}          disabled={!form.canSubmit || form.creating}        >          {form.creating ? "Creating…" : "Create organization"}        </Button>      </div>    </section>  );};