const { useState, useEffect } = React;

function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const [darkMode, setDarkMode] = useState(false);

  useEffect(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') setDarkMode(true);
    initParticles();
  }, []);

  const toggleTheme = () => {
    const newMode = !darkMode;
    setDarkMode(newMode);
    document.body.classList.toggle('dark-mode', newMode);
    localStorage.setItem('theme', newMode ? 'dark' : 'light');
  };

  const initParticles = () => {
    const particles = document.querySelector('.particles');
    if (!particles) return;
    particles.innerHTML = '';
    for (let i = 0; i < 15; i++) {
      const p = document.createElement('div');
      p.className = 'particle';
      p.style.width = Math.random() * 20 + 10 + 'px';
      p.style.height = p.style.width;
      p.style.left = Math.random() * 100 + '%';
      p.style.animationDelay = Math.random() * 10 + 's';
      p.style.animationDuration = Math.random() * 10 + 10 + 's';
      particles.appendChild(p);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);

    try {
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.message || 'Error en el login');
      }

      localStorage.setItem('pos_token', data.token);
      localStorage.setItem('user', JSON.stringify(data.user));
      
      // Redirigir según el rol
      const rol = (data.user.rol || '').toLowerCase();
      if (rol === 'administrador') {
        window.location.href = '/Sistema _Pos_Restaurante/Panel de Administrador/admin.html';
      } else if (rol === 'cocina' || rol === 'cocinero') {
        window.location.href = '/Sistema _Pos_Restaurante/Panel_Cocina/index.html';
      } else if (rol === 'mesero') {
        window.location.href = '/Sistema _Pos_Restaurante/Panel_Mesero/index.html';
      } else if (rol === 'repartidor') {
        window.location.href = '/Sistema _Pos_Restaurante/Panel_Repartidor/index.html';
       } else {
          window.location.href = '/Sistema _Pos_Restaurante/Panel de Administrador/admin.html';
        }
     } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <a href="/negocio" className="back-to-site">
        <i className="fas fa-arrow-left"></i> Volver al sitio web
      </a>
      <button className="theme-toggle" onClick={toggleTheme}>
        <i className={`fas fa-${darkMode ? 'sun' : 'moon'}`}></i>
      </button>

      <div className="particles"></div>

      <div className="login-container">
        <div className="logo-container">
          <div className="logo">
            <i className="fas fa-cash-register"></i>
          </div>
          <h1>Sistema POS</h1>
          <p>Punto de Venta</p>
        </div>

        {error && (
          <div className="alert alert-error">
            <i className="fas fa-exclamation-circle"></i> {error}
          </div>
        )}

        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label>Correo Electrónico</label>
            <div className="input-wrapper">
              <input
                type="email"
                className="form-control"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="Ingrese su correo"
                required
              />
              <i className="fas fa-envelope"></i>
            </div>
          </div>

          <div className="form-group">
            <label>Contraseña</label>
            <div className="input-wrapper">
              <input
                type="password"
                className="form-control"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="Ingrese su contraseña"
                required
              />
              <i className="fas fa-lock"></i>
            </div>
          </div>

          <div className="remember-forgot">
            <label className="remember-me">
              <input type="checkbox" />
              <span>Recordarme</span>
            </label>
            <a href="recuperar.html" className="forgot-password">¿Olvidó su contraseña?</a>
          </div>

          <button type="submit" className="btn-login" disabled={loading}>
            <i className="fas fa-sign-in-alt"></i>
            {loading ? 'Iniciando sesión...' : 'Iniciar Sesión'}
          </button>
        </form>

        <div className="business-icons">
          <div className="business-icon"><i className="fas fa-shopping-cart"></i></div>
          <div className="business-icon"><i className="fas fa-utensils"></i></div>
          <div className="business-icon"><i className="fas fa-store"></i></div>
          <div className="business-icon"><i className="fas fa-hamburger"></i></div>
        </div>

        <div className="footer-text">
          © 2024 Sistema POS - Todos los derechos reservados
        </div>
      </div>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Login />);