import React, { useEffect, useState } from 'react';
import { DismissibleAlert } from '../../components/ui/dismissible-alert';
import { Heading } from '../../components/ui/heading';
import { Text } from '../../components/ui/text';
import { Spacer } from '../../components/ui/spacer';
import { useNavigate, useLocation } from 'react-router-dom';
import { useBillingContext } from '../../services/BillingContext.tsx';
import { useHttpService } from '../../services';
import { environment } from '../../environments/environment.ts';

const PaymentSuccessPage: React.FC = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const { refreshBilling } = useBillingContext();
    const { post } = useHttpService();
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        const handleSuccess = async () => {
            const sessionId = new URLSearchParams(location.search).get('session_id');

            if (sessionId) {
                try {
                    await post(`${environment.apiUrl}/Stripe/activate`, { sessionId });
                } catch (err: any) {
                    console.error('Failed to activate subscription:', err);
                    setError('Subscription activation failed. Please contact support if your plan is not updated.');
                }
            }

            await refreshBilling();
            navigate('/dashboard/subscription');
        };

        handleSuccess();
    }, []);

    return (
        <div style={{ padding: 32, maxWidth: '800px', margin: '0 auto' }}>
            {error ? (
                <DismissibleAlert status="warning">
                    {error}
                </DismissibleAlert>
            ) : (
                <DismissibleAlert status="success">
                    Your subscription has been activated successfully!
                </DismissibleAlert>
            )}
            <Spacer margin={4} />
            <Heading level={4}>Redirecting to your subscription page...</Heading>
            <Text variant="muted">This will take just a moment.</Text>
        </div>
    );
};

export default PaymentSuccessPage;