// 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' },
    { username: 'user1' },
  ]);

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


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

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

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

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