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 { ArcadiaError, useArcadiaClient } from "@crema/arcadia-core-client"
import {
  ActionsCell,
  BadgeCell,
  DataTable,
  DateCell,
  Pagination,
  useTable,
  type ActionItem,
  type BadgeTone,
  type Column,
} from "@crema/table-ui"
import { AlertBanner, ConfirmDialog, EmptyState, LoadingOverlay } from "@crema/feedback-ui"

import { AppShell } from "~/components/layout/app-shell"
import { Badge } from "~/components/ui/badge"
import { Button } from "~/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} 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

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

  const [idps, setIdps] = useState<IdentityProvider[]>([])
  const [sessions, setSessions] = useState<SamlSession[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [info, setInfo] = useState<string | null>(null)
  const [editor, setEditor] = useState<Editor>(null)
  const [pendingDelete, setPendingDelete] = useState<IdentityProvider | null>(null)
  const [pendingSessionDestroy, setPendingSessionDestroy] = useState<SamlSession | null>(null)

  const refresh = useCallback(async () => {
    setError(null)
    setLoading(true)
    try {
      const [i, s] = await Promise.all([
        listIdentityProviders(arcadia).catch(() => [] as IdentityProvider[]),
        listSamlSessions(arcadia).catch(() => [] as SamlSession[]),
      ])
      setIdps(i)
      setSessions(s)
    } catch (err) {
      setError(err instanceof ArcadiaError ? err.message : "Failed to load SSO data.")
    } finally {
      setLoading(false)
    }
  }, [arcadia])

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

  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 () => {
                try {
                  await updateIdentityProvider(arcadia, i.id, { enabled: !i.enabled })
                  setInfo(`${i.name} ${i.enabled ? "disabled" : "enabled"}.`)
                  await refresh()
                } catch (err) {
                  setError(err instanceof ArcadiaError ? err.message : "Toggle failed.")
                }
              },
            },
            {
              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, refresh],
  )

  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>

        {error ? (
          <AlertBanner variant="error" dismissible onDismiss={() => setError(null)}>
            {error}
          </AlertBanner>
        ) : null}
        {info ? (
          <AlertBanner variant="success" dismissible onDismiss={() => setInfo(null)}>
            {info}
          </AlertBanner>
        ) : null}

        <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">
                <LoadingOverlay active={loading && idps.length === 0} label="Loading IdPs…" />
                {idpTable.total === 0 && !loading ? (
                  <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={loading && idps.length > 0}
                      stickyHeader
                    />
                    <Pagination
                      page={idpTable.page}
                      pageSize={idpTable.pageSize}
                      total={idpTable.total}
                      onPageChange={idpTable.setPage}
                      onPageSizeChange={idpTable.setPageSize}
                    />
                  </>
                )}
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="sessions" className="pt-4">
            <Card>
              <CardContent className="p-0">
                {sessions.length === 0 ? (
                  <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">{s.name_id ?? s.user_id}</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>
                )}
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>

      <ConfirmDialog
        open={pendingDelete !== null}
        onOpenChange={(o) => !o && setPendingDelete(null)}
        title="Delete identity provider?"
        description={
          pendingDelete
            ? `${pendingDelete.name} will be removed. Existing SAML sessions remain valid until they expire.`
            : ""
        }
        confirmLabel="Delete"
        variant="danger"
        onConfirm={async () => {
          if (!pendingDelete) return
          try {
            await deleteIdentityProvider(arcadia, pendingDelete.id)
            setPendingDelete(null)
            setInfo("Identity provider deleted.")
            await refresh()
          } catch (err) {
            setError(err instanceof ArcadiaError ? err.message : "Delete failed.")
            setPendingDelete(null)
          }
        }}
      />

      <ConfirmDialog
        open={pendingSessionDestroy !== null}
        onOpenChange={(o) => !o && setPendingSessionDestroy(null)}
        title="Destroy SAML session?"
        description={
          pendingSessionDestroy
            ? `Session for ${pendingSessionDestroy.name_id ?? pendingSessionDestroy.user_id} will be revoked.`
            : ""
        }
        confirmLabel="Destroy"
        variant="danger"
        onConfirm={async () => {
          if (!pendingSessionDestroy) return
          try {
            await destroySamlSession(arcadia, pendingSessionDestroy.id)
            setPendingSessionDestroy(null)
            setInfo("Session destroyed.")
            await refresh()
          } catch (err) {
            setError(err instanceof ArcadiaError ? err.message : "Destroy failed.")
            setPendingSessionDestroy(null)
          }
        }}
      />

      <IdpEditorDialog
        state={editor}
        onClose={() => setEditor(null)}
        onSaved={async (msg) => {
          setEditor(null)
          if (msg) setInfo(msg)
          await refresh()
        }}
        onError={setError}
      />
    </AppShell>
  )
}

function IdpEditorDialog({
  state,
  onClose,
  onSaved,
  onError,
}: {
  state: Editor
  onClose: () => void
  onSaved: (msg?: string) => Promise<void>
  onError: (msg: string | null) => 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)

  useEffect(() => {
    if (!open) return
    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 () => {
    onError(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("Identity provider updated.")
      } else {
        await createIdentityProvider(arcadia, input)
        await onSaved("Identity provider created.")
      }
    } catch (err) {
      onError(
        err instanceof ArcadiaError
          ? err.message
          : err instanceof Error
            ? err.message
            : "Save failed.",
      )
    } finally {
      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-app/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>

        <DialogFooter>
          <Button variant="outline" onClick={onClose} disabled={saving}>
            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>
  )
}