import { useState } from 'react';
import { useAuth } from './AuthContext';
import { useNavigate } from 'react-router-dom';

export default function Regisztracio() {
  const [formData, setFormData] = useState({
    nev: '',
    email: '',
    felh_nev: '',
    jelszo: '',
    jelszo_confirmation: ''
  });
  const [errors, setErrors] = useState({});
  const { register, loading } = useAuth();
  const navigate = useNavigate();

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setErrors({});
    
    const newErrors = {};
    if (!formData.nev) newErrors.nev = 'A név megadása kötelező';
    if (!formData.email) newErrors.email = 'Az email megadása kötelező';
    if (!formData.felh_nev) newErrors.felh_nev = 'A felhasználónév megadása kötelező';
    if (!formData.jelszo) newErrors.jelszo = 'A jelszó megadása kötelező';
    if (formData.jelszo !== formData.jelszo_confirmation) {
      newErrors.jelszo_confirmation = 'A jelszavak nem egyeznek';
    }
    
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }
    
    const result = await register(formData);
    if (result.success) {
      navigate('/bejelentkezes');
    } else if (result.errors) {
      const serverErrors = {};
      for (const key in result.errors) {
        if (Array.isArray(result.errors[key])) {
          serverErrors[key] = result.errors[key][0];
        } else {
          serverErrors[key] = result.errors[key];
        }
      }
      setErrors(serverErrors);
    }
  };

  return (
    <div className="flex justify-center items-center min-h-screen bg-yellow-100">
      <form 
        className="bg-white p-6 rounded-lg shadow-lg w-96 space-y-4"
        onSubmit={handleSubmit}
      >
        <h2 className="text-2xl font-bold text-center">Regisztráció</h2>

        <div>
          <label className="block text-gray-700">Név:</label>
          <input
            type="text"
            name="nev"
            placeholder="Név"
            className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.nev ? 'border-red-500' : ''}`}
            value={formData.nev}
            onChange={handleChange}
          />
          {errors.nev && <p className="text-red-500 text-sm mt-1">{errors.nev}</p>}
        </div>

        <div>
          <label className="block text-gray-700">E-mail cím:</label>
          <input
            type="email"
            name="email"
            placeholder="E-mail cím"
            className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.email ? 'border-red-500' : ''}`}
            value={formData.email}
            onChange={handleChange}
          />
          {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email}</p>}
        </div>

        <div>
          <label className="block text-gray-700">Felhasználónév:</label>
          <input
            type="text"
            name="felh_nev"
            placeholder="Felhasználónév"
            className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.felh_nev ? 'border-red-500' : ''}`}
            value={formData.felh_nev}
            onChange={handleChange}
          />
          {errors.felh_nev && <p className="text-red-500 text-sm mt-1">{errors.felh_nev}</p>}
        </div>

        <div>
          <label className="block text-gray-700">Jelszó:</label>
          <input
            type="password"
            name="jelszo"
            placeholder="Jelszó"
            className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.jelszo ? 'border-red-500' : ''}`}
            value={formData.jelszo}
            onChange={handleChange}
          />
          {errors.jelszo && <p className="text-red-500 text-sm mt-1">{errors.jelszo}</p>}
        </div>

        <div>
          <label className="block text-gray-700">Jelszó újra:</label>
          <input
            type="password"
            name="jelszo_confirmation"
            placeholder="Jelszó újra"
            className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.jelszo_confirmation ? 'border-red-500' : ''}`}
            value={formData.jelszo_confirmation}
            onChange={handleChange}
          />
          {errors.jelszo_confirmation && <p className="text-red-500 text-sm mt-1">{errors.jelszo_confirmation}</p>}
        </div>

        <button
          type="submit"
          className="w-full bg-yellow-600 text-white py-2 rounded-lg hover:bg-yellow-700 transition"
          disabled={loading}
        >
          {loading ? 'Betöltés...' : 'Regisztráció'}
        </button>
      </form>
    </div>
  );
}