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

function Pricing({ pricingData, isLoading }) {
    const [hoveredPlan, setHoveredPlan] = useState(null);
    const [isYearly, setIsYearly] = useState(false);
    const { t } = useLanguage();

    const handleSubscribe = async (plan) => {
        try {
            const priceId = isYearly ? plan.prices.yearlyPriceId : plan.prices.monthlyPriceId;
            const response = await fetch(`${API_HOST}/api/v1/onboard/create-checkout-session`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ priceId })
            });
            
            const { url } = await response.json();
            window.location.href = url;
        } catch (error) {
            console.error('Error creating checkout session:', error);
        }
    };

    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">
                            {t('pricing.title')}
                            <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">
                            {t('pricing.description')}
                        </p>
                    </div>
                </div>

                {/* Billing Toggle */}
                <div className="flex justify-center items-center mb-12">
                    <span className={`monospace mr-4 transition-colors ${!isYearly ? 'font-bold' : ''}`}>Monthly</span>
                    <div 
                        onClick={() => setIsYearly(!isYearly)}
                        className="brutalist-card inline-flex p-2 relative cursor-pointer w-16"
                    >
                        <div 
                            className="absolute top-2 left-2 h-[calc(100%-16px)] w-[calc(50%-8px)] bg-black transition-transform duration-300"
                            style={{
                                transform: isYearly ? 'translateX(100%)' : 'translateX(0)',
                            }}
                        />
                        <div className="relative w-6 h-6"></div>
                        <div className="relative w-6 h-6"></div>
                    </div>
                    <span className={`monospace ml-4 transition-colors ${isYearly ? 'font-bold' : ''}`}>
                        Yearly <span className="text-xs">-20%</span>
                    </span>
                </div>

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

                {/* Pricing Grid */}
                {isLoading ? (
                    <div className="text-center monospace">Loading plans...</div>
                ) : (
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        {[...pricingData].reverse().map((plan) => (
                        <div
                            key={plan.name}
                            className={`brutalist-card relative transition-transform duration-300 ${
                                hoveredPlan === plan.name ? 'transform -translate-y-2' : ''
                            } ${plan.popular ? 'border-4' : 'border-2'}`}
                            onMouseEnter={() => setHoveredPlan(plan.name)}
                            onMouseLeave={() => setHoveredPlan(null)}
                        >
                            {plan.popular && (
                                <div className="absolute -top-3 right-4 bg-black text-white px-4 py-1">
                                    <span className="monospace text-sm">{t('pricing.mostPopular')}</span>
                                </div>
                            )}
                            <div className="p-6">
                                <h3 className="text-2xl font-black uppercase mb-4">{plan.name}</h3>
                                <p className="text-sm monospace mb-4">{plan.description}</p>
                                <div className="flex items-baseline mb-6">
                                    <span className="text-4xl font-black">
                                        ${isYearly ? plan.prices.yearly : plan.prices.monthly}
                                    </span>
                                    <span className="ml-2 monospace">
                                        {isYearly ? t('pricing.perYear') : t('pricing.perMonth')}
                                    </span>
                                </div>
                                <div className="section-divider mb-6"></div>
                                <ul className="space-y-4">
                                    {plan.features.map((feature) => (
                                        <li key={feature} className="flex items-start gap-3 monospace">
                                            <span className="text-xl leading-none">→</span>
                                            {feature}
                                        </li>
                                    ))}
                                </ul>
                                <button
                                    onClick={() => {window.location =`/register?plan=${plan.name.toLowerCase()}&billing=${isYearly ? 'yearly' : 'monthly'}`}}
                                    className="brutalist-button w-full mt-8 text-center"
                                                            >
                                    {t('pricing.getStarted')} →
                                </button>
                            </div>
                        </div>
                    ))}
                </div>
                )}

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

                <div className="text-center monospace">
                    <p className="text-lg">
                        {t('pricing.trial')}
                    </p>
                </div>
            </div>

            <Footer />
        </div>
    );
}

export default Pricing; 