// src/pages/Auth/LoginForm.jsx
// Bejelentkezési űrlap

import InputBox from "../../components/Inputs/InputBox"
import Button from "../../components/Buttons/Button"
import { motion } from "framer-motion"
import { useState, useEffect } from "react"
import { useLocation } from "react-router-dom"
import { login } from "../../api/userApi"

export default function LoginForm() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState("")
  const location = useLocation()
  const [showSuccess, setShowSuccess] = useState(false)

  useEffect(() => {
    if (location.state && location.state.success) {
      setShowSuccess(true)
      setTimeout(() => setShowSuccess(false), 4000)
    }
  }, [location.state])

  function validateEmail(email) {
    return /\S+@\S+\.\S+/.test(email)
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    setError("")
    if (!email || !password) {
      setError("Minden mező kitöltése kötelező.")
      return
    }
    if (!validateEmail(email)) {
      setError("Hibás email formátum.")
      return
    }
    // Backend API
    login(email, password)
      .then((data) => {
        console.log(data)
        console.log("Bejelentkezés:", { email, password })
      })
      .catch((error) => {
        setError("Hibás bejelentkezési adatok.")
      })
  }

  return (
    <motion.div
      key="login"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.25 }}
    >
      <h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">Bejelentkezés</h2>
      {showSuccess && (
        <div className="fixed top-6 left-1/2 -translate-x-1/2 bg-green-500 text-white px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300">
          Sikeres regisztráció! Az email ellenőrzése után be tudsz lépni.
        </div>
      )}
      {error && <div className="mb-4 text-red-600 text-center font-semibold">{error}</div>}
      <form onSubmit={handleSubmit} className="space-y-6">
        <InputBox
          type="email"
          placeholder="Email cím"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <InputBox
          type="password"
          placeholder="Jelszó"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <Button text="Bejelentkezés" type="submit" />
      </form>
    </motion.div>
  )
}