"use client";

import { useEffect, useState } from "react";
import { api } from "@/lib/api";
import { cn } from "@/lib/utils";
import { formatDate } from "@/lib/utils";
import { ShieldCheck, ShieldOff, UserPlus } from "lucide-react";

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 loadUsers = async () => {
    try {
      const data = await api.getUsers();
      setUsers(data);
    } catch (err: any) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

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

  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);
    }
  };

  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) => (
            <div
              key={user.pubkey || user.id}
              className="bg-surface-container-low rounded-xl p-6 flex items-center justify-between"
            >
              <div>
                <p className="text-on-surface font-mono text-sm">
                  {user.pubkey?.slice(0, 12)}...{user.pubkey?.slice(-8)}
                </p>
                <div className="flex items-center gap-3 mt-2">
                  <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>
              {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>
  );
}