import { useState } from "react";
import { useAtomSet } from "@effect-atom/atom-react";

import { useScope } from "@executor/react/api/scope-context";
import { SecretHeaderAuthRow } from "@executor/react/plugins/secret-header-auth";
import { useSecretPickerSecrets } from "@executor/react/plugins/use-secret-picker-secrets";
import { Button } from "@executor/react/components/button";
import { Input } from "@executor/react/components/input";
import { Label } from "@executor/react/components/label";
import { Spinner } from "@executor/react/components/spinner";
import { addGraphqlSource } from "./atoms";
import type { HeaderValue } from "../sdk/types";

type HeaderEntry = {
  name: string;
  prefix?: string;
  presetKey?: string;
  secretId: string | null;
};

const initialHeader = (): HeaderEntry => ({
  name: "Authorization",
  prefix: "Bearer ",
  presetKey: "bearer",
  secretId: null,
});

export default function AddGraphqlSource(props: {
  onComplete: () => void;
  onCancel: () => void;
  initialUrl?: string;
}) {
  const [endpoint, setEndpoint] = useState(props.initialUrl ?? "");
  const [namespace, setNamespace] = useState("");
  const [headers, setHeaders] = useState<HeaderEntry[]>([initialHeader()]);
  const [adding, setAdding] = useState(false);
  const [addError, setAddError] = useState<string | null>(null);

  const scopeId = useScope();
  const doAdd = useAtomSet(addGraphqlSource, { mode: "promise" });
  const secretList = useSecretPickerSecrets();

  const headersValid = headers.every((header) => header.name.trim() && header.secretId);
  const canAdd = endpoint.trim().length > 0 && (headers.length === 0 || headersValid);

  const updateHeader = (
    index: number,
    update: Partial<{ name: string; prefix?: string; presetKey?: string; secretId: string | null }>,
  ) => {
    setHeaders((current) =>
      current.map((header, i) => (i === index ? { ...header, ...update } : header)),
    );
  };

  const removeHeader = (index: number) => {
    setHeaders((current) => current.filter((_, i) => i !== index));
  };

  const addHeader = () => {
    setHeaders((current) => [
      ...current,
      { name: "", prefix: undefined, presetKey: undefined, secretId: null },
    ]);
  };

  const handleAdd = async () => {
    setAdding(true);
    setAddError(null);
    try {
      const headerMap: Record<string, HeaderValue> = {};
      for (const header of headers) {
        const name = header.name.trim();
        if (name && header.secretId) {
          headerMap[name] = {
            secretId: header.secretId,
            ...(header.prefix ? { prefix: header.prefix } : {}),
          };
        }
      }

      await doAdd({
        path: { scopeId },
        payload: {
          endpoint: endpoint.trim(),
          namespace: namespace.trim() || undefined,
          ...(Object.keys(headerMap).length > 0 ? { headers: headerMap } : {}),
        },
      });
      props.onComplete();
    } catch (e) {
      setAddError(e instanceof Error ? e.message : "Failed to add source");
      setAdding(false);
    }
  };

  return (
    <div className="space-y-6">
      <h1 className="text-xl font-semibold text-foreground">Add GraphQL Source</h1>

      {/* Endpoint */}
      <section className="space-y-2">
        <Label>GraphQL Endpoint</Label>
        <Input
          value={endpoint}
          onChange={(e) => setEndpoint((e.target as HTMLInputElement).value)}
          placeholder="https://api.example.com/graphql"
          className="font-mono text-sm"
        />
        <p className="text-[12px] text-muted-foreground">
          The endpoint will be introspected to discover available queries and mutations.
        </p>
      </section>

      {/* Namespace */}
      <section className="space-y-2">
        <Label>
          Namespace <span className="text-muted-foreground font-normal">(optional)</span>
        </Label>
        <Input
          value={namespace}
          onChange={(e) => setNamespace((e.target as HTMLInputElement).value)}
          placeholder="my_api"
          className="font-mono text-sm"
        />
        <p className="text-[12px] text-muted-foreground">
          A prefix for the tool names. Derived from the endpoint hostname if not provided.
        </p>
      </section>

      {/* Authentication */}
      <section className="space-y-2.5">
        <div className="flex items-center justify-between gap-3">
          <div>
            <Label>
              Authentication <span className="text-muted-foreground font-normal">(optional)</span>
            </Label>
            <p className="mt-1 text-[12px] text-muted-foreground">
              Secret-backed headers sent with every request, including introspection.
            </p>
          </div>
          <Button
            type="button"
            variant="outline"
            size="sm"
            className="shrink-0"
            onClick={addHeader}
          >
            + Add header
          </Button>
        </div>

        {headers.length > 0 && (
          <div className="space-y-2">
            {headers.map((header, index) => (
              <SecretHeaderAuthRow
                key={index}
                name={header.name}
                prefix={header.prefix}
                presetKey={header.presetKey}
                secretId={header.secretId}
                onChange={(update) => updateHeader(index, update)}
                onSelectSecret={(secretId) => updateHeader(index, { secretId })}
                onRemove={() => removeHeader(index)}
                existingSecrets={secretList}
              />
            ))}
          </div>
        )}
      </section>

      {/* Error */}
      {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>
      )}

      {/* Actions */}
      <div className="flex items-center justify-between border-t border-border pt-4">
        <Button variant="ghost" onClick={props.onCancel} disabled={adding}>
          Cancel
        </Button>
        <Button onClick={handleAdd} disabled={!canAdd || adding}>
          {adding && <Spinner className="size-3.5" />}
          {adding ? "Adding..." : "Add source"}
        </Button>
      </div>
    </div>
  );
}