"use client";

import { useState } from "react";
import Image from "next/image";
import mbhsLogo from "@/public/images/mbhs-logo.png";
import { Link } from "@/i18n/navigation";
import Lottie from "lottie-react";
import Modal from "@/components/Modal";
import ImageCarousel from "@/components/ImageCarousel";
import { useTranslations } from "next-intl";
import resetAnimation from "@/public/images/reset-hand.json";
import { useForgotPasswordControllerForgotPasswordV1 } from "@/api/user/user-authentication/user-authentication";
import { normalizeEmail } from "@/lib/email";

export default function ForgotPasswordPage() {
  const t = useTranslations("forgotPassword");
  const tAuth = useTranslations("auth");
  const [email, setEmail] = useState("");
  const [showModal, setShowModal] = useState(false);
  const [showEmailNotice, setShowEmailNotice] = useState(false);
  const [error, setError] = useState("");
  const [emailError, setEmailError] = useState("");

  const forgotPasswordMutation = useForgotPasswordControllerForgotPasswordV1();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");
    setEmailError("");

    // Validate email field
    if (!email.trim()) {
      setEmailError(t("errorEnterEmail"));
      return;
    }

    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
      setEmailError(t("errorInvalidEmail"));
      return;
    }

    forgotPasswordMutation.mutate(
      { data: { email: normalizeEmail(email) } },
      {
        onSuccess: (data: any) => {
          setShowEmailNotice(!!data?.email_notice);
          setShowModal(true);
        },
        onError: (err: any) => {
          setError(err?.message || "Something went wrong. Please try again.");
        },
      }
    );
  };

  const isLoading = forgotPasswordMutation.isPending;

  return (
    <main className="min-h-screen flex bg-gradient-to-br from-[#E8F4F8] via-[#EEF6F9] to-[#E5EEF2]">
      {/* Left Side - Form */}
      <div className="w-full lg:w-1/2 flex flex-col justify-center px-8 py-12 lg:px-16 xl:px-24">
        <div className="max-w-[520px] w-full">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-3 mb-12 w-fit cursor-pointer hover:opacity-80 transition">
            <Image src={mbhsLogo} alt="MBHS" width={56} height={56} className="rounded-xl" />
            <span className="text-[36px] font-extrabold text-gray-900 tracking-tight">MBHS</span>
          </Link>

          {/* Title */}
          <h1 className="text-[28px] font-bold text-gray-900 mb-2">
            {t("title")}
          </h1>
          <p className="text-gray-500 text-sm mb-8">
            {t("subtitle")}
          </p>

          {/* Form */}
          <form onSubmit={handleSubmit} className="w-full space-y-5">
            {error && (
              <div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg">
                {error}
              </div>
            )}

            {/* Email Field */}
            <div className="space-y-2">
              <label htmlFor="email" className="block text-sm font-medium text-gray-800">
                {t("email")}
              </label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                  <svg
                    className="h-5 w-5 text-gray-400"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    strokeWidth={1.5}
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
                    />
                  </svg>
                </div>
                <input
                  id="email"
                  type="email"
                  value={email}
                  onChange={(e) => {
                    setEmail(e.target.value);
                    if (emailError) setEmailError("");
                  }}
                  placeholder={t("emailPlaceholder")}
                  disabled={isLoading}
                  className={`w-full pl-12 pr-4 py-3.5 rounded-xl bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#3B9EC9] transition border disabled:opacity-50 ${
                    emailError ? "border-red-500" : "border-gray-100"
                  }`}
                />
              </div>
              {emailError && (
                <p className="text-sm text-red-600 mt-1">{emailError}</p>
              )}
            </div>

            {/* Submit Button */}
            <div className="pt-2">
              <button
                type="submit"
                disabled={isLoading}
                className="w-full py-4 px-4 bg-[#3B9EC9] hover:bg-[#2D8AB5] text-white font-medium rounded-full transition focus:outline-none focus:ring-2 focus:ring-[#3B9EC9] focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer flex items-center justify-center"
              >
                {isLoading ? (
                  <>
                    <svg
                      className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                    >
                      <circle
                        className="opacity-25"
                        cx="12"
                        cy="12"
                        r="10"
                        stroke="currentColor"
                        strokeWidth="4"
                      ></circle>
                      <path
                        className="opacity-75"
                        fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                      ></path>
                    </svg>
                    {t("sending")}...
                  </>
                ) : (
                  t("sendLink")
                )}
              </button>
            </div>

            {/* Back to Login Link */}
            <p className="text-center text-sm text-gray-600 pt-2">
              {t("rememberPassword")}{" "}
              <Link href="/login" className="font-semibold text-gray-900 hover:text-[#3B9EC9]">
                {t("login")}
              </Link>
            </p>
          </form>
        </div>
      </div>

      {/* Right Side - Image Carousel */}
      <div className="hidden lg:flex lg:w-1/2 items-center justify-center p-8">
        <ImageCarousel />
      </div>

      {/* Reset Password Confirmation Modal */}
      <Modal isOpen={showModal} onClose={() => setShowModal(false)}>
        <div className="flex flex-col items-center text-center px-8 py-6">
          {/* Reset Icon with Hand */}
          <div className="mb-6">
            <Lottie
              animationData={resetAnimation}
              loop={true}
              className="w-32 h-32"
            />
          </div>

          {/* Title */}
          <h2 className="text-[28px] font-bold text-gray-900 mb-4">
            {t("modalTitle")}
          </h2>

          {/* Description */}
          <p className="text-gray-500 text-lg leading-relaxed max-w-md">
            {t("modalDescription1")}{" "}
            <span className="text-gray-700 font-medium">{email || "your email"}</span>.
            {" "}{t("modalDescription2")}
          </p>

          {/* Email notice warning */}
          {showEmailNotice && (
            <p className="mt-3 text-xs text-amber-600">
              <strong>{tAuth("note")}</strong> {tAuth("email_notice")}
            </p>
          )}
        </div>
      </Modal>
    </main>
  );
}