"use client";

import React, { Suspense, useEffect, useState } from "react";
import Link from "next/link";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import { Check, Eye, EyeOff } from "lucide-react";
import staticCopy from "@/i18n/staticCopy.json";
import {
  DEFAULT_LOCALE,
  getStoredLocale,
  LOCALE_CHANGE_EVENT,
  type LocaleCode,
} from "@/i18n/localeSwitcher";

const InputItem = ({
  label,
  id,
  type = "text",
  placeholder,
  required,
  value,
  onChange,
  isPassword = false,
}: {
  label: string;
  id: string;
  type?: string;
  placeholder: string;
  required?: boolean;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  isPassword?: boolean;
}) => {
  const [show, setShow] = useState(false);
  const inputType = isPassword ? (show ? "text" : "password") : type;

  return (
    <div>
      <label htmlFor={id} className="block text-[16px] font-medium text-[#000000] mb-[9px]">
        {label} {required && <span className="text-[#FF0000]">*</span>}
      </label>
      <div className="relative">
        <input
          id={id}
          type={inputType}
          placeholder={placeholder}
          value={value}
          onChange={onChange}
          className={`w-full border border-[#053F31]/20 rounded-[5px] px-[30px] py-1.5 focus:outline-none focus:border-gray-300 text-[18px] leading-[150%] font-outfit font-light text-[#000000] placeholder:text-[#999999] ${isPassword ? "pr-12" : ""}`}
        />

        {isPassword && (
          <button
            type="button"
            onClick={() => setShow(!show)}
            className="absolute right-4 top-1/2 -translate-y-1/2 text-[#053F31]/50 hover:text-[#053F31] focus:outline-none z-20"
          >
            {show ? <EyeOff size={20} /> : <Eye size={20} />}
          </button>
        )}

        <div className="absolute bottom-0 left-[30px] h-[3px] w-[60px] bg-[#053F31] z-10"></div>
      </div>
    </div>
  );
};

const IconArrowRight = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
    <path
      d="M0 18C0 8.05888 8.05888 0 18 0C27.9411 0 36 8.05888 36 18C36 27.9411 27.9411 36 18 36C8.05888 36 0 27.9411 0 18Z"
      fill="#F7FAF8"
    />
    <path d="M10 18H25.5M25.5 18L19.5 12M25.5 18L19.5 24.5" stroke="#053F31" strokeWidth="2" />
  </svg>
);

type SubmitPasswordResetResult =
  | { ok: true; message?: string }
  | { ok: false; message: string };

export type ResetPasswordClientProps = {
  submitPasswordReset?: (payload: {
    token: string;
    new_password: string;
    confirm_password: string;
  }) => Promise<SubmitPasswordResetResult>;
};

function ResetPasswordForm({ submitPasswordReset }: ResetPasswordClientProps) {
  const router = useRouter();
  const params = useParams();
  const searchParams = useSearchParams();
  const email = searchParams.get("email");
  const routeToken = params?.token;
  const resetToken =
    (typeof routeToken === "string"
      ? routeToken
      : Array.isArray(routeToken)
        ? routeToken[0]
        : searchParams.get("token")) ?? "";

  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [status, setStatus] = useState<"idle" | "success" | "error">("idle");
  const [message, setMessage] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [uiLocale, setUiLocale] = useState<LocaleCode>(DEFAULT_LOCALE);

  useEffect(() => {
    const syncLocale = () => {
      setUiLocale(getStoredLocale());
    };
    syncLocale();
    window.addEventListener("storage", syncLocale);
    window.addEventListener(LOCALE_CHANGE_EVENT, syncLocale);
    return () => {
      window.removeEventListener("storage", syncLocale);
      window.removeEventListener(LOCALE_CHANGE_EVENT, syncLocale);
    };
  }, []);

  const t =
    staticCopy.resetPassword[uiLocale as keyof typeof staticCopy.resetPassword] ??
    staticCopy.resetPassword["en-EN"];

  const passwordRegex = {
    minLength: 8,
    uppercase: /[A-Z]/,
    lowercase: /[a-z]/,
    number: /[0-9]/,
    specialChar: /[!@#$%^&*(),.?":{}|<>]/,
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatus("idle");
    setMessage("");

    if (!resetToken) {
      setStatus("error");
      setMessage("Invalid link. No reset token.");
      return;
    }

    if (!submitPasswordReset && !email) {
      setStatus("error");
      setMessage("Invalid link. No email provided.");
      return;
    }

    if (password !== confirmPassword) {
      setStatus("error");
      setMessage("Passwords do not match.");
      return;
    }

    if (
      password.length < passwordRegex.minLength ||
      !passwordRegex.uppercase.test(password) ||
      !passwordRegex.lowercase.test(password) ||
      !passwordRegex.number.test(password) ||
      !passwordRegex.specialChar.test(password)
    ) {
      setStatus("error");
      setMessage("Password does not meet the requirements.");
      return;
    }

    if (submitPasswordReset) {
      setIsSubmitting(true);
      try {
        const result = await submitPasswordReset({
          token: decodeURIComponent(resetToken),
          new_password: password,
          confirm_password: confirmPassword,
        });
        if (!result.ok) {
          setStatus("error");
          setMessage(result.message);
          return;
        }
        setStatus("success");
        setMessage(result.message?.trim() || "Password reset successfully! Redirecting to login...");
        setTimeout(() => {
          router.push("/login");
        }, 2000);
      } finally {
        setIsSubmitting(false);
      }
      return;
    }

    const storedUsers = localStorage.getItem("mock_users");
    if (storedUsers) {
      const users = JSON.parse(storedUsers);
      const userIndex = users.findIndex((u: { email: string }) => u.email === email);

      if (userIndex !== -1) {
        users[userIndex].password = password;
        localStorage.setItem("mock_users", JSON.stringify(users));

        setStatus("success");
        setMessage("Password reset successfully! Redirecting to login...");
        setTimeout(() => {
          router.push("/login");
        }, 2000);
      } else {
        setStatus("error");
        setMessage("User not found.");
      }
    } else {
      setStatus("error");
      setMessage("User database not found.");
    }
  };

  return (
    <section className="mx-4 sm:mx-6 md:mx-8 lg:mx-10 xl:mx-12 font-outfit selection:bg-[#053F31] selection:text-white">
      <div className="mx-4 sm:mx-6 md:mx-8 lg:mx-10 xl:mx-12 mb-[50px] xl:mb-[70px]">
        <div className="max-w-[520px] mx-auto bg-[#F7FAF8] border border-gray-200 rounded-2xl p-[25px] sm:p-[40px] shadow-sm">
          <p className="font-semibold text-[#053F31] mb-[20px] pb-[15px] border-b-2">{t.title}</p>

          {message && (
            <div
              className={`mb-6 p-4 border rounded-lg text-sm ${status === "success" ? "bg-green-100 border-green-200 text-[#053F31]" : "bg-red-50 border-red-200 text-red-700"}`}
            >
              {message}
            </div>
          )}

          <form className="space-y-6" onSubmit={handleSubmit}>
            <div className="flex flex-col gap-2">
              <InputItem
                id="new-password"
                label={t.newPasswordLabel}
                type="password"
                placeholder={t.newPasswordPlaceholder}
                required
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                isPassword={true}
              />

              {password.length > 0 && (
                <div className="bg-white p-3 rounded-[5px] border border-[#053F31]/20 shadow-sm mt-2 text-sm space-y-1 font-outfit">
                  <p className="text-xs font-semibold text-[#053F31]/70 mb-2 uppercase tracking-wide">{t.requirementsHeading}</p>

                  <div className={`flex items-center gap-2 ${password.length >= passwordRegex.minLength ? "text-[#053F31]" : "text-gray-400"}`}>
                    {password.length >= passwordRegex.minLength ? <Check size={14} /> : <div className="w-3.5 h-3.5 rounded-full border border-gray-300"></div>}
                    <span>{t.reqMinLength}</span>
                  </div>

                  <div className={`flex items-center gap-2 ${passwordRegex.uppercase.test(password) ? "text-[#053F31]" : "text-gray-400"}`}>
                    {passwordRegex.uppercase.test(password) ? <Check size={14} /> : <div className="w-3.5 h-3.5 rounded-full border border-gray-300"></div>}
                    <span>{t.reqUppercase}</span>
                  </div>

                  <div className={`flex items-center gap-2 ${passwordRegex.lowercase.test(password) ? "text-[#053F31]" : "text-gray-400"}`}>
                    {passwordRegex.lowercase.test(password) ? <Check size={14} /> : <div className="w-3.5 h-3.5 rounded-full border border-gray-300"></div>}
                    <span>{t.reqLowercase}</span>
                  </div>

                  <div className={`flex items-center gap-2 ${passwordRegex.number.test(password) ? "text-[#053F31]" : "text-gray-400"}`}>
                    {passwordRegex.number.test(password) ? <Check size={14} /> : <div className="w-3.5 h-3.5 rounded-full border border-gray-300"></div>}
                    <span>{t.reqNumber}</span>
                  </div>

                  <div className={`flex items-center gap-2 ${passwordRegex.specialChar.test(password) ? "text-[#053F31]" : "text-gray-400"}`}>
                    {passwordRegex.specialChar.test(password) ? <Check size={14} /> : <div className="w-3.5 h-3.5 rounded-full border border-gray-300"></div>}
                    <span>{t.reqSpecialChar}</span>
                  </div>
                </div>
              )}
            </div>

            <div className="mb-[21px]">
              <InputItem
                id="confirm-new-password"
                label={t.confirmPasswordLabel}
                type="password"
                placeholder={t.confirmPasswordPlaceholder}
                required
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                isPassword={true}
              />
            </div>

            <div className="pt-[20px]">
              <button
                type="submit"
                disabled={isSubmitting}
                className="inline-flex items-center justify-center gap-[10px] bg-[#053F31] font-outfit text-[18px] leading-[150%] text-white font-semibold p-[7px_7px_7px_15px] cursor-pointer rounded-full border-2 hover:border-[#0F3F32] hover:bg-[#ffffff] hover:text-[#0F3F32] transition"
              >
                {isSubmitting ? t.saving : t.submitButton}
                <IconArrowRight />
              </button>
            </div>

            <p className="text-center text-[18px] text-gray-600 font-light pt-[10px]">
              {t.rememberPassword}{" "}
              <Link href="/login" className="text-[#053F31] font-medium hover:underline transition-colors">
                {t.signIn}
              </Link>
            </p>
          </form>
        </div>
      </div>
    </section>
  );
}

export default function ResetPasswordClient(props: ResetPasswordClientProps) {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ResetPasswordForm {...props} />
    </Suspense>
  );
}