import { useState, type ReactNode } from "react";import { PlusIcon } from "lucide-react";import type { ScopeId } from "@executor-js/sdk/shared"; import { Button } from "../components/button";import {  CardStack,  CardStackContent,  CardStackEmpty,  CardStackEntry,} from "../components/card-stack";import { Field, FieldGroup, FieldLabel } from "../components/field";import { Input } from "../components/input";import {  defaultHeaderAuthPresets,  type HeaderAuthPreset,  type HeaderState,  SecretHeaderAuthRow,  type SecretCredentialPreviewComponent,  type SecretCredentialRowCopy,} from "./secret-header-auth";import type { CredentialTargetScopeOption } from "./credential-target-scope";import type { SecretPickerSecret } from "./secret-picker"; export interface HeadersListProps {  readonly headers: readonly HeaderState[];  readonly onHeadersChange: (headers: HeaderState[]) => void;  readonly existingSecrets?: readonly SecretPickerSecret[];  /** Presets offered in the quick-add picker. Defaults to `defaultHeaderAuthPresets`. */  readonly presets?: readonly HeaderAuthPreset[];  /** When true, only allow a single header (hide add button, disable remove). */  readonly singleHeader?: boolean;  /** Text shown in the empty state. */  readonly emptyLabel?: ReactNode;  readonly addLabel?: ReactNode;  readonly addAriaLabel?: string;  readonly rowCopy?: Partial<SecretCredentialRowCopy>;  readonly rowPreviewComponent?: SecretCredentialPreviewComponent;  /**   * Display name of the source that owns these headers (e.g. "Axiom"). Used   * to derive unique default secret labels/IDs like `axiom-authorization`.   */  readonly sourceName?: string;  /** Inline-created secrets are written to this explicit scope. */  readonly targetScope: ScopeId;  /** Scope choices available for where this source credential is used. */  readonly credentialScopeOptions?: readonly CredentialTargetScopeOption[];  /** Scope choices for where this source credential is used. */  readonly bindingScopeOptions?: readonly CredentialTargetScopeOption[];  readonly defaultValueKind?: HeaderState["valueKind"];} export function HeadersList({  headers,  onHeadersChange,  existingSecrets = [],  presets = defaultHeaderAuthPresets,  singleHeader = false,  emptyLabel = "No headers",  addLabel,  addAriaLabel = "Add header",  rowCopy,  rowPreviewComponent,  sourceName,  targetScope,  bindingScopeOptions,  defaultValueKind = "secret",}: HeadersListProps) {  const [picking, setPicking] = useState(false);  const canAddMore = !singleHeader || headers.length === 0;  const addFirstPreset = () => {    const preset = presets[0];    if (presets.length === 1 && preset) {      addHeaderFromPreset(preset);      return;    }    setPicking(true);  };   const addHeaderFromPreset = (preset: HeaderAuthPreset) => {    onHeadersChange([      ...headers,      {        name: preset.name,        prefix: preset.prefix,        presetKey: preset.key,        secretId: null,        valueKind: preset.valueKind ?? defaultValueKind,        targetScope,      },    ]);    setPicking(false);  };   const updateHeader = (    index: number,    update: Partial<{      name: string;      secretId: string | null;      prefix?: string;      presetKey?: string;      valueKind?: HeaderState["valueKind"];      literalValue?: string;      targetScope?: ScopeId;      secretScope?: ScopeId;    }>,  ) => {    onHeadersChange(headers.map((entry, i) => (i === index ? { ...entry, ...update } : entry)));  };   const removeHeader = (index: number) => {    onHeadersChange(headers.filter((_, i) => i !== index));  };   return (    <CardStack>      <CardStackContent className="[&>*+*]:before:inset-x-0">        {picking ? (          <HeaderPresetPicker            presets={presets}            onPick={addHeaderFromPreset}            onCancel={() => setPicking(false)}          />        ) : headers.length === 0 ? (          canAddMore ? (            <AddHeaderRow              leading={<span>{emptyLabel}</span>}              onClick={addFirstPreset}              ariaLabel={addAriaLabel}            />          ) : (            <CardStackEmpty>              <span>{emptyLabel}</span>            </CardStackEmpty>          )        ) : (          <>            {headers.map((header, index) => (              <HeaderRow                key={index}                header={header}                targetScope={targetScope}                onChange={(update) => updateHeader(index, update)}                onSelectSecret={(secretId, scopeId) =>                  updateHeader(index, {                    secretId,                    ...(scopeId ? { secretScope: scopeId } : {}),                  })                }                onRemove={singleHeader ? undefined : () => removeHeader(index)}                existingSecrets={existingSecrets}                sourceName={sourceName}                bindingScopeOptions={bindingScopeOptions}                copy={rowCopy}                previewComponent={rowPreviewComponent}              />            ))}            {canAddMore && (              <AddHeaderRow leading={addLabel} onClick={addFirstPreset} ariaLabel={addAriaLabel} />            )}          </>        )}      </CardStackContent>    </CardStack>  );} function HeaderRow(props: {  readonly header: HeaderState;  readonly targetScope: ScopeId;  readonly onChange: (    update: Partial<{      name: string;      secretId: string | null;      prefix?: string;      presetKey?: string;      valueKind?: HeaderState["valueKind"];      literalValue?: string;      targetScope?: ScopeId;      secretScope?: ScopeId;    }>,  ) => void;  readonly onSelectSecret: (secretId: string, scopeId?: ScopeId) => void;  readonly onRemove?: () => void;  readonly existingSecrets: readonly SecretPickerSecret[];  readonly sourceName?: string;  readonly bindingScopeOptions?: readonly CredentialTargetScopeOption[];  readonly copy?: Partial<SecretCredentialRowCopy>;  readonly previewComponent?: SecretCredentialPreviewComponent;}) {  if (props.header.valueKind === "text") {    return (      <TextHeaderRow        name={props.header.name}        value={props.header.literalValue ?? ""}        onChange={(update) => props.onChange(update)}        onRemove={props.onRemove}        rowLabel={props.copy?.rowLabel}        nameLabel={props.copy?.nameLabel}        namePlaceholder={props.copy?.namePlaceholder}      />    );  }   return (    <SecretHeaderAuthRow      name={props.header.name}      prefix={props.header.prefix}      presetKey={props.header.presetKey}      secretId={props.header.secretId}      secretScope={props.header.secretScope}      onChange={props.onChange}      onSelectSecret={props.onSelectSecret}      onRemove={props.onRemove}      existingSecrets={props.existingSecrets}      sourceName={props.sourceName}      targetScope={props.header.targetScope ?? props.targetScope}      bindingScopeOptions={props.bindingScopeOptions}      copy={props.copy}      previewComponent={props.previewComponent}    />  );} function TextHeaderRow(props: {  readonly name: string;  readonly value: string;  readonly onChange: (update: { name?: string; literalValue?: string }) => void;  readonly onRemove?: () => void;  readonly rowLabel?: string;  readonly nameLabel?: string;  readonly namePlaceholder?: string;}) {  return (    <div className="space-y-2.5 px-4 py-3">      <div className="flex w-full items-center justify-between gap-4">        <span className="text-[10px] uppercase tracking-wider text-muted-foreground">          {props.rowLabel ?? "Header"}        </span>        {props.onRemove && (          <Button            type="button"            variant="ghost"            size="xs"            className="text-muted-foreground hover:text-destructive"            onClick={props.onRemove}          >            Remove          </Button>        )}      </div>      <FieldGroup className="grid grid-cols-2 gap-3">        <Field>          <FieldLabel>{props.nameLabel ?? "Name"}</FieldLabel>          <Input            value={props.name}            onChange={(event) => props.onChange({ name: (event.target as HTMLInputElement).value })}            placeholder={props.namePlaceholder ?? "X-Organization-Id"}            className="font-mono"          />        </Field>        <Field>          <FieldLabel>Value</FieldLabel>          <Input            value={props.value}            onChange={(event) =>              props.onChange({ literalValue: (event.target as HTMLInputElement).value })            }            placeholder="workspace-id"            className="font-mono"          />        </Field>      </FieldGroup>    </div>  );} interface AddHeaderRowProps {  readonly onClick: () => void;  readonly leading?: ReactNode;  readonly ariaLabel: string;} function AddHeaderRow({ onClick, leading, ariaLabel }: AddHeaderRowProps) {  return (    // oxlint-disable-next-line react/forbid-elements    <button      type="button"      onClick={(event) => {        event.stopPropagation();        onClick();      }}      aria-label={ariaLabel}      className="flex w-full items-center justify-between gap-4 px-4 py-3 text-sm text-muted-foreground outline-none transition-[background-color] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-accent/40 focus-visible:bg-accent/40"    >      <span className="min-w-0 flex-1 text-left">{leading}</span>      <PlusIcon aria-hidden className="size-4 shrink-0" />    </button>  );} interface HeaderPresetPickerProps {  readonly presets: readonly HeaderAuthPreset[];  readonly onPick: (preset: HeaderAuthPreset) => void;  readonly onCancel: () => void;} function HeaderPresetPicker({ presets, onPick, onCancel }: HeaderPresetPickerProps) {  return (    <CardStackEntry className="flex-wrap gap-2">      {presets.map((preset) => (        <Button          key={preset.key}          type="button"          variant="outline"          size="sm"          onClick={() => onPick(preset)}        >          {preset.label}        </Button>      ))}      <Button        type="button"        variant="ghost"        size="sm"        onClick={onCancel}        className="text-muted-foreground"      >        Cancel      </Button>    </CardStackEntry>  );}