import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { useNavigate } from "react-router";

import Logo from "../assets/logo.png";
import BrandPanel from "../components/auth/BrandPanel";
import FloatingInput from "../components/auth/FloatingInput";
import OtpSection from "../components/auth/OtpSection";
import AuthActions from "../components/auth/AuthActions";

import { useToast } from "../components/ToastProvider";
import { useAuthStore } from "../store/authstore";

import { usePhoneAuthRequest, usePhoneAuthVerify } from "../services/auth/phoneAuth";

const getErrMsg = (err, fallback = "عملیات ناموفق بود. لطفاً دوباره تلاش کنید.") => {
  const data = err?.response?.data;

  if (data && typeof data === "object") {
    if (data.detail) return data.detail;
    if (data.message) return data.message;

    const firstKey = Object.keys(data)[0];
    if (firstKey && Array.isArray(data[firstKey]) && data[firstKey][0]) return data[firstKey][0];
  }

  if (typeof data === "string") return data;
  return fallback;
};

const formatTime = (totalSeconds) => {
  const m = Math.floor(totalSeconds / 60);
  const s = totalSeconds % 60;
  return `${m}:${String(s).padStart(2, "0")}`;
};

// 09309492885 -> 0930****885
const maskPhoneMiddle4 = (phone) => {
  if (!phone) return "";
  const raw = String(phone).trim();
  const digits = raw.replace(/\D/g, "");
  if (digits.length < 8) return raw;

  const prefixLen = 4;
  const suffixLen = 3;
  if (digits.length <= prefixLen + suffixLen) return raw;

  const prefix = digits.slice(0, prefixLen);
  const suffix = digits.slice(-suffixLen);
  return `${prefix}****${suffix}`;
};

const LoginNum = () => {
  const navigate = useNavigate();
  const { setTokens } = useAuthStore();
  const { success, error: toastError, info, warning } = useToast();

  const { mutateAsync: requestCode } = usePhoneAuthRequest();
  const { mutateAsync: verifyCode } = usePhoneAuthVerify();

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    watch,
    setFocus,
    reset,
    resetField,
    setValue,
    trigger,
    clearErrors,
  } = useForm({
    mode: "onChange",
    defaultValues: { phone: "", code: "" },
  });

  const phoneValue = watch("phone");

  const [isCodeStep, setIsCodeStep] = useState(false);
  const [secondsLeft, setSecondsLeft] = useState(0);
  const [resending, setResending] = useState(false);

  const canResend = isCodeStep && secondsLeft === 0;

  useEffect(() => {
    let interval;
    if (isCodeStep && secondsLeft > 0) {
      interval = setInterval(() => setSecondsLeft((prev) => Math.max(0, prev - 1)), 1000);
    }
    return () => interval && clearInterval(interval);
  }, [isCodeStep, secondsLeft]);

  const setTokensAndGo = (res) => {
    const access = res?.access;
    const refresh = res?.refresh;

    if (!access || !refresh) {
      toastError("توکن‌ها از سرور دریافت نشدند.", { title: "خطا" });
      return;
    }

    setTokens({ accessToken: access, refreshToken: refresh });
    success("با موفقیت وارد شدید.", { title: "ورود" });
    navigate("/home");
  };

  const onSubmit = async (data) => {
    try {
      const phone = String(data.phone || "").trim();

      if (!phone) {
        warning("شماره تماس را وارد کنید.", { title: "ورود سریع" });
        return;
      }

      // Step 1: Request code
      if (!isCodeStep) {
        await requestCode({ phone });

        setIsCodeStep(true);

        setValue("code", "", { shouldDirty: false, shouldValidate: false });
        resetField("code");
        clearErrors(["code"]);

        setSecondsLeft(120);

        info("کد تایید ارسال شد. لطفاً کد را وارد کنید.", { title: "ورود سریع" });

        setTimeout(() => {
          try {
            setFocus("code");
          } catch {}
        }, 0);

        return;
      }

      // Step 2: Verify code
      const code = String(data.code || "").trim();
      if (!code) {
        warning("کد را وارد کنید.", { title: "ورود سریع" });
        return;
      }

      const res = await verifyCode({ phone, code });
      setTokensAndGo(res);
    } catch (err) {
      toastError(
        getErrMsg(err, isCodeStep ? "کد صحیح نیست یا منقضی شده است." : "ارسال کد ناموفق بود."),
        { title: "ورود سریع" }
      );
    }
  };

  const handleResendCode = async () => {
    if (!canResend || resending || isSubmitting) return;

    if (!phoneValue?.trim()) {
      warning("برای ارسال مجدد، شماره تماس را وارد کنید.", { title: "ارسال مجدد" });
      return;
    }

    try {
      setResending(true);

      await requestCode({ phone: phoneValue });

      setValue("code", "", { shouldDirty: false, shouldValidate: false });
      resetField("code");
      clearErrors(["code"]);

      setSecondsLeft(120);

      info("کد جدید ارسال شد.", { title: "ارسال مجدد" });

      setTimeout(() => {
        try {
          setFocus("code");
        } catch {}
      }, 0);
    } catch (err) {
      toastError(getErrMsg(err, "ارسال مجدد کد با مشکل مواجه شد."), { title: "ارسال مجدد" });
    } finally {
      setResending(false);
    }
  };

  // ✅ این همون “رفرش از اول” ـه
  const resetAll = () => {
    // اگر رفرش واقعی مرورگر می‌خوای:
    // window.location.reload();

    setIsCodeStep(false);
    setSecondsLeft(0);
    setResending(false);

    reset({ phone: "", code: "" });
    clearErrors();

    info("از ابتدا شروع کنید و شماره را وارد کنید.", { title: "ورود سریع" });

    setTimeout(() => {
      try {
        setFocus("phone");
      } catch {}
    }, 0);
  };

  // ✅ Submit رو مستقیم به دکمه وصل می‌کنیم که هیچ وقت از فرم/DOM گیر نکنه
  const primaryClick = handleSubmit(onSubmit);

  return (
    <div className="flex md:flex-wrap flex-wrap-reverse w-full">
      {/* Left panel */}
      <div className="bg-[#16325B] md:w-1/2 w-full min-h-[calc(100vh-160px)] md:rounded-l-4xl rounded-4xl md:rounded-r-none">
        <div className="flex justify-center md:min-h-[700px] items-center p-9 md:h-screen">
          <div className="xl:w-1/2 lg:w-2/3 w-full max-w-80 grid items-center">
            <h3 className="font-bold text-3xl text-center text-white">به نت‌نست خوش آمدید</h3>

            <p className="font-medium text-base text-center text-white/75">
              {isCodeStep ? "کد ارسال‌شده را وارد کنید" : "برای ورود یا ثبت نام فقط شماره موبایل خود را وارد کنید"}
            </p>

            {/* فرم فقط برای register هاست؛ submit با دکمه کنترل میشه */}
            <form onSubmit={(e) => e.preventDefault()}>
              {!isCodeStep && (
                <FloatingInput
                  label="شماره تماس"
                  name="phone"
                  type="tel"
                  register={register}
                  rules={{
                    required: true,
                    validate: (v) =>
                      String(v || "").replace(/\D/g, "").length >= 10 || "شماره تماس معتبر نیست",
                  }}
                  error={
                    errors.phone?.type === "required"
                      ? "شماره تماس را وارد کنید"
                      : errors.phone?.message || ""
                  }
                />
              )}

              {isCodeStep && (
                <>
                  <OtpSection
                    register={register}
                    errors={errors}
                    secondsLeft={secondsLeft}
                    canResend={canResend}
                    setValue={setValue}
                    trigger={trigger}
                    focusFirst={isCodeStep}
                    onResend={handleResendCode}
                    formatTime={formatTime}
                  />

                  {!!phoneValue?.trim() && (
                    <div className="mt-3 text-xs text-white/75">
                      ارسال به: <b className="text-white">{maskPhoneMiddle4(phoneValue)}</b>
                    </div>
                  )}
                </>
              )}

              <AuthActions
                isCodeStep={isCodeStep}
                isSubmitting={isSubmitting || resending}
                canSubmitStep1={true}
                primaryText={isCodeStep ? "تایید کد" : "ورود/ثبت‌نام"}
                onPrimary={primaryClick}
                showSecondary={isCodeStep}
                secondaryText="ویرایش شماره"
                onSecondary={resetAll}
  onSecondary3={() => navigate("/auth/login-username")}
              />
            </form>
          </div>
        </div>
      </div>

      {/* Right panel */}
      <BrandPanel logoSrc={Logo} />
    </div>
  );
};

export default LoginNum;
