"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"

type FormValues = {
  nrp: string
  email: string
}

export default function SignUpPage() {
  const {
    control,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<FormValues>({
    defaultValues: {
      nrp: "",
      email: "",
    },
  })

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

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

  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">
        Daftar
      </h1>

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

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

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

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

          <Controller
            name="nrp"
            control={control}
            rules={{
              required: "NRP wajib diisi",
              minLength: {
                value: 8,
                message: "Minimal 8 karakter",
              },
            }}
            render={({ field }) => (
              <Input
                {...field}
                type="number"
                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>

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

        <p className="text-center text-sm text-white/80">
          Sudah memiliki akun?{" "}
          <Link
            href={"/auth/sign-in"}
            className="cursor-pointer font-semibold underline"
          >
            Masuk Sekarang
          </Link>
        </p>
      </div>
    </form>
  )
}