import React, { useState, useEffect } from 'react';
import { db, auth } from '../firebase';
import { collection, getDocs } from 'firebase/firestore';
import { httpsCallable } from 'firebase/functions';
import Navbar from '../components/Navbar';

const Roles = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  const fetchUsers = async () => {
    const querySnapshot = await getDocs(collection(db, 'users'));
    const usersData = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
    setUsers(usersData);
    setLoading(false);
  };

  const handleRoleChange = async (email, newRole) => {
    const addUserRole = httpsCallable(auth, 'addUserRole');
    try {
      await addUserRole({ email: email, role: newRole });
      fetchUsers();
    } catch (error) {
      console.error('Error updating role:', error);
    }
  };

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

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <Navbar />
      <div className="container mt-5">
        <h4>Manage Roles</h4>
        <div className="list-group">
          {users.map((user, index) => (
            <div key={index} className="list-group-item d-flex justify-content-between align-items-center">
              <p className="mb-0">{user.email}</p>
              <div>
                <button onClick={() => handleRoleChange(user.email, 'admin')} className="btn btn-primary btn-sm mr-2">Make Admin</button>
                <button onClick={() => handleRoleChange(user.email, 'user')} className="btn btn-secondary btn-sm">Make User</button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Roles;