"use client";

import { Button } from "@/components/ui/button";
import EmailIcon from "@/shared/icons/emailIcon.svg";
import PasswordIcon from "@/shared/icons/passwordIcon.svg";
import { zodResolver } from "@hookform/resolvers/zod";
import { Controller, useForm } from "react-hook-form";
import { TLoginFormData, loginSchema } from "../schema";
import { useLoginMutation } from "@/services/auth/useLoginMutation";

const LoginForm = () => {
  const {
    mutate: loginMutation,
    isPending,
    isSuccess,
    isError,
    error,
  } = useLoginMutation();

  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<TLoginFormData>({
    resolver: zodResolver(loginSchema),
    defaultValues: {
      username: "",
      password: "",
    },
  });

  const handleSubmitForm = (data: TLoginFormData) => {
    loginMutation({
      username: data.username,
      password: data.password
    });
  }

  return (
    <form onSubmit={handleSubmit(handleSubmitForm)}>
      <div className='flex flex-col gap-6'>
        <div className='flex flex-col gap-12'>
          <div className='flex flex-col gap-8'>
            {/* Email filed */}
            <div className='flex flex-col gap-4'>
              <label htmlFor='username' className='text-neutral-white'>
                Username
              </label>
              <div className='flex items-center gap-2 px-[20px] py-[12px] bg-neutral-white rounded-xl'>
                <EmailIcon />
                <Controller
                  control={control}
                  name='username'
                  render={({ field }) => (
                    <input
                      {...field}
                      type='text'
                      id='username'
                      placeholder='Please enter your username'
                      className='focus-visible:outline-none w-full'
                    />
                  )}
                />
              </div>
              {errors.username && (
                <span className='text-red-500 text-sm'>{errors.username.message}</span>
              )}
            </div>
            {/* Password filed */}
            <div className='flex flex-col gap-4'>
              <label htmlFor='password' className='text-neutral-white'>
                Password
              </label>
              <div className='flex items-center gap-2 px-[20px] py-[12px] bg-neutral-white rounded-xl'>
                <PasswordIcon />
                <Controller
                  control={control}
                  name='password'
                  render={({ field }) => (
                    <input
                      {...field}
                      type='password'
                      id='password'
                      placeholder='Please enter your password'
                      className='focus-visible:outline-none w-full'
                    />
                  )}
                />
              </div>
              {errors.password && (
                <span className='text-red-500 text-sm'>{errors.password.message}</span>
              )}
            </div>
          </div>

          {/* Display Login error */}
          {isError && (
            <div className="text-red-500 text-sm bg-red-50 p-3 rounded-md">
              {error?.message || "Login failed. Please try again."}
            </div>
          )}

          <Button
            type="submit"
            className="cursor-pointer bg-main-color h-11"
            disabled={isPending || isSuccess}
          >
            {isPending
              ? "Logging in..."
              : isSuccess
                ? "Redirecting..."
                : "Log In"
            }
          </Button>
        </div>
      </div>
    </form>
  );
};

export default LoginForm;