import React, { useEffect, useState } from 'react';
import { DismissibleAlert } from '../../components/ui/dismissible-alert';
import { useNavigate, useLocation } from 'react-router-dom';
import { useAuthServiceContext } from '../../services';
import { isWpAdminMount } from '../../utils/mountContext';

const PaymentErrorPage: React.FC = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const { isLoggedIn } = useAuthServiceContext();
    const [countdown, setCountdown] = useState(5);

    useEffect(() => {
        if (isLoggedIn) {
            navigate('/');
        }
    }, [isLoggedIn]);

    useEffect(() => {
        if (!isWpAdminMount()) {
            navigate('/');
            return;
        }

        const hashParams = new URLSearchParams(location.search);
        const installationId = hashParams.get('installation_id');

        if (!installationId) {
            console.error('Missing installation_id parameter');
            navigate('/');
            return;
        }

        const countdownInterval = setInterval(() => {
            setCountdown(prev => {
                if (prev <= 1) {
                    clearInterval(countdownInterval);
                }
                return prev - 1;
            });
        }, 1000);

        const navigationTimer = setTimeout(() => {
            navigate('/');
        }, 5000);

        return () => {
            clearTimeout(navigationTimer);
            clearInterval(countdownInterval);
        };
    }, [navigate, location]);

    return (
        <div style={{ padding: 32}}>
            <DismissibleAlert status="error">
                Your payment was not completed successfully. Please try again or contact support if you continue to experience issues.
                This page will reload in {countdown} seconds.
            </DismissibleAlert>
        </div>
    );
};

export default PaymentErrorPage;