import { useEffect, useMemo, useState } from "react";import type { ReactNode } from "react"; import { ScopeId } from "@executor-js/sdk"; import { useScope, useUserScope } from "../api/scope-context";import {  CardStack,  CardStackContent,  CardStackEntry,  CardStackEntryContent,  CardStackEntryDescription,  CardStackEntryTitle,} from "../components/card-stack";import { FilterTabs } from "../components/filter-tabs";import { FieldLabel } from "../components/field";import { HelpTooltip } from "../components/help-tooltip";import {  Select,  SelectContent,  SelectItem,  SelectTrigger,  SelectValue,} from "../components/select"; export interface CredentialTargetScopeOption {  readonly scopeId: ScopeId;  readonly label: string;  readonly description: string;} export const credentialTargetScopeOptions = (input: {  readonly sourceScope: ScopeId;  readonly userScope: ScopeId;  readonly sourceScopeLabel?: string;}): readonly CredentialTargetScopeOption[] => {  if (input.sourceScope === input.userScope) {    return [      {        scopeId: input.userScope,        label: "Personal",        description: "Saved only for your account.",      },    ];  }   return [    {      scopeId: input.userScope,      label: "Personal",      description: "Saved only for your account.",    },    {      scopeId: input.sourceScope,      label: input.sourceScopeLabel ?? "Organization",      description: "Shared with everyone who can use this source.",    },  ];}; export const normalizeCredentialTargetScope = (  value: ScopeId,  options: readonly CredentialTargetScopeOption[],): ScopeId => options.find((option) => option.scopeId === value)?.scopeId ?? options[0]!.scopeId; export function useCredentialTargetScope(input?: {  readonly sourceScope?: ScopeId;  readonly sourceScopeLabel?: string;  readonly initialTargetScope?: ScopeId;}): {  readonly credentialTargetScope: ScopeId;  readonly setCredentialTargetScope: (scope: ScopeId) => void;  readonly credentialScopeOptions: readonly CredentialTargetScopeOption[];} {  const routeScope = useScope();  const sourceScope = input?.sourceScope ?? routeScope;  const userScope = useUserScope();  const credentialScopeOptions = useMemo(    () =>      credentialTargetScopeOptions({        sourceScope,        userScope,        sourceScopeLabel: input?.sourceScopeLabel,      }),    [sourceScope, userScope, input?.sourceScopeLabel],  );  const initialTargetScope = input?.initialTargetScope ?? credentialScopeOptions[0]!.scopeId;  const [credentialTargetScope, setCredentialTargetScope] = useState<ScopeId>(    normalizeCredentialTargetScope(initialTargetScope, credentialScopeOptions),  );   useEffect(() => {    setCredentialTargetScope((current) =>      normalizeCredentialTargetScope(        current === routeScope && input?.sourceScope !== undefined ? initialTargetScope : current,        credentialScopeOptions,      ),    );  }, [credentialScopeOptions, initialTargetScope, input?.sourceScope, routeScope]);   return {    credentialTargetScope,    setCredentialTargetScope,    credentialScopeOptions,  };} export function CredentialTargetScopeSelector(props: {  readonly value: ScopeId;  readonly options: readonly CredentialTargetScopeOption[];  readonly onChange: (scope: ScopeId) => void;  readonly title?: string;  readonly description?: string;}) {  if (props.options.length <= 1) return null;   const active = props.options.find((option) => option.scopeId === props.value);   return (    <CardStack>      <CardStackContent className="border-t-0">        <CardStackEntry>          <CardStackEntryContent>            <CardStackEntryTitle>{props.title ?? "Credentials"}</CardStackEntryTitle>            <CardStackEntryDescription>              {props.description ??                active?.description ??                "Choose where new credentials are saved."}            </CardStackEntryDescription>          </CardStackEntryContent>          <FilterTabs<ScopeId>            tabs={props.options.map((option) => ({              value: option.scopeId,              label: option.label,            }))}            value={props.value}            onChange={props.onChange}          />        </CardStackEntry>      </CardStackContent>    </CardStack>  );} export function CredentialScopeSection(props: {  readonly value: ScopeId;  readonly options: readonly CredentialTargetScopeOption[];  readonly onChange: (scope: ScopeId) => void;  readonly children: ReactNode;  readonly title?: string;  readonly description?: string;}) {  return (    <div className="space-y-3">      <CredentialTargetScopeSelector        value={props.value}        options={props.options}        onChange={props.onChange}        title={props.title ?? "Used by"}        description={props.description ?? "Choose who can use these credentials."}      />      {props.children}    </div>  );} export function CredentialScopeDropdown(props: {  readonly value: ScopeId;  readonly options: readonly CredentialTargetScopeOption[];  readonly onChange: (scope: ScopeId) => void;  readonly label?: string;  readonly help?: ReactNode;  readonly className?: string;  readonly triggerClassName?: string;  readonly size?: "sm" | "default";}) {  const label = props.label ?? "Used by";  if (props.options.length <= 1) return null;   return (    <div className={props.className ?? "space-y-1.5"}>      <div className="flex items-center gap-1.5">        <FieldLabel className="text-[11px]">{label}</FieldLabel>        <HelpTooltip label={label}>          {props.help ?? "Choose who can use these credentials."}        </HelpTooltip>      </div>      <Select        value={String(props.value)}        onValueChange={(value) => props.onChange(ScopeId.make(value))}      >        <SelectTrigger className={props.triggerClassName ?? "w-full"} size={props.size}>          <SelectValue placeholder={label} />        </SelectTrigger>        <SelectContent>          {props.options.map((option) => (            <SelectItem key={option.scopeId} value={option.scopeId}>              {option.label}            </SelectItem>          ))}        </SelectContent>      </Select>    </div>  );} export function CredentialControlField(props: {  readonly label: string;  readonly children: ReactNode;  readonly help?: ReactNode;}) {  return (    <div className="space-y-1.5">      <div className="flex items-center gap-1.5">        <FieldLabel className="text-[11px]">{props.label}</FieldLabel>        {props.help ? <HelpTooltip label={props.label}>{props.help}</HelpTooltip> : null}      </div>      {props.children}    </div>  );} export function CredentialUsageRow(props: {  readonly value: ScopeId;  readonly options: readonly CredentialTargetScopeOption[];  readonly onChange: (scope: ScopeId) => void;  readonly children: ReactNode;  readonly label?: string;  readonly help?: ReactNode;}) {  if (props.options.length <= 1) {    return <div className="space-y-2.5">{props.children}</div>;  }   return (    <div className="grid items-stretch gap-2 md:grid-cols-2">      <div className="min-w-0 space-y-2.5">{props.children}</div>      <CredentialScopeDropdown        value={props.value}        options={props.options}        onChange={props.onChange}        label={props.label}        help={props.help}        className="flex h-full flex-col space-y-1.5"        triggerClassName="w-full min-h-9 flex-1 data-[size=default]:h-full"      />    </div>  );}