import { useCallback, useMemo, useState } from "react";
import { useAtomSet, useAtomValue } from "@effect/atom-react";
import { Link } from "@tanstack/react-router";
import * as Exit from "effect/Exit";
import * as Option from "effect/Option";
import * as Predicate from "effect/Predicate";
import * as Schema from "effect/Schema";
import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";

import { integrationsOptimisticAtom } from "@executor-js/react/api/atoms";
import { integrationWriteKeys } from "@executor-js/react/api/reactivity-keys";
import {
  integrationDisplayNameFromUrl,
  slugifyNamespace,
  useIntegrationIdentity,
} from "@executor-js/react/plugins/integration-identity";
import { Button } from "@executor-js/react/components/button";
import {
  AuthTemplateEditor,
  type AuthTemplateEditorValue,
} from "@executor-js/react/components/auth-template-editor";
import { FieldLabel } from "@executor-js/react/components/field";
import { FloatActions } from "@executor-js/react/components/float-actions";
import { Spinner } from "@executor-js/react/components/spinner";

import { addGraphqlIntegrationOptimistic } from "./atoms";
import { GraphqlSourceFields } from "./GraphqlSourceFields";
import { graphqlTemplatesFromPlacements } from "./auth-method-config";

const ErrorMessage = Schema.Struct({ message: Schema.String });
const decodeErrorMessage = Schema.decodeUnknownOption(ErrorMessage);

const errorMessageFromExit = (exit: Exit.Exit<unknown, unknown>, fallback: string): string =>
  Option.match(Option.flatMap(Exit.findErrorOption(exit), decodeErrorMessage), {
    onNone: () => fallback,
    onSome: ({ message }) => message,
  });

const isIntegrationAlreadyExistsExit = (exit: Exit.Exit<unknown, unknown>): boolean =>
  Option.match(Exit.findErrorOption(exit), {
    onNone: () => false,
    onSome: Predicate.isTagged("IntegrationAlreadyExistsError"),
  });

const integrationExistsMessage = (slug: string): string =>
  `An integration named "${slug}" already exists. To add more authentication, update your existing integration.`;

// v2 GraphQL add flow (post-redesign): register the integration (introspects
// the endpoint and declares an apiKey auth template when the user configures a
// header), then route to the integration's detail hub. Connection creation is
// no longer part of the add flow — accounts are added from the hub (P6: add
// without auth, connect later). Auth is declared through the shared
// `AuthTemplateEditor` (GraphQL stays header/query apiKey — OAuth is hidden).

export default function AddGraphqlSource(props: {
  onComplete: (slug?: string) => void;
  onCancel: () => void;
  initialUrl?: string;
}) {
  const [endpoint, setEndpoint] = useState(props.initialUrl ?? "");
  const identity = useIntegrationIdentity({
    fallbackName: integrationDisplayNameFromUrl(endpoint, "GraphQL") ?? "",
  });
  const [authValue, setAuthValue] = useState<AuthTemplateEditorValue>({ kind: "none" });
  const [adding, setAdding] = useState(false);
  const [addError, setAddError] = useState<string | null>(null);

  const doAddIntegration = useAtomSet(addGraphqlIntegrationOptimistic, {
    mode: "promiseExit",
  });

  // An apiKey method needs at least one named placement; `none` is always valid.
  const apiKeyComplete =
    authValue.kind !== "apikey" ||
    authValue.placements.some((placement) => placement.name.trim().length > 0);

  const resolvedSlug = useMemo(
    () =>
      slugifyNamespace(identity.namespace) ||
      slugifyNamespace(integrationDisplayNameFromUrl(endpoint.trim(), "GraphQL") ?? "") ||
      "graphql",
    [endpoint, identity.namespace],
  );

  // Pre-empt the API's `IntegrationAlreadyExistsError`: adding an integration
  // whose slug already exists clobbers the existing one's connections/policies,
  // so the API blocks it. Surface that here from the tenant-scoped catalog list.
  const integrationsResult = useAtomValue(integrationsOptimisticAtom);
  const slugAlreadyExists = useMemo(
    () =>
      AsyncResult.isSuccess(integrationsResult) &&
      integrationsResult.value.some((integration) => String(integration.slug) === resolvedSlug),
    [integrationsResult, resolvedSlug],
  );

  const canAdd = endpoint.trim().length > 0 && apiKeyComplete && !adding && !slugAlreadyExists;

  const sourceIdentity = useCallback(() => {
    const trimmedEndpoint = endpoint.trim();
    const slug = resolvedSlug;
    const displayName =
      identity.name.trim() || integrationDisplayNameFromUrl(trimmedEndpoint, "GraphQL") || slug;
    return { trimmedEndpoint, slug, displayName };
  }, [endpoint, identity.name, resolvedSlug]);

  const handleAdd = async (): Promise<void> => {
    setAdding(true);
    setAddError(null);
    const { trimmedEndpoint, slug, displayName } = sourceIdentity();

    const authenticationTemplate =
      authValue.kind === "apikey" ? graphqlTemplatesFromPlacements(authValue.placements) : [];

    const integrationExit = await doAddIntegration({
      payload: {
        endpoint: trimmedEndpoint,
        slug,
        name: displayName,
        ...(authenticationTemplate.length > 0 ? { authenticationTemplate } : {}),
      },
      reactivityKeys: integrationWriteKeys,
    });
    if (Exit.isFailure(integrationExit)) {
      setAddError(
        isIntegrationAlreadyExistsExit(integrationExit)
          ? integrationExistsMessage(slug)
          : errorMessageFromExit(integrationExit, "Failed to add source"),
      );
      setAdding(false);
      return;
    }
    const registeredSlug = integrationExit.value.slug;

    props.onComplete(String(registeredSlug));
  };

  return (
    <div className="flex flex-1 flex-col gap-6">
      <h1 className="text-xl font-semibold text-foreground">Add GraphQL Source</h1>

      <GraphqlSourceFields endpoint={endpoint} onEndpointChange={setEndpoint} identity={identity} />

      <section className="space-y-2.5">
        <FieldLabel>How does this API authenticate?</FieldLabel>
        <AuthTemplateEditor
          value={authValue}
          onChange={setAuthValue}
          allowedKinds={["none", "apikey"]}
        />
      </section>

      {slugAlreadyExists && !adding && (
        <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2">
          <p className="text-[12px] text-destructive">
            An integration named &quot;{resolvedSlug}&quot; already exists. To add more
            authentication, update your existing integration.{" "}
            <Link
              to="/integrations/$namespace"
              params={{ namespace: resolvedSlug }}
              className="font-medium underline underline-offset-2"
            >
              Open it
            </Link>
          </p>
        </div>
      )}

      {addError && (
        <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2">
          <p className="text-[12px] text-destructive">{addError}</p>
        </div>
      )}

      <FloatActions>
        <Button variant="ghost" onClick={() => props.onCancel()} disabled={adding}>
          Cancel
        </Button>
        <Button onClick={() => void handleAdd()} disabled={!canAdd}>
          {adding && <Spinner className="size-3.5" />}
          {adding ? "Adding..." : "Add source"}
        </Button>
      </FloatActions>
    </div>
  );
}