import { useState, type ReactNode } from "react";
import { PlusIcon } from "lucide-react";
import type { ScopeId } from "@executor-js/sdk";

import { Button } from "../components/button";
import {
  CardStack,
  CardStackContent,
  CardStackEmpty,
  CardStackEntry,
} from "../components/card-stack";
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 shown only inside the inline "+ New secret" form. */
  readonly credentialScopeOptions?: readonly CredentialTargetScopeOption[];
  /** Scope choices for where this source credential is used. */
  readonly bindingScopeOptions?: readonly CredentialTargetScopeOption[];
  readonly restrictSecretsToTargetScope?: boolean;
}

export function HeadersList({
  headers,
  onHeadersChange,
  existingSecrets = [],
  presets = defaultHeaderAuthPresets,
  singleHeader = false,
  emptyLabel = "No headers",
  addLabel,
  addAriaLabel = "Add header",
  rowCopy,
  rowPreviewComponent,
  sourceName,
  targetScope,
  credentialScopeOptions,
  bindingScopeOptions,
  restrictSecretsToTargetScope,
}: 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,
        targetScope,
      },
    ]);
    setPicking(false);
  };

  const updateHeader = (
    index: number,
    update: Partial<{
      name: string;
      secretId: string | null;
      prefix?: string;
      presetKey?: 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) => (
              <SecretHeaderAuthRow
                key={index}
                name={header.name}
                prefix={header.prefix}
                presetKey={header.presetKey}
                secretId={header.secretId}
                secretScope={header.secretScope}
                onChange={(update) => updateHeader(index, update)}
                onSelectSecret={(secretId, scopeId) =>
                  updateHeader(index, {
                    secretId,
                    ...(scopeId ? { secretScope: scopeId } : {}),
                  })
                }
                onRemove={singleHeader ? undefined : () => removeHeader(index)}
                existingSecrets={existingSecrets}
                sourceName={sourceName}
                targetScope={header.targetScope ?? targetScope}
                credentialScopeOptions={credentialScopeOptions}
                bindingScopeOptions={bindingScopeOptions}
                restrictSecretsToTargetScope={restrictSecretsToTargetScope}
                copy={rowCopy}
                previewComponent={rowPreviewComponent}
              />
            ))}
            {canAddMore && (
              <AddHeaderRow leading={addLabel} onClick={addFirstPreset} ariaLabel={addAriaLabel} />
            )}
          </>
        )}
      </CardStackContent>
    </CardStack>
  );
}

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>
  );
}