// src/pages/Security.jsx
import React, { useState } from 'react';

const Security = () => {
  // Estado para armazenar se MFA está habilitado e os métodos de autenticação
  const [isMFAEnabled, setIsMFAEnabled] = useState(false);
  const [authMethods, setAuthMethods] = useState({
    RFID: false,
    App: false,
    Password: true,
  });
  const [users, setUsers] = useState([
    { username: 'admin', role: 'Administrator' },
    { username: 'user1', role: 'User' },
  ]);

  const handleMFAChange = (e) => {
    setIsMFAEnabled(e.target.checked);
  };

  const handleAuthMethodChange = (method) => {
    setAuthMethods({
      ...authMethods,
      [method]: !authMethods[method],
    });
  };

  const handleUserRoleChange = (username, newRole) => {
    setUsers(users.map((user) =>
      user.username === username ? { ...user, role: newRole } : user
    ));
  };

  const addUser = (username, role) => {
    setUsers([...users, { username, role }]);
  };

  const removeUser = (username) => {
    setUsers(users.filter((user) => user.username !== username));
  };

  return (
    <div className="security-container">
      <h1 className="security-title">Segurança e Autorização</h1>

      {/* MFA Checkbox */}
      <div className="security-item">
        <label>
          <input
            type="checkbox"
            checked={isMFAEnabled}
            onChange={handleMFAChange}
          />
          Ativar Autenticação Multifatorial (MFA)
        </label>
      </div>

      {/* Métodos de Autorização */}
      <div className="security-item">
        <h2>Métodos de Autorização</h2>
        <div className="auth-methods">
          <label>
            <input
              type="checkbox"
              checked={authMethods.RFID}
              onChange={() => handleAuthMethodChange('RFID')}
            />
            RFID
          </label>
          <label>
            <input
              type="checkbox"
              checked={authMethods.App}
              onChange={() => handleAuthMethodChange('App')}
            />
            Aplicativo
          </label>
          <label>
            <input
              type="checkbox"
              checked={authMethods.Password}
              onChange={() => handleAuthMethodChange('Password')}
            />
            Senha
          </label>
        </div>
      </div>

      {/* Usuários */}
      <div className="security-item">
        <h2>Usuários</h2>
        <ul>
          {users.map((user, index) => (
            <li key={index}>
              <span>{user.username} - {user.role}</span>
              <select
                value={user.role}
                onChange={(e) => handleUserRoleChange(user.username, e.target.value)}
              >
                <option value="Administrator">Administrador</option>
                <option value="User">Usuário</option>
                <option value="Maintenance">Manutenção</option>
              </select>
              <button onClick={() => removeUser(user.username)}>Remover</button>
            </li>
          ))}
        </ul>
        <div className="add-user">
          <button onClick={() => addUser('newuser', 'User')}>Adicionar Novo Usuário</button>
        </div>
      </div>
    </div>
  );
};

export default Security;