import React, { useState } from 'react';

const nitroFeatures = [
  { id: 'animated-avatar', icon: '👤', title: 'Animated Avatar', description: 'Use GIFs as your profile picture' },
  { id: 'animated-emoji', icon: '😄', title: 'Animated Emoji', description: 'Use animated emojis anywhere' },
  { id: 'larger-uploads', icon: '📁', title: '500MB Uploads', description: 'Share large files up to 500MB' },
  { id: 'hd-streaming', icon: '📺', title: 'HD Streaming', description: 'Stream in 4K at 60fps' },
  { id: 'custom-tag', icon: '🏷️', title: 'Custom Tag', description: 'Choose your own 4-digit tag' },
  { id: 'server-boost', icon: '🚀', title: '2 Free Boosts', description: 'Boost your favorite servers' },
  { id: 'profile-banner', icon: '🖼️', title: 'Profile Banner', description: 'Add a custom banner to your profile' },
  { id: 'custom-themes', icon: '🎨', title: 'Custom Themes', description: 'Personalize your client' },
  { id: 'super-reactions', icon: '✨', title: 'Super Reactions', description: 'Send enhanced animated reactions' },
  { id: 'soundboard', icon: '🔊', title: 'More Sounds', description: 'Upload more soundboard sounds' },
];

const plans = [
  {
    id: 'nitro',
    name: 'Nitro',
    price: '$9.99',
    period: '/month',
    yearlyPrice: '$99.99',
    features: nitroFeatures.map(f => f.id),
    popular: true,
  },
  {
    id: 'nitro-basic',
    name: 'Nitro Basic',
    price: '$2.99',
    period: '/month',
    yearlyPrice: '$29.99',
    features: ['animated-emoji', 'larger-uploads', 'custom-tag'],
    popular: false,
  },
];

const boostPerks = [
  { level: 1, boosts: 2, perks: ['50 extra emoji slots', '128kbps audio', 'Animated server icon', 'Custom invite background'] },
  { level: 2, boosts: 7, perks: ['100 extra emoji slots', '256kbps audio', '50MB upload limit', 'Server banner'] },
  { level: 3, boosts: 14, perks: ['250 extra emoji slots', '384kbps audio', '100MB upload limit', 'Vanity URL'] },
];

export default function NitroPanel({ onClose }) {
  const [activeTab, setActiveTab] = useState('subscribe');
  const [billingCycle, setBillingCycle] = useState('monthly');
  const [selectedPlan, setSelectedPlan] = useState('nitro');

  return (
    <div className="nitro-panel">
      <div className="nitro-header">
        <div className="nitro-branding">
          <span className="nitro-logo">🚀</span>
          <h1>Nitro</h1>
        </div>
        <button className="nitro-close" onClick={onClose}>✕</button>
      </div>

      <div className="nitro-tabs">
        <button 
          className={`nitro-tab ${activeTab === 'subscribe' ? 'active' : ''}`}
          onClick={() => setActiveTab('subscribe')}
        >
          Subscribe
        </button>
        <button 
          className={`nitro-tab ${activeTab === 'boost' ? 'active' : ''}`}
          onClick={() => setActiveTab('boost')}
        >
          Server Boost
        </button>
        <button 
          className={`nitro-tab ${activeTab === 'gift' ? 'active' : ''}`}
          onClick={() => setActiveTab('gift')}
        >
          Gift
        </button>
      </div>

      {activeTab === 'subscribe' && (
        <div className="nitro-content">
          <div className="nitro-hero">
            <h2>Unleash more fun</h2>
            <p>Subscribe to Nitro to unlock features and perks</p>
          </div>

          <div className="billing-toggle">
            <button 
              className={`billing-option ${billingCycle === 'monthly' ? 'active' : ''}`}
              onClick={() => setBillingCycle('monthly')}
            >
              Monthly
            </button>
            <button 
              className={`billing-option ${billingCycle === 'yearly' ? 'active' : ''}`}
              onClick={() => setBillingCycle('yearly')}
            >
              Yearly <span className="save-badge">Save 16%</span>
            </button>
          </div>

          <div className="plans-grid">
            {plans.map(plan => (
              <div 
                key={plan.id}
                className={`plan-card ${plan.popular ? 'popular' : ''} ${selectedPlan === plan.id ? 'selected' : ''}`}
                onClick={() => setSelectedPlan(plan.id)}
              >
                {plan.popular && <div className="popular-badge">Most Popular</div>}
                <h3>{plan.name}</h3>
                <div className="plan-price">
                  <span className="price">{billingCycle === 'yearly' ? plan.yearlyPrice : plan.price}</span>
                  <span className="period">{billingCycle === 'yearly' ? '/year' : plan.period}</span>
                </div>
                <ul className="plan-features">
                  {nitroFeatures.filter(f => plan.features.includes(f.id)).map(feature => (
                    <li key={feature.id}>
                      <span className="check">✓</span>
                      {feature.title}
                    </li>
                  ))}
                </ul>
                <button className="select-plan-btn">
                  {selectedPlan === plan.id ? 'Selected' : 'Select'}
                </button>
              </div>
            ))}
          </div>

          <button className="subscribe-btn">
            Subscribe to {plans.find(p => p.id === selectedPlan)?.name}
          </button>
        </div>
      )}

      {activeTab === 'boost' && (
        <div className="nitro-content">
          <div className="boost-hero">
            <span className="boost-icon">🚀</span>
            <h2>Server Boost</h2>
            <p>Unlock perks for your favorite communities</p>
          </div>

          <div className="boost-levels">
            {boostPerks.map(level => (
              <div key={level.level} className="boost-level-card">
                <div className="level-header">
                  <span className="level-badge">Level {level.level}</span>
                  <span className="boost-requirement">{level.boosts} Boosts</span>
                </div>
                <ul className="level-perks">
                  {level.perks.map((perk, idx) => (
                    <li key={idx}>
                      <span className="perk-check">✓</span>
                      {perk}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          <div className="boost-cta">
            <button className="boost-btn">
              🚀 Boost a Server
            </button>
            <p className="boost-price">$4.99/month or included with Nitro</p>
          </div>
        </div>
      )}

      {activeTab === 'gift' && (
        <div className="nitro-content">
          <div className="gift-hero">
            <span className="gift-icon">🎁</span>
            <h2>Gift Nitro</h2>
            <p>Send the gift of Nitro to a friend</p>
          </div>

          <div className="gift-options">
            <div className="gift-card">
              <h3>Nitro</h3>
              <div className="gift-durations">
                <button className="duration-btn active">1 Month - $9.99</button>
                <button className="duration-btn">1 Year - $99.99</button>
              </div>
            </div>
            <div className="gift-card">
              <h3>Nitro Basic</h3>
              <div className="gift-durations">
                <button className="duration-btn active">1 Month - $2.99</button>
                <button className="duration-btn">1 Year - $29.99</button>
              </div>
            </div>
          </div>

          <div className="gift-recipient">
            <label>Send to</label>
            <input type="text" placeholder="Enter a username" />
          </div>

          <div className="gift-message">
            <label>Add a message (optional)</label>
            <textarea placeholder="Write a message to include with your gift..." rows={3} />
          </div>

          <button className="purchase-gift-btn">
            🎁 Purchase Gift
          </button>
        </div>
      )}

      <div className="nitro-footer">
        <a href="#" className="nitro-link">Nitro Terms</a>
        <span>•</span>
        <a href="#" className="nitro-link">Paid Services Terms</a>
      </div>
    </div>
  );
}

// Nitro badge component
export function NitroBadge({ type = 'full' }) {
  if (type === 'icon') {
    return <span className="nitro-badge-icon">🚀</span>;
  }
  
  return (
    <div className="nitro-badge">
      <span className="badge-icon">🚀</span>
      <span className="badge-text">Nitro</span>
    </div>
  );
}
