import PropTypes from 'prop-types';
import { useState } from 'react';
import { useLanguage } from '../context/LanguageContext';
import Footer from '../components/Footer';

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

    return (
        <div className="relative min-h-screen bg-white">
            {/* Floating elements */}
            <div className="absolute inset-0 overflow-hidden pointer-events-none">
                <div className="absolute top-40 left-20 w-32 h-32 bg-brand-purple/10 rounded-full blur-3xl animate-pulse"></div>
                <div className="absolute bottom-40 right-20 w-40 h-40 bg-brand-pink/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
            </div>

            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pt-32">
                {/* Header section */}
                <div className="text-center mb-16">
                    <h1 className="text-[80px] leading-tight font-light tracking-tight text-gray-900 relative inline-block">
                        {t('pricing.title')}
                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></div>
                    </h1>
                    <p className="text-xl text-gray-500 max-w-2xl mx-auto mt-6">
                        {t('pricing.description')}
                    </p>
                </div>

                {/* Billing Toggle */}
                <div className="flex justify-center items-center mb-16">
                    <span className={`text-sm mr-4 transition-colors ${!isYearly ? 'text-black' : 'text-gray-500'}`}>Monthly</span>
                    <button 
                        onClick={() => setIsYearly(!isYearly)}
                        className="relative w-14 h-7 bg-gray-100 rounded-full p-1 transition-colors hover:bg-gray-200"
                    >
                        <div 
                            className="absolute top-1 left-1 w-5 h-5 bg-brand-purple rounded-full transition-transform duration-300"
                            style={{
                                transform: isYearly ? 'translateX(100%)' : 'translateX(0)',
                            }}
                        />
                    </button>
                    <span className={`text-sm ml-4 transition-colors ${isYearly ? 'text-black' : 'text-gray-500'}`}>
                        Yearly <span className="text-brand-purple">-20%</span>
                    </span>
                </div>

                {/* Pricing Grid */}
                {isLoading ? (
                    <div className="text-center text-gray-500">Loading plans...</div>
                ) : (
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
                        {[...pricingData].reverse().map((plan) => (
                            <div
                                key={plan.name}
                                className={`relative bg-white rounded-2xl transition-all duration-300 ${
                                    hoveredPlan === plan.name ? 'transform -translate-y-2 shadow-xl' : 'shadow-lg'
                                } ${
                                    plan.popular ? 'ring-2 ring-brand-purple' : ''
                                }`}
                                onMouseEnter={() => setHoveredPlan(plan.name)}
                                onMouseLeave={() => setHoveredPlan(null)}
                            >
                                {plan.popular && (
                                    <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-brand-purple text-white px-4 py-1 rounded-full">
                                        <span className="text-sm">{t('pricing.mostPopular')}</span>
                                    </div>
                                )}
                                <div className="p-8">
                                    <h3 className="text-xl font-medium mb-4">{plan.name}</h3>
                                    <p className="text-sm text-gray-500 mb-4">{plan.description}</p>
                                    <div className="flex items-baseline mb-8">
                                        <span className="text-4xl font-light">
                                            ${isYearly ? plan.prices.yearly : plan.prices.monthly}
                                        </span>
                                        <span className="ml-2 text-gray-500">
                                            {isYearly ? t('pricing.perYear') : t('pricing.perMonth')}
                                        </span>
                                    </div>
                                    <div className="h-px bg-gray-100 mb-8"></div>
                                    <ul className="space-y-4 mb-8">
                                        {plan.features.map((feature) => (
                                            <li key={feature} className="flex items-start gap-3 text-sm text-gray-600">
                                                <span className="text-brand-purple">→</span>
                                                {feature}
                                            </li>
                                        ))}
                                    </ul>
                                    <button
                                        onClick={() => {window.location =`/register?plan=${plan.name.toLowerCase()}&billing=${isYearly ? 'yearly' : 'monthly'}`}}
                                        className="w-full bg-black text-white rounded-full py-3 text-sm group hover:bg-brand-purple transition-colors duration-300 flex items-center justify-center gap-2"
                                    >
                                        <span>{t('pricing.getStarted')}</span>
                                        <span className="transform group-hover:translate-x-1 transition-transform">→</span>
                                    </button>
                                </div>
                            </div>
                        ))}
                    </div>
                )}

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

            <Footer />
        </div>
    );
}

Pricing.propTypes = {
    pricingData: PropTypes.arrayOf(
        PropTypes.shape({
            name: PropTypes.string.isRequired,
            description: PropTypes.string.isRequired,
            popular: PropTypes.bool,
            prices: PropTypes.shape({
                monthly: PropTypes.number.isRequired,
                yearly: PropTypes.number.isRequired
            }).isRequired,
            features: PropTypes.arrayOf(PropTypes.string).isRequired
        })
    ),
    isLoading: PropTypes.bool
};

Pricing.defaultProps = {
    pricingData: [],
    isLoading: false
};

export default Pricing;
