import { useEffect, useState } from 'react';
import { useSearchParams, useNavigate, Link } from 'react-router-dom';
import { useLanguage } from '../context/LanguageContext';
import Footer from '../components/Footer';
import { API_HOST } from '../config';

function PaymentSuccess() {
    const [searchParams] = useSearchParams();
    const { t } = useLanguage();
    const [isLoading, setIsLoading] = useState(false);
    const sessionId = searchParams.get('session_id');

    return (
        <div className="relative min-h-screen bg-white">
            {/* Technical grid background */}
            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>

            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
                {/* Header section */}
                <div className="grid-layout mb-16">
                    <div className="col-span-12 md:col-span-8">
                        <h1 className="brutalist-heading relative">
                            Payment Successful
                            <div className="absolute -right-8 -top-8 w-16 h-16">
                                <div className="geometric-shape diamond w-full h-full bg-black"></div>
                            </div>
                        </h1>
                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
                            Thank you for subscribing to our service.
                        </p>
                    </div>
                </div>

                <div className="geometric-divider mb-16"></div>

                {/* Content */}
                <div className="grid-layout">
                    <div className="col-span-12 md:col-span-6 lg:col-span-4">
                        <div className="brutalist-card p-6 space-y-6">
                            <div className="flex items-center justify-center">
                                <div className="w-16 h-16 relative">
                                    <div className="geometric-shape circle w-full h-full border-4 border-black"></div>
                                    <div className="absolute inset-0 flex items-center justify-center">
                                        <span className="text-3xl font-bold" style={{ marginTop: '-2px' }}>✓</span>
                                    </div>
                                </div>
                            </div>

                            <div className="text-center space-y-4">
                                <p className="monospace">
                                    Your subscription is now active. You can start using our services right away.
                                </p>
                            </div>

                            <div className="section-divider"></div>

                            <form action={`${API_HOST}/api/v1/onboard/create-portal-session`} method="POST">
                                <input type="hidden" id="session-id" name="session_id" value={sessionId} />
                                <button
                                    type="submit"
                                    disabled={isLoading}
                                    className="brutalist-button w-full disabled:opacity-50"
                                >
                                    {isLoading ? (
                                        <span className="monospace">Processing...</span>
                                    ) : (
                                        <span>Manage billing information →</span>
                                    )}
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <Footer />
        </div>
    );
}

export default PaymentSuccess; 