import { useState } from "react";import { useAtomValue, useAtomSet } from "@effect/atom-react";import * as Exit from "effect/Exit";import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";import {  graphqlSourceAtom,  graphqlSourceBindingsAtom,  setGraphqlSourceBinding,  updateGraphqlSource,} from "./atoms";import { connectionsAtom } from "@executor-js/react/api/atoms";import { useScope, useScopeStack } from "@executor-js/react/api/scope-context";import { connectionWriteKeys, sourceWriteKeys } from "@executor-js/react/api/reactivity-keys";import { useSecretPickerSecrets } from "@executor-js/react/plugins/use-secret-picker-secrets";import {  HttpCredentialsEditor,  serializeHttpCredentials,  serializeScopedHttpCredentials,  type HttpCredentialsState,} from "@executor-js/react/plugins/http-credentials";import {  effectiveCredentialBindingForScope,  httpCredentialsFromConfiguredCredentialBindings,  initialCredentialTargetScope,} from "@executor-js/react/plugins/credential-bindings";import { slugifyNamespace, useSourceIdentity } from "@executor-js/react/plugins/source-identity";import { useCredentialTargetScope } from "@executor-js/react/plugins/credential-target-scope";import { Button } from "@executor-js/react/components/button";import { FilterTabs } from "@executor-js/react/components/filter-tabs";import { SourceOAuthConnectionControl } from "@executor-js/react/plugins/source-oauth-connection";import { Badge } from "@executor-js/react/components/badge";import { ScopeId } from "@executor-js/sdk/core";import { GraphqlSourceFields } from "./GraphqlSourceFields";import {  GRAPHQL_OAUTH_CONNECTION_SLOT,  type GraphqlCredentialInput,  GraphqlSourceBindingInput,  type GraphqlSourceBindingRef,} from "../sdk/types";import type { StoredGraphqlSource } from "../sdk/store"; type EditableSource = StoredGraphqlSource;type AuthMode = "none" | "oauth2"; // ---------------------------------------------------------------------------// Edit form// --------------------------------------------------------------------------- function EditForm(props: {  sourceId: string;  initial: EditableSource;  bindings: readonly GraphqlSourceBindingRef[];  onSave: () => void;}) {  const displayScope = useScope();  const scopeStack = useScopeStack();  const sourceScope = ScopeId.make(props.initial.scope);  const { credentialTargetScope, credentialScopeOptions } = useCredentialTargetScope({    sourceScope,    initialTargetScope: initialCredentialTargetScope(sourceScope, props.bindings),  });  const {    credentialTargetScope: oauthCredentialTargetScope,    setCredentialTargetScope: setOAuthCredentialTargetScope,  } = useCredentialTargetScope({    sourceScope,    initialTargetScope: initialCredentialTargetScope(sourceScope, props.bindings),  });  const doUpdate = useAtomSet(updateGraphqlSource, { mode: "promiseExit" });  const setBinding = useAtomSet(setGraphqlSourceBinding, { mode: "promise" });  const secretList = useSecretPickerSecrets();  const connectionsResult = useAtomValue(connectionsAtom(displayScope));   const identity = useSourceIdentity({    fallbackName: props.initial.name,    fallbackNamespace: props.initial.namespace,  });  const [endpoint, setEndpoint] = useState(props.initial.endpoint);  const [credentials, setCredentials] = useState<HttpCredentialsState>(() =>    httpCredentialsFromConfiguredCredentialBindings({      headers: props.initial.headers,      queryParams: props.initial.queryParams,      bindings: props.bindings,    }),  );  const [authMode, setAuthMode] = useState<AuthMode>(props.initial.auth.kind);  const [saving, setSaving] = useState(false);  const [error, setError] = useState<string | null>(null);  const [credentialsDirty, setCredentialsDirty] = useState(false);  const [authDirty, setAuthDirty] = useState(false);   const identityDirty = identity.name.trim() !== props.initial.name.trim();  const metadataDirty = identityDirty || endpoint.trim() !== props.initial.endpoint.trim();  const dirty = metadataDirty || credentialsDirty || authDirty;  const oauth2 = props.initial.auth.kind === "oauth2" ? props.initial.auth : null;  const connections = AsyncResult.isSuccess(connectionsResult) ? connectionsResult.value : [];  const scopeRanks = new Map(scopeStack.map((scope, index) => [scope.id, index] as const));  const connectionBinding = oauth2    ? effectiveCredentialBindingForScope(        props.bindings,        oauth2.connectionSlot,        oauthCredentialTargetScope,        scopeRanks,      )    : null;  const boundConnectionId =    connectionBinding?.value.kind === "connection" ? connectionBinding.value.connectionId : null;  const isConnected =    boundConnectionId !== null &&    connections.some((connection) => connection.id === boundConnectionId);  const oauthRequestCredentials = serializeHttpCredentials(credentials);   const handleCredentialsChange = (next: HttpCredentialsState) => {    setCredentials(next);    setCredentialsDirty(true);  };   const handleSave = async () => {    setSaving(true);    setError(null);    const { headers, queryParams } = serializeScopedHttpCredentials(      credentials,      credentialTargetScope,    );    const payload: {      sourceScope: ScopeId;      name?: string;      endpoint?: string;      headers?: Record<string, GraphqlCredentialInput>;      queryParams?: Record<string, GraphqlCredentialInput>;      credentialTargetScope?: ScopeId;      auth?: { kind: "none" } | { kind: "oauth2"; connectionSlot: string };    } = {      sourceScope,      name: metadataDirty ? identity.name.trim() || undefined : undefined,      endpoint: metadataDirty ? endpoint.trim() || undefined : undefined,    };    if (credentialsDirty) {      payload.headers = headers;      payload.queryParams = queryParams as Record<string, GraphqlCredentialInput>;      payload.credentialTargetScope = credentialTargetScope;    }    if (authDirty) {      payload.auth =        authMode === "oauth2"          ? {              kind: "oauth2",              connectionSlot:                props.initial.auth.kind === "oauth2"                  ? props.initial.auth.connectionSlot                  : GRAPHQL_OAUTH_CONNECTION_SLOT,            }          : { kind: "none" };      payload.credentialTargetScope = credentialTargetScope;    }    const exit = await doUpdate({      params: { scopeId: displayScope, namespace: props.sourceId },      payload,      reactivityKeys: sourceWriteKeys,    });     if (Exit.isFailure(exit)) {      setError("Failed to update source");      setSaving(false);      return;    }     setCredentialsDirty(false);    setAuthDirty(false);    props.onSave();    setSaving(false);  };   return (    <div className="space-y-6">      <div>        <h1 className="text-xl font-semibold text-foreground">Edit GraphQL Source</h1>        <p className="mt-1 text-sm text-muted-foreground">          Update the endpoint and authentication headers for this source.        </p>      </div>       <div className="flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3">        <div className="min-w-0 flex-1">          <p className="truncate text-sm font-semibold text-card-foreground">{props.sourceId}</p>        </div>        <Badge variant="secondary" className="text-xs">          GraphQL        </Badge>      </div>       <GraphqlSourceFields        endpoint={endpoint}        onEndpointChange={setEndpoint}        identity={identity}        namespaceReadOnly      />       <HttpCredentialsEditor        credentials={credentials}        onChange={handleCredentialsChange}        existingSecrets={secretList}        sourceName={identity.name}        targetScope={credentialTargetScope}        credentialScopeOptions={credentialScopeOptions}        bindingScopeOptions={credentialScopeOptions}      />       {/* Temporarily hidden while we revisit GraphQL OAuth discovery and UX. */}      <section className="hidden space-y-2.5">        <div className="flex items-center justify-between gap-3">          <span className="text-sm font-medium text-foreground">Authentication</span>          <FilterTabs<AuthMode>            tabs={[              { value: "none", label: "None" },              { value: "oauth2", label: "OAuth" },            ]}            value={authMode}            onChange={(value) => {              setAuthMode(value);              setAuthDirty(true);            }}          />        </div>        {authMode === "oauth2" && (          <p className="text-xs text-muted-foreground">            OAuth sign-in is available from the source header after saving.          </p>        )}      </section>       {oauth2 && (        <SourceOAuthConnectionControl          popupName="graphql-oauth"          pluginId="graphql"          namespace={slugifyNamespace(props.initial.namespace) || "graphql"}          fallbackNamespace="graphql"          endpoint={endpoint.trim()}          tokenScope={oauthCredentialTargetScope}          onTokenScopeChange={setOAuthCredentialTargetScope}          credentialScopeOptions={credentialScopeOptions}          connectionId={boundConnectionId}          sourceLabel={`${identity.name.trim() || props.initial.namespace || "GraphQL"} OAuth`}          headers={oauthRequestCredentials.headers}          queryParams={oauthRequestCredentials.queryParams}          isConnected={isConnected}          onConnected={async (connectionId) => {            await setBinding({              params: { scopeId: oauthCredentialTargetScope },              payload: new GraphqlSourceBindingInput({                sourceId: props.sourceId,                sourceScope,                scope: oauthCredentialTargetScope,                slot: oauth2.connectionSlot,                value: { kind: "connection", connectionId },              }),              reactivityKeys: [...sourceWriteKeys, ...connectionWriteKeys],            });          }}        />      )}       {error && (        <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2">          <p className="text-sm text-destructive">{error}</p>        </div>      )}       <div className="flex items-center justify-between border-t border-border pt-4">        <Button variant="ghost" onClick={props.onSave}>          Cancel        </Button>        <Button onClick={handleSave} disabled={!dirty || saving}>          {saving ? "Saving…" : "Save changes"}        </Button>      </div>    </div>  );} // ---------------------------------------------------------------------------// Main component// --------------------------------------------------------------------------- export default function EditGraphqlSource(props: { sourceId: string; onSave: () => void }) {  const scopeId = useScope();  const sourceResult = useAtomValue(graphqlSourceAtom(scopeId, props.sourceId));  const source =    AsyncResult.isSuccess(sourceResult) && sourceResult.value ? sourceResult.value : null;  const sourceScope = source ? ScopeId.make(source.scope) : scopeId;  const bindingsResult = useAtomValue(    graphqlSourceBindingsAtom(scopeId, props.sourceId, sourceScope),  );   if (!AsyncResult.isSuccess(sourceResult) || !source || !AsyncResult.isSuccess(bindingsResult)) {    return (      <div className="space-y-6">        <div>          <h1 className="text-xl font-semibold text-foreground">Edit GraphQL Source</h1>          <p className="mt-1 text-sm text-muted-foreground">Loading configuration…</p>        </div>      </div>    );  }   return (    <EditForm      sourceId={props.sourceId}      initial={source as EditableSource}      bindings={bindingsResult.value}      onSave={props.onSave}    />  );}