"use client";

import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/inputs/input";
import { PhoneInput } from "@/components/ui/inputs/phone-input";
import { useAuthApi } from "@/hooks/use-auth-api";
import { useRouter } from "@/i18n/routing";
import { setAuthSessionCookie } from "@/lib/auth-session";
import { getAuthErrorMessage } from "@/lib/auth-error";
import { extractUserAccess } from "@/lib/rbac/access";
import { createLoginFieldSchema, createPasswordSchema } from "@/lib/validation";
import { useAuthStore } from "@/store/authStore";
import { useUserStore } from "@/store/userStore";
import { zodResolver } from "@hookform/resolvers/zod";
import { useTranslations } from "next-intl";
import Image from "next/image";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "react-toastify";
import { z } from "zod";

export const LoginForm = (): React.ReactNode => {
  const t = useTranslations("dashboard.auth");
  const tValidation = useTranslations("dashboard.auth.validation");
  const router = useRouter();
  const [loginMethod, setLoginMethod] = useState<"username" | "phone">(
    "username"
  );
  const { setResetSteps } = useAuthStore();
  const { setIsLogin, setToken, setUser, setAccess } = useUserStore();
  const { login, me, isLoggingIn } = useAuthApi();
  const [showPassword, setShowPassword] = useState(false);
  const [rememberMe, setRememberMe] = useState(false);

  // Create dynamic schema based on login method
  const formSchema = z.object({
    username: createLoginFieldSchema(loginMethod === "phone", tValidation),
    password: createPasswordSchema(tValidation),
  });

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: "",
      password: "",
    },
  });

  // Reset the username field when the login method changes.
  useEffect(() => {
    form.clearErrors("username");
    form.setValue("username", "");
  }, [loginMethod, form]);

  async function onSubmit(values: z.infer<typeof formSchema>) {
    let hasPersistedToken = false;

    try {
      const loginResponse = await login({
        login: values.username,
        password: values.password,
        device_name: "web",
      });

      const token = loginResponse.data?.token;
      if (!token) {
        throw new Error("Authentication token missing from login response");
      }

      setToken(token);
      hasPersistedToken = true;

      const meResponse = await me();
      const profile =
        meResponse.data && typeof meResponse.data === "object"
          ? (meResponse.data as Record<string, unknown>)
          : null;

      setIsLogin(true);
      setUser({
        rememberMe,
        profile,
      });
      setAccess(extractUserAccess(meResponse.data));
      setAuthSessionCookie();

      router.push("/dashboard");
    } catch (error: unknown) {
      if (hasPersistedToken) {
        setIsLogin(false);
        setToken("");
        setUser(null);
      }

      toast.error(
        getAuthErrorMessage(error, "Login failed. Please try again.")
      );
    }
  }

  return (
    <div className="flex h-full w-full flex-col items-center">
      {/* Top Bar */}
      <div className="flex w-full items-start justify-between md:px-20 px-5 pt-10">
        {/* Logo */}
        <div className="relative h-14 w-40">
          <Image
            alt={t("logoAlt")}
            fill
            className="max-w-none object-contain"
            src="/images/login/icons/maal co logo 1.svg"
          />
        </div>
      </div>

      {/* Main Content */}
      <div className="flex w-full md:max-w-[876px] translate-y-[-40%] flex-col gap-12 md:px-20 px-10 pt-[calc(50vh-0.5px)]">
        {/* Header */}
        <div className="flex w-full flex-col items-start gap-3">
          {/* Logo Icon */}
          <div className="h-14 w-14 overflow-hidden">
            <Image
              alt={t("logoIconAlt")}
              src="/images/login/svgexport-17 (14) 1.svg"
              width={56}
              height={56}
            />
          </div>

          {/* Title */}
          <div className="flex items-center justify-center gap-2">
            <h3 className="font-sans text-[28px] font-bold leading-[1.2] text-foreground">
              {t("loginTitle")}
            </h3>
          </div>

          {/* Subtitle */}
          <p className="font-sans text-lg leading-[1.2] text-muted-foreground">
            {t("loginDescriptionLong")}
          </p>
        </div>

        {/* Form */}
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="flex w-full flex-col gap-6"
          >
            {/* Login Method Toggle */}
            <div className="flex w-full items-center gap-4">
           


 <button
                type="button"
                onClick={() => setLoginMethod("username")}
                className={`flex items-center gap-2 rounded-xl border px-4 py-4 ${loginMethod === "username"
                    ? "border-primary-100 bg-primary-50"
                    : "border-border bg-white"
                  }`}
              >
                <p className="font-sans text-sm leading-[1.2] text-muted-foreground">
                  {t("username")}
                </p>
                <Image
                  src="/images/login/icons/user-bulk.svg"
                  alt={t("userIconAlt")}
                  width={20}
                  height={20}
                />
              </button>
              <div className="font-sans text-sm text-muted-foreground">{t("or")}</div>

                <button
                type="button"
                onClick={() => setLoginMethod("phone")}
                className={`flex items-center gap-2 rounded-xl border px-4 py-4 ${loginMethod === "phone"
                    ? "border-primary-100 bg-primary-50"
                    : "border-border bg-white"
                  }`}
              >
                <p className="font-sans text-sm leading-[1.2] text-muted-foreground">
                  {t("phone")}
                </p>
                <Image
                  src="/images/login/icons/call-calling.svg"
                  alt={t("phoneIconAlt")}
                  width={20}
                  height={20}
                />
              </button>
            </div>

            {/* Form Fields */}
            <div className="flex w-full flex-col gap-6">
              <div className="flex w-full flex-col gap-4">
                {/* Username/Phone Field */}
                <FormField
                  control={form.control}
                  name="username"
                  render={({ field }) => (
                    <FormItem className="flex w-full flex-col  gap-2">
                      <FormLabel className="font-sans text-base leading-[1.2] text-foreground">
                        {loginMethod === "username"
                          ? t("username")
                          : t("phone")}
                      </FormLabel>
                      <FormControl>
                        {loginMethod === "phone" ? (
                          <PhoneInput
                            value={field.value}
                            onChange={field.onChange}
                            placeholder="0000000"
                          />
                        ) : (
                          <div className="relative w-full">
                            <Input
                              {...field}
                              placeholder={t("usernamePlaceholder")}
                              className="h-14 w-full rounded-xl border-border px-4 py-5 pe-12 font-sans text-sm"
                            />
                            <div className="absolute end-4 top-1/2 -translate-y-1/2">
                              <Image
                                src="/images/login/icons/user-outline.svg"
                                alt=""
                                width={20}
                                height={20}
                              />
                            </div>
                          </div>
                        )}
                      </FormControl>
                      <FormMessage className=" font-sans" />
                    </FormItem>
                  )}
                />

                {/* Password Field */}
                <FormField
                  control={form.control}
                  name="password"
                  render={({ field }) => (
                    <FormItem className="flex w-full flex-col  gap-2">
                      <FormLabel className="font-sans text-base leading-normal text-foreground">
                        {t("password")}
                      </FormLabel>
                      <FormControl>
                        <div className="relative w-full">
                          <Input
                            {...field}
                            type={showPassword ? "text" : "password"}
                            placeholder={t("passwordPlaceholder")}
                            className="h-14 w-full rounded-xl border-border px-4 py-5 pe-12 font-sans text-sm"
                          />
                          <div className="absolute end-4 top-1/2 -translate-y-1/2">
                            <Image
                              src="/images/login/icons/lock.svg"
                              alt={t("lockIconAlt")}
                              width={20}
                              height={20}
                              className="rotate-180 scale-y-[-1]"
                            />
                          </div>
                          <button
                            type="button"
                            onClick={() => setShowPassword(!showPassword)}
                            className="absolute end-12 top-1/2 -translate-y-1/2"
                          >
                            <Image
                              src="/images/login/icons/eye-slash.svg"
                              alt={
                                showPassword
                                  ? t("hidePassword")
                                  : t("showPassword")
                              }
                              width={20}
                              height={20}
                            />
                          </button>
                        </div>
                      </FormControl>
                      <FormMessage className=" font-sans" />
                    </FormItem>
                  )}
                />

                {/* Remember Me & Forgot Password */}
                <div className="flex w-full items-center justify-between">
                  <Button
                    variant="link"
                    onClick={() => setResetSteps("emailWhatsapp")}
                    className="font-sans text-sm leading-normal text-primary underline decoration-solid underline-offset-auto"
                  >
                    {t("forgotPassword")}
                  </Button>

                  <div className="flex items-center gap-2">
                    <label className="cursor-pointer font-sans text-sm leading-normal text-muted-foreground">
                      {t("rememberMe")}
                    </label>
                    <Checkbox
                      checked={rememberMe}
                      onCheckedChange={(checked) =>
                        setRememberMe(checked as boolean)
                      }
                      className="h-5 w-5 rounded border-border"
                    />
                  </div>
                </div>
              </div>

              {/* Submit Button */}
              <Button
                type="submit"
                disabled={isLoggingIn}
                className="flex h-14 w-full items-center justify-center gap-2 rounded-xl bg-primary px-4 py-2.5 hover:bg-primary/90"
              >
                <span className="font-sans text-sm font-bold leading-4 tracking-[-0.084px] text-white">
                  {t("loginAction")}
                </span>
                <Image
                  src="/images/login/icons/login.svg"
                  alt=""
                  width={20}
                  height={20}
                />
              </Button>
            </div>
          </form>
        </Form>
      </div>
    </div>
  );
};