Dev_Socialbuddy_Frontend/components/auth/components-auth-change-password-form.tsx

'use client';

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useRouter } from 'next/navigation';
import IconLockDots from '@/components/icon/icon-lock-dots';
import Link from 'next/link';
import { ApiServerBaseUrl } from '@/utils/baseurl.utils';
import { Eye, EyeOff } from 'lucide-react';

const ComponentsAuthChangePasswordForm = () => {
    const router = useRouter();

    const [email, setEmail] = useState<string | null>(null);
    const [currentPassword, setCurrentPassword] = useState('');
    const [newPassword, setNewPassword] = useState('');
    
    const [showCurrent, setShowCurrent] = useState(false);
    const [showNew, setShowNew] = useState(false);

    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');
    const [success, setSuccess] = useState('');

    useEffect(() => {
        const storedEmail = localStorage.getItem('user_email');

        if (!storedEmail) {
            setError('User not authenticated. Please login again.');
            setTimeout(() => router.push('/login'), 1500);
        } else {
            setEmail(storedEmail);
        }
    }, [router]);

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

        if (!email || !currentPassword || !newPassword) {
            setError('All fields are required');
            return;
        }

        try {
            setLoading(true);
            await axios.post(`${ApiServerBaseUrl}/change-password`, {
                email,
                currentPassword,
                newPassword,
            });

            setSuccess('Password changed successfully');
            setTimeout(() => router.push('/login'), 1500);
        } catch (err: any) {
            setError(err.response?.data?.error || 'Password change failed');
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="relative z-10 w-full max-w-[420px] bg-[#0f1022] rounded-3xl p-8 shadow-2xl border border-white/10">

            <h1
                className="
                    text-3xl font-extrabold text-center mb-2
                    bg-gradient-to-r from-blue-500 via-cyan-400 to-pink-500
                    bg-clip-text text-transparent
                "
            >
                Change Password
            </h1>

            <p className="text-gray-400 text-sm text-center mb-6">
                Update your account password
            </p>

            <form className="space-y-5" onSubmit={handleSubmit}>
                {error && <p className="text-red-500 text-sm text-center">{error}</p>}
                {success && <p className="text-green-500 text-sm text-center">{success}</p>}

                {email && (
                    <div className="text-sm text-gray-300 bg-[#15162e] border border-white/10 rounded-lg px-4 py-3 text-center">
                        Signed in as <b>{email}</b>
                    </div>
                )}

                {/* CURRENT PASSWORD */}
                <div className="relative">
                    <input
                        type={showCurrent ? "text" : "password"}
                        placeholder="Current password"
                        className="
                            w-full bg-[#15162e] text-white 
                            rounded-lg ps-10 pe-10 py-3 outline-none 
                            border border-white/10 focus:border-blue-400
                        "
                        value={currentPassword}
                        onChange={(e) => setCurrentPassword(e.target.value)}
                    />

                    <span className="absolute start-3 top-1/2 -translate-y-1/2">
                        <IconLockDots fill />
                    </span>

                    {/* 🔥 FIXED EYE ICON — NO MOVING */}
                    <button
                        type="button"
                        onClick={() => setShowCurrent(!showCurrent)}
                        className="absolute end-3 top-1/2 -translate-y-1/2 text-gray-400"
                    >
                        <span className="flex items-center justify-center w-5 h-5">
                            {showCurrent ? (
                                <EyeOff size={18} strokeWidth={1.5} />
                            ) : (
                                <Eye size={18} strokeWidth={1.5} />
                            )}
                        </span>
                    </button>
                </div>

                {/* NEW PASSWORD */}
                <div className="relative">
                    <input
                        type={showNew ? "text" : "password"}
                        placeholder="New password"
                        className="
                            w-full bg-[#15162e] text-white 
                            rounded-lg ps-10 pe-10 py-3 outline-none 
                            border border-white/10 focus:border-blue-400
                        "
                        value={newPassword}
                        onChange={(e) => setNewPassword(e.target.value)}
                    />

                    <span className="absolute start-3 top-1/2 -translate-y-1/2">
                        <IconLockDots fill />
                    </span>

                    {/* 🔥 FIXED EYE ICON — NO MOVING */}
                    <button
                        type="button"
                        onClick={() => setShowNew(!showNew)}
                        className="absolute end-3 top-1/2 -translate-y-1/2 text-gray-400"
                    >
                        <span className="flex items-center justify-center w-5 h-5">
                            {showNew ? (
                                <EyeOff size={18} strokeWidth={1.5} />
                            ) : (
                                <Eye size={18} strokeWidth={1.5} />
                            )}
                        </span>
                    </button>
                </div>

                <button
                    type="submit"
                    disabled={loading}
                    className="
                        w-full py-3 rounded-xl text-lg font-semibold text-white
                        bg-gradient-to-r from-blue-600 to-pink-500
                        shadow-lg transition-all
                        hover:opacity-90 hover:scale-[1.02]
                        disabled:opacity-60
                    "
                >
                    {loading ? 'Updating...' : 'Change Password'}
                </button>
            </form>

            <p className="text-center text-sm text-gray-400 mt-6">
                Back to{" "}
                <Link href="/login" className="text-blue-400 hover:underline">
                    Login
                </Link>
            </p>
        </div>
    );
};

export default ComponentsAuthChangePasswordForm;