import { useState } from 'react';
import { Link } from 'react-router-dom';
import { Check } from 'lucide-react';

interface Plan {
  id: string;
  name: string;
  description: string;
  pricing: {
    monthly: number;
    annually: number;
  };
  features: string[];
  isPopular?: boolean;
}

const plans: Plan[] = [
  {
    id: 'basic',
    name: 'Basic',
    description: 'For occasional drivers who need a car for a few days per month.',
    pricing: {
      monthly: 399,
      annually: 4199,
    },
    features: [
      'Up to 3 days per month',
      'Access to Model 3 and Model Y',
      'Basic insurance coverage',
      'Charging included',
      'Mileage limit: 1,000 miles/month',
      'Roadside assistance',
    ],
  },
  {
    id: 'premium',
    name: 'Premium',
    description: 'For regular drivers who need more flexibility and premium vehicles.',
    pricing: {
      monthly: 799,
      annually: 8599,
    },
    features: [
      'Up to 9 days per month',
      'Access to all Tesla models',
      'Full insurance coverage',
      'Charging included',
      'Mileage limit: 2,500 miles/month',
      'Roadside assistance',
      'Priority customer support',
      'Flexible scheduling',
    ],
    isPopular: true,
  },
  {
    id: 'unlimited',
    name: 'Unlimited',
    description: 'For those who want unrestricted access to our entire fleet.',
    pricing: {
      monthly: 1499,
      annually: 15999,
    },
    features: [
      'Unlimited access (30 days/month)',
      'Access to all Tesla models including Cybertruck',
      'Full insurance coverage',
      'Unlimited charging',
      'Unlimited mileage',
      'Roadside assistance',
      'Premium customer support',
      'Flexible scheduling',
      'Vehicle delivery and pickup',
      'Exclusive event invitations',
    ],
  },
];

const faqItems = [
  {
    question: 'How does the subscription work?',
    answer: 'Our subscription plans give you access to Tesla vehicles for a fixed monthly or annual fee. Choose your plan based on how often you need a car, select your preferred vehicle, and we'll handle the rest.'
  },
  {
    question: 'Can I switch between different Tesla models?',
    answer: 'Yes! Depending on your plan, you can switch between different Tesla models. Premium and Unlimited members have access to our entire fleet and can change vehicles up to twice per month.'
  },
  {
    question: 'What does the insurance cover?',
    answer: 'Our basic insurance covers liability and collision with a deductible. Premium and Unlimited plans include comprehensive coverage with a lower deductible, protecting you from almost any incident.'
  },
  {
    question: 'Is charging included in the subscription?',
    answer: 'Yes, charging is included in all subscription plans. Basic and Premium plans include charging at Tesla Superchargers and partner network stations, while Unlimited includes home charging equipment installation.'
  },
  {
    question: 'How do I cancel my subscription?',
    answer: 'You can cancel your subscription anytime through your account dashboard. Monthly subscriptions can be canceled with a 7-day notice, while annual subscriptions can be canceled with a 30-day notice with prorated refunds.'
  }
];

const PricingPage = () => {
  const [billingCycle, setBillingCycle] = useState<'monthly' | 'annually'>('monthly');
  const [expandedFaqIndex, setExpandedFaqIndex] = useState<number | null>(null);

  const toggleFaq = (index: number) => {
    setExpandedFaqIndex(expandedFaqIndex === index ? null : index);
  };

  return (
    <div className="bg-[#0a0a0a] text-white min-h-screen">
      <div className="container mx-auto px-4 py-16">
        {/* Header */}
        <div className="max-w-3xl mx-auto text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-bold mb-4">Choose Your Membership Plan</h1>
          <p className="text-gray-300 text-lg">
            Flexible plans designed to fit your lifestyle. Subscribe monthly or annually for the best value.
          </p>
        </div>

        {/* Billing Toggle */}
        <div className="flex justify-center mb-12">
          <div className="bg-[#161617] inline-flex rounded-lg p-1">
            <button
              onClick={() => setBillingCycle('monthly')}
              className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
                billingCycle === 'monthly'
                  ? 'bg-blue-600 text-white'
                  : 'text-gray-400 hover:text-white'
              }`}
            >
              Monthly
            </button>
            <button
              onClick={() => setBillingCycle('annually')}
              className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
                billingCycle === 'annually'
                  ? 'bg-blue-600 text-white'
                  : 'text-gray-400 hover:text-white'
              }`}
            >
              Annually
              <span className="ml-2 bg-green-600/20 text-green-500 px-1.5 py-0.5 text-xs rounded-sm">
                Save 10%
              </span>
            </button>
          </div>
        </div>

        {/* Pricing Cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
          {plans.map((plan) => (
            <div
              key={plan.id}
              className={`bg-[#161617] rounded-lg overflow-hidden border ${
                plan.isPopular ? 'border-blue-600' : 'border-gray-800'
              } relative`}
            >
              {plan.isPopular && (
                <div className="absolute top-0 right-0 bg-blue-600 text-xs font-bold uppercase px-3 py-1 rotate-0">
                  Most Popular
                </div>
              )}
              <div className="p-6">
                <h3 className="text-xl font-bold mb-2">{plan.name}</h3>
                <p className="text-gray-400 text-sm mb-6">{plan.description}</p>
                <div className="mb-6">
                  <span className="text-4xl font-bold">
                    ${billingCycle === 'monthly' ? plan.pricing.monthly : plan.pricing.annually}
                  </span>
                  <span className="text-gray-400 text-sm">
                    /{billingCycle === 'monthly' ? 'month' : 'year'}
                  </span>
                </div>
                <Link
                  to={`/pricing/${plan.id}`}
                  className={`block text-center py-3 px-4 rounded-md font-medium transition-colors ${
                    plan.isPopular
                      ? 'bg-blue-600 hover:bg-blue-700 text-white'
                      : 'bg-gray-800 hover:bg-gray-700 text-white'
                  }`}
                >
                  Choose Plan
                </Link>
              </div>
              <div className="border-t border-gray-800 p-6">
                <h4 className="font-medium mb-4">What's included:</h4>
                <ul className="space-y-3">
                  {plan.features.map((feature, index) => (
                    <li key={index} className="flex items-start gap-2">
                      <div className="flex-shrink-0 w-5 h-5 rounded-full bg-green-600/20 flex items-center justify-center mt-0.5">
                        <Check className="text-green-500 w-3 h-3" />
                      </div>
                      <span className="text-sm text-gray-300">{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>

        {/* FAQ Section */}
        <div className="max-w-3xl mx-auto">
          <h2 className="text-2xl font-bold mb-8 text-center">Frequently Asked Questions</h2>
          <div className="divide-y divide-gray-800">
            {faqItems.map((faq, index) => (
              <div key={index} className="py-5">
                <button
                  onClick={() => toggleFaq(index)}
                  className="flex justify-between items-center w-full text-left font-medium"
                >
                  <span>{faq.question}</span>
                  <span className="ml-6 flex-shrink-0">
                    {expandedFaqIndex === index ? (
                      <svg className="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
                      </svg>
                    ) : (
                      <svg className="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                      </svg>
                    )}
                  </span>
                </button>
                {expandedFaqIndex === index && (
                  <div className="mt-2 text-gray-400 text-sm">
                    <p>{faq.answer}</p>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default PricingPage;