import { useState, useEffect } from "react";
import { PrimaryButton } from "../../../components/button/PrimaryButton";
import { Input } from "../../../components/input/Input";
import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
import { Link, useNavigate } from "react-router-dom";
import { loginUser } from "../../../redux/slices/auth";
import { cn } from "../../../lib/cn";
import { setMenuActivePage } from "../../../redux/slices/store";
import { Balloon } from "../../../assets/icons/auth";
import { SecondaryButton } from "../../../components/button/SecondaryButton";
import { googleLogo } from "../../../assets/icons/input";

const Login = () => {
  const dispatch = useAppDispatch();
  const navigate = useNavigate();

  const [username, setUsername] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [submitClicked, setSubmitClicked] = useState<boolean>(false);

  const { status, error, jwt } = useAppSelector((state) => state.auth);


  const [err, setErr] = useState<string>("");

  // После успешного логина
  useEffect(() => {
    dispatch(setMenuActivePage("account"))
    if (jwt) {
      navigate("/home/offices"); // или другая страница после входа
    }
  }, [jwt]);

  const handleLogin = () => {
    // setErr(err == "" ? "Неверная почта и/или пароль" : "");
    // console.log(123);
    setSubmitClicked(true);

    if (!username || !password) return;

    dispatch(loginUser({ username, password }));
  };

  return (
    <div className="h-svh w-svw fixed pointer-events-none top-0 left-0 flex items-center justify-center">
      <div className="grid gap-[80px] grid-cols-[400px,384px]  box-border relative ">
        <div className="flex items-center justify-center ">
          <img src={Balloon} />
        </div>
        <div className=" relative pointer-events-auto">
          <div>
            <div className="text-[40px] text-liquid-white font-bold h-[50px]">
              С возвращением
            </div>
            <div className="text-[18px] text-liquid-light font-bold h-[23px]">
              Вход в аккаунт
            </div>
          </div>


          <Input name="login" autocomplete="login" className="mt-[10px]" type="text" label="Логин" onChange={(v) => {setUsername(v)}} placeholder="login"/>
          <Input name="password" autocomplete="password" className="mt-[10px]" type="password" label="Пароль" onChange={(v) => {setPassword(v)}} placeholder="abCD1234" />

          <div className="flex justify-end mt-[10px]">
            <Link
              to={""}
              className={"text-liquid-brightmain text-[16px] h-[20px] transition-all hover:underline "}>
              Забыли пароль?
            </Link>
          </div>


          <div className="mt-[10px]">
            <PrimaryButton
              className="w-full mb-[8px]"
              onClick={handleLogin}
              text={status === "loading" ? "Вход..." : "Вход"}
              disabled={status === "loading"}
            />
            <SecondaryButton
              className="w-full"
              onClick={() => {}}
            >
              <div className="flex items-center">
                <img src={googleLogo} className="h-[24px] w-[24px] mr-[15px]" />
                Вход с Google
              </div>
            </SecondaryButton>
          </div>



          <div className="flex justify-center mt-[10px]">
            <span>
              Нет аккаунта? <Link
                to={"/home/register"}
                className={"text-liquid-brightmain text-[16px] h-[20px] transition-all hover:underline "}>
                Регистрация
              </Link>
            </span>

          </div>
        </div>

      </div>
    </div>
  );
};

export default Login;