import { Suspense, useCallback, useEffect, useRef, useState, type ComponentType } from "react";import { useAtomSet } from "@effect/atom-react";import * as Exit from "effect/Exit";import { type Connection, type IntegrationSlug } from "@executor-js/sdk/shared";import type { EditSheetApplyResult, EditSheetSectionProps } from "@executor-js/sdk/client";import { toast } from "sonner"; import { updateConnection, updateIntegration } from "../api/atoms";import { connectionWriteKeys, integrationWriteKeys } from "../api/reactivity-keys";import { trackEvent } from "../api/analytics";import { messageFromExit } from "../api/error-reporting";import { Button } from "./button";import { Input } from "./input";import { Label } from "./label";import {  Sheet,  SheetContent,  SheetDescription,  SheetFooter,  SheetHeader,  SheetTitle,} from "./sheet";import { Textarea } from "./textarea"; // ---------------------------------------------------------------------------// Metadata edit sheets — the user-curated, AGENT-VISIBLE metadata for an// integration and for a connection. The point of the sheet (vs. an inline// input) is the preview: it shows the record an agent reads, so editing a// field is editing what the model sees.// --------------------------------------------------------------------------- /** The `connections.list` item an agent reads for this connection, reduced to *  the fields the sheet edits. The callable name is fixed at connect time and *  is not editable here; only the label and description are. */const connectionListItemPreview = (input: {  readonly name: string;  readonly identityLabel: string;  readonly description: string;}): string => {  const fields = [    `name: ${JSON.stringify(input.name)}`,    ...(input.identityLabel ? [`identityLabel: ${JSON.stringify(input.identityLabel)}`] : []),    ...(input.description ? [`description: ${JSON.stringify(input.description)}`] : []),  ];  return `{ ${fields.join(", ")}, ... }`;}; function AgentPreview(props: { readonly label: string; readonly line: string }) {  return (    <div className="space-y-1.5">      <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">        {props.label}      </p>      <pre className="overflow-x-auto rounded-md border border-border/60 bg-muted/40 px-3 py-2 font-mono text-xs leading-relaxed whitespace-pre-wrap text-foreground">        {props.line}      </pre>    </div>  );} export function ConnectionEditSheet(props: {  readonly connection: Connection | null;  readonly onOpenChange: (open: boolean) => void;}) {  const { connection } = props;  const doUpdate = useAtomSet(updateConnection, { mode: "promiseExit" });  const [description, setDescription] = useState("");  const [identityLabel, setIdentityLabel] = useState("");  const [saving, setSaving] = useState(false);   useEffect(() => {    setDescription(connection?.description ?? "");    setIdentityLabel(connection?.identityLabel ?? "");  }, [connection]);   const handleSave = async () => {    if (!connection) return;    setSaving(true);    const exit = await doUpdate({      params: {        owner: connection.owner,        integration: connection.integration,        name: connection.name,      },      payload: {        description: description.trim().length > 0 ? description.trim() : null,        identityLabel: identityLabel.trim().length > 0 ? identityLabel.trim() : null,      },      reactivityKeys: connectionWriteKeys,    });    setSaving(false);    if (Exit.isFailure(exit)) {      toast.error(messageFromExit(exit, "Failed to update connection"));      return;    }    props.onOpenChange(false);  };   const previewLine = connection    ? connectionListItemPreview({        name: String(connection.name),        identityLabel: identityLabel.trim(),        description: description.trim(),      })    : "";   return (    <Sheet open={connection !== null} onOpenChange={props.onOpenChange}>      <SheetContent side="right">        <SheetHeader>          <SheetTitle>Edit connection</SheetTitle>          <SheetDescription>            Both fields are agent-visible: agents read them from <code>connections.list</code> when            they pick an account, so this is the place to say which account this is and what it is            for.          </SheetDescription>        </SheetHeader>         <div className="flex-1 space-y-5 overflow-y-auto px-4">          <div className="space-y-1.5">            <Label htmlFor="connection-description">Description</Label>            <Textarea              id="connection-description"              value={description}              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>                setDescription(e.target.value)              }              placeholder="e.g. Production CRM — reads only; use the sandbox connection for writes."              disabled={saving}            />          </div>           <div className="space-y-1.5">            <Label htmlFor="connection-label">Account label</Label>            <Input              id="connection-label"              value={identityLabel}              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>                setIdentityLabel(e.target.value)              }              placeholder="Which account this credential belongs to"              disabled={saving}            />            <p className="text-xs text-muted-foreground">              Shown in the accounts list instead of the connection name. Agents see it too, but the              callable name stays as it was at connect time.            </p>          </div>           {connection ? <AgentPreview label="What agents see" line={previewLine} /> : null}        </div>         <SheetFooter>          <Button onClick={() => void handleSave()} disabled={saving || !connection}>            {saving ? "Saving..." : "Save"}          </Button>          <Button variant="outline" onClick={() => props.onOpenChange(false)} disabled={saving}>            Cancel          </Button>        </SheetFooter>      </SheetContent>    </Sheet>  );} export function IntegrationEditSheet(props: {  readonly slug: IntegrationSlug;  readonly open: boolean;  /** The integration's display name. */  readonly name: string;  /** The integration's agent-visible description. */  readonly description: string;  /** Plugin-owned configuration (e.g. OpenAPI spec update) rendered below the   *  shared fields — the same surface the plugin's add flow configures. The   *  section STAGES its change and reports an apply thunk via   *  `onPendingChange`; the sheet's one Save runs it after the metadata   *  update. */  readonly pluginSection?: ComponentType<EditSheetSectionProps>;  readonly onOpenChange: (open: boolean) => void;}) {  const doUpdate = useAtomSet(updateIntegration, { mode: "promiseExit" });  const [nameDraft, setNameDraft] = useState(props.name);  const [descriptionDraft, setDescriptionDraft] = useState(props.description);  const [saving, setSaving] = useState(false);  // The plugin section's staged change — a thunk that applies it and resolves  // to a summary line. Held in a ref: it changes per keystroke in the section  // and is only read at Save.  const pendingPluginApply = useRef<(() => Promise<EditSheetApplyResult>) | null>(null);  const handlePendingChange = useCallback((apply: (() => Promise<EditSheetApplyResult>) | null) => {    pendingPluginApply.current = apply;  }, []);   useEffect(() => {    if (props.open) {      setNameDraft(props.name);      setDescriptionDraft(props.description);    }  }, [props.open, props.name, props.description]);   const handleSave = async () => {    const nextName = nameDraft.trim();    if (nextName.length === 0) return;    setSaving(true);    const exit = await doUpdate({      params: { slug: props.slug },      payload: { name: nextName, description: descriptionDraft.trim() },      reactivityKeys: integrationWriteKeys,    });    trackEvent("integration_renamed", {      integration_slug: String(props.slug),      success: Exit.isSuccess(exit),    });    if (Exit.isFailure(exit)) {      setSaving(false);      toast.error(messageFromExit(exit, "Failed to update integration"));      return;    }    // Then the plugin section's staged change (e.g. the spec update). On    // failure the section shows its own error inline — keep the sheet open.    const apply = pendingPluginApply.current;    if (apply) {      const result = await apply();      if (!result.ok) {        setSaving(false);        return;      }      if (result.summary) toast.success(result.summary);    }    setSaving(false);    props.onOpenChange(false);  };   const slug = String(props.slug);  const preview = descriptionDraft.trim().split("\n", 1)[0];   return (    <Sheet open={props.open} onOpenChange={props.onOpenChange}>      <SheetContent side="right">        <SheetHeader>          <SheetTitle>Edit integration</SheetTitle>          <SheetDescription>            The name is what people see; the description is agent-visible context — agents read it            when browsing integrations and as fallback context on connections without one of their            own.          </SheetDescription>        </SheetHeader>         <div className="flex-1 space-y-5 overflow-y-auto px-4">          <div className="space-y-1.5">            <Label htmlFor="integration-name">Name</Label>            <Input              id="integration-name"              value={nameDraft}              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNameDraft(e.target.value)}              placeholder="e.g. GitHub"              disabled={saving}            />          </div>           <div className="space-y-1.5">            <Label htmlFor="integration-description">Description</Label>            <Textarea              id="integration-description"              value={descriptionDraft}              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>                setDescriptionDraft(e.target.value)              }              onKeyDown={(e: React.KeyboardEvent<HTMLTextAreaElement>) => {                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) void handleSave();              }}              placeholder="What this API is and when to reach for it"              disabled={saving}            />          </div>           <AgentPreview            label="What agents see"            line={              preview && preview.toLowerCase() !== slug.toLowerCase()                ? `{ id: "${slug}", description: "${preview}", ... }`                : `{ id: "${slug}", ... }`            }          />           {props.pluginSection ? (            <Suspense fallback={null}>              <props.pluginSection integrationId={slug} onPendingChange={handlePendingChange} />            </Suspense>          ) : null}        </div>         <SheetFooter>          <Button            onClick={() => void handleSave()}            disabled={saving || nameDraft.trim().length === 0}          >            {saving ? "Saving..." : "Save"}          </Button>          <Button variant="outline" onClick={() => props.onOpenChange(false)} disabled={saving}>            Cancel          </Button>        </SheetFooter>      </SheetContent>    </Sheet>  );}