import React, { useState } from 'react';
import './CalculatorPage.css';

const WORDPRESS_BUNDLES = {
  starter: {
    name: 'WordPress Basic',
    basePrice: 29,
    included: {
      cpu: 2,
      memory: 4,
      storage: 20,
      bandwidth: 1000,
      features: [
        'Single WordPress Instance',
        'Automated Updates',
        'Basic Security',
        'Daily Backups (7 days retention)',
        'Free SSL Certificate'
      ]
    }
  },
  professional: {
    name: 'WordPress Pro',
    basePrice: 79,
    included: {
      cpu: 4,
      memory: 8,
      storage: 50,
      bandwidth: 2000,
      features: [
        'Multiple WordPress Instances',
        'Staging Environment',
        'Advanced Security & WAF',
        'Daily Backups (30 days retention)',
        'CDN Integration',
        'Premium SSL Certificate'
      ]
    }
  },
  enterprise: {
    name: 'WordPress Enterprise',
    basePrice: 199,
    included: {
      cpu: 8,
      memory: 16,
      storage: 100,
      bandwidth: 5000,
      features: [
        'Unlimited WordPress Instances',
        'Multi-region Deployment',
        'Enterprise Security Suite',
        'Hourly Backups (90 days retention)',
        'Global CDN',
        'DDoS Protection',
        'Dedicated Support'
      ]
    }
  }
};

const COMPUTE_BUNDLES = {
  basic: {
    name: 'Basic Compute',
    basePrice: 49,
    included: {
      cpu: 2,
      memory: 4,
      storage: 40,
      bandwidth: 2000,
      features: [
        'Container Runtime',
        'Basic Monitoring',
        'Automated Backups',
        'Load Balancer'
      ]
    }
  },
  standard: {
    name: 'Standard Compute',
    basePrice: 99,
    included: {
      cpu: 4,
      memory: 8,
      storage: 80,
      bandwidth: 4000,
      features: [
        'Container Runtime',
        'Advanced Monitoring',
        'Automated Backups',
        'Load Balancer',
        'Auto-scaling',
        'Private Networking'
      ]
    }
  },
  premium: {
    name: 'Premium Compute',
    basePrice: 199,
    included: {
      cpu: 8,
      memory: 16,
      storage: 160,
      bandwidth: 8000,
      features: [
        'Container Runtime',
        'Enterprise Monitoring',
        'Automated Backups',
        'Advanced Load Balancer',
        'Auto-scaling',
        'Private Networking',
        'Dedicated Nodes',
        'Priority Support'
      ]
    }
  }
};

const ADDONS = {
  wordpress: {
    backup: {
      name: 'Enhanced Backup',
      type: 'select',
      options: [
        { name: 'Hourly Backup (14 days)', price: 15 },
        { name: 'Hourly Backup (30 days)', price: 25 },
        { name: 'Hourly Backup (90 days)', price: 45 }
      ]
    },
    ha: {
      name: 'High Availability',
      type: 'select',
      options: [
        { name: 'Multi-AZ Redundancy', price: 49 },
        { name: 'Multi-Region Active-Passive', price: 99 },
        { name: 'Multi-Region Active-Active', price: 199 }
      ]
    },
    storage: {
      name: 'Additional Storage',
      type: 'slider',
      price: 0.15,
      unit: 'GB',
      sliderMax: 1000
    },
    cdn: {
      name: 'CDN Data Transfer',
      type: 'slider',
      price: 0.08,
      unit: 'GB',
      sliderMax: 10000
    }
  },
  compute: {
    resources: {
      cpu: {
        name: 'Additional CPU',
        type: 'slider',
        price: 10,
        unit: 'core',
        sliderMax: 32
      },
      memory: {
        name: 'Additional Memory',
        type: 'slider',
        price: 5,
        unit: 'GB',
        sliderMax: 128
      },
      storage: {
        name: 'Storage Type',
        type: 'select',
        options: [
          { name: 'Standard SSD', price: 0.1, unit: 'GB' },
          { name: 'Premium SSD', price: 0.2, unit: 'GB' },
          { name: 'Ultra SSD', price: 0.3, unit: 'GB' }
        ]
      }
    },
    reliability: {
      backup: {
        name: 'Backup Options',
        type: 'select',
        options: [
          { name: 'Daily Backup', price: 20 },
          { name: 'Hourly Backup', price: 40 },
          { name: 'Continuous Backup', price: 80 }
        ]
      },
      ha: {
        name: 'High Availability',
        type: 'select',
        options: [
          { name: 'Zone Redundancy', price: 50 },
          { name: 'Region Redundancy', price: 100 },
          { name: 'Global Distribution', price: 200 }
        ]
      }
    }
  }
};

function CalculatorPage() {
  const [serviceType, setServiceType] = useState('wordpress');
  const [selectedPackage, setSelectedPackage] = useState('starter');
  const [addOnSelections, setAddOnSelections] = useState({
    wordpress: {
      backup: '',
      ha: '',
      storage: 0,
      cdn: 0
    },
    compute: {
      resources: {
        cpu: 0,
        memory: 0,
        storage: ''
      },
      reliability: {
        backup: '',
        ha: ''
      }
    }
  });

  const bundles = serviceType === 'wordpress' ? WORDPRESS_BUNDLES : COMPUTE_BUNDLES;
  const addons = ADDONS[serviceType];

  return (
    <div className="calculator-page">
      <div className="calculator-container">
        <h1>Cost Calculator</h1>
        <p>Choose your service type and customize your package</p>

        <div className="service-selector">
          <h2>Select Service Type</h2>
          <div className="service-options">
            <button
              className={`service-option ${serviceType === 'wordpress' ? 'selected' : ''}`}
              onClick={() => setServiceType('wordpress')}
            >
              WordPress Hosting
            </button>
            <button
              className={`service-option ${serviceType === 'compute' ? 'selected' : ''}`}
              onClick={() => setServiceType('compute')}
            >
              Compute
            </button>
          </div>
        </div>

        <div className="package-selector">
          <h2>Select Package</h2>
          <div className="package-options">
            {Object.entries(bundles).map(([key, pkg]) => (
              <div
                key={key}
                className={`package-option ${selectedPackage === key ? 'selected' : ''}`}
                onClick={() => setSelectedPackage(key)}
              >
                <h3>{pkg.name}</h3>
                <div className="package-price">${pkg.basePrice}/mo</div>
                <div className="package-specs">
                  <div>{pkg.included.cpu} CPU Cores</div>
                  <div>{pkg.included.memory}GB Memory</div>
                  <div>{pkg.included.storage}GB Storage</div>
                  <div>{pkg.included.bandwidth}GB Bandwidth</div>
                </div>
                <div className="package-features">
                  {pkg.included.features.map((feature, index) => (
                    <div key={index} className="feature-item">
                      <span className="checkmark">✓</span>
                      {feature}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Add-ons section will be implemented next */}
      </div>
    </div>
  );
}

export default CalculatorPage; 