"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Eye, EyeOff } from "lucide-react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { toast } from "sonner";
import Link from "next/link";

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

import { loginAdmin } from "@/services/auth";
import { loginSchema, LoginFormData } from "@/types/login";

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

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

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginFormData>({
    resolver: zodResolver(loginSchema),
  });

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

      const response = await loginAdmin(
        data.email,
        data.password
      );

      console.log(response);

      localStorage.setItem("token", response.token);

      localStorage.setItem(
        "admin",
        JSON.stringify(response.admin)
      );

      toast.success("Login successful");

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

  return (
    <Card className="w-full max-w-md">
      <h2 className="mb-2 text-center text-3xl font-bold text-gray-800">
        Admin Login
      </h2>

      <p className="mb-8 text-center text-gray-500">
        Sign in to continue
      </p>

      <form
        onSubmit={handleSubmit(onSubmit)}
        className="space-y-5"
      >
        <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.75"
          >
            {showPassword ? (
              <EyeOff size={18} />
            ) : (
              <Eye size={18} />
            )}
          </button>
        </div>

        <Button loading={loading}>
          Sign In
        </Button>

        <div className="flex justify-between text-sm">

          <Link
            href="/forgot-password"
            className="text-[#C9A227] hover:underline"
          >
            Forgot Password?
          </Link>

          <Link
            href="/register"
            className="text-[#C9A227] hover:underline"
          >
            Create Account
          </Link>

        </div>
      </form>
    </Card>
  );
}