'use client';

import IconLockDots from '@/components/icon/icon-lock-dots';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import axios from 'axios';

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

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

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

        try {
            const token = localStorage.getItem('token');
            if (!token) {
                setError('You are not logged in.');
                setLoading(false);
                return;
            }

            // 👉 Create FormData and append fields
            const formData = new FormData();
            formData.append('currentPassword', currentPassword);
            formData.append('newPassword', newPassword);

            // 👉 Axios call with Bearer token
            const res = await axios.post(
                `http://localhost:3010/api/auth/change-password`,
                formData,
                {
                    headers: {
                        Authorization: `Bearer ${token}`,
                        "Content-Type": "application/json",                        // axios will set correct multipart/form-data boundary automatically
                    },
                }
            );

            setSuccess(res.data.message || 'Password updated successfully!');
            // Optional: force user to re-login after password change
            localStorage.removeItem('token');
            router.push('/login');
        } catch (err: any) {
            const msg = err.response?.data?.error || err.message;
            setError(msg);
        } finally {
            setLoading(false);
        }
    };

    return (
        <form className="space-y-5" onSubmit={submitForm}>
            {/* Current password */}
            <div>
                <label htmlFor="currentPassword" className="dark:text-white">
                    Current Password
                </label>
                <div className="relative text-white-dark">
                    <input
                        id="currentPassword"
                        type="password"
                        placeholder="Enter Current Password"
                        className="form-input ps-10 placeholder:text-white-dark"
                        value={currentPassword}
                        onChange={(e) => setCurrentPassword(e.target.value)}
                        required
                    />
                    <span className="absolute start-4 top-1/2 -translate-y-1/2">
                        <IconLockDots fill={true} />
                    </span>
                </div>
            </div>

            {/* New password */}
            <div>
                <label htmlFor="newPassword" className="dark:text-white">
                    New Password
                </label>
                <div className="relative text-white-dark">
                    <input
                        id="newPassword"
                        type="password"
                        placeholder="Enter New Password"
                        className="form-input ps-10 placeholder:text-white-dark"
                        value={newPassword}
                        onChange={(e) => setNewPassword(e.target.value)}
                        required
                    />
                    <span className="absolute start-4 top-1/2 -translate-y-1/2">
                        <IconLockDots fill={true} />
                    </span>
                </div>
            </div>

            {error && <p className="text-red-500 text-sm">{error}</p>}
            {success && <p className="text-green-500 text-sm">{success}</p>}

            <button
                type="submit"
                disabled={loading}
                className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]"
            >
                {loading ? 'UPDATING…' : 'CHANGE PASSWORD'}
            </button>
        </form>
    );
};

export default ComponentsAuthChangePasswordForm;