"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { useForm, type Resolver } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { object } from "yup";
import { useValidation } from "@/hooks/useValidation";
import { apiFetch, formatApiMsg } from "@/lib/api";
import { useAuthStore } from "@/lib/auth/store";
import type { AuthInfo } from "@/lib/auth/store";
import { resolveAuthDeviceId } from "@/lib/firebase/authDeviceId";
import {
  markFcmTokenSynced,
  messageForFcmTokenFailure,
} from "@/lib/firebase/messaging";
import { refreshUnreadNotificationCount } from "@/lib/notifications/count";

/** Form data shape — explicit interface avoids InferType optional mismatch. */
interface LoginData {
  email: string;
  password: string;
}

export default function LoginForm() {
  const router = useRouter();
  const setAuth = useAuthStore((s) => s.setAuth);
  const setPendingLogin = useAuthStore((s) => s.setPendingLogin);

  // -- Validation schema via useValidation hook ---
  const { validation } = useValidation();
  const schema = object({
    email: validation.email(),
    password: validation.password(),
  });

  const {
    register,
    handleSubmit: rhfSubmit,
    formState: { errors },
  } = useForm<LoginData>({
    resolver: yupResolver(schema) as Resolver<LoginData>,
    defaultValues: { email: "", password: "" },
  });

  const [show, setShow] = useState(false);
  const [loading, setLoading] = useState(false);
  const [done, setDone] = useState(false);
  const [error, setError] = useState("");
  const [rememberMe, setRememberMe] = useState(true);

  const onSubmit = async (data: LoginData) => {
    setError("");
    const deviceResult = await resolveAuthDeviceId({ requestPermission: true });
    const device_id = deviceResult.token;
    if (!device_id) {
      setError(messageForFcmTokenFailure(deviceResult.reason));
      return;
    }

    setLoading(true);
    await apiFetch<AuthInfo>("/provider/login", {
      method: "POST",
      getSuccess: true,
      body: JSON.stringify({
        email: data.email,
        password: data.password,
        device_type: "web",
        device_id,
      }),
      successCase: (res) => {
        if (res.data) {
          markFcmTokenSynced(device_id);
          setAuth(res.data);
          void refreshUnreadNotificationCount();
          setDone(true);
          router.replace("/");
        }
      },
      errorCase: (res) => {
        setError(formatApiMsg(res.msg) || "تعذّر تسجيل الدخول، حاول مرة أخرى");
      },
      needApproveCase: (res) => {
        setError(formatApiMsg(res.msg) || "حسابك في انتظار الموافقة");
      },
      needVerifyCase: () => {
        setPendingLogin({
          email: data.email,
          password: data.password,
          device_id,
        });
        router.push("/verify-code");
      },
      needActiveCase: (res) => {
        setError(formatApiMsg(res.msg) || "حسابك غير مفعّل");
      },
    });
    setLoading(false);
  };

  return (
    <div className="flex flex-col w-full">
      <div className="text-right mb-8">
        <h2 className="text-white font-bold text-[30px] leading-9 mb-2">
          مرحباً بعودتك 👋
        </h2>
        <p className="text-gray-400 text-sm">
          سجّل دخولك للوصول إلى لوحة المستثمر
        </p>
      </div>

      {done ? (
        <div className="bg-[#FCD704]/10 border border-[#FCD704]/40 rounded-2xl p-8 text-center">
          <div className="w-16 h-16 bg-[#FCD704]/20 rounded-full flex items-center justify-center mx-auto mb-4">
            <i className="ri-checkbox-circle-fill text-[#FCD704] text-3xl" />
          </div>
          <p className="text-white font-bold text-xl mb-2">تم تسجيل الدخول!</p>
          <p className="text-gray-400 text-sm mb-6">
            جاري تحميل لوحة التحكم...
          </p>
          <i className="ri-loader-4-line animate-spin text-[#FCD704] text-2xl" />
        </div>
      ) : (
        <form onSubmit={rhfSubmit(onSubmit)} className="flex flex-col gap-4">
          {/* Email Input */}
          <div>
            <label
              htmlFor="login-email"
              className="text-gray-400 text-xs text-right block mb-2"
            >
              البريد الإلكتروني
            </label>
            <div className="relative">
              <input
                id="login-email"
                type="email"
                {...register("email")}
                placeholder="ahmed@beepbeep.sa"
                className={`w-full bg-[#13151A] border text-white text-sm rounded-xl px-4 py-4 pr-12 outline-none transition-colors text-right placeholder-gray-600 ${
                  errors.email
                    ? "border-red-500/60 focus:border-red-500"
                    : "border-white/10 focus:border-[#FCD704]/50"
                }`}
                dir="rtl"
              />
              <div className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 flex items-center justify-center pointer-events-none">
                <i className="ri-mail-line text-gray-500 text-base" />
              </div>
            </div>
            {errors.email && (
              <p className="text-red-400 text-xs mt-1.5 text-right">
                {errors.email.message}
              </p>
            )}
          </div>

          {/* Password Input */}
          <div>
            <div className="flex items-center justify-between mb-2">
              <label htmlFor="login-password" className="text-gray-400 text-xs">
                كلمة المرور
              </label>
              <Link
                href="/forgot-password"
                className="text-[#FCD704] text-xs cursor-pointer hover:underline"
              >
                نسيت كلمة المرور؟
              </Link>
            </div>
            <div className="relative">
              <input
                id="login-password"
                type={show ? "text" : "password"}
                {...register("password")}
                placeholder="••••••••"
                className={`w-full bg-[#13151A] border text-white text-sm rounded-xl px-4 py-4 pr-12 pl-12 outline-none transition-colors text-right placeholder-gray-600 ${
                  errors.password
                    ? "border-red-500/60 focus:border-red-500"
                    : "border-white/10 focus:border-[#FCD704]/50"
                }`}
              />
              <div className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 flex items-center justify-center pointer-events-none">
                <i className="ri-lock-line text-gray-500 text-base" />
              </div>
              <button
                type="button"
                onClick={() => setShow(!show)}
                className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 flex items-center justify-center cursor-pointer text-gray-500 hover:text-white transition-colors"
              >
                <i
                  className={`${show ? "ri-eye-off-line" : "ri-eye-line"} text-base`}
                />
              </button>
            </div>
            {errors.password && (
              <p className="text-red-400 text-xs mt-1.5 text-right">
                {errors.password.message}
              </p>
            )}
          </div>

          {/* Remember Me Checkbox */}
          <div className="flex items-center gap-2 mt-1">
            <button
              id="remember-me"
              type="button"
              onClick={() => setRememberMe(!rememberMe)}
              className={`w-4 h-4 border rounded flex items-center justify-center cursor-pointer transition-all ${
                rememberMe
                  ? "bg-[#FCD704]/20 border-[#FCD704]/50 text-[#FCD704]"
                  : "border-white/20 hover:border-white/40 text-transparent"
              }`}
            >
              {rememberMe && <i className="ri-check-line text-xs" />}
            </button>
            <label
              htmlFor="remember-me"
              className="text-gray-400 text-xs cursor-pointer select-none"
            >
              تذكرني
            </label>
          </div>

          {/* Server Error Message */}
          {error && (
            <div className="bg-red-500/10 border border-red-500/30 rounded-xl p-3 text-center">
              <p className="text-red-400 text-sm">{error}</p>
            </div>
          )}

          {/* Submit Button */}
          <button
            type="submit"
            disabled={loading}
            className="w-full bg-[#FCD704] text-[#13151A] font-bold text-base py-4 rounded-xl cursor-pointer whitespace-nowrap mt-2 transition-all hover:bg-[#FCD704]/90 disabled:opacity-70 flex items-center justify-center gap-2"
          >
            {loading ? (
              <>
                <i className="ri-loader-4-line animate-spin text-lg" />
                <span>جاري الدخول...</span>
              </>
            ) : (
              <span>تسجيل الدخول</span>
            )}
          </button>

          {/* "أو" Divider */}
          <div className="relative flex items-center gap-4 my-2">
            <div className="flex-1 h-px bg-white/8" />
            <span className="text-gray-500 text-xs">أو</span>
            <div className="flex-1 h-px bg-white/8" />
          </div>

          {/* Footer Link to Register */}
          <p className="text-center text-gray-400 text-sm mt-2">
            ليس لديك حساب؟{" "}
            <Link
              href="/register"
              className="text-[#FCD704] font-semibold cursor-pointer hover:underline"
            >
              إنشاء حساب جديد
            </Link>
          </p>
        </form>
      )}
    </div>
  );
}