import { useEffect, useMemo, useRef, useState } from "react";
import { useAtomValue, useAtomSet } from "@effect/atom-react";
import * as Exit from "effect/Exit";
import * as Option from "effect/Option";
import * as Schema from "effect/Schema";
import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
import { toast } from "sonner";
import {
  ToolAddress,
  type Connection,
  type ConnectionName,
  type IntegrationSlug,
} from "@executor-js/sdk/shared";

import { executeCode, toolSchemaAtom } from "../api/atoms";
import { trackEvent } from "../api/analytics";
import { Badge } from "./badge";
import { Button } from "./button";
import { Label } from "./label";
import { Textarea } from "./textarea";
import { CodeBlock } from "./code-block";
import { CardStack, CardStackHeader, CardStackContent } from "./card-stack";
import { NativeSelect, NativeSelectOption } from "./native-select";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
import {
  JsonSchemaForm,
  isRenderableObjectSchema,
  missingRequiredFields,
} from "./json-schema-form";
import { cn } from "../lib/utils";

// ---------------------------------------------------------------------------
// ToolRunPanel — invoke a single tool against a chosen connection (account) to
// verify the credentials actually work and see the result/error.
//
// Backend: `POST /executions` runs codemode source. We generate a one-liner
// that invokes the exact per-connection tool through the sandbox `tools` proxy:
//
//   return await tools["<int>.<owner>.<conn>.<tool>"](<args>);
//
// The `<owner>` segment is the SELECTED CONNECTION's own owner — never an
// ambient value — because the connection list merges both owners (the global
// owner toggle is retired). The tool name segment may itself contain dots (e.g.
// `aliases.deleteAlias`), so the address is built by string-joining the segments
// and passed to the proxy via bracket access — never split on dots.
// ---------------------------------------------------------------------------

/** Build the proxy address (no `tools.` prefix) for a tool against a specific
 *  connection, using the CONNECTION's own owner. Pure — unit-testable. */
export const toolProxyAddress = (input: {
  readonly integration: IntegrationSlug;
  readonly connection: Connection;
  readonly toolName: string;
}): string =>
  `${input.integration}.${input.connection.owner}.${input.connection.name}.${input.toolName}`;

export const shouldRenderConnectionPicker = (connections: readonly Connection[]): boolean =>
  connections.length > 1;

type RunResult =
  | {
      readonly kind: "completed";
      readonly text: string;
      readonly structured: unknown;
      readonly isError: boolean;
    }
  | { readonly kind: "paused"; readonly text: string };

/** Detect the `{ ok: false }` invocation-failure envelope — a failed-credential
 *  signal even when the HTTP execution itself "completed" without isError. */
const isFailedEnvelope = (structured: unknown): boolean =>
  typeof structured === "object" &&
  structured !== null &&
  "ok" in structured &&
  (structured as { ok: unknown }).ok === false;

/** Decode the args Textarea as JSON. Effect Schema is used at the JSON boundary
 *  (the codebase forbids raw `JSON.parse`); a malformed string yields `None`,
 *  which we surface as an inline validation error. */
const decodeArgsJson = Schema.decodeUnknownOption(Schema.UnknownFromJsonString);

const prettyJson = (value: unknown): string => {
  try {
    return JSON.stringify(value, null, 2);
  } catch {
    return String(value);
  }
};

export function ToolRunPanel(props: {
  /** Integration slug — the `<integration>` address segment. */
  readonly integration: IntegrationSlug;
  /** Bare tool name — the `<tool>` address segment (may contain dots). */
  readonly toolName: string;
  /** This integration's connections (accounts) across BOTH owners. Each is
   *  addressed under its OWN owner — there is no ambient owner. */
  readonly connections: readonly Connection[];
  /** Pre-select this connection (the account the selected tool belongs to in the
   *  grouped Tools tab). Falls back to the first connection when null/unmatched. */
  readonly initialConnectionName?: ConnectionName | string | null;
}) {
  const { integration, toolName, connections, initialConnectionName } = props;

  const [selectedConnection, setSelectedConnection] = useState<ConnectionName | null>(
    (initialConnectionName as ConnectionName | null) ?? connections[0]?.name ?? null,
  );
  const [argsJson, setArgsJson] = useState("{}");
  const [argsError, setArgsError] = useState<string | null>(null);
  const [argsMode, setArgsMode] = useState<"form" | "json">("json");
  const [running, setRunning] = useState(false);
  const [result, setResult] = useState<RunResult | null>(null);

  const doExecute = useAtomSet(executeCode, { mode: "promiseExit" });

  // Reset the picker + result when the connection set or the tool changes, so a
  // result never lingers against a stale tool/account. Prefer the tool's own
  // account (`initialConnectionName`) when it is present in the list.
  useEffect(() => {
    setSelectedConnection((current) => {
      if (
        initialConnectionName &&
        connections.some((c: Connection) => c.name === initialConnectionName)
      ) {
        return initialConnectionName as ConnectionName;
      }
      if (current && connections.some((c: Connection) => c.name === current)) return current;
      return connections[0]?.name ?? null;
    });
  }, [connections, initialConnectionName]);

  useEffect(() => {
    setResult(null);
    setArgsError(null);
  }, [toolName]);

  // The full `Connection` for the selected name — carries its OWN owner, which
  // is the `<owner>` address segment (never an ambient owner).
  const selectedConnectionObj = useMemo<Connection | null>(
    () => connections.find((c: Connection) => c.name === selectedConnection) ?? null,
    [connections, selectedConnection],
  );

  // Build the per-connection address `tools.<int>.<owner>.<conn>.<tool>` and the
  // proxy form (the same string minus the `tools.` root), using the SELECTED
  // CONNECTION's own owner.
  const addressNoPrefix = useMemo(
    () =>
      selectedConnectionObj
        ? toolProxyAddress({ integration, connection: selectedConnectionObj, toolName })
        : null,
    [integration, selectedConnectionObj, toolName],
  );

  const fullAddress = addressNoPrefix ? ToolAddress.make(`tools.${addressNoPrefix}`) : null;

  // The tool's schema view drives both the args-shape hint (TypeScript) and the
  // dynamic form (raw input JSON Schema + shared $defs).
  const schemaResult = useAtomValue(toolSchemaAtom(fullAddress ?? ToolAddress.make("")));
  const schemaView = AsyncResult.isSuccess(schemaResult) ? schemaResult.value : null;
  const inputSchema = schemaView?.inputSchema ?? null;
  const schemaDefinitions = schemaView?.schemaDefinitions;
  const schemaAvailable = isRenderableObjectSchema(inputSchema, schemaDefinitions);

  // The form is a controlled view over the single `argsJson` string. Decode it
  // (same Option-returning decode the run path uses); only a plain JSON object
  // can drive the form.
  const parsedArgs = useMemo<Record<string, unknown> | null>(() => {
    const decoded = decodeArgsJson(argsJson);
    if (Option.isNone(decoded)) return null;
    const v = decoded.value;
    return typeof v === "object" && v !== null && !Array.isArray(v)
      ? (v as Record<string, unknown>)
      : null;
  }, [argsJson]);

  // Required-arg gate: Run is only available once every `required` top-level
  // field has a value. With no renderable schema we can't know what's required,
  // so we don't block.
  const requiredMissing = useMemo<readonly string[]>(
    () =>
      schemaAvailable
        ? missingRequiredFields(inputSchema, schemaDefinitions, parsedArgs ?? {})
        : [],
    [schemaAvailable, inputSchema, schemaDefinitions, parsedArgs],
  );

  // Default to the form the first time a renderable schema arrives with a JSON
  // object in the args. A ref guard makes this fire exactly once, so a later
  // manual tab choice is respected even as `parsedArgs` keeps changing.
  const autoSelectedFormRef = useRef(false);
  useEffect(() => {
    if (autoSelectedFormRef.current) return;
    if (schemaAvailable && parsedArgs !== null) {
      autoSelectedFormRef.current = true;
      setArgsMode("form");
    }
  }, [schemaAvailable, parsedArgs]);

  // Form edits stringify straight back into the same `argsJson` state — no
  // second copy of state, so the JSON tab always shows the live form value.
  const handleFormChange = (next: Record<string, unknown>): void => {
    setArgsJson(JSON.stringify(next, null, 2));
    setArgsError(null);
  };

  const handleRun = async () => {
    if (!addressNoPrefix) return;

    const decoded = decodeArgsJson(argsJson);
    if (Option.isNone(decoded)) {
      setArgsError("Invalid JSON — enter a valid JSON object of arguments.");
      return;
    }
    const parsed = decoded.value;
    setArgsError(null);
    setRunning(true);
    setResult(null);

    // Read-only invoke: pass the validated args through as JSON. Empty
    // `reactivityKeys` — invoking a tool doesn't mutate `tools.list`.
    // `autoApprove` because the operator clicked Run: that IS the approval, so
    // an approval-gated tool should run here instead of dead-ending on a pause.
    const code = `return await tools[${JSON.stringify(addressNoPrefix)}](${JSON.stringify(parsed)});`;
    const exit = await doExecute({ payload: { code, autoApprove: true }, reactivityKeys: [] });
    setRunning(false);

    if (Exit.isFailure(exit)) {
      trackEvent("tool_run_submitted", {
        integration_slug: integration,
        tool_name: toolName,
        args_mode: argsMode,
        result: "failed",
      });
      toast.error("Failed to run tool");
      return;
    }

    const value = exit.value;
    if (value.status === "paused") {
      trackEvent("tool_run_submitted", {
        integration_slug: integration,
        tool_name: toolName,
        args_mode: argsMode,
        result: "paused",
      });
      setResult({ kind: "paused", text: value.text });
      return;
    }
    trackEvent("tool_run_submitted", {
      integration_slug: integration,
      tool_name: toolName,
      args_mode: argsMode,
      result: "completed",
      ...(value.isError ? { is_error: true } : {}),
    });
    setResult({
      kind: "completed",
      text: value.text,
      structured: value.structured,
      isError: value.isError,
    });
  };

  if (connections.length === 0) {
    return <p className="text-sm text-muted-foreground">Add a connection to test tools.</p>;
  }
  const renderConnectionPicker = shouldRenderConnectionPicker(connections);

  return (
    <div className="space-y-4">
      <CardStack>
        <CardStackContent className="space-y-4 px-4 py-4">
          {renderConnectionPicker && (
            <div className="space-y-1.5">
              <Label htmlFor="tool-run-connection">Connection</Label>
              <NativeSelect
                id="tool-run-connection"
                className="w-full"
                value={selectedConnection ?? ""}
                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
                  setSelectedConnection(e.target.value as ConnectionName)
                }
                disabled={running}
              >
                {connections.map((connection: Connection) => (
                  <NativeSelectOption key={connection.name} value={connection.name}>
                    {connection.identityLabel || connection.name}
                  </NativeSelectOption>
                ))}
              </NativeSelect>
              <p className="text-xs text-muted-foreground">
                Pick the account whose credentials you want to verify.
              </p>
            </div>
          )}

          {/* Arguments editor — dynamic form built from the input JSON Schema,
              with a Raw JSON escape hatch. Both views share the `argsJson`
              string as the single source of truth. */}
          <div className="space-y-1.5">
            <Tabs
              value={argsMode}
              onValueChange={(v: string) => setArgsMode(v === "form" ? "form" : "json")}
            >
              <TabsList variant="line" className="w-full justify-start border-b">
                <TabsTrigger value="form" disabled={!schemaAvailable || parsedArgs === null}>
                  Form
                </TabsTrigger>
                <TabsTrigger value="json">Raw JSON</TabsTrigger>
              </TabsList>

              <TabsContent value="form" className="space-y-3 pt-3">
                {schemaAvailable && parsedArgs !== null ? (
                  <JsonSchemaForm
                    schema={inputSchema}
                    definitions={schemaDefinitions}
                    value={parsedArgs}
                    onChange={handleFormChange}
                    disabled={running}
                  />
                ) : (
                  <p className="text-xs text-muted-foreground">
                    No schema available — use Raw JSON to enter arguments.
                  </p>
                )}
              </TabsContent>

              <TabsContent value="json" className="space-y-1.5 pt-3">
                <Textarea
                  id="tool-run-args"
                  className="font-mono text-xs"
                  rows={5}
                  spellCheck={false}
                  value={argsJson}
                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
                    setArgsJson(e.target.value)
                  }
                  disabled={running}
                  aria-invalid={argsError != null}
                />
                {argsError && <p className="text-xs text-destructive">{argsError}</p>}
              </TabsContent>
            </Tabs>
          </div>

          <div className="flex items-center justify-between gap-3">
            {requiredMissing.length > 0 ? (
              <p className="text-xs text-muted-foreground">
                Fill required:{" "}
                <span className="font-mono text-foreground/80">{requiredMissing.join(", ")}</span>
              </p>
            ) : (
              <span aria-hidden />
            )}
            <Button
              size="sm"
              onClick={() => void handleRun()}
              disabled={running || requiredMissing.length > 0}
            >
              {running ? "Running..." : "Run"}
            </Button>
          </div>
        </CardStackContent>
      </CardStack>

      {result && <ToolRunResult result={result} />}
    </div>
  );
}

function ToolRunResult(props: { readonly result: RunResult }) {
  const { result } = props;

  if (result.kind === "paused") {
    return (
      <CardStack>
        <CardStackHeader>Result</CardStackHeader>
        <CardStackContent>
          <p className="px-4 py-3 text-sm text-muted-foreground">
            This tool requires approval (a policy gates it) — adjust the policy to run it directly.
          </p>
        </CardStackContent>
      </CardStack>
    );
  }

  const failed = result.isError || isFailedEnvelope(result.structured);
  const hasStructured = result.structured !== undefined;

  return (
    <CardStack className={cn(failed ? "border-destructive/40" : undefined)}>
      <CardStackHeader>
        <div className="flex items-center gap-2">
          <span>Result</span>
          <Badge variant={failed ? "destructive" : "secondary"}>
            {failed ? "Error" : "Success"}
          </Badge>
        </div>
      </CardStackHeader>
      <CardStackContent className="space-y-3 px-4 py-4">
        {failed && (
          <p className="text-xs text-destructive">
            The tool returned an error — the credentials may be invalid or lack access.
          </p>
        )}
        {hasStructured ? (
          <CodeBlock
            code={prettyJson(result.structured)}
            lang="json"
            title="Structured"
            className={cn(failed ? "border-destructive/40" : undefined)}
          />
        ) : null}
        {result.text && result.text.length > 0 && (
          <div className="space-y-1">
            <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
              Text
            </p>
            <pre className="max-h-48 overflow-auto rounded-md border border-border bg-card/60 p-3 font-mono text-xs whitespace-pre-wrap break-words text-foreground/80">
              {result.text}
            </pre>
          </div>
        )}
      </CardStackContent>
    </CardStack>
  );
}