"use client";
import React, { useState } from 'react';
import Link  from 'next/link';
import { CheckCircle, X, Zap, Crown, Rocket } from 'lucide-react';
import { PaymentModal } from '@/components/PaymentModal';

export default function PricingPage() {
  const [selectedPlan, setSelectedPlan] = useState<any>(null);
  const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);

  const plans = [
    {
      id: '1',
      name: 'Free',
      price: '$0',
      period: '/month',
      description: 'Perfect for trying out our platform',
      icon: <Zap className="w-6 h-6" />,
      features: [
        '50 images per month',
        'WebP conversion',
        'Basic optimization',
        '5MB max file size',
        'Email support'
      ],
      limitations: [
        'No bulk processing',
        'No API access',
        'No priority processing'
      ],
      buttonText: 'Get Started Free',
      buttonStyle: 'bg-gray-900 text-white hover:bg-gray-800',
      popular: false
    },
    {
      id: '2',
      name: 'Pro',
      price: '$19',
      period: '/month',
      description: 'Best for professionals and small teams',
      icon: <Crown className="w-6 h-6" />,
      features: [
        '1,000 images per month',
        'All conversion formats (WebP, AVIF)',
        'Bulk processing',
        '20MB max file size',
        'SEO batch naming',
        'API access',
        'Priority email support'
      ],
      limitations: [],
      buttonText: 'Start Pro Trial',
      buttonStyle: 'bg-gradient-to-r from-blue-500 to-purple-600 text-white hover:from-blue-600 hover:to-purple-700',
      popular: true
    },
    {
      id: '3',
      name: 'Enterprise',
      price: '$49',
      period: '/month',
      description: 'For agencies and high-volume users',
      icon: <Rocket className="w-6 h-6" />,
      features: [
        '10,000 images per month',
        'All conversion formats',
        'Advanced bulk processing',
        '50MB max file size',
        'Custom naming templates',
        'Full API access',
        'Priority processing',
        'Dedicated support',
        'Custom integrations'
      ],
      limitations: [],
      buttonText: 'Contact Sales',
      buttonStyle: 'bg-gradient-to-r from-purple-500 to-pink-600 text-white hover:from-purple-600 hover:to-pink-700',
      popular: false
    }
  ];

  const handleSelectPlan = (plan: any) => {
    if (plan.price === '$0') {
      // Redirect to signup for free plan
      window.location.href = '/signup';
      return;
    }
    
    setSelectedPlan(plan);
    setIsPaymentModalOpen(true);
  };

  const handlePaymentSuccess = () => {
    setIsPaymentModalOpen(false);
    setSelectedPlan(null);
  };

  return (
    <>
    <div className="min-h-screen py-20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="text-center mb-16">
          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
            Simple, Transparent Pricing
          </h1>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            Choose the perfect plan for your image optimization needs. 
            All plans include our core features with no hidden fees.
          </p>
        </div>

        {/* Pricing Cards */}
        <div className="grid md:grid-cols-3 gap-8 mb-16">
          {plans.map((plan, index) => (
            <div
              key={plan.name}
              className={`relative bg-white rounded-2xl shadow-lg p-8 ${
                plan.popular ? 'ring-2 ring-blue-500 scale-105' : ''
              }`}
            >
              {plan.popular && (
                <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                  <span className="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-4 py-2 rounded-full text-sm font-medium">
                    Most Popular
                  </span>
                </div>
              )}

              <div className="text-center mb-8">
                <div className={`inline-flex p-3 rounded-lg mb-4 ${
                  index === 0 ? 'bg-gray-100 text-gray-600' :
                  index === 1 ? 'bg-blue-100 text-blue-600' :
                  'bg-purple-100 text-purple-600'
                }`}>
                  {plan.icon}
                </div>
                <h3 className="text-2xl font-bold text-gray-900 mb-2">{plan.name}</h3>
                <div className="flex items-baseline justify-center mb-2">
                  <span className="text-5xl font-bold text-gray-900">{plan.price}</span>
                  <span className="text-gray-600 ml-1">{plan.period}</span>
                </div>
                <p className="text-gray-600">{plan.description}</p>
              </div>

              <div className="space-y-4 mb-8">
                {plan.features.map((feature, idx) => (
                  <div key={idx} className="flex items-center">
                    <CheckCircle className="w-5 h-5 text-green-500 mr-3 flex-shrink-0" />
                    <span className="text-gray-700">{feature}</span>
                  </div>
                ))}
                {plan.limitations.map((limitation, idx) => (
                  <div key={idx} className="flex items-center">
                    <X className="w-5 h-5 text-gray-400 mr-3 flex-shrink-0" />
                    <span className="text-gray-500">{limitation}</span>
                  </div>
                ))}
              </div>

              <button
                onClick={() => handleSelectPlan(plan)}
                className={`w-full px-6 py-3 rounded-lg font-semibold transition-all transform hover:scale-105 ${plan.buttonStyle}`}
              >
                {plan.buttonText}
              </button>
            </div>
          ))}
        </div>

        {/* FAQ Section */}
        <div className="bg-white rounded-2xl shadow-lg p-8">
          <h2 className="text-2xl font-bold text-gray-900 mb-8 text-center">
            Frequently Asked Questions
          </h2>
          <div className="grid md:grid-cols-2 gap-8">
            <div>
              <h3 className="font-semibold text-gray-900 mb-2">
                What image formats do you support?
              </h3>
              <p className="text-gray-600 text-sm">
                We support JPG, PNG, GIF, SVG, HEIC, BMP, and TIFF as input formats. 
                Output formats include WebP, AVIF, JPEG, and PNG.
              </p>
            </div>
            <div>
              <h3 className="font-semibold text-gray-900 mb-2">
                How does the API work?
              </h3>
              <p className="text-gray-600 text-sm">
                Pro and Enterprise plans include API access for automated workflows. 
                Integrate directly with your CMS or CI/CD pipeline.
              </p>
            </div>
            <div>
              <h3 className="font-semibold text-gray-900 mb-2">
                What happens to my images?
              </h3>
              <p className="text-gray-600 text-sm">
                Your images are processed securely and automatically deleted after 7 days. 
                We never store or access your content permanently.
              </p>
            </div>
            <div>
              <h3 className="font-semibold text-gray-900 mb-2">
                Can I cancel anytime?
              </h3>
              <p className="text-gray-600 text-sm">
                Yes! You can upgrade, downgrade, or cancel your subscription at any time. 
                No long-term commitments required.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    {selectedPlan && (
      <PaymentModal
        isOpen={isPaymentModalOpen}
        onClose={() => {
          setIsPaymentModalOpen(false);
          setSelectedPlan(null);
        }}
        plan={selectedPlan}
        onSuccess={handlePaymentSuccess}
      />
    )}
    </>
  );
};