admin / Synapse-Sonar

"use client";

import { useEffect, useState } from "react";

type Role = "TENANT_ADMIN" | "SECURITY_ANALYST" | "READ_ONLY_VIEWER";
type Status = "INVITED" | "ACTIVE" | "DISABLED";

interface TenantUser {
  id: string;
  username: string;
  email: string | null;
  name: string | null;
  role: Role;
  status: Status;
  mfaEnabled: boolean;
  lastLoginAt: string | null;
}

const ROLE_LABEL: Record<Role, string> = {
  TENANT_ADMIN: "Tenant Admin",
  SECURITY_ANALYST: "Security Analyst",
  READ_ONLY_VIEWER: "Read-Only Viewer",
};

const STATUS_STYLE: Record<Status, string> = {
  ACTIVE: "bg-emerald-500/15 text-emerald-300",
  INVITED: "bg-amber-500/15 text-amber-300",
  DISABLED: "bg-slate-500/15 text-slate-400",
};

export default function UserAdministration() {
  const [users, setUsers] = useState<TenantUser[]>([]);
  const [loading, setLoading] = useState(true);
  const [inviting, setInviting] = useState(false);
  const [form, setForm] = useState({ username: "", name: "", role: "READ_ONLY_VIEWER" as Role });
  const [inviteLink, setInviteLink] = useState<{ username: string; url: string } | null>(null);
  const [copied, setCopied] = useState(false);
  const [mfaRequired, setMfaRequired] = useState(false);
  const [savingPolicy, setSavingPolicy] = useState(false);

  // Organization name editor
  const [orgName, setOrgName] = useState("");
  const [orgNameSaved, setOrgNameSaved] = useState("");
  const [savingName, setSavingName] = useState(false);
  const [nameSaved, setNameSaved] = useState(false);

  const load = () =>
    fetch("/api/users")
      .then((r) => r.json())
      .then((d) => setUsers(d.users ?? []))
      .finally(() => setLoading(false));

  useEffect(() => {
    load();
    fetch("/api/tenant/settings")
      .then((r) => r.json())
      .then((d) => {
        setMfaRequired(Boolean(d.mfaRequired));
        setOrgName(d.name ?? "");
        setOrgNameSaved(d.name ?? "");
      })
      .catch(() => void 0);
  }, []);

  const toggleMfaPolicy = async () => {
    const next = !mfaRequired;
    setMfaRequired(next); // optimistic
    setSavingPolicy(true);
    try {
      const res = await fetch("/api/tenant/settings", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ mfaRequired: next }),
      });
      if (!res.ok) setMfaRequired(!next); // revert on failure
    } catch {
      setMfaRequired(!next);
    } finally {
      setSavingPolicy(false);
    }
  };

  const saveOrgName = async () => {
    const trimmed = orgName.trim();
    if (trimmed.length < 1 || trimmed === orgNameSaved) return;
    setSavingName(true);
    setNameSaved(false);
    try {
      const res = await fetch("/api/tenant/settings", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: trimmed }),
      });
      if (res.ok) {
        setOrgNameSaved(trimmed);
        setNameSaved(true);
        setTimeout(() => setNameSaved(false), 2000);
      }
    } finally {
      setSavingName(false);
    }
  };

  const [inviteError, setInviteError] = useState<string | null>(null);

  const invite = async () => {
    setInviting(true);
    setInviteError(null);
    try {
      const res = await fetch("/api/users", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(form),
      });
      const data = await res.json();
      if (!res.ok) {
        setInviteError(data.error ?? "Could not add user");
        return;
      }
      if (data.inviteToken) {
        // No email service in the MVP — surface the link for the admin to share.
        setInviteLink({
          username: form.username,
          url: `${window.location.origin}/invite/${data.inviteToken}`,
        });
        setCopied(false);
      }
      setForm({ username: "", name: "", role: "READ_ONLY_VIEWER" });
      await load();
    } finally {
      setInviting(false);
    }
  };

  const copyInvite = async () => {
    if (!inviteLink) return;
    try {
      await navigator.clipboard.writeText(inviteLink.url);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      /* clipboard may be blocked; the link is still selectable in the field */
    }
  };

  const updateUser = async (userId: string, patch: { role?: Role; status?: Status }) => {
    await fetch("/api/users", {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ userId, ...patch }),
    });
    await load();
  };

  return (
    <div className="min-h-screen bg-[#05080f] px-8 py-10">
      <div className="mx-auto max-w-5xl">
        <header className="mb-8">
          <h1 className="text-2xl font-semibold text-slate-100">User Administration</h1>
          <p className="mt-1 text-sm text-slate-400">
            Invite teammates and assign roles within your organization.
          </p>
        </header>

        {/* organization */}
        <div className="mb-6 rounded-xl border border-slate-700/60 bg-gradient-to-b from-[#1e293b] to-[#0f172a] p-5">
          <h2 className="text-sm font-semibold text-slate-100">Organization name</h2>
          <p className="mt-1 text-xs text-slate-400">
            Shown across the app and on invitations.
          </p>
          <div className="mt-3 flex gap-2">
            <input
              value={orgName}
              onChange={(e) => setOrgName(e.target.value)}
              placeholder="My Organization"
              maxLength={80}
              className="flex-1 rounded-lg border border-slate-600/60 bg-[#05080f] px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-500"
            />
            <button
              onClick={saveOrgName}
              disabled={savingName || orgName.trim().length < 1 || orgName.trim() === orgNameSaved}
              className="rounded-lg bg-cyan-500 px-4 py-2 text-sm font-semibold text-[#05080f] transition hover:bg-cyan-400 disabled:opacity-40"
            >
              {savingName ? "Saving…" : nameSaved ? "Saved ✓" : "Save"}
            </button>
          </div>
        </div>

        {/* security policy */}
        <div className="mb-6 flex items-center justify-between rounded-xl border border-slate-700/60 bg-gradient-to-b from-[#1e293b] to-[#0f172a] p-5">
          <div>
            <h2 className="text-sm font-semibold text-slate-100">
              Require MFA for all members
            </h2>
            <p className="mt-1 text-xs text-slate-400">
              When on, every member must enroll in multi-factor authentication
              before using the app, and a code is required at each sign-in.
            </p>
          </div>
          <button
            role="switch"
            aria-checked={mfaRequired}
            disabled={savingPolicy}
            onClick={toggleMfaPolicy}
            className="relative inline-flex h-7 w-12 shrink-0 items-center rounded-full border transition-colors duration-200 disabled:opacity-60"
            style={{
              backgroundColor: mfaRequired ? "#8b5cf6" : "#1e293b",
              borderColor: mfaRequired ? "#8b5cf6" : "#334155",
              boxShadow: mfaRequired ? "0 0 12px #8b5cf688" : undefined,
            }}
          >
            <span
              className="inline-block h-5 w-5 transform rounded-full bg-white shadow-md transition-transform duration-200"
              style={{ transform: mfaRequired ? "translateX(22px)" : "translateX(3px)" }}
            />
          </button>
        </div>

        {/* add-user row */}
        <div className="mb-6 rounded-xl border border-slate-700/60 bg-gradient-to-b from-[#1e293b] to-[#0f172a] p-5">
          <div className="flex flex-wrap items-end gap-3">
            <div className="flex-1 min-w-[180px]">
              <label className="mb-1 block text-xs text-slate-400">Username</label>
              <input
                value={form.username}
                onChange={(e) => setForm({ ...form, username: e.target.value })}
                placeholder="analyst1"
                autoCapitalize="none"
                autoCorrect="off"
                className="w-full rounded-lg border border-slate-600/60 bg-[#05080f] px-3 py-2 font-mono text-sm text-slate-100 outline-none focus:border-cyan-500"
              />
            </div>
            <div className="flex-1 min-w-[140px]">
              <label className="mb-1 block text-xs text-slate-400">Name</label>
              <input
                value={form.name}
                onChange={(e) => setForm({ ...form, name: e.target.value })}
                placeholder="Optional"
                className="w-full rounded-lg border border-slate-600/60 bg-[#05080f] px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-500"
              />
            </div>
            <div className="min-w-[160px]">
              <label className="mb-1 block text-xs text-slate-400">Role</label>
              <select
                value={form.role}
                onChange={(e) => setForm({ ...form, role: e.target.value as Role })}
                className="w-full rounded-lg border border-slate-600/60 bg-[#05080f] px-3 py-2 text-sm text-slate-100 outline-none focus:border-cyan-500"
              >
                {Object.entries(ROLE_LABEL).map(([v, l]) => (
                  <option key={v} value={v}>
                    {l}
                  </option>
                ))}
              </select>
            </div>
            <button
              onClick={invite}
              disabled={inviting || form.username.trim().length < 3}
              className="rounded-lg bg-cyan-500 px-5 py-2 text-sm font-semibold text-[#05080f] transition hover:bg-cyan-400 disabled:opacity-40"
            >
              {inviting ? "Adding…" : "Add user"}
            </button>
          </div>
          {inviteError && (
            <p className="mt-3 text-xs text-rose-400">{inviteError}</p>
          )}
        </div>

        {/* invite link — no email service in the MVP, so share this manually */}
        {inviteLink && (
          <div className="mb-6 rounded-xl border border-cyan-500/40 bg-cyan-500/5 p-4">
            <div className="flex items-center justify-between">
              <p className="text-sm text-slate-200">
                Account created for{" "}
                <span className="font-mono text-cyan-300">{inviteLink.username}</span>
              </p>
              <button
                onClick={() => setInviteLink(null)}
                className="text-xs text-slate-400 hover:text-slate-100"
              >
                Dismiss
              </button>
            </div>
            <p className="mt-1 text-xs text-slate-500">
              Send this single-use link to the invitee to set their password:
            </p>
            <div className="mt-2 flex gap-2">
              <input
                readOnly
                value={inviteLink.url}
                onFocus={(e) => e.currentTarget.select()}
                className="flex-1 rounded-lg border border-slate-600/60 bg-[#05080f] px-3 py-2 font-mono text-xs text-slate-200 outline-none"
              />
              <button
                onClick={copyInvite}
                className="rounded-lg border border-cyan-500/50 px-4 py-2 text-xs font-semibold text-cyan-200 transition hover:bg-cyan-500/10"
              >
                {copied ? "Copied ✓" : "Copy"}
              </button>
            </div>
          </div>
        )}

        {/* user table */}
        <div className="overflow-hidden rounded-xl border border-slate-700/60">
          <table className="w-full text-left text-sm">
            <thead className="bg-[#0f172a] text-xs uppercase tracking-wider text-slate-500">
              <tr>
                <th className="px-4 py-3">User</th>
                <th className="px-4 py-3">Role</th>
                <th className="px-4 py-3">Status</th>
                <th className="px-4 py-3">MFA</th>
                <th className="px-4 py-3">Last login</th>
                <th className="px-4 py-3 text-right">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-800 bg-[#0f172a]/40">
              {loading ? (
                <tr>
                  <td colSpan={6} className="px-4 py-6 text-center text-slate-500">
                    Loading…
                  </td>
                </tr>
              ) : (
                users.map((u) => (
                  <tr key={u.id} className="text-slate-200">
                    <td className="px-4 py-3">
                      <div className="font-mono font-medium">{u.username}</div>
                      <div className="text-xs text-slate-400">
                        {u.name ?? u.email ?? "—"}
                      </div>
                    </td>
                    <td className="px-4 py-3">
                      <select
                        value={u.role}
                        onChange={(e) => updateUser(u.id, { role: e.target.value as Role })}
                        className="rounded border border-slate-600/60 bg-[#05080f] px-2 py-1 text-xs text-slate-100 outline-none focus:border-violet-500"
                      >
                        {Object.entries(ROLE_LABEL).map(([v, l]) => (
                          <option key={v} value={v}>
                            {l}
                          </option>
                        ))}
                      </select>
                    </td>
                    <td className="px-4 py-3">
                      <span className={`rounded px-2 py-0.5 text-[11px] font-medium ${STATUS_STYLE[u.status]}`}>
                        {u.status}
                      </span>
                    </td>
                    <td className="px-4 py-3 text-xs">
                      {u.mfaEnabled ? (
                        <span className="text-emerald-300">Enabled</span>
                      ) : (
                        <span className="text-slate-500">Off</span>
                      )}
                    </td>
                    <td className="px-4 py-3 text-xs text-slate-400">
                      {u.lastLoginAt ? new Date(u.lastLoginAt).toLocaleString() : "Never"}
                    </td>
                    <td className="px-4 py-3 text-right">
                      {u.status === "DISABLED" ? (
                        <button
                          onClick={() => updateUser(u.id, { status: "ACTIVE" })}
                          className="text-xs text-emerald-300 hover:underline"
                        >
                          Enable
                        </button>
                      ) : (
                        <button
                          onClick={() => updateUser(u.id, { status: "DISABLED" })}
                          className="text-xs text-rose-300 hover:underline"
                        >
                          Disable
                        </button>
                      )}
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}