import { useState } from "react";

function RegistroUsuario() {
  // Estados para cada campo
  const [nombre, setNombre] = useState("");
  const [correo, setCorreo] = useState("");
  const [edad, setEdad] = useState("");
  const [contrasena, setContrasena] = useState("");

  // Estados para errores
  const [errores, setErrores] = useState({});
  const [mensajeFinal, setMensajeFinal] = useState("");

  // Función de validación
  const validarFormulario = () => {
    const nuevosErrores = {};

    if (nombre.trim().length < 3) {
      nuevosErrores.nombre = "El nombre debe tener al menos 3 caracteres.";
    }

    if (!correo.includes("@") || !correo.endsWith(".com")) {
      nuevosErrores.correo = "El correo debe ser válido y terminar en .com.";
    }

    if (isNaN(edad) || edad < 18) {
      nuevosErrores.edad = "Debes ser mayor de edad (18+).";
    }

    if (contrasena.length < 6) {
      nuevosErrores.contrasena =
        "La contraseña debe tener al menos 6 caracteres.";
    }

    setErrores(nuevosErrores);

    // Devuelve true si no hay errores
    return Object.keys(nuevosErrores).length === 0;
  };

  const manejarEnvio = (e) => {
    e.preventDefault(); // Evita que se recargue la página

    if (validarFormulario()) {
      setMensajeFinal(`¡Registro exitoso! Bienvenido, ${nombre}`);
      setErrores({});
      // Limpiar campos si deseas
      setNombre("");
      setCorreo("");
      setEdad("");
      setContrasena("");
    } else {
      setMensajeFinal("");
    }
  };

  return (
    <div style={{ maxWidth: "400px", margin: "0 auto" }}>
      <h2>Registro de Usuario</h2>
      <form onSubmit={manejarEnvio}>
        <div>
          <label>Nombre completo:</label>
          <input
            type="text"
            value={nombre}
            onChange={(e) => setNombre(e.target.value)}
          />
          {errores.nombre && <p style={{ color: "red" }}>{errores.nombre}</p>}
        </div>

        <div>
          <label>Correo electrónico:</label>
          <input
            type="email"
            value={correo}
            onChange={(e) => setCorreo(e.target.value)}
          />
          {errores.correo && <p style={{ color: "red" }}>{errores.correo}</p>}
        </div>

        <div>
          <label>Edad:</label>
          <input
            type="number"
            value={edad}
            onChange={(e) => setEdad(e.target.value)}
          />
          {errores.edad && <p style={{ color: "red" }}>{errores.edad}</p>}
        </div>

        <div>
          <label>Contraseña:</label>
          <input
            type="password"
            value={contrasena}
            onChange={(e) => setContrasena(e.target.value)}
          />
          {errores.contrasena && (
            <p style={{ color: "red" }}>{errores.contrasena}</p>
          )}
        </div>

        <button type="submit">Registrarse</button>
      </form>

      {mensajeFinal && (
        <p style={{ color: "green", fontWeight: "bold" }}>{mensajeFinal}</p>
      )}
    </div>
  );
}

export default RegistroUsuario;