"use client"

import { useForm, Controller } from "react-hook-form"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import Link from "next/link"
import { useRouter } from "next/navigation"

type FormValues = {
  nrp: string
  password: string
}

export default function SignInPage() {
  const router = useRouter()

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

  const onSubmit = async (data: FormValues) => {
    console.log("DATA LOGIN:", data)

    await new Promise((res) => setTimeout(res, 1000))

    router.push("/dashboard")
  }

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      className="mx-auto w-full max-w-md text-white"
    >
      <h1 className="font-heading mb-8 text-2xl font-bold sm:text-3xl">
        Masuk
      </h1>

      <div className="space-y-8">
        <div>
          <label className="text-sm">
            NRP<span className="text-red-500">*</span>
          </label>

          <Controller
            name="nrp"
            control={control}
            rules={{ required: "NRP wajib diisi" }}
            render={({ field }) => (
              <Input
                {...field}
                placeholder="Masukkan nrp anda"
                className="mt-2 h-10 border-none bg-white! text-black focus-visible:ring-0"
              />
            )}
          />

          {errors.nrp && (
            <p className="mt-1 text-xs text-red-400">{errors.nrp.message}</p>
          )}
        </div>

        <div>
          <label className="text-sm">
            Kata Sandi<span className="text-red-500">*</span>
          </label>

          <Controller
            name="password"
            control={control}
            rules={{
              required: "Password wajib diisi",
              minLength: {
                value: 6,
                message: "Minimal 6 karakter",
              },
            }}
            render={({ field }) => (
              <Input
                {...field}
                type="password"
                placeholder="Masukkan kata sandi anda"
                className="mt-2 h-10 border-none bg-white! text-black focus-visible:ring-0"
              />
            )}
          />

          {errors.password && (
            <p className="mt-1 text-xs text-red-400">
              {errors.password.message}
            </p>
          )}
        </div>

        <Button
          type="submit"
          disabled={isSubmitting}
          className="h-12 w-full bg-[#001353] text-white hover:bg-blue-800"
        >
          {isSubmitting ? "Loading..." : "Masuk"}
        </Button>

        <p className="text-center text-sm text-white/80">
          Belum punya akun?{" "}
          <Link
            href={"/auth/sign-up"}
            className="cursor-pointer font-semibold underline"
          >
            Daftar Sekarang
          </Link>
        </p>
      </div>
    </form>
  )
}