import { useState } from "react";

export default function FormularioGrupo2() {
  const [nombre, setNombre] = useState("");
  const [correo, setCorreo] = useState("");
  const [edad, setEdad] = useState("");
  const [contrasena, setContrasena] = useState("");
  const [confirmarContrasena, setConfirmarContrasena] = useState("");
  const [pais, setPais] = useState("");
  const [errores, setErrores] = useState({});
  const [mensajeExito, setMensajeExito] = useState("");

  const validaFormulario = (e) => {
    e.preventDefault();

    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 = "Correo inválido.";
    }

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

    if (contrasena.length < 6) {
      nuevosErrores.contrasena = "Contraseña muy corta.";
    }

    if (contrasena !== confirmarContrasena) {
      nuevosErrores.confirmarContrasena = "Las contraseñas no coinciden.";
    }

    if (pais.trim() === "") {
      nuevosErrores.pais = "Selecciona un país.";
    }

    setErrores(nuevosErrores);

    if (Object.keys(nuevosErrores).length === 0) {
      setMensajeExito(`Registro exitoso para ${nombre}.`);
    } else {
      setMensajeExito("");
    }
  };

  return (
    <div>
      <h2>Formulario extendido</h2>
      <form onSubmit={validaFormulario}>
        <input
          type="text"
          placeholder="Nombre"
          value={nombre}
          onChange={(e) => setNombre(e.target.value)}
        />
        {errores.nombre && <p>{errores.nombre}</p>}

        <input
          type="email"
          placeholder="Correo"
          value={correo}
          onChange={(e) => setCorreo(e.target.value)}
        />
        {errores.correo && <p>{errores.correo}</p>}

        <input
          type="number"
          placeholder="Edad"
          value={edad}
          onChange={(e) => setEdad(e.target.value)}
        />
        {errores.edad && <p>{errores.edad}</p>}

        <input
          type="password"
          placeholder="Contraseña"
          value={contrasena}
          onChange={(e) => setContrasena(e.target.value)}
        />
        {errores.contrasena && <p>{errores.contrasena}</p>}

        <input
          type="password"
          placeholder="Confirmar contraseña"
          value={confirmarContrasena}
          onChange={(e) => setConfirmarContrasena(e.target.value)}
        />
        {errores.confirmarContrasena && <p>{errores.confirmarContrasena}</p>}

        <select value={pais} onChange={(e) => setPais(e.target.value)}>
          <option value="">Selecciona un país</option>
          <option value="Ecuador">Ecuador</option>
          <option value="Colombia">Colombia</option>
          <option value="México">México</option>
        </select>
        {errores.pais && <p>{errores.pais}</p>}

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

      {mensajeExito && <h3>{mensajeExito}</h3>}
    </div>
  );
}