import type { ConnectionId, ScopeId, SecretBackedValue } from "@executor-js/sdk/shared";

import {
  CredentialControlField,
  CredentialUsageRow,
  type CredentialTargetScopeOption,
} from "./credential-target-scope";
import {
  effectiveCredentialBindingForScope,
  exactCredentialBindingForScope,
  type CredentialBindingRefLike,
} from "./credential-bindings";
import { SourceOAuthSignInButton } from "./oauth-sign-in";

export const sourceOAuthConnectionUiState = (input: {
  readonly bindings: readonly CredentialBindingRefLike[];
  readonly connectionSlot: string;
  readonly tokenScope: ScopeId;
  readonly scopeRanks: ReadonlyMap<string, number>;
  readonly credentialScopeOptions: readonly CredentialTargetScopeOption[];
  readonly connections: readonly { readonly id: ConnectionId }[];
}): {
  readonly connectionId: ConnectionId | null;
  readonly isConnected: boolean;
  readonly buttonIsConnected: boolean;
  readonly statusLabel: string;
  readonly signInLabel: string;
} => {
  const effectiveBinding = effectiveCredentialBindingForScope(
    input.bindings,
    input.connectionSlot,
    input.tokenScope,
    input.scopeRanks,
  );
  const exactBinding = exactCredentialBindingForScope(
    input.bindings,
    input.connectionSlot,
    input.tokenScope,
  );
  const effectiveConnectionId =
    effectiveBinding?.value.kind === "connection" ? effectiveBinding.value.connectionId : null;
  const exactConnectionId =
    exactBinding?.value.kind === "connection" ? exactBinding.value.connectionId : null;
  const isConnected =
    effectiveConnectionId !== null &&
    input.connections.some((connection) => connection.id === effectiveConnectionId);
  const buttonIsConnected =
    exactConnectionId !== null &&
    input.connections.some((connection) => connection.id === exactConnectionId);
  const selectedScopeLabel =
    input.credentialScopeOptions.find((option) => option.scopeId === input.tokenScope)?.label ??
    "selected scope";
  const inheritedScopeLabel =
    effectiveBinding && effectiveBinding.scopeId !== input.tokenScope
      ? (input.credentialScopeOptions.find((option) => option.scopeId === effectiveBinding.scopeId)
          ?.label ?? "Organization")
      : null;

  return {
    connectionId: exactConnectionId,
    isConnected,
    buttonIsConnected,
    statusLabel: buttonIsConnected
      ? `Connected in ${selectedScopeLabel}`
      : isConnected && inheritedScopeLabel
        ? `Using ${inheritedScopeLabel} connection`
        : `No ${selectedScopeLabel} connection`,
    signInLabel: inheritedScopeLabel ? "Sign in personally" : "Sign in",
  };
};

export function SourceOAuthConnectionControl(props: {
  readonly popupName: string;
  readonly pluginId: string;
  readonly namespace: string;
  readonly fallbackNamespace: string;
  readonly endpoint: string;
  readonly tokenScope: ScopeId;
  readonly onTokenScopeChange: (scope: ScopeId) => void;
  readonly credentialScopeOptions: readonly CredentialTargetScopeOption[];
  readonly connectionId: string | null;
  readonly sourceLabel: string;
  readonly headers?: Record<string, SecretBackedValue>;
  readonly queryParams?: Record<string, SecretBackedValue>;
  readonly isConnected: boolean;
  readonly buttonIsConnected?: boolean;
  readonly statusLabel?: string;
  readonly onConnected: (connectionId: ConnectionId) => void | Promise<void>;
  readonly disabled?: boolean;
  readonly reconnectingLabel?: string;
  readonly signingInLabel?: string;
  readonly reconnectLabel?: string;
  readonly signInLabel?: string;
}) {
  const buttonIsConnected = props.buttonIsConnected ?? props.isConnected;

  return (
    <CredentialUsageRow
      value={props.tokenScope}
      options={props.credentialScopeOptions}
      onChange={props.onTokenScopeChange}
      label="Connection saved to"
      help="Choose who can use the OAuth connection."
    >
      <CredentialControlField label="OAuth connection" help="Start the provider OAuth flow.">
        <div className="flex min-h-9 items-center gap-2 rounded-md border border-border bg-muted/30 px-3 py-2">
          {props.isConnected ? (
            <span className="text-xs font-medium text-emerald-600 dark:text-emerald-400">
              {props.statusLabel ?? "Connected"}
            </span>
          ) : (
            <span className="text-xs text-muted-foreground">
              {props.statusLabel ?? "Not connected"}
            </span>
          )}
          <div className="ml-auto">
            <SourceOAuthSignInButton
              popupName={props.popupName}
              pluginId={props.pluginId}
              namespace={props.namespace}
              fallbackNamespace={props.fallbackNamespace}
              endpoint={props.endpoint}
              tokenScope={props.tokenScope}
              connectionId={props.connectionId}
              sourceLabel={props.sourceLabel}
              headers={props.headers}
              queryParams={props.queryParams}
              isConnected={buttonIsConnected}
              onConnected={props.onConnected}
              reconnectLabel={props.reconnectLabel}
              reconnectingLabel={props.reconnectingLabel}
              signInLabel={props.signInLabel}
              signingInLabel={props.signingInLabel}
            />
          </div>
        </div>
      </CredentialControlField>
    </CredentialUsageRow>
  );
}