/* eslint-disable @typescript-eslint/no-explicit-any */
import { useRef, useState } from "react";
import Logo from "../assets/logo.svg";

import { BiHide, BiShow } from "react-icons/bi";

import { LoginReq } from "../stilltrash/req_mgr";
import { useAtom } from "jotai";
import type { ssroutetype } from "../types";
export default function LoginPage({
  passAtom,
  routeAtom,
  setsetRoute,
}: {
  passAtom: any;
  routeAtom: any;
  setsetRoute: ssroutetype;
}) {
  const [show, setShow] = useState(false);
  const [atomPass, setAtomPass] = useAtom(passAtom);
  const [_route, setRoute] = useAtom(routeAtom);
  const [loading, setLoading] = useState(false);
  const [pass, setPass] = useState("");
  return (
    <div className="bg-linear-to-br from-red-500 to-zinc-800 w-screen min-h-screen flex items-center justify-center">
      <div className="flex flex-col rounded-2xl w-[90vw]  items-center justify-center py-3 max-w-150 focus-within:border-white/10 border border-transparent transition-colors relative bg-zinc-900/30 text-zinc-100">
        {atomPass != "" && (
          <div className="flex gap-3">
            <a
              href="#/dash"
              className="bg-linear-to-r  from-neutral-900 to-zinc-900 p-2 rounded-xl not-disabled:cursor-pointer transition-colors duration-200 hover:from-white hover:to-zinc-400 not-disabled:hover:text-black"
            >
              go to dash
            </a>
            <button
              onClick={() => setAtomPass("")}
              className="bg-linear-to-l  from-neutral-900 to-zinc-900 p-2 rounded-xl not-disabled:cursor-pointer transition-colors duration-200 hover:from-white hover:to-zinc-400 not-disabled:hover:text-black"
            >
              logoff
            </button>
          </div>
        )}
        <img src={Logo} alt="logo dengi" width={200} />
        <h1 className="text-zinc-200">dashboard</h1>
        <h2 className="text-3xl font-light">вход</h2>
        <form
          action="#"
          className="mt-2 flex flex-col gap-3 *:outline-none *:border *:border-transparent *:focus:border-white"
          onSubmit={async (e) => {
            e.preventDefault();
            setLoading(true);
            const r = await LoginReq(pass);
            if (r[1]) {
              setAtomPass(pass);
              setsetRoute(setRoute, "/dash");
            }
            setLoading(false);
          }}
        >
          <span className="flex items-center">
            <input
              type={show ? "text" : "password"}
              autoComplete="off"
              className="bg-zinc-800/50 p-2 rounded-l-2xl w-full min-w-51.5"
              placeholder="password"
              minLength={3}
              maxLength={20}
              required
              value={pass}
              onInput={(e) => setPass((e.target as HTMLInputElement).value)}
              disabled={loading}
            />
            <span
              className={"p-2 rounded-r-2xl border-l border-l-zinc-500 transition-colors" + (show ? " bg-white" : " bg-zinc-800/50")}
              onClick={() => {
                setShow(!show);
              }}
            >
              {!show ? (
                <BiShow color="#fff" size={23} />
              ) : (
                <BiHide color="#000" size={23} />
              )}
            </span>
          </span>

          <CoolLoginButton disabled={loading} />
        </form>
      </div>
    </div>
  );
}

function CoolLoginButton({ disabled }: { disabled: boolean }) {
  const logbuttonRef = useRef(null);

  return (
    <button
      ref={logbuttonRef}
      {...{ disabled }}
      onMouseMove={(e) => {
        const rect = (e.target as HTMLElement).getBoundingClientRect();
        (e.target as HTMLElement).style.setProperty(
          "--tw-gradient-via-position",
          `${((e.clientX - rect.left) / rect.width) * 100}%`
        );
      }}
      className="bg-linear-to-r  from-neutral-900 to-zinc-900 p-2 rounded-xl not-disabled:cursor-pointer transition-colors duration-200 not-disabled:hover:via-white via-30% not-disabled:hover:text-black disabled:via-white disabled:via-0%! disabled:animate-pulse"
    >
      войти
    </button>
  );
}
