// src/pages/ResetPasswordPage.tsx
import React, { useState } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import * as apiClient from '../services/apiClient';
import { logger } from '../services/logger.client';
import { LoadingSpinner } from '../components/LoadingSpinner';
import { PasswordInput } from './admin/components/PasswordInput';

export const ResetPasswordPage: React.FC = () => {
    const { token } = useParams<{ token: string }>();
    const navigate = useNavigate();

    // State for both password fields
    const [password, setPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');
    const [message, setMessage] = useState('');

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

        if (!token) {
            setError('No reset token provided. Please use the link from your email.');
            return;
        }

        // Add validation to check if passwords match
        if (password !== confirmPassword) {
            setError('Passwords do not match.');
            return;
        }

        setLoading(true);
        setError('');
        setMessage('');

        try {
            const response = await apiClient.resetPassword(token, password);
            const data = await response.json();
            setMessage(data.message + ' You will be redirected to the homepage shortly.');
            logger.info('Password has been successfully reset.');
            // After a short delay to allow the user to read the message, navigate them to the home page.
            setTimeout(() => {
                navigate('/');
            }, 4000); // 4-second delay
        } catch (err) {
            const errorMessage = err instanceof Error ? err.message : 'An unknown error occurred.';
            setError(errorMessage);
            logger.error({ err }, 'Failed to reset password.');
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="min-h-screen bg-gray-100 dark:bg-gray-950 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
            <div className="max-w-md w-full space-y-8 bg-white dark:bg-gray-800 p-10 rounded-xl shadow-lg">
                <div>
                    <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
                        Set a New Password
                    </h2>
                </div>
                {message ? (
                    <div className="text-center">
                        <p className="text-green-600 dark:text-green-400">{message}</p>
                        <Link to="/" className="mt-4 inline-block font-medium text-brand-primary hover:underline">
                            Return to Home
                        </Link>
                    </div>
                ) : (
                    <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
                        <div className="rounded-md shadow-sm space-y-4">
                            <PasswordInput
                                id="new-password"
                                name="password"
                                value={password}
                                onChange={e => setPassword(e.target.value)}
                                required
                                placeholder="New Password" // This field already exists
                                showStrength
                            />
                            {/* Add the missing confirm password field */}
                            <PasswordInput
                                id="confirm-new-password"
                                name="confirmPassword"
                                value={confirmPassword}
                                onChange={(e) => setConfirmPassword(e.target.value)}
                                required
                                placeholder="Confirm New Password"
                            />
                        </div>
                        {error && <p className="text-sm text-red-600 dark:text-red-400 text-center">{error}</p>}
                        <div>
                            <button type="submit" disabled={loading} className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-brand-secondary hover:bg-brand-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-primary disabled:bg-gray-400">
                                {loading ? <div className="w-5 h-5"><LoadingSpinner /></div> : 'Reset Password'}
                            </button>
                        </div>
                    </form>
                )}
            </div>
        </div>
    );
};