arcadia-admin/app/routes/sso.tsx

import { useCallback, useEffect, useMemo, useState } from "react"
import {
  CheckCircle2,
  KeyRound,
  Plus,
  RefreshCw,
  ShieldCheck,
  Trash2,
  X,
} from "lucide-react"

import { useArcadiaClient } from "@crema/arcadia-core-client"
import { useToast } from "@crema/notification-ui"
import {
  ActionsCell,
  BadgeCell,
  DataTable,
  DateCell,
  Pagination,
  useTable,
  type ActionItem,
  type Column,
} from "@crema/table-ui"
import { ConfirmDialog, EmptyState } from "@crema/feedback-ui"

import { AppShell } from "~/components/layout/app-shell"
import { DataState, DialogError } from "~/components/data-state"
import { errorMessage } from "~/lib/errors"
import { Badge } from "~/components/ui/badge"
import { Button } from "~/components/ui/button"
import { Card, CardContent } from "~/components/ui/card"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "~/components/ui/dialog"
import { Input } from "~/components/ui/input"
import { Label } from "~/components/ui/label"
import { Switch } from "~/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs"
import { Textarea } from "~/components/ui/textarea"
import {
  createIdentityProvider,
  deleteIdentityProvider,
  destroySamlSession,
  listIdentityProviders,
  listSamlSessions,
  updateIdentityProvider,
  type IdentityProvider,
  type IdentityProviderInput,
  type SamlSession,
} from "~/lib/arcadia/sso"
import { pageTitle } from "~/lib/page-meta"
import { useSession } from "~/lib/session"
import { useRegisterContext } from "@crema/aifirst-ui/context"

export const meta = () => pageTitle("SSO")

type Editor =
  | { kind: "create" }
  | { kind: "edit"; idp: IdentityProvider }
  | null

/** Who a SAML session belongs to, in the operator's words. */
function sessionLabel(s: SamlSession): string {
  return s.name_id ?? s.user_id
}

export default function SsoRoute() {
  const session = useSession()
  const arcadia = useArcadiaClient()
  const toast = useToast()

  // Two tabs, two independent fetches. They used to share one load that
  // swallowed each failure with `.catch(() => [])`, so a broken endpoint was
  // indistinguishable from "no identity providers".
  const [idps, setIdps] = useState<IdentityProvider[]>([])
  const [idpsLoading, setIdpsLoading] = useState(true)
  const [idpsError, setIdpsError] = useState<unknown>(null)

  const [sessions, setSessions] = useState<SamlSession[]>([])
  const [sessionsLoading, setSessionsLoading] = useState(true)
  const [sessionsError, setSessionsError] = useState<unknown>(null)

  const [editor, setEditor] = useState<Editor>(null)
  const [pendingDelete, setPendingDelete] = useState<IdentityProvider | null>(null)
  const [pendingSessionDestroy, setPendingSessionDestroy] = useState<SamlSession | null>(null)

  const refreshIdps = useCallback(async () => {
    setIdpsError(null)
    setIdpsLoading(true)
    try {
      setIdps(await listIdentityProviders(arcadia))
    } catch (err) {
      setIdpsError(err)
    } finally {
      setIdpsLoading(false)
    }
  }, [arcadia])

  const refreshSessions = useCallback(async () => {
    setSessionsError(null)
    setSessionsLoading(true)
    try {
      setSessions(await listSamlSessions(arcadia))
    } catch (err) {
      setSessionsError(err)
    } finally {
      setSessionsLoading(false)
    }
  }, [arcadia])

  const refresh = useCallback(async () => {
    await Promise.all([refreshIdps(), refreshSessions()])
  }, [refreshIdps, refreshSessions])

  useEffect(() => {
    if (session) refresh()
  }, [session, refresh])

  const loading = idpsLoading || sessionsLoading

  useRegisterContext("sso", {
    identity_providers: idps.length,
    enabled_idps: idps.filter((i) => i.enabled).length,
    active_sessions: sessions.length,
  })

  const idpColumns = useMemo<Column<IdentityProvider>[]>(
    () => [
      {
        id: "name",
        header: "Name",
        accessor: "name",
        sortable: true,
        cell: (i) => (
          <div className="flex flex-col">
            <span className="text-sm font-medium">{i.name}</span>
            <code className="font-mono text-[10px] text-muted-foreground">{i.entity_id}</code>
          </div>
        ),
      },
      {
        id: "enabled",
        header: "Enabled",
        accessor: "enabled",
        sortable: true,
        cell: (i) => (
          <BadgeCell label={i.enabled ? "enabled" : "disabled"} tone={i.enabled ? "success" : "default"} />
        ),
      },
      {
        id: "cert",
        header: "Certificate",
        cell: (i) =>
          i.has_certificate ? (
            <Badge variant="secondary" className="font-mono text-[10px]">
              <ShieldCheck className="mr-1 size-3" /> set
            </Badge>
          ) : (
            <Badge variant="outline" className="font-mono text-[10px]">
              missing
            </Badge>
          ),
      },
      {
        id: "sso_url",
        header: "SSO URL",
        cell: (i) => (
          <code className="font-mono text-xs text-muted-foreground">{i.sso_url}</code>
        ),
      },
      {
        id: "updated",
        header: "Updated",
        accessor: "updated_at",
        sortable: true,
        cell: (i) => <DateCell value={i.updated_at} format="short" />,
      },
      {
        id: "actions",
        header: "",
        align: "right",
        cell: (i) => {
          const items: ActionItem[] = [
            {
              id: "edit",
              label: "Edit",
              dataAction: `idp-${i.id}-edit`,
              onSelect: () => setEditor({ kind: "edit", idp: i }),
            },
            {
              id: i.enabled ? "disable" : "enable",
              label: i.enabled ? "Disable" : "Enable",
              dataAction: `idp-${i.id}-toggle`,
              onSelect: async () => {
                const verb = i.enabled ? "disable" : "enable"
                try {
                  await updateIdentityProvider(arcadia, i.id, { enabled: !i.enabled })
                  await refreshIdps()
                  toast.success(`${i.enabled ? "Disabled" : "Enabled"} ${i.name}`)
                } catch (err) {
                  toast.error(errorMessage(err, `${verb} ${i.name}`))
                }
              },
            },
            {
              id: "delete",
              label: "Delete",
              icon: <Trash2 className="size-4" />,
              destructive: true,
              dataAction: `idp-${i.id}-delete`,
              onSelect: () => setPendingDelete(i),
            },
          ]
          return <ActionsCell items={items} triggerDataAction={`idp-${i.id}-actions`} />
        },
      },
    ],
    [arcadia, refreshIdps, toast],
  )

  const idpTable = useTable<IdentityProvider>({
    data: idps,
    columns: idpColumns,
    getRowId: (i) => i.id,
    initialPageSize: 25,
  })

  return (
    <AppShell>
      <div className="flex flex-col gap-4">
        <header className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h1 className="text-2xl font-semibold tracking-tight">Single sign-on</h1>
            <p className="text-sm text-muted-foreground">
              SAML identity providers configured for the current tenant, plus the active SAML
              session pool.
            </p>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" onClick={refresh} disabled={loading} data-action="sso-refresh">
              <RefreshCw className={`size-4 ${loading ? "animate-spin" : ""}`} />
              Refresh
            </Button>
            <Button size="sm" onClick={() => setEditor({ kind: "create" })} data-action="sso-create">
              <Plus className="size-4" />
              New IdP
            </Button>
          </div>
        </header>

        <Tabs defaultValue="idps">
          <TabsList>
            <TabsTrigger value="idps" data-action="sso-tab-idps">
              Identity providers ({idps.length})
            </TabsTrigger>
            <TabsTrigger value="sessions" data-action="sso-tab-sessions">
              Active sessions ({sessions.length})
            </TabsTrigger>
          </TabsList>

          <TabsContent value="idps" className="pt-4">
            <Card>
              <CardContent className="relative p-0">
                <DataState
                  loading={idpsLoading}
                  error={idpsError}
                  isEmpty={idpTable.total === 0}
                  onRetry={refreshIdps}
                  loadingLabel="Loading IdPs…"
                  empty={
                    <EmptyState
                      icon={<KeyRound className="size-6" />}
                      title="No identity providers."
                      description="Connect a SAML IdP (Okta, Azure AD, Google Workspace, etc.) to enable SSO for this tenant."
                      className="py-12"
                    />
                  }
                >
                  <DataTable
                    columns={idpColumns}
                    rows={idpTable.pageRows}
                    getRowId={(i) => i.id}
                    sort={idpTable.sort}
                    onSortToggle={idpTable.toggleSort}
                    loading={idpsLoading && idps.length > 0}
                    stickyHeader
                  />
                  <Pagination
                    page={idpTable.page}
                    pageSize={idpTable.pageSize}
                    total={idpTable.total}
                    onPageChange={idpTable.setPage}
                    onPageSizeChange={idpTable.setPageSize}
                  />
                </DataState>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="sessions" className="pt-4">
            <Card>
              <CardContent className="relative p-0">
                <DataState
                  loading={sessionsLoading}
                  error={sessionsError}
                  isEmpty={sessions.length === 0}
                  onRetry={refreshSessions}
                  loadingLabel="Loading sessions…"
                  empty={
                    <EmptyState
                      title="No active SAML sessions."
                      description="Sessions appear here once users authenticate via the IdP."
                      className="py-12"
                    />
                  }
                >
                  <ul className="divide-y border-y">
                    {sessions.map((s) => (
                      <li
                        key={s.id}
                        className="flex items-center justify-between gap-3 px-3 py-2 text-sm"
                      >
                        <div className="flex flex-col gap-0.5">
                          <span className="flex items-center gap-2">
                            <code className="font-mono text-xs">{sessionLabel(s)}</code>
                            {s.expires_at && new Date(s.expires_at).getTime() < Date.now() ? (
                              <Badge variant="destructive">expired</Badge>
                            ) : (
                              <Badge>active</Badge>
                            )}
                          </span>
                          <span className="text-xs text-muted-foreground">
                            session_index: {s.session_index ?? "—"} · idp:{" "}
                            {s.idp_id.slice(0, 8)}… · started{" "}
                            {new Date(s.inserted_at).toLocaleString()}
                            {s.expires_at
                              ? ` · expires ${new Date(s.expires_at).toLocaleString()}`
                              : ""}
                          </span>
                        </div>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => setPendingSessionDestroy(s)}
                          data-action={`sso-session-${s.id}-destroy`}
                        >
                          <X className="size-3.5" />
                          Destroy
                        </Button>
                      </li>
                    ))}
                  </ul>
                </DataState>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>

      <ConfirmDialog
        open={pendingDelete !== null}
        onOpenChange={(o) => !o && setPendingDelete(null)}
        title="Delete identity provider?"
        description={
          pendingDelete
            ? `Nobody can sign in through ${pendingDelete.name} once it's deleted, and its configuration — including the certificate — is gone for good. Existing SAML sessions stay valid until they expire. Disable it instead if this is temporary.`
            : ""
        }
        confirmLabel="Delete"
        variant="danger"
        onConfirm={async () => {
          if (!pendingDelete) return
          const name = pendingDelete.name
          try {
            await deleteIdentityProvider(arcadia, pendingDelete.id)
            setPendingDelete(null)
            await refresh()
            toast.success(`Deleted ${name}`)
          } catch (err) {
            setPendingDelete(null)
            toast.error(errorMessage(err, `delete ${name}`))
          }
        }}
      />

      <ConfirmDialog
        open={pendingSessionDestroy !== null}
        onOpenChange={(o) => !o && setPendingSessionDestroy(null)}
        title="Destroy SAML session?"
        description={
          pendingSessionDestroy
            ? `${sessionLabel(pendingSessionDestroy)} is signed out immediately and has to authenticate with the IdP again.`
            : ""
        }
        confirmLabel="Destroy"
        variant="danger"
        onConfirm={async () => {
          if (!pendingSessionDestroy) return
          const who = sessionLabel(pendingSessionDestroy)
          try {
            await destroySamlSession(arcadia, pendingSessionDestroy.id)
            setPendingSessionDestroy(null)
            await refreshSessions()
            toast.success(`Destroyed the session for ${who}`)
          } catch (err) {
            setPendingSessionDestroy(null)
            toast.error(errorMessage(err, `destroy the session for ${who}`))
          }
        }}
      />

      <IdpEditorDialog
        state={editor}
        onClose={() => setEditor(null)}
        onSaved={async (message) => {
          setEditor(null)
          await refreshIdps()
          toast.success(message)
        }}
      />
    </AppShell>
  )
}

function IdpEditorDialog({
  state,
  onClose,
  onSaved,
}: {
  state: Editor
  onClose: () => void
  onSaved: (message: string) => Promise<void>
}) {
  const arcadia = useArcadiaClient()
  const open = state !== null
  const isEdit = state?.kind === "edit"
  const initial = isEdit ? state.idp : null

  const [name, setName] = useState("")
  const [entityId, setEntityId] = useState("")
  const [ssoUrl, setSsoUrl] = useState("")
  const [sloUrl, setSloUrl] = useState("")
  const [metadataUrl, setMetadataUrl] = useState("")
  const [callbackUrl, setCallbackUrl] = useState("")
  const [signRequests, setSignRequests] = useState(false)
  const [enabled, setEnabled] = useState(true)
  const [certificate, setCertificate] = useState("")
  const [attrJson, setAttrJson] = useState("{}")
  const [saving, setSaving] = useState(false)
  // Inside the dialog, above the buttons — a page banner here would sit behind
  // the scrim, and a rejected certificate would look like nothing happened.
  const [error, setError] = useState<unknown>(null)

  useEffect(() => {
    if (!open) return
    setError(null)
    setSaving(false)
    if (initial) {
      setName(initial.name)
      setEntityId(initial.entity_id)
      setSsoUrl(initial.sso_url)
      setSloUrl(initial.slo_url ?? "")
      setMetadataUrl(initial.metadata_url ?? "")
      setCallbackUrl(initial.callback_url ?? "")
      setSignRequests(initial.sign_requests)
      setEnabled(initial.enabled)
      setCertificate("") // never pre-fill
      setAttrJson(JSON.stringify(initial.attribute_mapping ?? {}, null, 2))
    } else {
      setName("")
      setEntityId("")
      setSsoUrl("")
      setSloUrl("")
      setMetadataUrl("")
      setCallbackUrl("")
      setSignRequests(false)
      setEnabled(true)
      setCertificate("")
      setAttrJson('{\n  "email": "email",\n  "first_name": "givenName",\n  "last_name": "surname"\n}')
    }
  }, [open, initial])

  const submit = async () => {
    setError(null)
    setSaving(true)
    try {
      let attribute_mapping: Record<string, string> = {}
      try {
        attribute_mapping = attrJson.trim() === "" ? {} : JSON.parse(attrJson)
      } catch {
        throw new Error("Attribute mapping must be valid JSON (key→value strings).")
      }
      const input: IdentityProviderInput = {
        name,
        entity_id: entityId,
        sso_url: ssoUrl,
        slo_url: sloUrl || null,
        metadata_url: metadataUrl || null,
        callback_url: callbackUrl || null,
        sign_requests: signRequests,
        enabled,
        attribute_mapping,
      }
      if (certificate.trim()) input.certificate = certificate

      if (isEdit && initial) {
        await updateIdentityProvider(arcadia, initial.id, input)
        await onSaved(`Saved ${name.trim()}`)
      } else {
        await createIdentityProvider(arcadia, input)
        await onSaved(`Created ${name.trim()}`)
      }
    } catch (err) {
      // Keep the pasted certificate and JSON on screen — retyping them is the
      // last thing an operator should have to do after a failed save.
      setError(err)
      setSaving(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
      <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>{isEdit ? `Edit ${initial?.name}` : "New identity provider"}</DialogTitle>
          <DialogDescription>
            {isEdit
              ? "Leave the certificate field blank to keep the existing one."
              : "Paste values from the IdP metadata XML, or supply the metadata URL and let arcadia fetch the rest."}
          </DialogDescription>
        </DialogHeader>

        <div className="grid grid-cols-2 gap-3">
          <div className="col-span-2 flex flex-col gap-1.5">
            <Label htmlFor="idp-name">Name</Label>
            <Input
              id="idp-name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Okta — Production"
              data-action="idp-form-name"
            />
          </div>

          <div className="flex flex-col gap-1.5">
            <Label htmlFor="idp-entity">Entity ID</Label>
            <Input
              id="idp-entity"
              value={entityId}
              onChange={(e) => setEntityId(e.target.value)}
              placeholder="https://idp.example.com/saml"
              className="font-mono text-xs"
              data-action="idp-form-entity"
            />
          </div>

          <div className="flex flex-col gap-1.5">
            <Label htmlFor="idp-sso">SSO URL</Label>
            <Input
              id="idp-sso"
              value={ssoUrl}
              onChange={(e) => setSsoUrl(e.target.value)}
              placeholder="https://idp.example.com/saml/sso"
              className="font-mono text-xs"
              data-action="idp-form-sso"
            />
          </div>

          <div className="flex flex-col gap-1.5">
            <Label htmlFor="idp-slo">SLO URL (optional)</Label>
            <Input
              id="idp-slo"
              value={sloUrl}
              onChange={(e) => setSloUrl(e.target.value)}
              placeholder="https://idp.example.com/saml/slo"
              className="font-mono text-xs"
              data-action="idp-form-slo"
            />
          </div>

          <div className="flex flex-col gap-1.5">
            <Label htmlFor="idp-metadata">Metadata URL (optional)</Label>
            <Input
              id="idp-metadata"
              value={metadataUrl}
              onChange={(e) => setMetadataUrl(e.target.value)}
              placeholder="https://idp.example.com/metadata.xml"
              className="font-mono text-xs"
              data-action="idp-form-metadata"
            />
          </div>

          <div className="col-span-2 flex flex-col gap-1.5">
            <Label htmlFor="idp-callback">Callback URL (SP ACS, optional override)</Label>
            <Input
              id="idp-callback"
              value={callbackUrl}
              onChange={(e) => setCallbackUrl(e.target.value)}
              placeholder="https://your-arcadia-core/api/v1/auth/saml/callback"
              className="font-mono text-xs"
              data-action="idp-form-callback"
            />
          </div>

          <div className="col-span-2 flex flex-col gap-1.5">
            <Label htmlFor="idp-cert">
              Certificate (PEM){" "}
              <span className="font-normal text-muted-foreground">
                {isEdit ? (initial?.has_certificate ? " · current cert kept if blank" : " · required") : " · required"}
              </span>
            </Label>
            <Textarea
              id="idp-cert"
              value={certificate}
              onChange={(e) => setCertificate(e.target.value)}
              rows={6}
              placeholder="-----BEGIN CERTIFICATE-----..."
              className="font-mono text-[11px]"
              spellCheck={false}
              data-action="idp-form-certificate"
            />
          </div>

          <div className="col-span-2 flex flex-col gap-1.5">
            <Label htmlFor="idp-attrs">Attribute mapping (JSON: arcadia field → SAML attribute)</Label>
            <Textarea
              id="idp-attrs"
              value={attrJson}
              onChange={(e) => setAttrJson(e.target.value)}
              rows={5}
              className="font-mono text-xs"
              spellCheck={false}
              data-action="idp-form-attrs"
            />
          </div>

          <div className="flex items-center justify-between rounded-md border px-3 py-2">
            <Label className="text-sm">Sign requests</Label>
            <Switch
              checked={signRequests}
              onCheckedChange={setSignRequests}
              data-action="idp-form-sign-requests"
            />
          </div>
          <div className="flex items-center justify-between rounded-md border px-3 py-2">
            <Label className="text-sm">Enabled</Label>
            <Switch
              checked={enabled}
              onCheckedChange={setEnabled}
              data-action="idp-form-enabled"
            />
          </div>
        </div>

        {error ? (
          <DialogError
            error={error}
            context={isEdit ? "save the identity provider" : "create the identity provider"}
          />
        ) : null}

        <DialogFooter>
          <Button variant="outline" onClick={onClose} disabled={saving} data-action="idp-form-cancel">
            Cancel
          </Button>
          <Button
            onClick={submit}
            disabled={saving || !name || !entityId || !ssoUrl}
            data-action="idp-form-save"
          >
            {saving ? <RefreshCw className="size-4 animate-spin" /> : <CheckCircle2 className="size-4" />}
            {isEdit ? "Save" : "Create"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

export { RouteErrorBoundary as ErrorBoundary } from "~/components/route-error"