"use client";

/**
 * ScimCard (TASK-0132) — the org admin "Integrations → SCIM" surface.
 *
 * A SELF-CONTAINED component (like SsoTabs): it takes `orgId` and owns its
 * own data (react-query against `scimApi`). Mounted on the standalone
 * `/org/[orgId]/admin/integrations` route next to SsoTabs; TASK-0133 hosts
 * both inside the org console.
 *
 * Views:
 *  - not enabled → an empty state + an "Enable SCIM" form (user email domain
 *    for `@`-less usernames, default role, auto-join toggle).
 *  - enabled     → the connection summary (endpoint + curl example), the
 *    REVEAL-ONCE bearer-token panel (shown exactly once after enable/rotate),
 *    a test-connection panel (the browser pastes the token back — the server
 *    never stores it), rotate, and the danger-zone disable.
 *
 * The bearer token is REVEAL-ONCE: it is generated server-side and returned
 * exactly once in the enable/rotate response (the server stores only its
 * SHA-256 hash). The read returns only `tokenHint` (the last 4 chars) —
 * there is no "reveal" after save.
 *
 * A11y: inputs are real labelled fields (Field renders a <label>); the
 * reveal-once warning is role="alert"; the test panel is role="status";
 * disable uses the shared ConfirmDialog (focus-trapped); the copy button
 * carries an aria-label + a visible "Copied" state.
 */
import { useMemo, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Check, Copy, Loader2, RefreshCw, ShieldAlert, Users, Webhook } from "lucide-react";
import { scimApi, type ScimConfigView, type ScimTestResult } 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 ScimCardProps {
  orgId: string;
}

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 ScimCard({ orgId }: ScimCardProps) {
  const qc = useQueryClient();
  const query = useQuery({
    queryKey: ["orgs", orgId, "scim"],
    queryFn: () => scimApi.get(orgId),
    retry: false
  });
  const cfg: ScimConfigView | null = query.data ?? null;

  // Enable-form state.
  const [userEmailDomain, setUserEmailDomain] = useState("");
  const [defaultRole, setDefaultRole] = useState<"GUEST" | "MEMBER">("MEMBER");
  const [autoJoin, setAutoJoin] = useState(true);

  // Reveal-once token (from the enable/rotate response) — kept in state so
  // it stays visible until the user leaves; it is NEVER re-fetchable.
  const [revealedToken, setRevealedToken] = useState<string | null>(null);
  const [copied, setCopied] = useState(false);

  // Test-connection state.
  const [testToken, setTestToken] = useState("");
  const [testResult, setTestResult] = useState<ScimTestResult | null>(null);

  // Edit state (domain / role / auto-join).
  const [editing, setEditing] = useState(false);
  const [editDomain, setEditDomain] = useState("");
  const [editRole, setEditRole] = useState<"GUEST" | "MEMBER">("MEMBER");
  const [editAutoJoin, setEditAutoJoin] = useState(true);

  const [confirmDisable, setConfirmDisable] = useState(false);

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

  const enableMutation = useMutation({
    mutationFn: () =>
      scimApi.enable(orgId, {
        ...(userEmailDomain.trim() ? { userEmailDomain: userEmailDomain.trim() } : {}),
        defaultRole,
        autoJoinOrgWorkspaces: autoJoin
      }),
    onSuccess: (res) => {
      setRevealedToken(res.token);
      setTestToken(res.token); // pre-fill the test field (already revealed once)
      setCopied(false);
      toast("success", "SCIM enabled");
      invalidate();
    },
    onError: (e: Error) => toast("error", "Could not enable SCIM", e.message)
  });

  const rotateMutation = useMutation({
    mutationFn: () => scimApi.update(orgId, { rotate: true }),
    onSuccess: (res) => {
      if (res.token) {
        setRevealedToken(res.token);
        setTestToken(res.token);
        setCopied(false);
      }
      toast("success", "SCIM token rotated");
      setTestResult(null);
      invalidate();
    },
    onError: (e: Error) => toast("error", "Could not rotate SCIM token", e.message)
  });

  const saveEditMutation = useMutation({
    mutationFn: () =>
      scimApi.update(orgId, {
        userEmailDomain: editDomain.trim() ? editDomain.trim() : null,
        defaultRole: editRole,
        autoJoinOrgWorkspaces: editAutoJoin
      }),
    onSuccess: () => {
      setEditing(false);
      toast("success", "SCIM settings saved");
      invalidate();
    },
    onError: (e: Error) => toast("error", "Could not save SCIM settings", e.message)
  });

  const disableMutation = useMutation({
    mutationFn: () => scimApi.update(orgId, { disable: true }),
    onSuccess: () => {
      setConfirmDisable(false);
      setRevealedToken(null);
      setTestToken("");
      setTestResult(null);
      toast("success", "SCIM disabled");
      invalidate();
    },
    onError: (e: Error) => {
      setConfirmDisable(false);
      toast("error", "Could not disable SCIM", e.message);
    }
  });

  // After enable/rotate the revealed token is available — pre-fill the
  // test field with it so "Test connection" works without re-pasting.
  const effectiveTestToken = testToken || revealedToken || "";
  const testMutation = useMutation({
    mutationFn: () => scimApi.test(orgId, effectiveTestToken.trim()),
    onSuccess: (res) => setTestResult(res),
    onError: (e: Error) => setTestResult({ ok: false, detail: e.message })
  });

  const canCopy = useMemo(() => Boolean(revealedToken && navigator?.clipboard?.writeText), [revealedToken]);

  async function copyToken() {
    if (!revealedToken || !canCopy) return;
    try {
      await navigator.clipboard.writeText(revealedToken);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      toast("error", "Copy failed — select the token and copy manually");
    }
  }

  function startEdit() {
    setEditDomain(cfg?.userEmailDomain ?? "");
    setEditRole(cfg?.defaultRole ?? "MEMBER");
    setEditAutoJoin(cfg?.autoJoinOrgWorkspaces ?? true);
    setEditing(true);
  }

  // ------------------------------- loading / error --------------------------
  if (query.isLoading) {
    return (
      <div className="flex items-center gap-2 p-6 text-sm text-muted-foreground" role="status">
        <Loader2 className="size-4 animate-spin" /> Loading SCIM settings…
      </div>
    );
  }
  if (query.isError) {
    return (
      <div className="rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive" role="alert">
        Could not load SCIM settings: {(query.error as Error).message}
      </div>
    );
  }

  // --------------------------------- not enabled ----------------------------
  if (!cfg?.enabled) {
    return (
      <Section
        title="SCIM 2.0 (user provisioning)"
        description="Provision users and groups from your IdP (Okta, Microsoft Entra, …) over SCIM. Deactivating a user in the IdP deactivates them here — accounts are never hard-deleted."
      >
        <div className="rounded-md border border-dashed p-4">
          <p className="mb-3 text-sm text-muted-foreground">SCIM is not enabled for this organization.</p>
          <form
            className="space-y-3"
            noValidate
            onSubmit={(e) => {
              e.preventDefault();
              enableMutation.mutate();
            }}
          >
            <Field
              label="User email domain"
              hint="For @-less SCIM usernames: jane.doe + domain → jane.doe@<domain>. Leave blank if your IdP sends full emails."
            >
              <input
                className={inputCls}
                data-testid="scim-user-email-domain"
                value={userEmailDomain}
                onChange={(e) => setUserEmailDomain(e.target.value)}
                placeholder="acme.com"
              />
            </Field>
            <div className="grid gap-3 sm:grid-cols-2">
              <Field label="Default role">
                <select
                  className={inputCls}
                  data-testid="scim-default-role"
                  value={defaultRole}
                  onChange={(e) => setDefaultRole(e.target.value as "GUEST" | "MEMBER")}
                >
                  <option value="MEMBER">Member</option>
                  <option value="GUEST">Guest</option>
                </select>
              </Field>
              <div className="flex items-end pb-1">
                <label className="inline-flex items-center gap-2 text-sm">
                  <input
                    type="checkbox"
                    data-testid="scim-auto-join"
                    checked={autoJoin}
                    onChange={(e) => setAutoJoin(e.target.checked)}
                    className="size-4 rounded border-border"
                  />
                  Auto-join org workspaces
                </label>
              </div>
            </div>
            <div className="flex justify-end">
              <button type="submit" className={btnPrimary} data-testid="scim-enable" disabled={enableMutation.isPending}>
                {enableMutation.isPending ? <Loader2 className="size-4 animate-spin" /> : <Users className="size-4" />}
                Enable SCIM
              </button>
            </div>
          </form>
        </div>
      </Section>
    );
  }

  // --------------------------------- editing --------------------------------
  if (editing) {
    return (
      <form
        className="space-y-4"
        noValidate
        onSubmit={(e) => {
          e.preventDefault();
          saveEditMutation.mutate();
        }}
      >
        <div className="flex items-center justify-between">
          <h2 className="text-sm font-semibold">Edit SCIM settings</h2>
          <button type="button" className={btnSecondary} onClick={() => setEditing(false)}>
            Cancel
          </button>
        </div>
        <Field
          label="User email domain"
          hint="Clear to require full emails in the SCIM payload."
        >
          <input
            className={inputCls}
            data-testid="scim-edit-domain"
            value={editDomain}
            onChange={(e) => setEditDomain(e.target.value)}
            placeholder="acme.com"
          />
        </Field>
        <div className="grid gap-3 sm:grid-cols-2">
          <Field label="Default role">
            <select
              className={inputCls}
              data-testid="scim-edit-role"
              value={editRole}
              onChange={(e) => setEditRole(e.target.value as "GUEST" | "MEMBER")}
            >
              <option value="MEMBER">Member</option>
              <option value="GUEST">Guest</option>
            </select>
          </Field>
          <div className="flex items-end pb-1">
            <label className="inline-flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                data-testid="scim-edit-auto-join"
                checked={editAutoJoin}
                onChange={(e) => setEditAutoJoin(e.target.checked)}
                className="size-4 rounded border-border"
              />
              Auto-join org workspaces
            </label>
          </div>
        </div>
        <div className="flex justify-end">
          <button type="submit" className={btnPrimary} disabled={saveEditMutation.isPending}>
            {saveEditMutation.isPending && <Loader2 className="size-4 animate-spin" />}
            Save changes
          </button>
        </div>
      </form>
    );
  }

  // --------------------------------- enabled --------------------------------
  return (
    <div className="space-y-4">
      {revealedToken && (
        <div
          className="rounded-md border border-amber-400/50 bg-amber-500/10 p-3"
          role="alert"
          data-testid="scim-token-panel"
        >
          <div className="mb-1.5 flex items-center gap-1.5 text-sm font-medium text-amber-700 dark:text-amber-300">
            <ShieldAlert className="size-4" /> SCIM bearer token — shown only once
          </div>
          <div className="flex items-center gap-2">
            <code className="min-w-0 flex-1 break-all rounded bg-background/60 px-2 py-1.5 font-mono text-xs" data-testid="scim-token">
              {revealedToken}
            </code>
            <button
              type="button"
              className={btnSecondary}
              data-testid="scim-copy-token"
              aria-label="Copy SCIM bearer token"
              onClick={() => void copyToken()}
              disabled={!canCopy}
            >
              {copied ? <Check className="size-4 text-emerald-500" /> : <Copy className="size-4" />}
              {copied ? "Copied" : "Copy"}
            </button>
          </div>
          <p className="mt-1.5 text-xs text-amber-700/80 dark:text-amber-300/80">
            Configure this token as the bearer credential in your IdP now — it is stored only as a
            SHA-256 hash and can never be retrieved again. Rotate it at any time (the old token stops
            working immediately).
          </p>
        </div>
      )}

      <Section
        title="SCIM 2.0 (user provisioning)"
        description={
          <span className="inline-flex items-center gap-2">
            <span className="inline-flex items-center gap-1 rounded-full border border-emerald-400/40 bg-emerald-500/10 px-2 py-0.5 text-xs text-emerald-700 dark:text-emerald-300">
              <Users className="size-3" /> Enabled
            </span>
            {cfg.tokenHint && (
              <span className="text-xs text-muted-foreground">
                token …{cfg.tokenHint}
              </span>
            )}
          </span>
        }
      >
        <dl className="grid gap-2 text-sm">
          <div className="min-w-0">
            <dt className="text-xs text-muted-foreground">Endpoint</dt>
            <dd className="truncate font-mono text-xs" data-testid="scim-endpoint">
              {cfg.endpointUrl}
            </dd>
          </div>
          <div className="min-w-0">
            <dt className="text-xs text-muted-foreground">Email domain</dt>
            <dd className="truncate text-sm">{cfg.userEmailDomain || "—"}</dd>
          </div>
          <div className="min-w-0">
            <dt className="text-xs text-muted-foreground">Default role</dt>
            <dd className="text-sm">{cfg.defaultRole === "GUEST" ? "Guest" : "Member"}</dd>
          </div>
          <div className="min-w-0">
            <dt className="text-xs text-muted-foreground">Auto-join workspaces</dt>
            <dd className="text-sm">{cfg.autoJoinOrgWorkspaces ? "Yes" : "No"}</dd>
          </div>
        </dl>
        <div className="mt-2 rounded-md bg-muted/40 p-2">
          <p className="mb-1 text-xs text-muted-foreground">Quick test (IdP side):</p>
          <code className="block break-all font-mono text-xs" data-testid="scim-curl">
            {cfg.curlExample}
          </code>
        </div>
        <div className="mt-3 flex flex-wrap gap-2">
          <button type="button" className={btnSecondary} data-testid="scim-edit" onClick={startEdit}>
            <RefreshCw className="size-4" /> Edit
          </button>
          <button
            type="button"
            className={btnSecondary}
            data-testid="scim-rotate"
            onClick={() => rotateMutation.mutate()}
            disabled={rotateMutation.isPending}
          >
            {rotateMutation.isPending ? <Loader2 className="size-4 animate-spin" /> : <RefreshCw className="size-4" />}
            Rotate token
          </button>
          <button
            type="button"
            className={btnSecondary}
            data-testid="scim-test"
            onClick={() => testMutation.mutate()}
            disabled={testMutation.isPending || !effectiveTestToken.trim()}
          >
            {testMutation.isPending ? <Loader2 className="size-4 animate-spin" /> : <Webhook className="size-4" />}
            Test connection
          </button>
        </div>
        <div className="mt-3">
          <label className="mb-1 block text-xs font-medium text-muted-foreground" htmlFor="scim-test-token">
            Bearer token (paste to verify — never stored)
          </label>
          <input
            id="scim-test-token"
            className={inputCls}
            data-testid="scim-test-token"
            value={testToken}
            onChange={(e) => {
              setTestToken(e.target.value);
              setTestResult(null);
            }}
            placeholder="scim_…"
          />
          {testResult && (
            <div
              className={cn(
                "mt-2 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="scim-test-result"
            >
              <span className="font-medium">{testResult.ok ? "Connected" : "Failed"}</span>
              <span> — {testResult.detail}</span>
            </div>
          )}
        </div>
      </Section>

      <Section
        danger
        title="Danger zone"
        description="Disabling SCIM immediately invalidates the bearer token — the IdP can no longer provision or deactivate users. Provisioned users keep their accounts."
      >
        <button type="button" className={btnDanger} data-testid="scim-disable" onClick={() => setConfirmDisable(true)}>
          <Users className="size-4" /> Disable SCIM
        </button>
      </Section>

      <ConfirmDialog
        open={confirmDisable}
        title="Disable SCIM?"
        description="The bearer token stops working immediately. Your IdP will no longer be able to create, update, or deactivate users. Provisioned accounts are kept."
        confirmLabel="Disable"
        destructive
        busy={disableMutation.isPending}
        onConfirm={() => disableMutation.mutate()}
        onClose={() => setConfirmDisable(false)}
      />
    </div>
  );
}