"use client"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"
import { setCookiesEncrypt } from "@/utils/globals"
import Image from "next/image"
import { useRouter } from "next/navigation"
import { useState } from "react"
import { useForm, Controller } from "react-hook-form"
import "./globals.css"
import { EyeIcon, EyeOffIcon } from "@/components/icons"

type FormValues = {
  username: string
  password: string
}

export default function Page() {
  const router = useRouter()
  const [viewPassword, setViewPassword] = useState(false)

  const {
    control,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<FormValues>({
    defaultValues: {
      username: "",
      password: "",
    },
  })

  const onSubmit = async (data: FormValues) => {
    await new Promise((res) => setTimeout(res, 1000))
    if (data.username == "multipool-admin" && data.password == "P@ssw0rd.1") {
      setCookiesEncrypt("status", "Login", { expires: 1 })
      setCookiesEncrypt("username", "multipool-admin", { expires: 1 })
      router.push("/dashboard/account-management")
    }
  }

  return (
    <div className="flex min-h-svh flex-row items-center justify-center bg-linear-to-r from-violet-50 to-violet-400 text-black">
      <div className="flex h-fit w-[30vw] flex-col items-center justify-center rounded-2xl border border-white/30 bg-white/30 p-16 shadow-[0_20px_60px_rgba(0,0,0,0.25)] backdrop-blur-xl">
        <h1 className="mb-12 self-start text-left text-4xl font-bold text-black">
          Login
        </h1>
        <form onSubmit={handleSubmit(onSubmit)} className="w-full text-black">
          <div className="space-y-8">
            <div>
              <p className="text-xs tracking-widest text-gray-800 uppercase">
                Username
              </p>{" "}
              <Controller
                name="username"
                control={control}
                rules={{ required: "Required" }}
                render={({ field }) => (
                  <Input
                    {...field}
                    placeholder="Enter your username"
                    className="mt-2 h-12 w-full rounded-xl border-none bg-white/80! px-4 text-black placeholder:text-gray-500"
                  />
                )}
              />
              {errors.username && (
                <p className="mt-1 text-xs text-red-400">
                  {errors.username.message}
                </p>
              )}
            </div>

            <div>
              <Controller
                name="password"
                control={control}
                rules={{
                  required: "Required",
                }}
                render={({ field }) => (
                  <InputGroup className="mt-2 h-12 w-full rounded-xl border-none bg-white/80! px-2 backdrop-blur">
                    <InputGroupInput
                      {...field}
                      id="inline-end-input"
                      type={viewPassword ? "text" : "password"}
                      placeholder="Enter password here"
                      className="bg-white"
                    />
                    <InputGroupAddon align="inline-end">
                      <a
                        className="cursor-pointer"
                        onClick={() => setViewPassword(!viewPassword)}
                      >
                        {viewPassword ? <EyeOffIcon /> : <EyeIcon />}
                      </a>
                    </InputGroupAddon>
                  </InputGroup>
                )}
              />

              {errors.password && (
                <p className="mt-1 text-xs text-red-400">
                  {errors.password.message}
                </p>
              )}
            </div>
            <p className="cursor-pointer text-sm text-blue-500 hover:underline">
              Forgot password?
            </p>

            <Button
              type="submit"
              disabled={isSubmitting}
              className="h-12 w-full rounded-xl bg-linear-to-r from-[#4c1d95] to-[#5b21b6] font-semibold tracking-wide text-white"
            >
              {isSubmitting ? "Loading..." : "Masuk"}
            </Button>
          </div>
        </form>
      </div>
    </div>
  )
}