import { useMemo, useState } from "react";import {  AuthTemplateSlug,  IntegrationSlug,  type AuthMethodDescriptor,  type Connection,  type Owner,} from "@executor-js/sdk/shared";import { CheckCircle2Icon, RotateCcwIcon, XCircleIcon } from "lucide-react";import { toast } from "sonner"; import { useOrganizationId } from "../api/organization-context";import { normalizeEmail, type ProviderAccount } from "../lib/provider-accounts";import { cn } from "../lib/utils";import { useOAuthPopupFlow, type OAuthStartPayload } from "../plugins/oauth-sign-in";import { Button } from "./button";import { Badge } from "./badge";import { Checkbox } from "./checkbox";import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,} from "./dialog";import { Label } from "./label";import { connectionLabelForHost, connectionNameFrom } from "./add-account-modal"; export type EnableServiceIntegration = {  readonly slug: IntegrationSlug;  readonly name: string;  readonly kind: string;  readonly authMethods: readonly AuthMethodDescriptor[];}; export type EnableServiceStepStatus = "pending" | "done" | "failed"; export type EnableServiceQueueStep<TIntegration extends EnableServiceIntegration> = {  readonly integration: TIntegration;  readonly status: EnableServiceStepStatus;}; export type EnableServiceQueue<TIntegration extends EnableServiceIntegration> = {  readonly steps: readonly EnableServiceQueueStep<TIntegration>[];  readonly activeIndex: number;}; export const createEnableServicesQueue = <TIntegration extends EnableServiceIntegration>(  integrations: readonly TIntegration[],): EnableServiceQueue<TIntegration> => ({  steps: integrations.map((integration) => ({ integration, status: "pending" })),  activeIndex: 0,}); const nextPendingIndex = <TIntegration extends EnableServiceIntegration>(  steps: readonly EnableServiceQueueStep<TIntegration>[],  from: number,): number => {  const next = steps.findIndex((step, index) => index > from && step.status !== "done");  return next === -1 ? steps.length : next;}; export const applyEnableServiceStepResult = <TIntegration extends EnableServiceIntegration>(  queue: EnableServiceQueue<TIntegration>,  slug: IntegrationSlug,  status: EnableServiceStepStatus,): EnableServiceQueue<TIntegration> => {  const stepIndex = queue.steps.findIndex((step) => step.integration.slug === slug);  if (stepIndex === -1) return queue;  const steps = queue.steps.map((step, index) =>    index === stepIndex ? { ...step, status } : step,  );  return {    steps,    activeIndex:      status === "done" && stepIndex === queue.activeIndex        ? nextPendingIndex(steps, stepIndex)        : queue.activeIndex,  };}; export const retryEnableServiceStep = <TIntegration extends EnableServiceIntegration>(  queue: EnableServiceQueue<TIntegration>,  slug: IntegrationSlug,): EnableServiceQueue<TIntegration> => {  const stepIndex = queue.steps.findIndex((step) => step.integration.slug === slug);  if (stepIndex === -1) return queue;  return {    steps: queue.steps.map((step, index) =>      index === stepIndex ? { ...step, status: "pending" } : step,    ),    activeIndex: stepIndex,  };}; export const activeEnableServiceStep = <TIntegration extends EnableServiceIntegration>(  queue: EnableServiceQueue<TIntegration>,): EnableServiceQueueStep<TIntegration> | null => queue.steps[queue.activeIndex] ?? null; const oauthMethodFor = (integration: EnableServiceIntegration): AuthMethodDescriptor | null =>  integration.authMethods.find((method) => method.kind === "oauth") ?? null; const mirrorConnectionFor = (  account: ProviderAccount<Connection, EnableServiceIntegration>,): Connection | null =>  account.connections.find((entry) => entry.connection.oauthClient != null)?.connection ?? null; export const buildEnableServiceOAuthStartPayload = (input: {  readonly account: ProviderAccount<Connection, EnableServiceIntegration>;  readonly integration: EnableServiceIntegration;  readonly organizationId: string | null;}): OAuthStartPayload | null => {  const loginHint = normalizeEmail(input.account.label);  if (loginHint === null) return null;  const method = oauthMethodFor(input.integration);  if (!method) return null;  const mirrored = mirrorConnectionFor(input.account);  if (!mirrored?.oauthClient) return null;  const owner = input.account.owner as Owner;  // Seed the label with the account email's localpart ("rhys Google Calendar")  // so two same-owner accounts enabling the same service don't collide on  // (owner, integration, name) and clobber each other's connection.  const accountLabel = `${loginHint.split("@")[0] ?? ""} ${input.integration.name}`;  const identityLabel = connectionLabelForHost(    accountLabel,    owner,    input.integration.name,    input.organizationId,  );   return {    client: mirrored.oauthClient,    clientOwner: mirrored.oauthClientOwner ?? mirrored.owner,    owner,    name: connectionNameFrom(accountLabel, owner, input.integration.name, input.organizationId),    integration: input.integration.slug,    template: AuthTemplateSlug.make(method.template),    identityLabel,    loginHint,  };}; /** Run one queue step: build the payload and open exactly one OAuth popup. *  The completion callbacks only record the step result; advancing to the next *  service always requires a fresh Continue click, so a finishing popup can *  never auto-open the next one. */export const continueEnableServiceStep = (input: {  readonly account: ProviderAccount<Connection, EnableServiceIntegration>;  readonly integration: EnableServiceIntegration;  readonly organizationId: string | null;  readonly start: (input: {    readonly payload: OAuthStartPayload;    readonly onSuccess: () => void;    readonly onError: () => void;  }) => void;  readonly markActive: (status: EnableServiceStepStatus) => void;}): void => {  const payload = buildEnableServiceOAuthStartPayload({    account: input.account,    integration: input.integration,    organizationId: input.organizationId,  });  if (!payload) {    input.markActive("failed");    toast.error("This service cannot reuse the selected OAuth app");    return;  }  input.start({    payload,    onSuccess: () => {      input.markActive("done");      toast.success(`${input.integration.name} connected`);    },    onError: () => {      input.markActive("failed");    },  });}; const serviceKey = (integration: EnableServiceIntegration): string => String(integration.slug); export function EnableServicesModal(props: {  readonly open: boolean;  readonly account: ProviderAccount<Connection, EnableServiceIntegration> | null;  readonly integrations: readonly EnableServiceIntegration[];  readonly onOpenChange: (open: boolean) => void;}) {  if (!props.open || !props.account) return null;  return <EnableServicesModalBody {...props} account={props.account} />;} function EnableServicesModalBody(props: {  readonly account: ProviderAccount<Connection, EnableServiceIntegration>;  readonly integrations: readonly EnableServiceIntegration[];  readonly onOpenChange: (open: boolean) => void;  readonly open: boolean;}) {  const organizationId = useOrganizationId();  const defaultSelected = useMemo(    () =>      new Set(        props.integrations          .filter((integration) => oauthMethodFor(integration) !== null)          .map((integration) => serviceKey(integration)),      ),    [props.integrations],  );  const [selected, setSelected] = useState<ReadonlySet<string>>(defaultSelected);  const [queue, setQueue] = useState<EnableServiceQueue<EnableServiceIntegration> | null>(null);  const oauthPopup = useOAuthPopupFlow({    popupName: "enable-provider-service",    detectPopupClosed: false,    startErrorMessage: "Failed to start service connection",  });  const active = queue ? activeEnableServiceStep(queue) : null;  const selectedIntegrations = props.integrations.filter((integration) =>    selected.has(serviceKey(integration)),  );  const complete = queue ? queue.steps.every((step) => step.status === "done") : false;  const loginHint = normalizeEmail(props.account.label);   const toggleSelected = (integration: EnableServiceIntegration, checked: boolean) => {    setSelected((current) => {      const next = new Set(current);      if (checked) next.add(serviceKey(integration));      else next.delete(serviceKey(integration));      return next;    });  };   const startQueue = () => {    setQueue(createEnableServicesQueue(selectedIntegrations));  };   const markActive = (status: EnableServiceStepStatus) => {    if (!queue || !active) return;    setQueue(applyEnableServiceStepResult(queue, active.integration.slug, status));  };   const handleContinue = () => {    if (!active) return;    continueEnableServiceStep({      account: props.account,      integration: active.integration,      organizationId,      start: (input) => void oauthPopup.start(input),      markActive,    });  };   const handleRetry = () => {    if (!queue || !active) return;    setQueue(retryEnableServiceStep(queue, active.integration.slug));  };   return (    <Dialog open={props.open} onOpenChange={props.onOpenChange}>      <DialogContent className="sm:max-w-xl">        <DialogHeader>          <DialogTitle>Add services</DialogTitle>          <DialogDescription>{loginHint ?? props.account.label}</DialogDescription>        </DialogHeader>         {queue === null ? (          <div className="space-y-3">            <div className="rounded-md border border-border">              {props.integrations.map((integration) => {                const key = serviceKey(integration);                const disabled = oauthMethodFor(integration) === null || loginHint === null;                return (                  <Label                    key={key}                    className={cn(                      "flex cursor-pointer items-center gap-3 border-b border-border px-3 py-3 last:border-b-0",                      disabled && "cursor-not-allowed opacity-50",                    )}                  >                    <Checkbox                      checked={selected.has(key)}                      disabled={disabled}                      onCheckedChange={(value) => toggleSelected(integration, value === true)}                    />                    <span className="flex min-w-0 flex-1 flex-col gap-0.5">                      <span className="truncate text-sm font-medium text-foreground">                        {integration.name}                      </span>                      <span className="text-xs text-muted-foreground">                        {disabled ? "OAuth is not available" : "Ready to connect"}                      </span>                    </span>                  </Label>                );              })}            </div>          </div>        ) : (          <div className="space-y-4">            <div className="space-y-2">              {queue.steps.map((step, index) => (                <div                  key={serviceKey(step.integration)}                  className="flex items-center justify-between rounded-md border border-border px-3 py-2"                >                  <div className="min-w-0">                    <p className="truncate text-sm font-medium text-foreground">                      {step.integration.name}                    </p>                    <p className="text-xs text-muted-foreground">                      {index + 1} of {queue.steps.length}                    </p>                  </div>                  {step.status === "done" ? (                    <Badge variant="outline" className="gap-1 text-emerald-700">                      <CheckCircle2Icon />                      Done                    </Badge>                  ) : step.status === "failed" ? (                    <Badge variant="outline" className="gap-1 text-destructive">                      <XCircleIcon />                      Failed                    </Badge>                  ) : (                    <Badge variant="outline">Pending</Badge>                  )}                </div>              ))}            </div>             {complete ? (              <div className="rounded-md border border-border bg-muted/30 px-3 py-3 text-sm text-foreground">                Selected services are connected.              </div>            ) : active ? (              <div className="rounded-md border border-border bg-muted/30 px-3 py-3">                <p className="text-sm font-medium text-foreground">                  Connecting {active.integration.name} ({queue.activeIndex + 1} of{" "}                  {queue.steps.length})                </p>                {active.status === "failed" ? (                  <p className="mt-1 text-xs text-muted-foreground">                    Retry this service when ready.                  </p>                ) : null}              </div>            ) : null}          </div>        )}         <DialogFooter>          {queue === null ? (            <Button              type="button"              onClick={startQueue}              disabled={selectedIntegrations.length === 0 || loginHint === null}            >              Start queue            </Button>          ) : complete ? (            <Button type="button" onClick={() => props.onOpenChange(false)}>              Done            </Button>          ) : active?.status === "failed" ? (            <Button type="button" onClick={handleRetry} variant="outline">              <RotateCcwIcon />              Retry            </Button>          ) : (            <Button type="button" onClick={handleContinue} loading={oauthPopup.busy}>              Continue            </Button>          )}        </DialogFooter>      </DialogContent>    </Dialog>  );}