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

export default function Bejelentkezes() {
  const [felhNev, setFelhNev] = useState('');
  const [jelszo, setJelszo] = useState('');
  const [error, setError] = useState('');
  const { login, loading } = useAuth();
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');
    
    if (!felhNev || !jelszo) {
      setError('Minden mező kitöltése kötelező');
      return;
    }
    
    try {
      const success = await login(felhNev, jelszo);
      if (success) {
        navigate('/');
      } else {
        setError('Hibás felhasználónév vagy jelszó.');
      }
    } catch (error) {
      setError('Hibás felhasználónév vagy jelszó.');
    }

    
  };

  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-80 space-y-4"
        onSubmit={handleSubmit}
      >
        <h2 className="text-2xl font-bold text-center">Bejelentkezés</h2>
        
        {error && (
          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-2 rounded">
            {error}
          </div>
        )}

        <input
          type="text"
          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"
          value={felhNev}
          onChange={(e) => setFelhNev(e.target.value)}
        />

        <input
          type="password"
          placeholder="Jelszó"
          className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          value={jelszo}
          onChange={(e) => setJelszo(e.target.value)}
        />

        <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...' : 'Bejelentkezés'}
        </button>

        <Link
          to="/regisztracio"
          className="block text-center text-sm text-blue-600 hover:underline mt-2"
        >
          Nincs még fiókod? Regisztrálj itt!
        </Link>
      </form>
    </div>
  );
}