"use client";

/**
 * SsoTabs (TASK-0131) — the org admin "Integrations → SSO" surface.
 *
 * A SELF-CONTAINED component: it takes `orgId` and owns its own data
 * (react-query against `ssoApi`). TASK-0133's `AdminIntegrations` mounts the
 * SAME component inside the org console; until then a standalone route
 * (`/org/[orgId]/admin/integrations`) hosts it.
 *
 * Two views:
 *  - NO provider  → an empty state + a "Configure SSO" action that opens the
 *    create form (SAML or OIDC).
 *  - provider set → the masked provider summary + an edit form (config only —
 *    the secrets are reveal-once), a test-connection panel, the enforce
 *    toggle (with confirm), and the danger-zone delete.
 *
 * Secrets are REVEAL-ONCE: the SAML X.509 cert PEM / OIDC client secret are
 * pasted into a field on create/rotate, POSTed once, and the server encrypts
 * them (AES-256-GCM). The read returns only `certificateConfigured` /
 * `clientSecretConfigured` booleans — the values are never fetched back, so
 * there is nothing to "reveal" after save (the UI just shows a "configured"
 * badge + a "Rotate" affordance that re-opens the paste field).
 *
 * A11y: the create/edit forms are real <form>s with labelled inputs; the
 * enforce toggle is a role="switch"; the danger-zone delete uses the shared
 * ConfirmDialog (focus-trapped).
 */
import { useEffect, useMemo, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  Loader2,
  Plus,
  RefreshCw,
  ShieldCheck,
  ShieldOff,
  Trash2,
  Webhook,
  KeyRound,
  Fingerprint
} from "lucide-react";
import {
  ssoApi,
  type SsoOidcConfig,
  type SsoProviderView,
  type SsoSamlConfig,
  type SsoTestResult
} from "@/lib/api";
import { toast } from "@/stores/ui-store";
import { cn } from "@/lib/utils";
import { ConfirmDialog } from "@/components/ui/confirm-dialog";
import { Field, Section, inputCls } from "@/components/settings/settings-shell";

interface SsoTabsProps {
  orgId: string;
}

type SsoType = "SAML" | "OIDC";

interface FormState {
  type: SsoType;
  name: string;
  // SAML
  samlEntityId: string;
  samlSsoUrl: string;
  samlAcsUrl: string;
  samlNameIdAttribute: string;
  samlEmailAttribute: string;
  samlMetadataUrl: string;
  samlIdpEntityId: string;
  samlCertificate: string;
  samlPreviousCertificate: string;
  // OIDC
  oidcIssuer: string;
  oidcClientId: string;
  oidcAuthorizationEndpoint: string;
  oidcTokenEndpoint: string;
  oidcRedirectUri: string;
  oidcJwksUri: string;
  oidcScope: string;
  oidcClientSecret: string;
}

const EMPTY_FORM: FormState = {
  type: "SAML",
  name: "",
  samlEntityId: "",
  samlSsoUrl: "",
  samlAcsUrl: "",
  samlNameIdAttribute: "nameId",
  samlEmailAttribute: "mail",
  samlMetadataUrl: "",
  samlIdpEntityId: "",
  samlCertificate: "",
  samlPreviousCertificate: "",
  oidcIssuer: "",
  oidcClientId: "",
  oidcAuthorizationEndpoint: "",
  oidcTokenEndpoint: "",
  oidcRedirectUri: "",
  oidcJwksUri: "",
  oidcScope: "openid email profile",
  oidcClientSecret: ""
};

const btnPrimary =
  "inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50";
const btnSecondary =
  "inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm font-medium hover:bg-accent disabled:opacity-50";
const btnDanger =
  "inline-flex items-center gap-1.5 rounded-md border border-destructive/50 px-3 py-1.5 text-sm font-medium text-destructive hover:bg-destructive/10 disabled:opacity-50";

export function SsoTabs({ orgId }: SsoTabsProps) {
  const qc = useQueryClient();
  const providerQuery = useQuery({
    queryKey: ["orgs", orgId, "sso"],
    queryFn: () => ssoApi.get(orgId),
    retry: false
  });
  const provider: SsoProviderView | null = providerQuery.data?.provider ?? null;

  const [mode, setMode] = useState<"view" | "create" | "edit">("view");
  const [form, setForm] = useState<FormState>(EMPTY_FORM);
  const [confirmEnforce, setConfirmEnforce] = useState<null | boolean>(null);
  const [confirmDelete, setConfirmDelete] = useState(false);
  const [testResult, setTestResult] = useState<SsoTestResult | null>(null);

  const invalidate = () => qc.invalidateQueries({ queryKey: ["orgs", orgId, "sso"] });

  // When the provider loads and we're in "edit", hydrate the form with the
  // masked config (the secrets stay empty — they're only set on save).
  useEffect(() => {
    if (mode === "edit" && provider) {
      setForm((f) => ({
        ...f,
        type: provider.type,
        name: provider.name,
        ...(provider.type === "SAML"
          ? {
              samlEntityId: (provider.config as SsoSamlConfig).entityId,
              samlSsoUrl: (provider.config as SsoSamlConfig).ssoUrl,
              samlAcsUrl: (provider.config as SsoSamlConfig).acsUrl,
              samlNameIdAttribute: (provider.config as SsoSamlConfig).nameIdAttribute ?? "nameId",
              samlEmailAttribute: (provider.config as SsoSamlConfig).emailAttribute ?? "mail",
              samlMetadataUrl: (provider.config as SsoSamlConfig).metadataUrl ?? "",
              samlIdpEntityId: (provider.config as SsoSamlConfig).idpEntityId ?? ""
            }
          : {
              oidcIssuer: (provider.config as SsoOidcConfig).issuer,
              oidcClientId: (provider.config as SsoOidcConfig).clientId,
              oidcAuthorizationEndpoint: (provider.config as SsoOidcConfig).authorizationEndpoint,
              oidcTokenEndpoint: (provider.config as SsoOidcConfig).tokenEndpoint,
              oidcRedirectUri: (provider.config as SsoOidcConfig).redirectUri,
              oidcJwksUri: (provider.config as SsoOidcConfig).jwksUri ?? "",
              oidcScope: (provider.config as SsoOidcConfig).scope ?? "openid email profile"
            })
      }));
    }
  }, [mode, provider]);

  const set = <K extends keyof FormState>(key: K, value: FormState[K]) =>
    setForm((f) => ({ ...f, [key]: value }));

  const createMutation = useMutation({
    mutationFn: () =>
      form.type === "SAML"
        ? ssoApi.create(orgId, {
            type: "SAML",
            name: form.name,
            certificate: form.samlCertificate,
            ...(form.samlPreviousCertificate
              ? { previousCertificate: form.samlPreviousCertificate }
              : {}),
            config: {
              entityId: form.samlEntityId,
              ssoUrl: form.samlSsoUrl,
              acsUrl: form.samlAcsUrl,
              nameIdAttribute: form.samlNameIdAttribute || "nameId",
              emailAttribute: form.samlEmailAttribute || "mail",
              ...(form.samlMetadataUrl ? { metadataUrl: form.samlMetadataUrl } : {}),
              ...(form.samlIdpEntityId ? { idpEntityId: form.samlIdpEntityId } : {})
            }
          })
        : ssoApi.create(orgId, {
            type: "OIDC",
            name: form.name,
            clientSecret: form.oidcClientSecret,
            config: {
              issuer: form.oidcIssuer,
              clientId: form.oidcClientId,
              authorizationEndpoint: form.oidcAuthorizationEndpoint,
              tokenEndpoint: form.oidcTokenEndpoint,
              redirectUri: form.oidcRedirectUri,
              jwksUri: form.oidcJwksUri || undefined,
              scope: form.oidcScope
            }
          }),
    onSuccess: () => {
      toast("success", "SSO provider configured");
      setMode("view");
      setForm(EMPTY_FORM);
      invalidate();
    },
    onError: (e: Error) => toast("error", "Could not save SSO", e.message)
  });

  const updateMutation = useMutation({
    mutationFn: () => {
      const body: Parameters<typeof ssoApi.update>[1] = { name: form.name };
      if (provider?.type === "SAML") {
        body.config = {
          entityId: form.samlEntityId,
          ssoUrl: form.samlSsoUrl,
          acsUrl: form.samlAcsUrl,
          nameIdAttribute: form.samlNameIdAttribute || "nameId",
          emailAttribute: form.samlEmailAttribute || "mail"
        };
        if (form.samlCertificate) body.certificate = form.samlCertificate; // rotate
      } else {
        body.config = {
          issuer: form.oidcIssuer,
          clientId: form.oidcClientId,
          authorizationEndpoint: form.oidcAuthorizationEndpoint,
          tokenEndpoint: form.oidcTokenEndpoint,
          redirectUri: form.oidcRedirectUri,
          scope: form.oidcScope
        };
        if (form.oidcClientSecret) body.clientSecret = form.oidcClientSecret; // rotate
      }
      return ssoApi.update(orgId, body);
    },
    onSuccess: () => {
      toast("success", "SSO provider updated");
      setMode("view");
      invalidate();
    },
    onError: (e: Error) => toast("error", "Could not update SSO", e.message)
  });

  const enforceMutation = useMutation({
    mutationFn: (enforce: boolean) => ssoApi.setEnforce(orgId, enforce),
    onSuccess: (res) => {
      toast("success", `SSO enforce ${res.enforce ? "ON" : "OFF"}`);
      setConfirmEnforce(null);
      invalidate();
    },
    onError: (e: Error) => {
      toast("error", "Could not change enforce", e.message);
      setConfirmEnforce(null);
    }
  });

  const deleteMutation = useMutation({
    mutationFn: () => ssoApi.remove(orgId),
    onSuccess: () => {
      toast("success", "SSO provider removed");
      setConfirmDelete(false);
      setTestResult(null);
      invalidate();
    },
    onError: (e: Error) => {
      toast("error", "Could not remove SSO", e.message);
      setConfirmDelete(false);
    }
  });

  const testMutation = useMutation({
    mutationFn: () => ssoApi.test(orgId),
    onSuccess: (res) => setTestResult(res)
  });

  const createValid = useMemo(() => {
    if (!form.name.trim()) return false;
    if (form.type === "SAML") {
      return Boolean(
        form.samlEntityId && form.samlSsoUrl && form.samlAcsUrl && form.samlCertificate.trim()
      );
    }
    return Boolean(
      form.oidcIssuer &&
        form.oidcClientId &&
        form.oidcAuthorizationEndpoint &&
        form.oidcTokenEndpoint &&
        form.oidcRedirectUri &&
        form.oidcClientSecret.trim()
    );
  }, [form]);

  const updateValid = useMemo(() => {
    if (!form.name.trim()) return false;
    if (form.type === "SAML") return Boolean(form.samlEntityId && form.samlSsoUrl && form.samlAcsUrl);
    return Boolean(
      form.oidcIssuer && form.oidcClientId && form.oidcAuthorizationEndpoint && form.oidcTokenEndpoint
    );
  }, [form]);

  if (providerQuery.isLoading) {
    return (
      <div className="flex items-center gap-2 p-6 text-sm text-muted-foreground">
        <Loader2 className="size-4 animate-spin" /> Loading SSO settings…
      </div>
    );
  }

  // ----------------------------- empty / create -----------------------------
  if (!provider && mode !== "create") {
    return (
      <Section
        title="Single sign-on (SSO)"
        description="Let your organization's IdP (SAML 2.0 or OIDC) sign users in and auto-provision accounts (JIT)."
      >
        <div className="flex items-center justify-between rounded-md border border-dashed p-4">
          <p className="text-sm text-muted-foreground">No SSO provider configured yet.</p>
          <button type="button" className={btnPrimary} onClick={() => setMode("create")}>
            <Plus className="size-4" /> Configure SSO
          </button>
        </div>
      </Section>
    );
  }

  if (mode === "create" || mode === "edit") {
    return (
      <form
        className="space-y-4"
        noValidate
        onSubmit={(e) => {
          e.preventDefault();
          if (mode === "create" && createValid) createMutation.mutate();
          if (mode === "edit" && updateValid) updateMutation.mutate();
        }}
      >
        <div className="flex items-center justify-between">
          <h2 className="text-sm font-semibold">{mode === "create" ? "Configure SSO" : "Edit SSO"}</h2>
          <button type="button" className={btnSecondary} onClick={() => setMode("view")}>
            Cancel
          </button>
        </div>

        <div role="group" aria-label="Provider type" data-testid="sso-provider-type">
          <span className="mb-1 block text-xs font-medium text-muted-foreground">Provider type</span>
          <div className="flex gap-2">
            {(["SAML", "OIDC"] as SsoType[]).map((t) => (
              <button
                key={t}
                type="button"
                disabled={mode === "edit"}
                onClick={() => set("type", t)}
                aria-pressed={form.type === t}
                className={cn(
                  "flex-1 rounded-md border px-3 py-1.5 text-sm font-medium disabled:cursor-not-allowed",
                  form.type === t
                    ? "border-primary bg-primary/10 text-foreground"
                    : "border-border text-muted-foreground"
                )}
              >
                {t === "SAML" ? "SAML 2.0" : "OIDC"}
              </button>
            ))}
          </div>
        </div>

        <Field label="Display name">
          <input
            className={inputCls}
            value={form.name}
            onChange={(e) => set("name", e.target.value)}
            placeholder={form.type === "SAML" ? "e.g. Acme Okta" : "e.g. Acme Okta OIDC"}
          />
        </Field>

        {form.type === "SAML" ? (
          <>
            <Field label="SP entity ID" hint="Defaults to <origin>/saml/metadata/<org-slug>.">
              <input
                className={inputCls}
                value={form.samlEntityId}
                onChange={(e) => set("samlEntityId", e.target.value)}
                placeholder="https://factory.example.com/saml/metadata/acme"
              />
            </Field>
            <div className="grid gap-4 md:grid-cols-2">
              <Field label="IdP SSO URL">
                <input
                  className={inputCls}
                  value={form.samlSsoUrl}
                  onChange={(e) => set("samlSsoUrl", e.target.value)}
                  placeholder="https://idp.example.com/saml/sso"
                />
              </Field>
              <Field label="ACS URL" hint="Defaults to <origin>/saml/acs.">
                <input
                  className={inputCls}
                  value={form.samlAcsUrl}
                  onChange={(e) => set("samlAcsUrl", e.target.value)}
                  placeholder="https://factory.example.com/saml/acs"
                />
              </Field>
              <Field label="NameID attribute">
                <input
                  className={inputCls}
                  value={form.samlNameIdAttribute}
                  onChange={(e) => set("samlNameIdAttribute", e.target.value)}
                />
              </Field>
              <Field label="Email attribute">
                <input
                  className={inputCls}
                  value={form.samlEmailAttribute}
                  onChange={(e) => set("samlEmailAttribute", e.target.value)}
                />
              </Field>
              <Field label="IdP metadata URL (optional)">
                <input
                  className={inputCls}
                  data-testid="sso-metadata-url"
                  value={form.samlMetadataUrl}
                  onChange={(e) => set("samlMetadataUrl", e.target.value)}
                  placeholder="https://idp.example.com/metadata"
                />
              </Field>
              <Field label="IdP entity ID (optional pin)">
                <input
                  className={inputCls}
                  value={form.samlIdpEntityId}
                  onChange={(e) => set("samlIdpEntityId", e.target.value)}
                />
              </Field>
            </div>
            {mode === "create" ? (
              <>
                <Field
                  label="IdP signing certificate (PEM)"
                  hint="Paste the X.509 cert from your IdP. Stored encrypted; never returned."
                >
                  <textarea
                    className={cn(inputCls, "min-h-28 font-mono text-xs")}
                    value={form.samlCertificate}
                    onChange={(e) => set("samlCertificate", e.target.value)}
                    placeholder="-----BEGIN CERTIFICATE-----&#10;…&#10;-----END CERTIFICATE-----"
                  />
                </Field>
                <Field
                  label="Previous certificate (PEM, optional)"
                  hint="For rotation grace — responses signed by either cert are accepted."
                >
                  <textarea
                    className={cn(inputCls, "min-h-20 font-mono text-xs")}
                    value={form.samlPreviousCertificate}
                    onChange={(e) => set("samlPreviousCertificate", e.target.value)}
                  />
                </Field>
              </>
            ) : (
              <Field
                label="Rotate signing certificate (PEM)"
                hint="Leave blank to keep the current cert. Setting a new cert moves the old one to the rotation slot."
              >
                <textarea
                  className={cn(inputCls, "min-h-20 font-mono text-xs")}
                  value={form.samlCertificate}
                  onChange={(e) => set("samlCertificate", e.target.value)}
                  placeholder="Paste a new certificate PEM to rotate"
                />
              </Field>
            )}
          </>
        ) : (
          <>
            <Field label="Issuer">
              <input
                className={inputCls}
                value={form.oidcIssuer}
                onChange={(e) => set("oidcIssuer", e.target.value)}
                placeholder="https://idp.example.com"
              />
            </Field>
            <div className="grid gap-4 md:grid-cols-2">
              <Field label="Client ID">
                <input
                  className={inputCls}
                  value={form.oidcClientId}
                  onChange={(e) => set("oidcClientId", e.target.value)}
                />
              </Field>
              <Field label="Scope">
                <input
                  className={inputCls}
                  value={form.oidcScope}
                  onChange={(e) => set("oidcScope", e.target.value)}
                />
              </Field>
              <Field label="Authorization endpoint">
                <input
                  className={inputCls}
                  value={form.oidcAuthorizationEndpoint}
                  onChange={(e) => set("oidcAuthorizationEndpoint", e.target.value)}
                />
              </Field>
              <Field label="Token endpoint">
                <input
                  className={inputCls}
                  value={form.oidcTokenEndpoint}
                  onChange={(e) => set("oidcTokenEndpoint", e.target.value)}
                />
              </Field>
              <Field label="Redirect URI">
                <input
                  className={inputCls}
                  value={form.oidcRedirectUri}
                  onChange={(e) => set("oidcRedirectUri", e.target.value)}
                />
              </Field>
              <Field label="JWKS URI (optional)">
                <input
                  className={inputCls}
                  value={form.oidcJwksUri}
                  onChange={(e) => set("oidcJwksUri", e.target.value)}
                  placeholder="defaults to <issuer>/.well-known/jwks.json"
                />
              </Field>
            </div>
            {mode === "create" ? (
              <Field
                label="Client secret"
                hint="Reveal-once: stored encrypted, never returned."
              >
                <input
                  className={inputCls}
                  type="password"
                  value={form.oidcClientSecret}
                  onChange={(e) => set("oidcClientSecret", e.target.value)}
                />
              </Field>
            ) : (
              <Field label="Rotate client secret" hint="Leave blank to keep the current secret.">
                <input
                  className={inputCls}
                  type="password"
                  value={form.oidcClientSecret}
                  onChange={(e) => set("oidcClientSecret", e.target.value)}
                  placeholder="Paste a new secret to rotate"
                />
              </Field>
            )}
          </>
        )}

        <div className="flex justify-end gap-2">
          <button
            type="submit"
            className={btnPrimary}
            data-testid="sso-save"
            disabled={mode === "create" ? !createValid : !updateValid}
          >
            {(mode === "create" ? createMutation : updateMutation).isPending && (
              <Loader2 className="size-4 animate-spin" />
            )}
            {mode === "create" ? "Save provider" : "Save changes"}
          </button>
        </div>
      </form>
    );
  }

  // ------------------------------- provider set -----------------------------
  // If the provider is null here we are in a transient state (removed while
  // the view is open, or the query is stale) — render the empty state rather
  // than crashing on `provider.type`.
  if (!provider) return null;
  const isSaml = provider.type === "SAML";
  return (
    <div className="space-y-4">
      <Section
        title="Single sign-on (SSO)"
        description={
          <span className="inline-flex items-center gap-2">
            <span className="inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-xs">
              {isSaml ? <Fingerprint className="size-3" /> : <KeyRound className="size-3" />}
              {provider.type}
            </span>
            {provider.enforce ? (
              <span className="inline-flex items-center gap-1 rounded-full border border-amber-400/40 bg-amber-500/10 px-2 py-0.5 text-xs text-amber-700 dark:text-amber-300">
                <ShieldCheck className="size-3" /> Enforce ON
              </span>
            ) : (
              <span className="inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground">
                <ShieldOff className="size-3" /> Enforce OFF
              </span>
            )}
          </span>
        }
      >
        <dl className="grid gap-2 text-sm sm:grid-cols-2">
          <SummaryRow label="Name" value={provider.name} />
          <SummaryRow
            label={isSaml ? "Certificate" : "Client secret"}
            value={
              isSaml
                ? (provider.certificateConfigured ? "Configured" : "Missing")
                : (provider.clientSecretConfigured ? "Configured" : "Missing")
            }
          />
          {isSaml ? (
            <>
              <SummaryRow label="SP entity ID" value={(provider.config as SsoSamlConfig).entityId} mono />
              <SummaryRow label="IdP SSO URL" value={(provider.config as SsoSamlConfig).ssoUrl} mono />
            </>
          ) : (
            <>
              <SummaryRow label="Issuer" value={(provider.config as SsoOidcConfig).issuer} mono />
              <SummaryRow label="Client ID" value={(provider.config as SsoOidcConfig).clientId} mono />
            </>
          )}
        </dl>
        <div className="mt-3 flex flex-wrap gap-2">
          <button type="button" className={btnSecondary} data-testid="sso-edit" onClick={() => setMode("edit")}>
            <RefreshCw className="size-4" /> Edit
          </button>
          <button
            type="button"
            className={btnSecondary}
            onClick={() => testMutation.mutate()}
            data-testid="sso-test"
            disabled={testMutation.isPending}
          >
            {testMutation.isPending ? <Loader2 className="size-4 animate-spin" /> : <Webhook className="size-4" />}
            Test connection
          </button>
        </div>
        {testResult && (
          <div
            className={cn(
              "mt-3 flex items-start gap-2 rounded-md border p-2.5 text-xs",
              testResult.ok
                ? "border-emerald-400/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
                : "border-destructive/40 bg-destructive/5 text-destructive"
            )}
            role="status"
            data-testid="sso-test-result"
          >
            <span className="font-medium">{testResult.ok ? "Connected" : "Failed"}</span>
            <span>
              {testResult.reason
                ? ` — ${testResult.reason}`
                : testResult.details && Object.keys(testResult.details).length
                  ? ` — ${JSON.stringify(testResult.details)}`
                  : ""}
            </span>
          </div>
        )}
      </Section>

      <Section
        title="Enforce SSO"
        description="When ON, a password login is refused for every member of this organization — they must sign in through the IdP. The owner is also blocked (recover via the documented service-credential runbook)."
      >
        <button
          type="button"
          role="switch"
          aria-checked={provider.enforce}
          data-testid="sso-enforce-toggle"
          onClick={() => setConfirmEnforce(!provider.enforce)}
          disabled={enforceMutation.isPending}
          className={cn(
            "relative inline-flex h-6 w-11 items-center rounded-full transition-colors",
            provider.enforce ? "bg-primary" : "bg-muted-foreground/30"
          )}
        >
          <span
            className={cn(
              "inline-block size-4 transform rounded-full bg-white transition-transform",
              provider.enforce ? "translate-x-6" : "translate-x-1"
            )}
          />
        </button>
        <span className="ml-2 text-sm text-muted-foreground">
          {provider.enforce ? "Enforced — password logins are blocked." : "Optional — password and SSO both work."}
        </span>
      </Section>

      <Section
        danger
        title="Danger zone"
        description="Removing the SSO provider deletes its configuration and encrypted secrets. Members' existing sessions are not revoked."
      >
        <button type="button" className={btnDanger} data-testid="sso-delete" onClick={() => setConfirmDelete(true)}>
          <Trash2 className="size-4" /> Remove SSO provider
        </button>
      </Section>

      <ConfirmDialog
        open={confirmEnforce !== null}
        title={confirmEnforce ? "Enforce SSO sign-in?" : "Stop enforcing SSO?"}
        description={
          confirmEnforce
            ? "Members (including the owner) will no longer be able to sign in with a password. Continue?"
            : "Password logins will be allowed again alongside SSO."
        }
        confirmLabel={confirmEnforce ? "Enforce" : "Allow passwords"}
        destructive={confirmEnforce ?? false}
        busy={enforceMutation.isPending}
        onConfirm={() => confirmEnforce !== null && enforceMutation.mutate(confirmEnforce)}
        onClose={() => setConfirmEnforce(null)}
      />
      <ConfirmDialog
        open={confirmDelete}
        title="Remove SSO provider?"
        description="This deletes the provider configuration and its encrypted secrets. This cannot be undone."
        confirmLabel="Remove"
        destructive
        busy={deleteMutation.isPending}
        onConfirm={() => deleteMutation.mutate()}
        onClose={() => setConfirmDelete(false)}
      />
    </div>
  );
}

function SummaryRow({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
  return (
    <div className="min-w-0">
      <dt className="text-xs text-muted-foreground">{label}</dt>
      <dd className={cn("truncate text-sm", mono && "font-mono text-xs")}>{value || "—"}</dd>
    </div>
  );
}