import { useMemo, 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 } from "./atoms";
import {
  configureSource,
  connectionsAtom,
  setSourceCredentialBinding,
} from "@executor-js/react/api/atoms";
import { useScope, useUserScope } 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 {
  httpCredentialsFromConfiguredCredentialBindings,
  serializeHttpCredentials,
  type HttpCredentialsState,
} from "@executor-js/react/plugins/http-credentials";
import { slugifyNamespace, useSourceIdentity } from "@executor-js/react/plugins/source-identity";
import { useCredentialTargetScope } from "@executor-js/react/plugins/credential-target-scope";
import {
  useSourceCredentialBindingScopes,
  useSourceCredentialBindingWriter,
} from "@executor-js/react/plugins/source-credential-bindings";
import { Button } from "@executor-js/react/components/button";
import {
  CardStack,
  CardStackContent,
  CardStackEntry,
  CardStackEntryContent,
  CardStackEntryDescription,
  CardStackEntryTitle,
} from "@executor-js/react/components/card-stack";
import { FilterTabs } from "@executor-js/react/components/filter-tabs";
import {
  SourceOAuthConnectionControl,
  sourceOAuthConnectionUiState,
} from "@executor-js/react/plugins/source-oauth-connection";
import { Badge } from "@executor-js/react/components/badge";
import { type CredentialBindingRef, ScopeId } from "@executor-js/sdk/shared";
import {
  SecretCredentialSlotBindings,
  secretCredentialSlotsFromHttpConfig,
} from "@executor-js/react/plugins/credential-slot-bindings";
import { GraphqlSourceFields } from "./GraphqlSourceFields";
import type { GraphqlSourceAuthInput } 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 CredentialBindingRef[];
  onSave: () => void;
}) {
  const displayScope = useScope();
  const userScope = useUserScope();
  const sourceScope = ScopeId.make(props.initial.scope);
  const {
    credentialTargetScope: oauthCredentialTargetScope,
    setCredentialTargetScope: setOAuthCredentialTargetScope,
  } = useCredentialTargetScope({
    sourceScope,
    initialTargetScope: userScope,
  });
  const doConfigure = useAtomSet(configureSource, { mode: "promiseExit" });
  const setConnectionBinding = useAtomSet(setSourceCredentialBinding, { mode: "promise" });
  const secretList = useSecretPickerSecrets();
  const connectionsResult = useAtomValue(connectionsAtom(userScope));

  const identity = useSourceIdentity({
    fallbackName: props.initial.name,
    fallbackNamespace: props.initial.namespace,
  });
  const [endpoint, setEndpoint] = useState(props.initial.endpoint);
  const credentials = useMemo<HttpCredentialsState>(
    () =>
      httpCredentialsFromConfiguredCredentialBindings({
        headers: props.initial.headers,
        queryParams: props.initial.queryParams,
        bindings: props.bindings,
      }),
    [props.bindings, props.initial.headers, props.initial.queryParams],
  );
  const [authMode, setAuthMode] = useState<AuthMode>(props.initial.auth.kind);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [authDirty, setAuthDirty] = useState(false);
  const { busyKey, setSecretBinding, clearBinding } = useSourceCredentialBindingWriter({
    displayScope,
    source: { id: props.sourceId, scope: sourceScope },
    onError: setError,
  });

  const identityDirty = identity.name.trim() !== props.initial.name.trim();
  const metadataDirty = identityDirty || endpoint.trim() !== props.initial.endpoint.trim();
  const dirty = metadataDirty || authDirty;
  const oauth2 = props.initial.auth.kind === "oauth2" ? props.initial.auth : null;
  const connections = AsyncResult.isSuccess(connectionsResult) ? connectionsResult.value : [];
  const { credentialScopeOptions, secretBindingScopes, scopeRanks } =
    useSourceCredentialBindingScopes({ sourceScope });
  const secretSlots = secretCredentialSlotsFromHttpConfig({
    headers: props.initial.headers,
    queryParams: props.initial.queryParams,
  });
  const oauthConnectionState = oauth2
    ? sourceOAuthConnectionUiState({
        bindings: props.bindings,
        connectionSlot: oauth2.connectionSlot,
        tokenScope: oauthCredentialTargetScope,
        scopeRanks,
        credentialScopeOptions,
        connections,
      })
    : null;
  const oauthRequestCredentials = serializeHttpCredentials(credentials);

  const handleSave = async () => {
    setSaving(true);
    setError(null);
    const config: {
      name?: string;
      endpoint?: string;
      auth?: GraphqlSourceAuthInput;
    } = {
      name: metadataDirty ? identity.name.trim() || undefined : undefined,
      endpoint: metadataDirty ? endpoint.trim() || undefined : undefined,
    };
    if (authDirty) {
      config.auth = authMode === "oauth2" ? { oauth2: {} } : { kind: "none" };
    }
    const exit = await doConfigure({
      params: { scopeId: displayScope },
      payload: {
        source: { id: props.sourceId, scope: sourceScope },
        scope: sourceScope,
        type: "graphql",
        config,
      },
      reactivityKeys: sourceWriteKeys,
    });

    if (Exit.isFailure(exit)) {
      setError("Failed to update source");
      setSaving(false);
      return;
    }

    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
      />

      {secretSlots.length > 0 && (
        <CardStack>
          <CardStackContent className="border-t-0">
            <CardStackEntry>
              <CardStackEntryContent>
                <CardStackEntryTitle>Request credentials</CardStackEntryTitle>
                <CardStackEntryDescription>
                  Headers and query parameters sent with every GraphQL request.
                </CardStackEntryDescription>
              </CardStackEntryContent>
            </CardStackEntry>
            <SecretCredentialSlotBindings
              slots={secretSlots}
              bindingScopes={secretBindingScopes}
              bindingRows={props.bindings}
              scopeRanks={scopeRanks}
              secrets={secretList}
              sourceId={props.sourceId}
              sourceName={identity.name}
              credentialScopeOptions={credentialScopeOptions}
              busyKey={busyKey}
              onSetSecretBinding={setSecretBinding}
              onClearBinding={clearBinding}
            />
          </CardStackContent>
        </CardStack>
      )}

      {/* 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 && oauthConnectionState && (
        <SourceOAuthConnectionControl
          popupName="graphql-oauth"
          pluginId="graphql"
          namespace={slugifyNamespace(props.initial.namespace) || "graphql"}
          fallbackNamespace="graphql"
          endpoint={endpoint.trim()}
          tokenScope={oauthCredentialTargetScope}
          onTokenScopeChange={setOAuthCredentialTargetScope}
          credentialScopeOptions={credentialScopeOptions}
          connectionId={oauthConnectionState.connectionId}
          sourceLabel={`${identity.name.trim() || props.initial.namespace || "GraphQL"} OAuth`}
          headers={oauthRequestCredentials.headers}
          queryParams={oauthRequestCredentials.queryParams}
          isConnected={oauthConnectionState.isConnected}
          buttonIsConnected={oauthConnectionState.buttonIsConnected}
          statusLabel={oauthConnectionState.statusLabel}
          onConnected={async (connectionId) => {
            await setConnectionBinding({
              params: { scopeId: oauthCredentialTargetScope },
              payload: {
                scope: oauthCredentialTargetScope,
                source: { id: props.sourceId, scope: sourceScope },
                slotKey: oauth2.connectionSlot,
                value: { kind: "connection", connectionId },
              },
              reactivityKeys: [...sourceWriteKeys, ...connectionWriteKeys],
            });
          }}
          signInLabel={oauthConnectionState.signInLabel}
        />
      )}

      {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 userScope = useUserScope();
  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(userScope, 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}
    />
  );
}