"use client";

/**
 * TASK-0133 — Members tab: list/search, role change, suspend/unsuspend.
 *
 * Suspend = `User.status SUSPENDED` (the SCIM deactivation semantics: login +
 * in-flight sessions are blocked by the AuthGuard re-check). The OWNER is
 * protected: their role cannot be changed (ownership lives on
 * `Organization.ownerId`) — the API 403s an owner demotion, so the UI disables
 * the owner's controls.
 */
import { useRef, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Search } from "lucide-react";
import { orgAdminApi, type OrgMemberRow, type OrgMemberRole } from "@/lib/org-admin";
import { isApiError } from "@/lib/api";
import { toast } from "@/stores/ui-store";
import { Section, inputCls } from "@/components/settings/settings-shell";
import { ConfirmDialog } from "@/components/ui/confirm-dialog";

const ROLES: OrgMemberRole[] = ["ADMIN", "MEMBER", "GUEST"];

export function AdminMembersTab({ orgId }: { orgId: string }) {
  const qc = useQueryClient();
  const [q, setQ] = useState("");
  const [search, setSearch] = useState("");
  const debounceRef = useRef<number | undefined>(undefined);
  const [confirm, setConfirm] = useState<{ userId: string; email: string } | null>(null);

  const members = useQuery({
    queryKey: ["orgs", orgId, "admin", "members", search],
    queryFn: () => orgAdminApi.members(orgId, search || undefined),
    retry: false,
  });

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

  const roleMut = useMutation({
    mutationFn: (v: { userId: string; role: OrgMemberRole }) => orgAdminApi.memberUpdate(orgId, v.userId, { role: v.role }),
    onSuccess: () => {
      toast("success", "Role updated");
      invalidate();
    },
    onError: (e) => toast("error", "Could not update role", isApiError(e) ? e.message : undefined),
  });

  const suspendMut = useMutation({
    mutationFn: (v: { userId: string; suspend: boolean }) => orgAdminApi.memberUpdate(orgId, v.userId, { suspend: v.suspend }),
    onSuccess: (_, v) => {
      toast("success", v.suspend ? "Member suspended" : "Member unsuspended");
      setConfirm(null);
      invalidate();
    },
    onError: (e) => {
      setConfirm(null);
      toast("error", "Could not update member", isApiError(e) ? e.message : undefined);
    },
  });

  const data = members.data?.data ?? [];

  return (
    <Section
      title="Members"
      description="Role changes apply immediately (DB-driven authorization). Suspend blocks login + in-flight sessions."
    >
      <div className="mb-3 flex items-center gap-2">
        <div className="relative flex-1">
          <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" aria-hidden />
          <input
            value={q}
            onChange={(e) => {
              setQ(e.target.value);
              // Debounce the search into the query key (150 ms).
              window.clearTimeout(debounceRef.current);
              debounceRef.current = window.setTimeout(() => setSearch(e.target.value), 150);
            }}
            placeholder="Search by name or email…"
            className={`${inputCls} pl-8`}
            aria-label="Search members"
          />
        </div>
      </div>

      {members.isLoading ? (
        <p className="text-sm text-muted-foreground" role="status">Loading members…</p>
      ) : members.isError ? (
        <p className="text-sm text-destructive" role="alert">Could not load members.</p>
      ) : data.length === 0 ? (
        <p className="text-sm text-muted-foreground">No members found.</p>
      ) : (
        <table className="w-full text-sm">
          <caption className="sr-only">Organization members</caption>
          <thead>
            <tr className="border-b border-border text-left text-xs text-muted-foreground">
              <th className="py-2 pr-3 font-medium">Member</th>
              <th className="py-2 pr-3 font-medium">Role</th>
              <th className="py-2 pr-3 font-medium">Status</th>
              <th className="py-2 font-medium">Last active</th>
            </tr>
          </thead>
          <tbody>
            {data.map((m) => (
              <MemberRow
                key={m.userId}
                m={m}
                busy={roleMut.isPending || suspendMut.isPending}
                onRole={(role) => roleMut.mutate({ userId: m.userId, role })}
                onSuspend={() => setConfirm({ userId: m.userId, email: m.email })}
                onUnsuspend={() => suspendMut.mutate({ userId: m.userId, suspend: false })}
              />
            ))}
          </tbody>
        </table>
      )}

      <ConfirmDialog
        open={confirm !== null}
        title="Suspend this member?"
        description={
          confirm ? `${confirm.email} will be blocked from logging in and their in-flight sessions end. Data is kept.` : undefined
        }
        confirmLabel="Suspend"
        destructive
        busy={suspendMut.isPending}
        onConfirm={() => confirm && suspendMut.mutate({ userId: confirm.userId, suspend: true })}
        onClose={() => setConfirm(null)}
      />
    </Section>
  );
}

function MemberRow({
  m,
  busy,
  onRole,
  onSuspend,
  onUnsuspend,
}: {
  m: OrgMemberRow;
  busy: boolean;
  onRole: (r: OrgMemberRole) => void;
  onSuspend: () => void;
  onUnsuspend: () => void;
}) {
  const isOwner = m.role === "OWNER";
  const suspended = m.status === "SUSPENDED";
  return (
    <tr data-testid={`org-admin-member-${m.userId}`} className="border-b border-border/60 last:border-0">
      <td className="py-2 pr-3">
        <div className="font-medium">{m.name}</div>
        <div className="text-xs text-muted-foreground">{m.email}</div>
      </td>
      <td className="py-2 pr-3">
        {isOwner ? (
          <span className="rounded bg-primary/10 px-1.5 py-0.5 text-xs font-medium">OWNER</span>
        ) : (
          <select
            value={m.role}
            disabled={busy}
            onChange={(e) => onRole(e.target.value as OrgMemberRole)}
            className="rounded-md border border-input bg-background px-2 py-1 text-xs outline-none focus-visible:ring-1 focus-visible:ring-ring"
            aria-label={`Role for ${m.name}`}
          >
            {ROLES.map((r) => (
              <option key={r} value={r}>
                {r}
              </option>
            ))}
          </select>
        )}
      </td>
      <td className="py-2 pr-3">
        <span
          className={
            suspended ? "rounded bg-destructive/10 px-1.5 py-0.5 text-xs font-medium text-destructive" : "text-xs text-muted-foreground"
          }
        >
          {m.status}
        </span>
      </td>
      <td className="py-2">
        {isOwner ? (
          <span className="text-xs text-muted-foreground">—</span>
        ) : suspended ? (
          <button
            type="button"
            data-testid="member-unsuspend"
            onClick={onUnsuspend}
            disabled={busy}
            className="text-xs font-medium hover:underline disabled:opacity-50"
          >
            Unsuspend
          </button>
        ) : (
          <button
            type="button"
            data-testid="member-suspend"
            onClick={onSuspend}
            disabled={busy}
            className="text-xs font-medium text-destructive hover:underline disabled:opacity-50"
          >
            Suspend
          </button>
        )}
      </td>
    </tr>
  );
}