inspector/clients/web/src/components/groups/ClientSettingsModal/ClientSettingsModal.tsx

import { useState } from "react";
import { CloseButton, Group, Modal, ScrollArea } from "@mantine/core";
import { ListToggle } from "../../elements/ListToggle/ListToggle";
import { SecretStorageFooter } from "../../elements/SecretStorageFooter/SecretStorageFooter";
import type { SecretStorageInfo } from "@inspector/core/auth/secret-storage-info.js";
import {
  ClientSettingsForm,
  type ClientSettingsSection,
} from "../ClientSettingsForm/ClientSettingsForm";
import type { EmaIdpLoginState } from "@inspector/core/auth/ema/idpSession.js";
import {
  validateClientSettings,
  type ClientSettingsFormValues,
} from "../ClientSettingsForm/clientSettingsValues.js";

const ALL_SECTIONS: ClientSettingsSection[] = ["ema", "cimd"];

const AppModalLg = Modal.Root.withProps({
  size: "lg",
  centered: true,
  scrollAreaComponent: ScrollArea.Autosize,
});

const ModalHeaderRow = Group.withProps({
  justify: "space-between",
  wrap: "nowrap",
  w: "100%",
});

const CenteredModalTitle = Modal.Title.withProps({
  ta: "center",
  flex: 1,
});

export interface ClientSettingsModalProps {
  opened: boolean;
  settings: ClientSettingsFormValues;
  onClose: () => void;
  onSettingsChange: (
    settings:
      | ClientSettingsFormValues
      | ((prev: ClientSettingsFormValues) => ClientSettingsFormValues),
  ) => void;
  emaIdpLoginState?: EmaIdpLoginState;
  onEmaIdpLogout?: () => void;
  /**
   * Where secrets typed here end up (#1950). This dialog holds the
   * enterprise IdP client secret, so the footer is not decoration — it is
   * the answer to the question the field raises. Absent on a backend that
   * doesn't report a store; the footer then renders nothing.
   */
  secretStorage?: SecretStorageInfo;
}

export function ClientSettingsModal({
  opened,
  settings,
  onClose,
  onSettingsChange,
  emaIdpLoginState,
  onEmaIdpLogout,
  secretStorage,
}: ClientSettingsModalProps) {
  const [expandedSections, setExpandedSections] = useState<
    ClientSettingsSection[]
  >(["ema"]);
  const [revealErrors, setRevealErrors] = useState(false);

  const allExpanded = expandedSections.length === ALL_SECTIONS.length;

  function handleToggleAll() {
    setExpandedSections(allExpanded ? [] : ALL_SECTIONS);
  }

  // modal — the parent flushes the debounced persist on close. A client config
  // that's incomplete (blank required field) or invalid (bad issuer / CIMD URL)
  // would be silently dropped by the persist gate, so instead of closing we
  // reveal the field errors (overriding the form's on-blur gating) and keep the
  // modal open. The user fixes the fields, or disables the feature, then closes.
  // Resets via the parent's open/close remount key.
  function handleClose() {
    const errors = validateClientSettings(settings, { requireComplete: true });
    if (Object.keys(errors).length > 0) {
      setRevealErrors(true);
      return;
    }
    onClose();
  }

  return (
    // Compound Modal so the header lives in `Modal.Header` (sticky by design)
    // while `scrollAreaComponent` confines overflow to `Modal.Body` (#1698 —
    // kept consistent with ServerSettingsModal for when this grows enough to
    // scroll). The fade-down transition `<Modal>` defaults to (but `Modal.Root`
    // doesn't inherit) is supplied app-wide by `ThemeModalRoot`.
    <AppModalLg opened={opened} onClose={handleClose}>
      <Modal.Overlay />
      <Modal.Content>
        <Modal.Header>
          <ModalHeaderRow>
            <ListToggle
              compact={!allExpanded}
              variant="subtle"
              onToggle={handleToggleAll}
            />
            {/* `Modal.Title` names the dialog (wires `aria-labelledby`). */}
            <CenteredModalTitle>Client Settings</CenteredModalTitle>
            <CloseButton aria-label="Close" onClick={handleClose} />
          </ModalHeaderRow>
        </Modal.Header>
        <Modal.Body>
          <ClientSettingsForm
            settings={settings}
            expandedSections={expandedSections}
            onExpandedSectionsChange={setExpandedSections}
            onSettingsChange={onSettingsChange}
            emaIdpLoginState={emaIdpLoginState}
            onEmaIdpLogout={onEmaIdpLogout}
            revealErrors={revealErrors}
          />
        </Modal.Body>
        <SecretStorageFooter info={secretStorage} />
      </Modal.Content>
    </AppModalLg>
  );
}