"use client";

import React, { useState, useEffect } from 'react';
import PricingCard from '@/components/pricing-card';
import { useTheme } from '@/lib/theme-context';
import PricingToggle from '@/components/ui/pricing-toggle';

const PricingPage = () => {
  const [isYearly, setIsYearly] = useState(false);
  const { theme } = useTheme();

  useEffect(() => {
    document.body.classList.add('pricing-page');
  }, []);

  const toggleBillingPeriod = () => {
    setIsYearly(!isYearly);
  };

  const getPrice = (basePrice: number) => {
    return isYearly ? basePrice * 10 : basePrice;
  };

  const getBillingPeriod = () => {
    return isYearly ? 'year' : 'month';
  };

  const getDiscountBadge = () => {
    if (isYearly) {
      return { text: 'Save 20%', style: 'text-green-500 dark:text-green-400' };
    }
    return { text: '', style: '' };
  };

  return (
    <div className={`min-h-screen ${theme === 'dark' ? 'bg-gray-900 text-gray-100' : 'bg-gray-50 text-gray-900'} transition-colors duration-300`}>
          <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
            <div className="text-center">
              <h1 className="text-3xl font-extrabold sm:text-4xl md:text-5xl transition-all duration-300">
                Transform your food photos with AI
              </h1>
              <p className="mt-3 text-lg sm:text-xl transition-opacity duration-300">
                Choose the perfect plan to enhance your culinary photography with cutting-edge AI technology.
              </p>
              <p className="mt-2 text-sm font-medium text-indigo-600 dark:text-indigo-400 transition-colors duration-300">
                {getDiscountBadge().text}
              </p>
            </div>
    
            {/* Pricing Toggle (Monthly/Yearly) */}
            <PricingToggle isYearly={isYearly} onToggle={toggleBillingPeriod} />
    
            {/* Pricing Cards Grid */}
            <div className="mt-12 sm:mt-16 lg:mt-20 space-y-8 sm:space-y-12 md:space-y-16 lg:space-y-0 sm:grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 sm:gap-6 lg:gap-8 transition-all duration-300">
              <PricingCard
                title="Basic"
                price={`$${getPrice(9)}`}
                billingPeriod={getBillingPeriod()}
                features={[
                  'Enhance up to 50 food photos/month',
                  'Basic AI food recognition',
                  'Standard lighting correction',
                  'Color enhancement',
                  'Remove minor blemishes',
                  'Basic background cleanup',
                  'Standard resolution exports',
                ]}
                ctaText="Start Enhancing"
                ctaHref="#"
              />
              <PricingCard
                title="Pro"
                price={`$${getPrice(29)}`}
                billingPeriod={getBillingPeriod()}
                features={[
                  'Everything in Basic, plus:',
                  'Enhance up to 500 food photos/month',
                  'Advanced AI food styling',
                  'Professional lighting simulation',
                  'Gourmet color grading',
                  'Remove unwanted objects',
                  'AI-powered ingredient recognition',
                  'High-resolution exports',
                  'Priority processing',
                ]}
                ctaText="Start free trial"
                ctaHref="#"
                isPopular={true}
              />
              <PricingCard
                title="MasterChef"
                price={`$${getPrice(99)}`}
                billingPeriod={getBillingPeriod()}
                features={[
                  'Everything in Pro, plus:',
                  'Unlimited food photo enhancements',
                  'AI-generated food styling suggestions',
                  'Restaurant-quality presentation',
                  'Advanced background replacement',
                  'Multi-dish composition',
                  'Professional food photography presets',
                  '4K resolution exports',
                  'Batch processing capabilities',
                  'Priority support',
                ]}
                ctaText="Get Started"
                ctaHref="#"
              />
            </div>
          </div>
        </div>
  );
};

export default PricingPage;