import React, { useState } from "react";
import { ToggleButton } from "../Layout/Button";
import { LogIn as LogInIcon, User as UserIcon } from "lucide-react";
import LoginForm from "./LoginForm";
import RegisterForm from "./RegisterForm";
import "../../assets/styles/auth.css";

interface AuthModalProps {
  onClose: () => void;
}

const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
  const [selectedTab, setSelectedTab] = useState<string>("Login");
  const [spinDuration, setSpinDuration] = useState("7s");

  const handleSubmit = () => {
    setSpinDuration("1s");

    setTimeout(() => {
      setSpinDuration("7s");
    }, 3500);
  };

  return (
    <>
      {/*Background Blur*/}
      <div
        id="blurring-layer"
        className="fixed z-50 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"
      ></div>

      {/*Container*/}
      <div id="auth-modal"
        className="fixed inset-0 flex flex-col items-center justify-around z-[9000] 
        h-[95vh] m-auto min-w-[65vw] w-fit py-[80px] rounded-[5rem]  transition-all animate-floating"
      >
        {/* Login/Register Buttons Container */}
        <div className="absolute top-[60px] left-1/2 transform -translate-x-1/2 w-[300px] flex justify-center gap-8 transition-transform overflow-visible ">
          {/* Login Toggle */}
          <ToggleButton
            toggled={selectedTab === "Login"}
            extraClasses="flex flex-col items-center px-8 duration-250 transition-transform hover:translate-y-[-50px] z-[9001]"
            onClick={() => setSelectedTab("Login")}
          >
            <LogInIcon className="h-[40px] w-[40px] mr-1" />
            Login
          </ToggleButton>

          {/* Register Toggle */}
          <ToggleButton
            toggled={selectedTab === "Register"}
            extraClasses="flex flex-col items-center px-8 duration-250 transition-transform hover:translate-y-[-50px] z-[9001]"
            onClick={() => setSelectedTab("Register")}
          >
            <UserIcon className="h-[40px] w-[40px] mr-1" />
            Register
          </ToggleButton>
        </div>
        <div
          className="container fixed inset-0 flex flex-col items-center justify-around z-[9999] 
        h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem]"
          style={{ "--spin-duration": spinDuration } as React.CSSProperties}
        >
          {/*Border Container*/}
          <div
            id="border-container"
            className="front-content fixed inset-0 bg-gradient-to-br from-blue-950 via-purple-500 to-violet-800 flex flex-col justify-center
          z-50 h-[70vh] mr-0.5 mb-0.5 m-auto min-w-[40vw] w-fit py-[50px] rounded-[2rem] transition-all"
          >
            <div
              id="login-methods"
              className=" w-full flex flex-row items-center justify-evenly"
            >
              <button
                onClick={onClose}
                className="absolute top-[1rem] right-[2rem] text-[2rem] text-white hover:text-red-500 font-black hover:text-[2.5rem] transition-all"
              >
                ✕
              </button>
            </div>
            {selectedTab === "Login" ? (
              <LoginForm onSubmit={handleSubmit} />
            ) : (
              <RegisterForm onSubmit={handleSubmit} />
            )}
          </div>
        </div>
      </div>
    </>
  );
};

export default AuthModal;