import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { useAuth } from "../../context/AuthContext";
import { login as loginApi } from "../../api/auth/login";
import { register as registerApi } from "../../api/auth/register";
import type { LoginInput } from "../../api/auth/types";

type LoginModalProps = {
  onClose: () => void;
};

export default function LoginModal({ onClose }: LoginModalProps) {
  const [isRegister, setIsRegister] = useState(false); // Kayıt olma ya da giriş yapma durumu
  const [username, setUsername] = useState(""); // Kullanıcı adı
  const [email, setEmail] = useState(""); // E-posta
  const [password, setPassword] = useState(""); // Şifre
  const [showModal, setShowModal] = useState(false); // Modal'ın görünürlüğünü kontrol eden state
  const { login } = useAuth();

  // Modal açıldığında
  useEffect(() => {
    setShowModal(true);
    const onKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    document.addEventListener("keydown", onKeyDown);

    // Scroll kilidi
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";

    return () => {
      document.removeEventListener("keydown", onKeyDown);
      document.body.style.overflow = prev;
    };
  }, [onClose]);

  // Giriş veya kayıt işlemi
  const handleSubmit = async () => {
    try {
      if (isRegister) {
        const data = await registerApi(username, email, password);
        login(data.user, data.token); // Başarılı giriş için
      } else {
        const input: LoginInput = { email, password };
        const data = await loginApi(input); // Başarılı login için
        login(data.user, data.token);
      }
      onClose(); // Giriş yaptıktan sonra modal'ı kapat
    } catch {
      alert("Giriş/Kayıt başarısız");
    }
  };

  const modal = (
    <div className="fixed inset-0 z-[999] flex items-center justify-center">
      {/* Overlay */}
      <button
        aria-label="Close"
        className="absolute inset-0 bg-black/60 z-40"
        onClick={onClose}
      />
      {/* Modal Content */}
      <div
        className="relative z-[1000] bg-white p-8 rounded-2xl w-96 shadow-xl transition-all duration-500 ease-in-out"
        style={{
          // Aşağıdan yukarıya kaydırma animasyonu
          transform: showModal ? "translateY(0)" : "translateY(100%)", // Modal'ı yukarı kaydırıyoruz
          opacity: showModal ? 1 : 0, // Opaklık değişimi
        }}
      >
        <button onClick={onClose} className="absolute top-3 right-3">
          ×
        </button>

        <h2 className="text-xl font-semibold mb-6 text-center">
          {isRegister ? "Kayıt Ol" : "Giriş Yap"}
        </h2>

        {isRegister && (
          <input
            type="text"
            placeholder="Kullanıcı adı"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            className="w-full mb-3 p-3 rounded bg-surface border"
          />
        )}

        <input
          type="email"
          placeholder="E-posta"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="w-full mb-3 p-3 rounded bg-surface border"
        />

        <input
          type="password"
          placeholder="Şifre"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          className="w-full mb-5 p-3 rounded bg-surface border"
        />

        <div className="flex justify-center">
          <button
            onClick={handleSubmit}
            className="bg-primary text-white px-6 py-2 rounded"
          >
            {isRegister ? "Kayıt Ol" : "Giriş Yap"}
          </button>
        </div>

        <p className="text-sm text-center mt-5">
          {isRegister ? "Zaten hesabın var mı?" : "Hesabın yok mu?"}
          <button
            onClick={() => setIsRegister(!isRegister)}
            className="text-primary hover:underline ml-1"
          >
            {isRegister ? "Giriş Yap" : "Kayıt Ol"}
          </button>
        </p>
      </div>
    </div>
  );

  return createPortal(modal, document.body); // Modal'ı body'ye render ediyoruz
}
