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

import { Button } from "../components/button";
import { CardStack, CardStackContent, CardStackEntry } from "../components/card-stack";
import { Field, FieldGroup, FieldLabel } from "../components/field";
import { Input } from "../components/input";
import { HeadersList } from "./headers-list";
import {
  CreatableSecretPicker,
  headerValueToState,
  headersFromState,
  type HeaderState,
} from "./secret-header-auth";
import type { SecretPickerSecret } from "./secret-picker";

export type { SecretBackedValue };

export type QueryParamState = {
  name: string;
  secretId: string | null;
  prefix?: string;
  literalValue?: string;
};

export type HttpCredentialsState = {
  headers: HeaderState[];
  queryParams: QueryParamState[];
};

export const emptyHttpCredentials = (): HttpCredentialsState => ({
  headers: [],
  queryParams: [],
});

export const httpCredentialsFromValues = (input: {
  readonly headers?: Record<string, SecretBackedValue> | null;
  readonly queryParams?: Record<string, SecretBackedValue> | null;
}): HttpCredentialsState => ({
  headers: Object.entries(input.headers ?? {}).map(([name, value]) =>
    headerValueToState(name, value),
  ),
  queryParams: Object.entries(input.queryParams ?? {}).map(([name, value]) => {
    if (typeof value === "string") {
      return { name, secretId: null, literalValue: value };
    }
    return { name, secretId: value.secretId, prefix: value.prefix };
  }),
});

export const serializeHeaderCredentials = (
  headers: readonly HeaderState[],
): Record<string, { secretId: string; prefix?: string }> => headersFromState(headers);

export const serializeQueryCredentials = (
  queryParams: readonly QueryParamState[],
): Record<string, SecretBackedValue> => {
  const result: Record<string, SecretBackedValue> = {};
  for (const param of queryParams) {
    const name = param.name.trim();
    if (!name) continue;
    if (param.secretId) {
      result[name] = {
        secretId: param.secretId,
        ...(param.prefix ? { prefix: param.prefix } : {}),
      };
      continue;
    }
    if (param.literalValue?.trim()) {
      result[name] = param.literalValue.trim();
    }
  }
  return result;
};

export const serializeHttpCredentials = (
  credentials: HttpCredentialsState,
): {
  readonly headers: Record<string, { secretId: string; prefix?: string }>;
  readonly queryParams: Record<string, SecretBackedValue>;
} => ({
  headers: serializeHeaderCredentials(credentials.headers),
  queryParams: serializeQueryCredentials(credentials.queryParams),
});

export const httpCredentialsValid = (credentials: HttpCredentialsState): boolean =>
  credentials.headers.every((header) => header.name.trim() && header.secretId) &&
  credentials.queryParams.every((param) => {
    if (!param.name.trim()) return false;
    return Boolean(param.secretId || param.literalValue?.trim());
  });

export function HttpCredentialsEditor(props: {
  readonly credentials: HttpCredentialsState;
  readonly onChange: (credentials: HttpCredentialsState) => void;
  readonly existingSecrets: readonly SecretPickerSecret[];
  readonly sourceName?: string;
  readonly targetScope?: ScopeId;
  readonly writeScope?: ScopeId;
  readonly sections?: {
    readonly headers?: boolean;
    readonly queryParams?: boolean;
  };
  readonly labels?: {
    readonly headers?: string;
    readonly queryParams?: string;
  };
}) {
  const showHeaders = props.sections?.headers ?? true;
  const showQueryParams = props.sections?.queryParams ?? true;

  return (
    <div className="space-y-4">
      {showHeaders && (
        <section className="space-y-2.5">
          <FieldLabel>{props.labels?.headers ?? "Headers"}</FieldLabel>
          <HeadersList
            headers={props.credentials.headers}
            onHeadersChange={(headers) => props.onChange({ ...props.credentials, headers })}
            existingSecrets={props.existingSecrets}
            sourceName={props.sourceName}
            targetScope={props.targetScope ?? props.writeScope}
          />
        </section>
      )}

      {showQueryParams && (
        <section className="space-y-2.5">
          <FieldLabel>{props.labels?.queryParams ?? "Query parameters"}</FieldLabel>
          <QueryParamsList
            queryParams={props.credentials.queryParams}
            onQueryParamsChange={(queryParams) =>
              props.onChange({ ...props.credentials, queryParams })
            }
            existingSecrets={props.existingSecrets}
            sourceName={props.sourceName}
            targetScope={props.targetScope ?? props.writeScope}
          />
        </section>
      )}
    </div>
  );
}

function QueryParamsList(props: {
  readonly queryParams: readonly QueryParamState[];
  readonly onQueryParamsChange: (queryParams: QueryParamState[]) => void;
  readonly existingSecrets: readonly SecretPickerSecret[];
  readonly sourceName?: string;
  readonly targetScope?: ScopeId;
}) {
  const addParam = () => {
    props.onQueryParamsChange([...props.queryParams, { name: "", secretId: null }]);
  };
  const updateParam = (index: number, update: Partial<QueryParamState>) => {
    props.onQueryParamsChange(
      props.queryParams.map((param, i) => (i === index ? { ...param, ...update } : param)),
    );
  };
  const removeParam = (index: number) => {
    props.onQueryParamsChange(props.queryParams.filter((_, i) => i !== index));
  };

  return (
    <CardStack>
      <CardStackContent className="[&>*+*]:before:inset-x-0">
        {props.queryParams.length === 0 ? (
          <AddQueryParamRow leading={<span>No query parameters</span>} onClick={addParam} />
        ) : (
          <>
            {props.queryParams.map((param, index) => (
              <QueryParamRow
                key={index}
                param={param}
                existingSecrets={props.existingSecrets}
                sourceName={props.sourceName}
                targetScope={props.targetScope}
                onChange={(update) => updateParam(index, update)}
                onRemove={() => removeParam(index)}
              />
            ))}
            <AddQueryParamRow onClick={addParam} />
          </>
        )}
      </CardStackContent>
    </CardStack>
  );
}

function QueryParamRow(props: {
  readonly param: QueryParamState;
  readonly existingSecrets: readonly SecretPickerSecret[];
  readonly sourceName?: string;
  readonly targetScope?: ScopeId;
  readonly onChange: (update: Partial<QueryParamState>) => void;
  readonly onRemove: () => void;
}) {
  const nameInputId = useId();
  const prefixInputId = useId();
  const literalInputId = useId();
  const name = props.param.name.trim();
  const secretLabel = name ? `${name} query parameter` : "Query parameter";

  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">
          Query parameter
        </span>
        <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 htmlFor={nameInputId}>Name</FieldLabel>
          <Input
            id={nameInputId}
            value={props.param.name}
            onChange={(event) => props.onChange({ name: event.currentTarget.value })}
            placeholder="token"
            className="font-mono"
          />
        </Field>
        <Field>
          <FieldLabel htmlFor={prefixInputId}>
            Prefix <span className="font-normal text-muted-foreground/60">(optional)</span>
          </FieldLabel>
          <Input
            id={prefixInputId}
            value={props.param.prefix ?? ""}
            onChange={(event) => props.onChange({ prefix: event.currentTarget.value || undefined })}
            placeholder="Bearer "
            className="font-mono"
          />
        </Field>
      </FieldGroup>

      <CreatableSecretPicker
        value={props.param.secretId}
        onSelect={(secretId) => props.onChange({ secretId, literalValue: undefined })}
        secrets={props.existingSecrets}
        placeholder="Select a secret"
        sourceName={props.sourceName}
        secretLabel={secretLabel}
        targetScope={props.targetScope}
      />

      {!props.param.secretId && props.param.literalValue !== undefined && (
        <Field>
          <FieldLabel htmlFor={literalInputId}>Literal value</FieldLabel>
          <Input
            id={literalInputId}
            value={props.param.literalValue}
            onChange={(event) => props.onChange({ literalValue: event.currentTarget.value })}
            placeholder="value"
            className="font-mono"
          />
        </Field>
      )}
    </div>
  );
}

function AddQueryParamRow(props: {
  readonly onClick: () => void;
  readonly leading?: React.ReactNode;
}) {
  return (
    <CardStackEntry
      asChild
      className="justify-between gap-4 px-0 py-0 text-sm text-muted-foreground"
    >
      <Button
        type="button"
        variant="ghost"
        onClick={(event) => {
          event.stopPropagation();
          props.onClick();
        }}
        aria-label="Add query parameter"
        className="h-auto w-full justify-between rounded-none px-4 py-3 text-left text-muted-foreground hover:bg-accent/40 focus-visible:bg-accent/40"
      >
        <span className="min-w-0 flex-1">{props.leading}</span>
        <PlusIcon aria-hidden className="size-4 shrink-0" />
      </Button>
    </CardStackEntry>
  );
}