"use client";

import { useState } from "react";
import Link from "next/link";
import { Eye, EyeOff } from "lucide-react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

import Button from "@/components/ui/Button";
import Card from "@/components/ui/Card";
import Input from "@/components/ui/Input";

import {
  registerSchema,
  RegisterFormData,
} from "@/types/register";

import { registerAdmin } from "@/services/auth";

export default function RegisterForm() {
  const router = useRouter();

  const [loading, setLoading] = useState(false);

  const [showPassword, setShowPassword] =
    useState(false);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<RegisterFormData>({
    resolver: zodResolver(registerSchema),
    defaultValues: {
      role: "Admin",
    },
  });

  const onSubmit = async (
    data: RegisterFormData
  ) => {
    try {
      setLoading(true);

      const response =
        await registerAdmin(data);

      toast.success(
        response.message ||
          "Account created successfully"
      );

      router.push("/login");
    } catch (error: any) {
      toast.error(
        error?.response?.data?.message ||
          "Registration failed"
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <Card className="w-full max-w-md">

      <h2 className="text-3xl font-bold text-center text-gray-800 mb-2">
        Create Account
      </h2>

      <p className="text-center text-gray-500 mb-8">
        Register as Admin
      </p>

      <form
        onSubmit={handleSubmit(onSubmit)}
        className="space-y-5"
      >

        <Input
          label="Full Name"
          placeholder="John Doe"
          {...register("name")}
          error={errors.name?.message}
        />

        <Input
          label="Email"
          type="email"
          placeholder="admin@tghr.com"
          {...register("email")}
          error={errors.email?.message}
        />

        <div className="relative">

          <Input
            label="Password"
            type={
              showPassword
                ? "text"
                : "password"
            }
            placeholder="••••••••"
            {...register("password")}
            error={errors.password?.message}
          />

          <button
            type="button"
            onClick={() =>
              setShowPassword(
                !showPassword
              )
            }
            className="absolute right-4 top-10.5"
          >
            {showPassword ? (
              <EyeOff size={18} />
            ) : (
              <Eye size={18} />
            )}
          </button>

        </div>

        <div>

          <label className="mb-2 block text-sm font-medium text-gray-700">
            Role
          </label>

          <select
            {...register("role")}
            className="
            w-full
            rounded-xl
            border
            border-gray-300
            px-4
            py-3
            outline-none
            "
          >
            <option value="Admin">
              Admin
            </option>

            <option value="Super Admin">
              Super Admin
            </option>

          </select>

          {errors.role && (
            <p className="mt-1 text-sm text-red-500">
              {errors.role.message}
            </p>
          )}

        </div>

        <Button loading={loading}>
          Create Account
        </Button>

      </form>

      <p className="text-center text-sm mt-6 text-gray-500">

        Already have an account?

        <Link
          href="/login"
          className="ml-2 font-semibold text-[#C9A227]"
        >
          Login
        </Link>

      </p>

    </Card>
  );
}