SweetHome/app/change-password/page.js

"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { useRouter } from "next/navigation";
import toast, { Toaster } from "react-hot-toast";
import { Lock, Eye, EyeOff, ArrowLeft, Shield } from "lucide-react";
import { useTranslation } from "react-i18next";
import { changePassword } from "../utils/api";
import AuthService from "../services/AuthService";
import InteractiveBackground from "../components/Animation/Background";

export default function ChangePasswordPage() {
  const router = useRouter();
  const { t } = useTranslation();
  const [form, setForm] = useState({ oldPassword: "", newPassword: "", confirmPassword: "" });
  const [show, setShow] = useState({ old: false, new: false, confirm: false });
  const [isLoading, setIsLoading] = useState(false);

  const handleChange = (field) => (e) => setForm({ ...form, [field]: e.target.value });

  const toggleShow = (field) => setShow({ ...show, [field]: !show[field] });

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!AuthService.isAuthenticated()) {
      toast.error(t("changePassword.loginRequired"));
      router.push("/login");
      return;
    }

    if (form.newPassword !== form.confirmPassword) {
      toast.error(t("changePassword.passwordsDoNotMatch"));
      return;
    }

    if (form.newPassword.length < 6) {
      toast.error(t("validation.passwordMinLength"));
      return;
    }

    setIsLoading(true);
    try {
      await changePassword(form.oldPassword, form.newPassword);
      toast.success(t("changePassword.changeSuccess"));
      setTimeout(() => router.push("/profile"), 1200);
    } catch (err) {
      toast.error(err?.message || t("changePassword.changeFailed"));
    } finally {
      setIsLoading(false);
    }
  };

  const inputClass =
    "w-full pr-12 pl-4 py-3 bg-gray-50 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent text-gray-900 placeholder-gray-400 transition-all";

  return (
    <div className="min-h-screen relative z-10  flex items-center justify-center p-4" style={{ backgroundColor: "#0f172a" }}>
      <Toaster position="top-center" reverseOrder={false} />
      <InteractiveBackground />
      <motion.div initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="w-full max-w-md relative z-10 ">
        <motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }} className="mb-6  relative z-10">
          <button onClick={() => router.push("/profile")} className="flex items-center relative z-10 gap-2 text-gray-600 hover:text-amber-600 transition-colors">
            <ArrowLeft className="w-5 h-5" />
            <span>{t("changePassword.backToProfile")}</span>
          </button>
        </motion.div>

        <div className=" rounded-3xl shadow-xl overflow-hidden" style={{ backgroundColor: "#1e293b" }}>
          <div className="bg-gradient-to-l from-amber-500 to-amber-600 p-8 text-center">
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ type: "spring", stiffness: 200 }}
              className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-4"
            >
              <Shield className="w-8 h-8 text-white" />
            </motion.div>
            <motion.h1 initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} className="text-3xl font-bold text-white mb-2">
              {t("changePassword.title")}
            </motion.h1>
            <motion.p initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.1 }} className="text-amber-100">
              {t("changePassword.subtitle")}
            </motion.p>
          </div>

          <form onSubmit={handleSubmit} className="p-8 space-y-6 " style={{ backgroundColor: "#0f172a" }}>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">{t("changePassword.currentPasswordLabel")}</label>
              <div className="relative">
                <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                  <Lock className="w-5 h-5 text-gray-400" />
                </div>
                <input
                  type={show.old ? "text" : "password"}
                  value={form.oldPassword}
                  onChange={handleChange("oldPassword")}
                  className={inputClass}
                  placeholder={t("changePassword.currentPasswordPlaceholder")}
                  required
                />
                <button type="button" onClick={() => toggleShow("old")} className="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 hover:text-gray-600">
                  {show.old ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                </button>
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">{t("changePassword.newPasswordLabel")}</label>
              <div className="relative">
                <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                  <Lock className="w-5 h-5 text-gray-400" />
                </div>
                <input
                  type={show.new ? "text" : "password"}
                  value={form.newPassword}
                  onChange={handleChange("newPassword")}
                  className={inputClass}
                  placeholder={t("changePassword.newPasswordPlaceholder")}
                  required
                  minLength={6}
                />
                <button type="button" onClick={() => toggleShow("new")} className="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 hover:text-gray-600">
                  {show.new ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                </button>
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">{t("changePassword.confirmNewPasswordLabel")}</label>
              <div className="relative">
                <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                  <Lock className="w-5 h-5 text-gray-400" />
                </div>
                <input
                  type={show.confirm ? "text" : "password"}
                  value={form.confirmPassword}
                  onChange={handleChange("confirmPassword")}
                  className={inputClass}
                  placeholder={t("changePassword.confirmPasswordPlaceholder")}
                  required
                  minLength={6}
                />
                <button type="button" onClick={() => toggleShow("confirm")} className="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 hover:text-gray-600">
                  {show.confirm ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                </button>
              </div>
            </div>

            <motion.button
              type="submit"
              disabled={isLoading}
              whileHover={{ scale: isLoading ? 1 : 1.02 }}
              whileTap={{ scale: isLoading ? 1 : 0.98 }}
              className="w-full bg-gradient-to-l from-amber-500 to-amber-600 text-white py-3 rounded-xl font-bold text-lg hover:from-amber-600 hover:to-amber-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-amber-500/25"
            >
              {isLoading ? (
                <div className="flex items-center justify-center gap-2">
                  <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
                  <span>{t("changePassword.saving")}</span>
                </div>
              ) : (
                t("changePassword.changePassword")
              )}
            </motion.button>
          </form>
        </div>
      </motion.div>
    </div>
  );
}