BelgianBitcoinEmbassy/frontend/app/admin/users/page.tsx

"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import { nip19 } from "nostr-tools";
import { api } from "@/lib/api";
import { cn, formatDate } from "@/lib/utils";
import { fetchNostrProfile, type NostrProfile } from "@/lib/nostr";
import { ShieldCheck, ShieldOff, UserPlus } from "lucide-react";

function hexToNpub(hex: string): string {
  try {
    return nip19.npubEncode(hex);
  } catch {
    return "";
  }
}

function shortenNpub(npub: string): string {
  if (npub.length <= 26) return npub;
  return `${npub.slice(0, 14)}...${npub.slice(-10)}`;
}

function profileInitials(profile: NostrProfile | undefined, npub: string): string {
  const n = profile?.name || profile?.displayName;
  if (n?.trim()) return n.trim().slice(0, 2).toUpperCase();
  if (npub.length >= 8) return npub.slice(5, 7).toUpperCase();
  return "?";
}

export default function UsersPage() {
  const [users, setUsers] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [promotePubkey, setPromotePubkey] = useState("");
  const [promoting, setPromoting] = useState(false);
  const [hostname, setHostname] = useState("");
  const [usernameDrafts, setUsernameDrafts] = useState<Record<string, string>>({});
  const [savingPubkey, setSavingPubkey] = useState<string | null>(null);
  const [nostrByPubkey, setNostrByPubkey] = useState<Record<string, NostrProfile>>({});
  const [nostrLoading, setNostrLoading] = useState(false);
  const [copiedPubkey, setCopiedPubkey] = useState<string | null>(null);

  const loadUsers = async () => {
    try {
      const data = await api.getUsers();
      setUsers(data);
      setUsernameDrafts(
        Object.fromEntries(
          data.map((u: { pubkey: string; username?: string | null }) => [u.pubkey, u.username ?? ""])
        )
      );
    } catch (err: any) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadUsers();
  }, []);

  useEffect(() => {
    setHostname(typeof window !== "undefined" ? window.location.hostname : "");
  }, []);

  useEffect(() => {
    if (users.length === 0) {
      setNostrByPubkey({});
      setNostrLoading(false);
      return;
    }
    let cancelled = false;
    setNostrLoading(true);
    setNostrByPubkey({});
    (async () => {
      const entries = await Promise.all(
        users.map(async (u: { pubkey: string }) => {
          const profile = await fetchNostrProfile(u.pubkey);
          return [u.pubkey, profile] as const;
        })
      );
      if (!cancelled) {
        setNostrByPubkey(Object.fromEntries(entries));
        setNostrLoading(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [users]);

  const handleCopyNpub = async (pubkey: string) => {
    const full = hexToNpub(pubkey);
    if (!full) return;
    try {
      await navigator.clipboard.writeText(full);
      setCopiedPubkey(pubkey);
      window.setTimeout(() => setCopiedPubkey((p) => (p === pubkey ? null : p)), 2000);
    } catch {
      // ignore
    }
  };

  const handlePromote = async () => {
    if (!promotePubkey.trim()) return;
    setPromoting(true);
    setError("");
    try {
      await api.promoteUser(promotePubkey);
      setPromotePubkey("");
      await loadUsers();
    } catch (err: any) {
      setError(err.message);
    } finally {
      setPromoting(false);
    }
  };

  const handleDemote = async (pubkey: string) => {
    if (!confirm("Demote this user to regular user?")) return;
    setError("");
    try {
      await api.demoteUser(pubkey);
      await loadUsers();
    } catch (err: any) {
      setError(err.message);
    }
  };

  const handlePromoteUser = async (pubkey: string) => {
    setError("");
    try {
      await api.promoteUser(pubkey);
      await loadUsers();
    } catch (err: any) {
      setError(err.message);
    }
  };

  const handleSaveUsername = async (pubkey: string, currentUsername: string | null | undefined) => {
    const trimmed = (usernameDrafts[pubkey] ?? "").trim().toLowerCase();
    if (!trimmed) return;
    setSavingPubkey(pubkey);
    setError("");
    try {
      await api.updateUserUsername(pubkey, trimmed);
      await loadUsers();
    } catch (err: any) {
      setError(err.message);
      setUsernameDrafts((prev) => ({ ...prev, [pubkey]: currentUsername ?? "" }));
    } finally {
      setSavingPubkey(null);
    }
  };

  const handleCancelUsername = (pubkey: string, stored: string | null | undefined) => {
    setUsernameDrafts((prev) => ({ ...prev, [pubkey]: stored ?? "" }));
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <div className="text-on-surface/50">Loading users...</div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold text-on-surface">User Management</h1>

      {error && <p className="text-error text-sm">{error}</p>}

      <div className="bg-surface-container-low rounded-xl p-6">
        <h2 className="text-sm font-semibold text-on-surface/70 mb-3">Promote User</h2>
        <div className="flex gap-3">
          <input
            placeholder="Pubkey (hex)"
            value={promotePubkey}
            onChange={(e) => setPromotePubkey(e.target.value)}
            className="bg-surface-container-highest text-on-surface rounded-lg px-4 py-3 w-full focus:outline-none focus:ring-1 focus:ring-primary/40 flex-1"
          />
          <button
            onClick={handlePromote}
            disabled={promoting || !promotePubkey.trim()}
            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary font-semibold text-sm hover:opacity-90 transition-opacity disabled:opacity-50 whitespace-nowrap"
          >
            <UserPlus size={16} />
            {promoting ? "Promoting..." : "Promote"}
          </button>
        </div>
      </div>

      <div className="space-y-3">
        {users.length === 0 ? (
          <p className="text-on-surface/50 text-sm">No users found.</p>
        ) : (
          users.map((user) => {
            const draft = usernameDrafts[user.pubkey] ?? "";
            const stored = user.username ?? "";
            const usernameDirty = draft.trim().toLowerCase() !== stored.toLowerCase();
            const profile = nostrByPubkey[user.pubkey];
            const fullNpub = hexToNpub(user.pubkey);
            const nostrDisplay = profile?.name || profile?.displayName;
            return (
            <div
              key={user.pubkey || user.id}
              className="bg-surface-container-low rounded-xl p-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
            >
              <div className="flex-1 min-w-0 flex gap-4 items-start">
                <div className="shrink-0 w-14 h-14 rounded-full bg-surface-container-high flex items-center justify-center overflow-hidden text-on-surface">
                  {nostrLoading ? (
                    <span className="text-on-surface/40 text-xs">…</span>
                  ) : profile?.picture ? (
                    <Image
                      src={profile.picture}
                      alt={nostrDisplay ? `Avatar: ${nostrDisplay}` : "Nostr profile picture"}
                      width={56}
                      height={56}
                      className="object-cover w-full h-full"
                      unoptimized
                    />
                  ) : (
                    <span className="font-semibold text-sm" aria-hidden>
                      {profileInitials(profile, fullNpub)}
                    </span>
                  )}
                </div>
                <div className="flex-1 min-w-0 space-y-3">
                <div>
                  <p className="text-on-surface font-semibold text-base truncate">
                    {nostrLoading ? (
                      <span className="text-on-surface/40 font-normal">…</span>
                    ) : nostrDisplay ? (
                      nostrDisplay
                    ) : (
                      <span className="text-on-surface/50 font-normal">No Nostr name</span>
                    )}
                  </p>
                  <button
                    type="button"
                    onClick={() => handleCopyNpub(user.pubkey)}
                    className="mt-1 text-left font-mono text-sm text-on-surface/80 hover:text-primary transition-colors cursor-pointer break-all w-full"
                    title={fullNpub || "Copy npub"}
                  >
                    {copiedPubkey === user.pubkey
                      ? "Copied!"
                      : fullNpub
                        ? shortenNpub(fullNpub)
                        : `${user.pubkey?.slice(0, 12)}...${user.pubkey?.slice(-8)}`}
                  </button>
                </div>
                <div>
                  <p className="text-xs font-semibold text-on-surface/50 mb-1 uppercase tracking-wide">
                    NIP-05 username
                  </p>
                  <p className="text-on-surface-variant text-xs mb-2">
                    Reserved names from the site blocklist can be assigned here (users cannot claim them on the dashboard).
                  </p>
                  <div className="flex flex-wrap items-center gap-2">
                    <input
                      value={draft}
                      onChange={(e) =>
                        setUsernameDrafts((prev) => ({ ...prev, [user.pubkey]: e.target.value }))
                      }
                      disabled={savingPubkey === user.pubkey}
                      placeholder="local-part"
                      className="bg-surface-container-highest text-on-surface rounded-lg px-3 py-2 text-sm font-mono min-w-[8rem] max-w-full flex-1 focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:opacity-50"
                    />
                    <span className="text-on-surface/50 text-sm font-mono shrink-0">
                      @{hostname || "…"}
                    </span>
                    <button
                      type="button"
                      onClick={() => handleSaveUsername(user.pubkey, user.username)}
                      disabled={
                        savingPubkey === user.pubkey ||
                        !draft.trim() ||
                        !usernameDirty
                      }
                      className="px-3 py-2 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary font-semibold text-sm hover:opacity-90 transition-opacity disabled:opacity-50 whitespace-nowrap"
                    >
                      {savingPubkey === user.pubkey ? "Saving…" : "Save"}
                    </button>
                    <button
                      type="button"
                      onClick={() => handleCancelUsername(user.pubkey, user.username)}
                      disabled={savingPubkey === user.pubkey || !usernameDirty}
                      className="px-3 py-2 rounded-lg bg-surface-container-highest text-on-surface/70 text-sm hover:text-on-surface transition-colors disabled:opacity-50 whitespace-nowrap"
                    >
                      Cancel
                    </button>
                  </div>
                  {draft.trim() && (
                    <p className="text-on-surface-variant text-xs font-mono mt-2">
                      {draft.trim().toLowerCase()}@{hostname || "…"}
                    </p>
                  )}
                </div>
                <div className="flex items-center gap-3 flex-wrap">
                  <span
                    className={cn(
                      "rounded-full px-3 py-1 text-xs font-bold",
                      user.role === "ADMIN"
                        ? "bg-primary-container/20 text-primary"
                        : user.role === "MODERATOR"
                          ? "bg-secondary-container text-on-secondary-container"
                          : "bg-surface-container-highest text-on-surface/50"
                    )}
                  >
                    {user.role}
                  </span>
                  {user.createdAt && (
                    <span className="text-on-surface/40 text-xs">
                      Joined {formatDate(user.createdAt)}
                    </span>
                  )}
                </div>
              </div>
              </div>
              {user.role !== "ADMIN" && (
                <div className="flex items-center gap-2">
                  {user.role !== "MODERATOR" && (
                    <button
                      onClick={() => handlePromoteUser(user.pubkey)}
                      className="flex items-center gap-2 px-3 py-2 rounded-lg bg-surface-container-highest text-on-surface/70 hover:text-primary text-sm transition-colors"
                    >
                      <ShieldCheck size={14} />
                      Promote
                    </button>
                  )}
                  {user.role === "MODERATOR" && (
                    <button
                      onClick={() => handleDemote(user.pubkey)}
                      className="flex items-center gap-2 px-3 py-2 rounded-lg bg-surface-container-highest text-on-surface/70 hover:text-error text-sm transition-colors"
                    >
                      <ShieldOff size={14} />
                      Demote
                    </button>
                  )}
                </div>
              )}
            </div>
            );
          })
        )}
      </div>
    </div>
  );
}