import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useAtomValue, useAtomSet } from "@effect/atom-react";
import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
import * as Exit from "effect/Exit";

import { IntegrationSlug } from "@executor-js/sdk/shared";
import type { EditSheetApplyResult, EditSheetSectionProps } from "@executor-js/sdk/client";
import { apiKeyMethodLabel, type AuthPlacement } from "@executor-js/sdk/http-auth";
import { integrationWriteKeys } from "@executor-js/react/api/reactivity-keys";
import {
  AuthMethodListEditor,
  useAuthMethodList,
  type AuthMethodRow,
  type AuthMethodSeed,
} from "@executor-js/react/components/auth-method-list-editor";
import {
  CardStack,
  CardStackContent,
  CardStackEntryField,
} from "@executor-js/react/components/card-stack";
import { Input } from "@executor-js/react/components/input";
import { Textarea } from "@executor-js/react/components/textarea";
import { errorMessageFromExit, FormErrorAlert } from "@executor-js/react/lib/integration-add";

import { configureMcpAuth, configureMcpServer, mcpServerAtom } from "./atoms";
import type {
  McpAuthMethod,
  McpCanonicalAuthMethodInput,
  McpIntegrationConfig,
} from "../sdk/types";
import {
  editorValueFromMcpAuthMethod,
  mcpAuthMethodInputFromEditorValue,
  mcpWireAuthInput,
} from "./auth-method-config";
import { formatStdioArgs, formatStdioEnv, parseStdioArgs, parseStdioEnv } from "./stdio-fields";

type McpServer = {
  readonly slug: IntegrationSlug;
  readonly description: string;
  readonly kind: string;
  readonly canRemove: boolean;
  readonly canRefresh: boolean;
  readonly config: McpIntegrationConfig;
};

type McpRemoteConfig = Extract<McpIntegrationConfig, { transport: "remote" }>;

const methodSeedLabel = (method: McpAuthMethod): string => {
  if (method.kind === "oauth2") return "OAuth";
  if (method.kind === "apikey") return apiKeyMethodLabel(method);
  return "No authentication";
};

const samePlacements = (
  a: readonly AuthPlacement[] | undefined,
  b: readonly AuthPlacement[] | undefined,
): boolean => {
  const left = a ?? [];
  const right = b ?? [];
  if (left.length !== right.length) return false;
  return left.every((placement: AuthPlacement, index: number) => {
    const other = right[index];
    return (
      other !== undefined &&
      placement.carrier === other.carrier &&
      placement.name === other.name &&
      (placement.prefix ?? "") === (other.prefix ?? "") &&
      (placement.variable ?? "") === (other.variable ?? "") &&
      (placement.literal ?? null) === (other.literal ?? null)
    );
  });
};

// ---------------------------------------------------------------------------
// Remote edit — v2: the integration's endpoint is part of its identity
// (opaque-to-core config); the editable surface is the declared auth-method
// LIST, through the same shared editor as the add flow. Accounts (credentials)
// are managed from the integration page's accounts hub. Rendered inside the
// integration Edit sheet (plugin `editSheet` slot).
// ---------------------------------------------------------------------------

function RemoteEdit(props: {
  server: McpServer & { config: McpRemoteConfig };
  onPendingChange?: EditSheetSectionProps["onPendingChange"];
}) {
  const { server } = props;
  const doConfigureAuth = useAtomSet(configureMcpAuth, { mode: "promiseExit" });

  const seeds = useMemo<readonly AuthMethodSeed[]>(
    () =>
      server.config.authenticationTemplate.map(
        (method: McpAuthMethod): AuthMethodSeed => ({
          value: editorValueFromMcpAuthMethod(method),
          slug: method.slug,
          label: methodSeedLabel(method),
        }),
      ),
    [server.config.authenticationTemplate],
  );
  const list = useAuthMethodList(seeds);

  const [error, setError] = useState<string | null>(null);

  // The edited methods, slugs preserved for seeded rows so existing
  // connections (bound by template slug) stay attached. New rows omit the
  // slug — the backend assigns kind-based ones.
  const editedMethods = useMemo<readonly McpCanonicalAuthMethodInput[]>(
    () =>
      list.rows.map((row: AuthMethodRow): McpCanonicalAuthMethodInput => {
        const input = mcpAuthMethodInputFromEditorValue(row.value);
        return row.seedSlug !== undefined ? { ...input, slug: row.seedSlug } : input;
      }),
    [list.rows],
  );

  const methodsChanged = useMemo(() => {
    const stored = server.config.authenticationTemplate;
    if (editedMethods.length !== stored.length) return true;
    return editedMethods.some((method: McpCanonicalAuthMethodInput, index: number) => {
      const current = stored[index];
      if (!current) return true;
      if ((method.slug ?? "") !== current.slug) return true;
      if (method.kind !== current.kind) return true;
      if (method.kind === "apikey" && current.kind === "apikey") {
        return !samePlacements(method.placements, current.placements);
      }
      return false;
    });
  }, [editedMethods, server.config.authenticationTemplate]);

  // Staged apply, run by the sheet's Save when the method list changed.
  const applyStaged = useCallback(async (): Promise<EditSheetApplyResult> => {
    setError(null);
    const exit = await doConfigureAuth({
      params: { slug: server.slug },
      payload: {
        authenticationTemplate:
          editedMethods.length > 0
            ? editedMethods.map(mcpWireAuthInput)
            : [{ kind: "none" as const }],
        mode: "replace",
      },
      reactivityKeys: integrationWriteKeys,
    });
    if (Exit.isFailure(exit)) {
      setError("Failed to update authentication methods");
      return { ok: false };
    }
    return { ok: true, summary: "Authentication methods updated." };
  }, [doConfigureAuth, editedMethods, server.slug]);

  const onPendingChangeRef = useRef(props.onPendingChange);
  onPendingChangeRef.current = props.onPendingChange;
  useEffect(() => {
    onPendingChangeRef.current?.(methodsChanged ? applyStaged : null);
    return () => onPendingChangeRef.current?.(null);
  }, [methodsChanged, applyStaged]);

  return (
    <div className="space-y-4 border-t border-border/60 pt-5">
      <div className="space-y-1">
        <p className="text-sm font-medium text-foreground">Authentication methods</p>
        <p className="text-xs text-muted-foreground">
          Changes apply when you save. The endpoint (
          <span className="font-mono">{server.config.endpoint}</span>) is part of the server's
          identity — remove and re-add to change it.
        </p>
      </div>

      <AuthMethodListEditor
        list={list}
        oauthMetadata="discovered"
        emptyHint="No methods declared. Add one, or save to mark this server as open (no authentication)."
        footerHint="Connections pick one of these methods. Removing a method detaches connections created against it."
      />

      {error && <FormErrorAlert message={error} />}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Stdio edit — the command, its arguments, the working directory, and the
// DECLARED static environment. Secret env vars are not edited here: a stdio
// server declares them as a `stdio_env` auth method and their values live on
// the connection, managed from the integration page's accounts hub. Changes
// are staged and applied by the sheet's Save, like the remote editor above.
// ---------------------------------------------------------------------------

type McpStdioConfig = Extract<McpIntegrationConfig, { transport: "stdio" }>;

/** Order-independent identity for a declared env map, so re-ordering the lines
 *  in the field is not reported as a change. */
const envIdentity = (env: Readonly<Record<string, string>> | undefined): string =>
  Object.entries(env ?? {})
    .sort(([a], [b]) => a.localeCompare(b))
    .map(([key, value]) => `${key}=${value}`)
    .join("\n");

function StdioEdit(props: {
  server: McpServer & { config: McpStdioConfig };
  onPendingChange?: EditSheetSectionProps["onPendingChange"];
}) {
  const { server } = props;
  const doConfigure = useAtomSet(configureMcpServer, { mode: "promiseExit" });

  const [command, setCommand] = useState(server.config.command);
  const [args, setArgs] = useState(() => formatStdioArgs(server.config.args));
  const [cwd, setCwd] = useState(server.config.cwd ?? "");
  const [env, setEnv] = useState(() => formatStdioEnv(server.config.env));
  const [error, setError] = useState<string | null>(null);

  // The edited config. `configureServer` replaces the whole blob, so anything
  // this form does not surface (`versionNegotiation`, `authenticationTemplate`)
  // is carried through untouched. Empty optional fields are omitted rather than
  // written as `undefined`.
  const edited = useMemo<McpStdioConfig>(() => {
    const { args: _args, cwd: _cwd, env: _env, ...rest } = server.config;
    const nextArgs = parseStdioArgs(args);
    const nextEnv = parseStdioEnv(env);
    const nextCwd = cwd.trim();
    return {
      ...rest,
      command: command.trim(),
      ...(nextArgs.length > 0 ? { args: nextArgs } : {}),
      ...(Object.keys(nextEnv).length > 0 ? { env: nextEnv } : {}),
      ...(nextCwd !== "" ? { cwd: nextCwd } : {}),
    };
  }, [args, command, cwd, env, server.config]);

  const changed =
    edited.command !== server.config.command ||
    formatStdioArgs(edited.args) !== formatStdioArgs(server.config.args) ||
    (edited.cwd ?? "") !== (server.config.cwd ?? "") ||
    envIdentity(edited.env) !== envIdentity(server.config.env);

  // Staged apply, run by the sheet's Save. Persisting the config re-runs
  // discovery on every connection, so the tool catalog matches the new command.
  const applyStaged = useCallback(async (): Promise<EditSheetApplyResult> => {
    setError(null);
    if (edited.command === "") {
      setError("A command is required.");
      return { ok: false };
    }
    const exit = await doConfigure({
      params: { slug: server.slug },
      payload: { config: edited },
      reactivityKeys: integrationWriteKeys,
    });
    if (Exit.isFailure(exit)) {
      setError(errorMessageFromExit(exit, "Failed to update the server command"));
      return { ok: false };
    }
    return { ok: true, summary: "Server command updated." };
  }, [doConfigure, edited, server.slug]);

  const onPendingChangeRef = useRef(props.onPendingChange);
  onPendingChangeRef.current = props.onPendingChange;
  useEffect(() => {
    onPendingChangeRef.current?.(changed ? applyStaged : null);
    return () => onPendingChangeRef.current?.(null);
  }, [changed, applyStaged]);

  return (
    <div className="space-y-4 border-t border-border/60 pt-5">
      <div className="space-y-1">
        <p className="text-sm font-medium text-foreground">Server command</p>
        <p className="text-xs text-muted-foreground">
          Changes apply when you save. The server's tools are then rediscovered with the new
          command.
        </p>
      </div>

      <CardStack>
        <CardStackContent className="border-t-0">
          <CardStackEntryField
            label="Command"
            description="- The executable to run (e.g. npx, uvx, node)."
          >
            <Input
              value={command}
              aria-label="Command"
              onChange={(e) => setCommand((e.target as HTMLInputElement).value)}
              placeholder="npx"
              className="font-mono text-sm"
            />
          </CardStackEntryField>

          <CardStackEntryField
            label="Arguments"
            description="- Space-separated arguments passed to the command."
          >
            <Input
              value={args}
              aria-label="Arguments"
              onChange={(e) => setArgs((e.target as HTMLInputElement).value)}
              placeholder="-y chrome-devtools-mcp@latest"
              className="font-mono text-sm"
            />
          </CardStackEntryField>

          <CardStackEntryField
            label="Working directory"
            description="- Optional. Where the command runs."
          >
            <Input
              value={cwd}
              aria-label="Working directory"
              onChange={(e) => setCwd((e.target as HTMLInputElement).value)}
              placeholder="/path/to/server"
              className="font-mono text-sm"
            />
          </CardStackEntryField>

          <CardStackEntryField
            label="Environment variables"
            description="- One KEY=value per line. The server receives these plus a small base set; it does not inherit executor's environment."
          >
            <Textarea
              value={env}
              aria-label="Environment variables"
              onChange={(e) => setEnv((e.target as HTMLTextAreaElement).value)}
              placeholder={"LOG_LEVEL=debug\nREGION=eu-west-1"}
              className="font-mono text-sm"
            />
          </CardStackEntryField>
        </CardStackContent>
      </CardStack>

      <p className="text-xs text-muted-foreground">
        Secret values do not belong here. A server that needs an API key declares its variable name
        as an authentication method, and the value is entered per connection from the accounts
        panel.
      </p>

      {error && <FormErrorAlert message={error} />}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Main component — the mcp plugin's section of the integration Edit sheet.
// `integrationId` is the integration slug (v2).
// ---------------------------------------------------------------------------

export default function EditMcpIntegration({
  integrationId,
  onPendingChange,
}: EditSheetSectionProps) {
  const slug = IntegrationSlug.make(integrationId);
  const serverResult = useAtomValue(mcpServerAtom(slug));
  const server = AsyncResult.isSuccess(serverResult) ? serverResult.value : null;

  if (!AsyncResult.isSuccess(serverResult) || server === null) return null;

  if (server.config.transport === "stdio") {
    return (
      <StdioEdit
        server={server as McpServer & { config: McpStdioConfig }}
        {...(onPendingChange ? { onPendingChange } : {})}
      />
    );
  }

  return (
    <RemoteEdit
      server={server as McpServer & { config: McpRemoteConfig }}
      {...(onPendingChange ? { onPendingChange } : {})}
    />
  );
}