import {loginUser} from "../api/user";
import { useState } from "react";

export default function LoginModal({ isOpen, onClose, onSuccess }: any) {
  const [isRegistering, setIsRegistering] = useState(false);
  if (!isOpen) return null; // 👈 THIS is the key

  return(
  <div  className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center">
    <div className="bg-white rounded-2xl p-8 w-96 shadow-xl">
    <div className="flex justify-between items-center mb-6">
      <h2 className="text-2xl font-bold">Login</h2> 
      <button onClick={onClose} className="text-gray-400 hover:text-gray-600 p-2">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
          <path strokeLinecap="round" strokeLinejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
        </svg>
      </button>
    </div>
    {isRegistering ? (
      <form
        onSubmit={async (e: any) => {
          e.preventDefault();
          const fd = new FormData(e.currentTarget);
          const email = fd.get("email");
          const username = fd.get("username");
          const password = fd.get("password");
          const confirmPassword = fd.get("confirmPassword");

          if (password !== confirmPassword) {
            alert("Passwords do not match!");
            return;
          }
          if (!username) {
            alert("Please enter a username!");
            return;
          }

          // TODO: Call registerUser API
          // const res = await registerUser(email as string, username as string, password as string);
          
          // TODO: Implement actual registration logic here
          console.log("Registering with:", email, password);
          // For now, let's just switch back to login after a "successful" registration
          setIsRegistering(false);
        }}
        className="space-y-4"
      >
        <input
          name="email"
          type="email"
          placeholder="Email"
          required
          className="w-full border rounded-xl px-3 py-2"
        />
        <input
          name="username"
          type="text"
          placeholder="Username"
          required
          className="w-full border rounded-xl px-3 py-2"
        />
        <input
          name="password"
          type="password"
          placeholder="Password"
          required
          className="w-full border rounded-xl px-3 py-2"
        />
        <input
          name="confirmPassword"
          type="password"
          placeholder="Confirm Password"
          required
          className="w-full border rounded-xl px-3 py-2"
        />
        <button
          type="submit"
          className="w-full bg-indigo-600 text-white py-3 rounded-xl hover:bg-indigo-700"
        >
          Register
        </button>
        <button
          type="button"
          onClick={() => setIsRegistering(false)}
          className="w-full bg-gray-200 text-gray-800 py-3 rounded-xl hover:bg-gray-300 mt-2"
        >
          Back to Login
        </button>
      </form>
    ) : (
      <form
        onSubmit={async (e: any) => {
          e.preventDefault();
          const fd = new FormData(e.currentTarget);
          const email = fd.get("email");
          const password = fd.get("password");

          const res = await loginUser(email as string, password as string);

          const data = await res.json();
          localStorage.setItem("token", data.token);
          onSuccess(data.token);
        }}
        className="space-y-4"
      >
        <input
          name="email"
          type="email"
          placeholder="Email"
          required
          className="w-full border rounded-xl px-3 py-2"
        />
        <input
          name="password"
          type="password"
          placeholder="Password"
          required
          className="w-full border rounded-xl px-3 py-2"
        />

        <button
          type="submit"
          className="w-full bg-indigo-600 text-white py-3 rounded-xl hover:bg-indigo-700"
        >
          Login
        </button>
      <button
        type="button"
        onClick={() => setIsRegistering(true)}
        className="w-full bg-gray-200 text-gray-800 py-3 rounded-xl hover:bg-gray-300 mt-2"
      >
        Register
      </button>
      </form>
    )}
    </div>
  </div>
  );
}
