import React, { useState, useEffect } from 'react';
import { useAuth } from '../../contexts/AuthContext';
import { getUsers, updateUser, deleteUser, getFileUrl } from '../../services/pocketbaseService';
import { toast } from 'react-toastify';
import { FaUser, FaUserShield, FaTrash } from 'react-icons/fa';
import { Navigate } from 'react-router-dom';

const AdminUsersPage = () => {
  const { user } = useAuth();
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!user?.role === 'admin') {
      return <Navigate to="/" replace />;
    }
    loadUsers();
  }, [user]);
  console.log(user)
  const loadUsers = async () => {
    try {
      setLoading(true);
      const data = await getUsers();
      setUsers(Array.isArray(data) ? data : []);
    } catch (err) {
      setError('Ошибка при загрузке пользователей');
      toast.error('Не удалось загрузить пользователей');
    } finally {
      setLoading(false);
    }
  };

  const handleRoleChange = async (userId, isAdmin) => {
    try {
      await updateUser(userId, { role: isAdmin ? 'admin' : 'user' });
      toast.success('Роль пользователя обновлена');
      loadUsers();
    } catch (err) {
      toast.error('Не удалось обновить роль пользователя');
    }
  };

  const handleDelete = async (userId) => {
    if (!window.confirm('Вы уверены, что хотите удалить этого пользователя?')) {
      return;
    }

    try {
      await deleteUser(userId);
      toast.success('Пользователь удален');
      loadUsers();
    } catch (err) {
      toast.error('Не удалось удалить пользователя');
    }
  };

  if (loading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-campfire-amber"></div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="text-center text-red-500">
        <p>{error}</p>
      </div>
    );
  }

  return (
    <div className="container-custom">
      <h1 className="text-3xl font-bold mb-6">Управление пользователями</h1>
      <div className="bg-campfire-darker rounded-lg shadow-lg overflow-hidden">
        <table className="min-w-full divide-y divide-campfire-ash">
          <thead className="bg-campfire-charcoal">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-campfire-light uppercase tracking-wider">
                Пользователь
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-campfire-light uppercase tracking-wider">
                Email
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-campfire-light uppercase tracking-wider">
                Роль
              </th>
              <th className="px-6 py-3 text-left text-xs font-medium text-campfire-light uppercase tracking-wider">
                Дата регистрации
              </th>
              <th className="px-6 py-3 text-right text-xs font-medium text-campfire-light uppercase tracking-wider">
                Действия
              </th>
            </tr>
          </thead>
          <tbody className="bg-campfire-darker divide-y divide-campfire-ash">
            {users.map((user) => (
              <tr key={user.id}>
                <td className="px-6 py-4 whitespace-nowrap">
                  <div className="flex items-center">
                    <div className="flex-shrink-0 h-10 w-10">
                      <img
                        className="h-10 w-10 rounded-full object-cover"
                        src={getFileUrl(user, 'profile_picture') || 'https://pocketbase.campfiregg.ru/api/files/_pb_users_auth_/g520s25pzm0t6e1/photo_2025_05_17_22_26_21_g2bi9umsuu.jpg'}
                        alt={user.username}
                      />
                    </div>
                    <div className="ml-4">
                      <div className="text-sm font-medium text-campfire-light">
                        {user.username}
                      </div>
                    </div>
                  </div>
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <div className="text-sm text-campfire-light">{user.email}</div>
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                    user.role === 'admin' ? 'bg-campfire-amber text-campfire-dark' : 'bg-campfire-charcoal text-campfire-light'
                  }`}>
                    {user.role === 'admin' ? 'Администратор' : 'Пользователь'}
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-sm text-campfire-light">
                  {new Date(user.created).toLocaleDateString()}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                  <button
                    onClick={() => handleRoleChange(user.id, user.role !== 'admin')}
                    className="text-campfire-amber hover:text-campfire-light mr-4"
                    title={user.role === 'admin' ? 'Снять права администратора' : 'Назначить администратором'}
                  >
                    {user.role === 'admin' ? <FaUser /> : <FaUserShield />}
                  </button>
                  <button
                    onClick={() => handleDelete(user.id)}
                    className="text-red-500 hover:text-red-700"
                    title="Удалить пользователя"
                  >
                    <FaTrash />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default AdminUsersPage;
