import { useAtomValue } from "@effect/atom-react";
import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
import * as Option from "effect/Option";

import { IntegrationSlug } from "@executor-js/sdk/shared";
import { decodeGraphqlIntegrationConfigOption } from "@executor-js/plugin-graphql";

import { graphqlIntegrationConfigAtom } from "./atoms";
import GraphqlAccountsPanel from "./GraphqlAccountsPanel";

// ---------------------------------------------------------------------------
// Edit form — v2: custom authentication methods and connections live in the
// shared accounts hub. Keep edit and accounts on the same component path so
// GraphQL gets the same "+ Custom method" behavior as OpenAPI.
// ---------------------------------------------------------------------------

export default function EditGraphqlSource(props: {
  readonly sourceId: string;
  readonly onSave: () => void;
}) {
  const slug = IntegrationSlug.make(props.sourceId);
  const configResult = useAtomValue(graphqlIntegrationConfigAtom(slug));
  const config = AsyncResult.isSuccess(configResult)
    ? Option.getOrNull(decodeGraphqlIntegrationConfigOption(configResult.value))
    : null;

  if (!AsyncResult.isSuccess(configResult) || !config) {
    return (
      <div className="space-y-3">
        <h1 className="text-xl font-semibold text-foreground">GraphQL Source</h1>
        <p className="text-sm text-muted-foreground">Loading configuration…</p>
      </div>
    );
  }

  return (
    <GraphqlAccountsPanel
      sourceId={props.sourceId}
      integrationName={config.name || String(slug)}
      accountHandoff={null}
    />
  );
}