import React, { useState, useEffect } from "react";

const ROLES = [
  { value: "admin", label: "Administrator", icon: "👑" },
  { value: "worship_leader", label: "Worship Leader", icon: "🎤" },
  { value: "lead_singer", label: "Lead Singer - Lead Vocal", icon: "🎵" },
  { value: "bass_guitar", label: "Bass Guitar", icon: "🎸" },
  { value: "piano", label: "Piano", icon: "🎹" },
  { value: "acoustic", label: "Acoustic Guitar", icon: "🎸" },
  { value: "viewer", label: "Viewer", icon: "👁️" },
];

const PERMISSIONS = [
  { value: "view", label: "View", description: "View songs and worship lists" },
  { value: "edit", label: "Edit", description: "Edit songs and worship lists" },
  {
    value: "modify",
    label: "Modify",
    description: "Create/Delete songs and worship lists",
  },
  {
    value: "settings",
    label: "Settings",
    description: "Access settings and profiles",
  },
];

function AdminPage() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [editingUser, setEditingUser] = useState(null);
  const [deleteConfirm, setDeleteConfirm] = useState(null);
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [checkingAuth, setCheckingAuth] = useState(true);
  const [notification, setNotification] = useState(null);
  const [biometricSetupUser, setBiometricSetupUser] = useState(null);
  const [biometricLoading, setBiometricLoading] = useState(false);
  const [currentUser, setCurrentUser] = useState(null);

  // Form state
  const [formData, setFormData] = useState({
    username: "",
    password: "",
    role: "viewer",
    permissions: ["view"],
    active: true,
    has_biometric: false,
  });

  // Show notification helper
  function showNotification(message, type = "success") {
    setNotification({ message, type });
    setTimeout(() => setNotification(null), 3000);
  }

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

  async function checkAuth() {
    try {
      const response = await fetch("/api/auth/check", {
        credentials: "include",
      }).catch(() => {
        // Silently catch network errors
        return { ok: false, status: 401 };
      });

      if (response.ok) {
        const data = await response.json();
        console.log("[AdminPage] Auth check response:", data);
        console.log(
          "[AdminPage] Has settings permission:",
          data.permissions?.includes("settings")
        );
        console.log("[AdminPage] Is admin:", data.role === "admin");

        if (
          data.authenticated &&
          (data.role === "admin" ||
            (data.permissions && data.permissions.includes("settings")))
        ) {
          setIsAuthenticated(true);
          setCurrentUser({
            username: data.username,
            role: data.role,
            permissions: data.permissions,
          });
          loadUsers();
        } else if (data.authenticated) {
          console.error(
            "[AdminPage] Access denied. Role:",
            data.role,
            "Permissions:",
            data.permissions
          );
          setError(
            "Admin access required. You need 'Settings' permission to access this page."
          );
          setCheckingAuth(false);
        } else {
          setError("Please login first to access the admin panel.");
          setCheckingAuth(false);
        }
      } else {
        // 401 is expected when not logged in - don't log it
        setError("Please login first to access the admin panel.");
        setCheckingAuth(false);
      }
    } catch (err) {
      // Silently handle auth check failures - they're expected when not logged in
      setError("Please login first to access the admin panel.");
      setCheckingAuth(false);
    }
  }

  async function loadUsers() {
    try {
      setLoading(true);
      setError(null);

      const response = await fetch("/api/users", {
        credentials: "include", // Include session cookies
      });

      if (response.status === 401) {
        setError("Not logged in. Please login first.");
        return;
      }

      if (response.status === 403) {
        setError(
          "Admin access required. You must be an administrator to access this page."
        );
        return;
      }

      if (response.ok) {
        const data = await response.json();

        // Fetch biometric status for each user
        const usersWithBiometric = await Promise.all(
          data.map(async (user) => {
            try {
              const bioResponse = await fetch(
                `/api/biometric/status/${user.username}`,
                {
                  credentials: "include",
                }
              );
              if (bioResponse.ok) {
                const bioData = await bioResponse.json();
                return {
                  ...user,
                  has_biometric: bioData.has_biometric || false,
                };
              }
            } catch (err) {
              console.error(
                `Failed to get biometric status for ${user.username}:`,
                err
              );
            }
            return { ...user, has_biometric: false };
          })
        );

        setUsers(usersWithBiometric);
      } else {
        const err = await response.json();
        setError(err.message || err.error || "Failed to load users");
      }
    } catch (err) {
      console.error("Load users error:", err);
      setError("Failed to connect to server");
    } finally {
      setLoading(false);
    }
  }

  async function handleSubmit(e) {
    e.preventDefault();

    try {
      const url = editingUser ? `/api/users/${editingUser.id}` : "/api/users";
      const method = editingUser ? "PUT" : "POST";

      const payload = {
        ...formData,
        permissions: formData.permissions,
      };

      // Don't send password if empty during edit
      if (editingUser && !formData.password) {
        delete payload.password;
      }

      // Check if username changed and user has biometric
      const usernameChanged =
        editingUser && editingUser.username !== formData.username;
      const hadBiometric = editingUser?.has_biometric;

      const response = await fetch(url, {
        method,
        headers: {
          "Content-Type": "application/json",
        },
        credentials: "include", // Include session cookies
        body: JSON.stringify(payload),
      });

      if (response.ok) {
        const savedUser = await response.json();

        // If username changed and user had biometric, update biometric credentials
        if (usernameChanged && hadBiometric) {
          showNotification(
            "Username updated. Setting up biometric for new username...",
            "success"
          );

          try {
            // Update biometric registration for the new username
            const biometricAuth = await import("./biometricAuth");
            const result = await biometricAuth.registerBiometric(
              formData.username
            );

            if (result.success) {
              showNotification(
                `User updated and biometric credentials transferred to new username!`,
                "success"
              );
            } else {
              showNotification(
                `User updated, but biometric setup failed. Please click Setup button to re-enable biometric.`,
                "error"
              );
            }
          } catch (biometricErr) {
            console.error("Biometric update error:", biometricErr);
            showNotification(
              `User updated, but biometric setup failed: ${biometricErr.message}. Please click Setup button.`,
              "error"
            );
          }
        } else {
          showNotification(
            editingUser
              ? "User updated successfully!"
              : "User created successfully!",
            "success"
          );
        }

        await loadUsers();
        closeModal();
      } else {
        const err = await response.json();
        showNotification(
          err.message || err.error || "Failed to save user",
          "error"
        );
      }
    } catch (err) {
      console.error("Save user error:", err);
      showNotification("Failed to save user", "error");
    }
  }

  async function handleDelete(userId) {
    if (!deleteConfirm) return;

    try {
      const response = await fetch(`/api/users/${userId}`, {
        method: "DELETE",
        credentials: "include", // Include session cookies
      });

      if (response.ok) {
        await loadUsers();
        setDeleteConfirm(null);
        showNotification("User deleted successfully!", "success");
      } else {
        const err = await response.json();
        showNotification(
          err.message || err.error || "Failed to delete user",
          "error"
        );
      }
    } catch (err) {
      console.error("Delete user error:", err);
      showNotification("Failed to delete user", "error");
    }
  }

  function openCreateModal() {
    setEditingUser(null);
    setFormData({
      username: "",
      password: "",
      role: "viewer",
      permissions: ["view"],
      active: true,
    });
    setShowCreateModal(true);
  }

  function openEditModal(user) {
    setEditingUser(user);
    setFormData({
      username: user.username,
      password: "",
      role: user.role,
      permissions: user.permissions || ["view"],
      active: user.active,
      has_biometric: user.has_biometric || false,
    });
    setShowCreateModal(true);
  }

  async function handleBiometricSetup(user) {
    setBiometricSetupUser(user);
    setBiometricLoading(true);

    try {
      const biometricAuth = await import("./biometricAuth");

      // Check if biometric is available
      const availability = await biometricAuth.isBiometricAvailable();
      if (!availability.available) {
        showNotification(
          `Biometric not available: ${availability.reason}`,
          "error"
        );
        setBiometricSetupUser(null);
        setBiometricLoading(false);
        return;
      }

      // Register biometric for this user
      const result = await biometricAuth.registerBiometric(user.username);

      if (result.success) {
        showNotification(
          `Biometric authentication set up for ${user.username}! \ud83d\udc4d`,
          "success"
        );
        await loadUsers(); // Reload to show updated biometric status
      } else {
        showNotification(
          `Failed to set up biometric: ${result.error}`,
          "error"
        );
      }
    } catch (err) {
      console.error("Biometric setup error:", err);
      showNotification(`Biometric setup failed: ${err.message}`, "error");
    } finally {
      setBiometricSetupUser(null);
      setBiometricLoading(false);
    }
  }

  async function handleBiometricRemove(user) {
    if (
      !window.confirm(`Remove biometric authentication for ${user.username}?`)
    ) {
      return;
    }

    setBiometricSetupUser(user);
    setBiometricLoading(true);

    try {
      const biometricAuth = await import("./biometricAuth");
      const result = await biometricAuth.removeBiometric(user.username);

      if (result.success) {
        showNotification(`Biometric removed for ${user.username}`, "success");
        await loadUsers(); // Reload to show updated status
      } else {
        showNotification(
          `Failed to remove biometric: ${result.error}`,
          "error"
        );
      }
    } catch (err) {
      console.error("Biometric remove error:", err);
      showNotification(`Failed to remove biometric: ${err.message}`, "error");
    } finally {
      setBiometricSetupUser(null);
      setBiometricLoading(false);
    }
  }

  function closeModal() {
    setShowCreateModal(false);
    setEditingUser(null);
    setFormData({
      username: "",
      password: "",
      role: "viewer",
      permissions: ["view"],
      active: true,
    });
  }

  function togglePermission(perm) {
    if (formData.permissions.includes(perm)) {
      setFormData({
        ...formData,
        permissions: formData.permissions.filter((p) => p !== perm),
      });
    } else {
      setFormData({
        ...formData,
        permissions: [...formData.permissions, perm],
      });
    }
  }

  const getRoleInfo = (role) => {
    return ROLES.find((r) => r.value === role) || ROLES[ROLES.length - 1];
  };

  return (
    <div className="p-6 max-w-7xl mx-auto">
      {/* Notification Toast */}
      {notification && (
        <div
          className="fixed top-20 right-4 z-[9999] animate-slide-in"
          style={{ minWidth: "320px" }}
        >
          <div
            className={`${
              notification.type === "success"
                ? "bg-green-50 border-green-400 text-green-800"
                : "bg-red-50 border-red-400 text-red-800"
            } border-2 rounded-lg shadow-lg px-4 py-3 flex items-center justify-between`}
          >
            <div className="flex items-center">
              <span className="text-2xl mr-3">
                {notification.type === "success" ? "✓" : "⚠"}
              </span>
              <strong className="font-semibold">{notification.message}</strong>
            </div>
            <button
              onClick={() => setNotification(null)}
              className="ml-4 text-2xl font-bold hover:opacity-70"
            >
              ×
            </button>
          </div>
        </div>
      )}

      <style>{`
        @keyframes slide-in {
          from {
            transform: translateX(100%);
            opacity: 0;
          }
          to {
            transform: translateX(0);
            opacity: 1;
          }
        }
        .animate-slide-in {
          animation: slide-in 0.3s ease-out;
        }
      `}</style>

      <div className="mb-6">
        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
          <div>
            <h1 className="text-3xl font-bold text-gray-800 mb-2">
              👑 Admin Panel
            </h1>
            <p className="text-gray-600">
              Manage users, roles, and permissions
            </p>
          </div>

          {currentUser && (
            <div className="bg-gradient-to-br from-purple-50 to-blue-50 border-2 border-purple-200 rounded-xl p-4 shadow-md min-w-[280px]">
              <div className="flex items-center gap-3">
                <div className="bg-purple-600 rounded-full w-12 h-12 flex items-center justify-center text-white text-xl font-bold shadow-lg">
                  {currentUser.username.charAt(0).toUpperCase()}
                </div>
                <div>
                  <p className="text-sm text-gray-600 font-medium">
                    Welcome back
                  </p>
                  <p className="text-xl font-bold text-gray-800">
                    {currentUser.username}
                  </p>
                  <p className="text-xs text-purple-600 font-semibold mt-0.5">
                    {getRoleInfo(currentUser.role).icon}{" "}
                    {getRoleInfo(currentUser.role).label}
                  </p>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      {checkingAuth ? (
        <div className="bg-blue-50 border border-blue-200 text-blue-800 px-4 py-3 rounded-lg mb-6">
          <strong>Checking authentication...</strong>
        </div>
      ) : !isAuthenticated ? (
        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6 mb-6">
          <h3 className="text-xl font-bold text-yellow-800 mb-3">
            🔒 Authentication Required
          </h3>
          <p className="text-yellow-700 mb-4">{error}</p>
          <a
            href="/"
            className="inline-block px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-semibold"
          >
            ← Go to Login Page
          </a>
        </div>
      ) : null}

      {error && isAuthenticated && (
        <div className="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg mb-6">
          <strong>Error:</strong> {error}
        </div>
      )}

      {isAuthenticated && (
        <div className="bg-white rounded-xl shadow-md p-6 mb-6">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-xl font-bold text-gray-800">Users</h2>
            <button
              onClick={openCreateModal}
              className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-semibold flex items-center gap-2"
            >
              <span>➕</span> Create User
            </button>
          </div>

          {loading ? (
            <div className="text-center py-8 text-gray-500">
              Loading users...
            </div>
          ) : users.length === 0 ? (
            <div className="text-center py-8 text-gray-500">No users found</div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="bg-gray-50 border-b border-gray-200">
                    <th className="text-left p-3 font-semibold text-gray-700">
                      Username
                    </th>
                    <th className="text-left p-3 font-semibold text-gray-700">
                      Role
                    </th>
                    <th className="text-left p-3 font-semibold text-gray-700">
                      Permissions
                    </th>
                    <th className="text-left p-3 font-semibold text-gray-700">
                      Status
                    </th>
                    <th className="text-left p-3 font-semibold text-gray-700">
                      Last Login
                    </th>
                    <th className="text-right p-3 font-semibold text-gray-700">
                      Actions
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {users.map((user) => {
                    const roleInfo = getRoleInfo(user.role);
                    return (
                      <tr
                        key={user.id}
                        className="border-b border-gray-100 hover:bg-gray-50"
                      >
                        <td className="p-3">
                          <div className="font-semibold text-gray-800">
                            {user.username}
                          </div>
                        </td>
                        <td className="p-3">
                          <span className="inline-flex items-center gap-2 px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-semibold">
                            <span>{roleInfo.icon}</span>
                            {roleInfo.label}
                          </span>
                        </td>
                        <td className="p-3">
                          <div className="flex flex-wrap gap-1">
                            {user.permissions && user.permissions.length > 0 ? (
                              user.permissions.map((perm) => (
                                <span
                                  key={perm}
                                  className="px-2 py-1 bg-green-100 text-green-800 rounded text-xs font-semibold"
                                >
                                  {perm}
                                </span>
                              ))
                            ) : (
                              <span className="text-gray-400 text-sm">
                                None
                              </span>
                            )}
                          </div>
                        </td>
                        <td className="p-3">
                          {user.active ? (
                            <span className="text-green-600 font-semibold">
                              ✓ Active
                            </span>
                          ) : (
                            <span className="text-red-600 font-semibold">
                              ✗ Disabled
                            </span>
                          )}
                        </td>
                        <td className="p-3 text-sm text-gray-600">
                          {user.last_login
                            ? new Date(user.last_login).toLocaleDateString()
                            : "Never"}
                        </td>
                        <td className="p-3 text-right">
                          <div className="flex justify-end gap-2">
                            <button
                              onClick={() => openEditModal(user)}
                              className="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors text-sm"
                              title="Edit User"
                            >
                              ✏️ Edit
                            </button>
                            {user.has_biometric ? (
                              <button
                                onClick={() => handleBiometricRemove(user)}
                                disabled={
                                  biometricLoading &&
                                  biometricSetupUser?.id === user.id
                                }
                                className="px-3 py-1 bg-red-600 hover:bg-red-700 text-white rounded transition-colors text-sm"
                                title="Remove Biometric"
                              >
                                {biometricLoading &&
                                biometricSetupUser?.id === user.id
                                  ? "⏳"
                                  : "🔐 Remove"}
                              </button>
                            ) : (
                              <button
                                onClick={() => handleBiometricSetup(user)}
                                disabled={
                                  biometricLoading &&
                                  biometricSetupUser?.id === user.id
                                }
                                className="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white rounded transition-colors text-sm"
                                title="Setup Biometric"
                              >
                                {biometricLoading &&
                                biometricSetupUser?.id === user.id
                                  ? "⏳"
                                  : "🔐 Setup"}
                              </button>
                            )}
                            {user.role !== "admin" && (
                              <button
                                onClick={() => setDeleteConfirm(user)}
                                className="px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700 transition-colors text-sm"
                                title="Delete User"
                              >
                                🗑️ Delete
                              </button>
                            )}
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}

      {/* Create/Edit Modal */}
      {showCreateModal && (
        <div
          onClick={closeModal}
          style={{
            position: "fixed",
            inset: 0,
            background: "rgba(0,0,0,0.7)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            zIndex: 2000,
            padding: "20px",
          }}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            className="bg-white rounded-xl p-6 w-full max-w-lg max-h-[90vh] overflow-y-auto"
          >
            <h3 className="text-2xl font-bold text-gray-800 mb-4">
              {editingUser ? "✏️ Edit User" : "➕ Create New User"}
            </h3>

            <form onSubmit={handleSubmit}>
              <div className="mb-4">
                <label className="block text-sm font-semibold text-gray-700 mb-2">
                  Username
                </label>
                <input
                  type="text"
                  value={formData.username}
                  onChange={(e) =>
                    setFormData({ ...formData, username: e.target.value })
                  }
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
                  required
                />
                {editingUser && formData.has_biometric && (
                  <p className="text-xs text-blue-600 mt-1">
                    ℹ️ Changing username will automatically update biometric
                    credentials
                  </p>
                )}
              </div>

              <div className="mb-4">
                <label className="block text-sm font-semibold text-gray-700 mb-2">
                  Password
                  {editingUser && (
                    <span className="text-gray-500 font-normal ml-2">
                      (leave blank to keep current password)
                    </span>
                  )}
                </label>
                {editingUser && (
                  <div className="mb-2 space-y-2">
                    <div className="p-2 bg-green-50 border border-green-200 rounded-lg flex items-center gap-2 text-sm">
                      <span className="text-green-600">🔒</span>
                      <span className="text-green-700 font-medium">
                        Password is set and secure
                      </span>
                    </div>
                    {formData.has_biometric ? (
                      <div className="p-2 bg-blue-50 border border-blue-200 rounded-lg flex items-center gap-2 text-sm">
                        <span className="text-blue-600">🔐</span>
                        <span className="text-blue-700 font-medium">
                          Biometric authentication enabled
                        </span>
                      </div>
                    ) : (
                      <div className="p-2 bg-gray-50 border border-gray-200 rounded-lg flex items-center gap-2 text-sm">
                        <span className="text-gray-600">🔐</span>
                        <span className="text-gray-700 font-medium">
                          Biometric not set up yet - Click "Setup" button in
                          user list
                        </span>
                      </div>
                    )}
                  </div>
                )}
                <input
                  type="password"
                  value={formData.password}
                  onChange={(e) =>
                    setFormData({ ...formData, password: e.target.value })
                  }
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
                  required={!editingUser}
                  minLength={8}
                  placeholder={
                    editingUser
                      ? "Enter new password to change"
                      : "Enter password"
                  }
                />
                <p className="text-xs text-gray-500 mt-1">
                  Minimum 8 characters
                </p>
              </div>

              <div className="mb-4">
                <label className="block text-sm font-semibold text-gray-700 mb-2">
                  Role
                </label>
                <select
                  value={formData.role}
                  onChange={(e) =>
                    setFormData({ ...formData, role: e.target.value })
                  }
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
                >
                  {ROLES.map((role) => (
                    <option key={role.value} value={role.value}>
                      {role.icon} {role.label}
                    </option>
                  ))}
                </select>
              </div>

              <div className="mb-4">
                <label className="block text-sm font-semibold text-gray-700 mb-2">
                  Permissions
                </label>
                <div className="space-y-2">
                  {PERMISSIONS.map((perm) => (
                    <label
                      key={perm.value}
                      className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100"
                    >
                      <input
                        type="checkbox"
                        checked={formData.permissions.includes(perm.value)}
                        onChange={() => togglePermission(perm.value)}
                        className="mt-1"
                      />
                      <div className="flex-1">
                        <div className="font-semibold text-gray-800">
                          {perm.label}
                        </div>
                        <div className="text-sm text-gray-600">
                          {perm.description}
                        </div>
                      </div>
                    </label>
                  ))}
                </div>
              </div>

              <div className="mb-6">
                <label className="flex items-center gap-3 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={formData.active}
                    onChange={(e) =>
                      setFormData({ ...formData, active: e.target.checked })
                    }
                  />
                  <span className="font-semibold text-gray-800">
                    Account Active
                  </span>
                </label>
              </div>

              <div className="flex gap-3 justify-end">
                <button
                  type="button"
                  onClick={closeModal}
                  className="px-6 py-2 bg-gray-300 text-gray-800 rounded-lg hover:bg-gray-400 transition-colors font-semibold"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors font-semibold"
                >
                  {editingUser ? "Update User" : "Create User"}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Delete Confirmation Modal */}
      {deleteConfirm && (
        <div
          onClick={() => setDeleteConfirm(null)}
          style={{
            position: "fixed",
            inset: 0,
            background: "rgba(0,0,0,0.7)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            zIndex: 2000,
            padding: "20px",
          }}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            className="bg-white rounded-xl p-6 w-full max-w-md"
          >
            <h3 className="text-2xl font-bold text-red-600 mb-4">
              ⚠️ Delete User
            </h3>
            <p className="text-gray-700 mb-6">
              Are you sure you want to delete user{" "}
              <strong>{deleteConfirm.username}</strong>? This action cannot be
              undone.
            </p>
            <div className="flex gap-3 justify-end">
              <button
                onClick={() => setDeleteConfirm(null)}
                className="px-6 py-2 bg-gray-300 text-gray-800 rounded-lg hover:bg-gray-400 transition-colors font-semibold"
              >
                Cancel
              </button>
              <button
                onClick={() => handleDelete(deleteConfirm.id)}
                className="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-semibold"
              >
                Delete User
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default AdminPage;
