// src/pages/Login.jsx
import React, { useEffect, useState } from "react";
import Logo from "../assets/logo.png";
import { useForm } from "react-hook-form";
import { useLogin, useVerify } from "../services/auth/auth";
import { useNavigate } from "react-router";
import { useAuthStore } from "../store/authstore";
import { useToast } from "../components/ToastProvider";

import BrandPanel from "../components/auth/BrandPanel";
import FloatingInput from "../components/auth/FloatingInput";
import OtpSection from "../components/auth/OtpSection";
import AuthActions from "../components/auth/AuthActions";

function cn(...a) {
  return a.filter(Boolean).join(" ");
}

const getErrMsg = (err, fallback = "عملیات ناموفق بود. لطفاً دوباره تلاش کنید.") =>
  err?.response?.data?.detail || err?.response?.data?.message || (typeof err?.response?.data === "string" ? err.response.data : null) || 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 Login = () => {
  const navigate = useNavigate();
  const { setTokens } = useAuthStore();

  const { mutateAsync: login } = useLogin();
  const { mutateAsync: verifyCode } = useVerify();

  const { success, error: toastError, info, warning } = useToast();

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

  const usernameValue = watch("username");
  const passwordValue = watch("password");

  const [isCodeStep, setIsCodeStep] = useState(false);
  const [twofaMeta, setTwofaMeta] = useState(null); // { channel, target, purpose, detail }

  const [secondsLeft, setSecondsLeft] = useState(0);
  const canResend = isCodeStep && secondsLeft === 0;

  const [resending, setResending] = useState(false);

  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 {
      if (!isCodeStep) {
        // مرحله ۱: login با یوزر/پس
        const res = await login({
          username: data.username,
          password: data.password,
        });

        // 2FA required
        if (res?.two_factor_required) {
          setIsCodeStep(true);
          setTwofaMeta({
            channel: res?.channel || "sms",
            target: res?.target || "",
            purpose: res?.purpose || "login",
            detail: res?.detail || "کد ورود ارسال شد. لطفاً کد را وارد کنید.",
          });

          resetField("code");
          setSecondsLeft(120);

          info(res?.detail || "کد ورود پیامکی ارسال شد. لطفاً کد را وارد کنید.", { title: "ورود دو مرحله‌ای" });

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

          return;
        }

        // حالت عادی (بدون 2FA)
        setTokensAndGo(res);
        return;
      }

      // مرحله ۲: verify-code برای login
      const code = String(data.code || "").trim();
      if (!code) {
        warning("کد را وارد کنید.", { title: "ورود دو مرحله‌ای" });
        return;
      }

      const channel = twofaMeta?.channel || "sms";
      const target = twofaMeta?.target || "";

      if (!target) {
        toastError("شماره مقصد کد مشخص نیست. لطفاً دوباره وارد شوید تا کد مجدد ارسال شود.", { title: "ورود دو مرحله‌ای" });
        return;
      }

      const res2 = await verifyCode({
        channel,
        target,
        code,
        purpose: "login",
      });

      setTokensAndGo(res2);
    } catch (err) {
      toastError(getErrMsg(err, isCodeStep ? "کد صحیح نیست یا منقضی شده است." : "ورود ناموفق بود."), { title: isCodeStep ? "ورود دو مرحله‌ای" : "ورود ناموفق" });
    }
  };

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

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

    try {
      setResending(true);

      // ✅ درخواست login رو تکرار کن تا کد دوباره بیاد
      const res = await login({
        username: usernameValue,
        password: passwordValue,
      });

      if (res?.two_factor_required) {
        setTwofaMeta({
          channel: res?.channel || "sms",
          target: res?.target || "",
          purpose: res?.purpose || "login",
          detail: res?.detail || "کد جدید ارسال شد.",
        });

        resetField("code");
        setSecondsLeft(120);

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

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

        return;
      }

      // اگر بک‌اند به جای 2FA توکن داد
      setTokensAndGo(res);
    } catch (err) {
      toastError(getErrMsg(err, "ارسال مجدد کد با مشکل مواجه شد."), {
        title: "ارسال مجدد",
      });
    } finally {
      setResending(false);
    }
  };

  const backToLogin = () => {
    if (isSubmitting || resending) return;
    setIsCodeStep(false);
    setSecondsLeft(0);
    setTwofaMeta(null);
    resetField("code");
    info("به مرحله ورود برگشتید.", { title: "ورود" });
    setTimeout(() => {
      try {
        setFocus("username");
      } catch {}
    }, 0);
  };

  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>

            <form onSubmit={handleSubmit(onSubmit)}>
              {/* Step 1 */}
              {!isCodeStep && (
                <>
                  <FloatingInput
                    label="نام کاربری"
                    name="username"
                    type="text"
                    register={register}
                    rules={{ required: true }}
                    error={errors.username?.type === "required" ? "نام کاربری را وارد کنید" : ""}
                  />

                  <FloatingInput
                    label="رمز عبور"
                    name="password"
                    type="password"
                    register={register}
                    rules={{ required: true }}
                    error={errors.password?.type === "required" ? "رمز عبور را وارد کنید" : ""}
                  />

                  <button type="button" onClick={() => navigate("/auth/forget-password")} className="text-white text-right font-medium text-sm mt-2 w-fit">
                    فراموشی رمز عبور؟
                  </button>
                </>
              )}

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

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

                  <button type="button" onClick={backToLogin} className="mt-3 text-white/80 text-sm underline w-fit">
                    برگشت به ورود
                  </button>
                </>
              )}

              {/* Actions (همون کامپوننت Register) */}
              <AuthActions
  isCodeStep={isCodeStep}
  isSubmitting={isSubmitting || resending}
  canSubmitStep1={true}
  primaryText={isCodeStep ? "تایید کد" : "ورود"}
  secondaryText="ایجاد حساب"
  onPrimary={handleSubmit(onSubmit)}  // ✅ اضافه شد
  onSecondary={() => navigate("/auth/register")}
  onSecondary2={() => navigate("/auth/login")}
/>

            </form>
          </div>
        </div>
      </div>

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

export default Login;
