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: {
    categories: [
      {
        name: 'Reliability',
        items: {
          backup: {
            name: 'Backup Plan',
            type: 'radio',
            options: [
              { id: 'backup-basic', name: 'Basic (Daily, 7 days)', price: 0, included: ['starter', 'professional', 'enterprise'] },
              { id: 'backup-standard', name: 'Standard (Daily, 30 days)', price: 20 },
              { id: 'backup-premium', name: 'Premium (Hourly, 30 days)', price: 50 }
            ]
          },
          ha: {
            name: 'High Availability',
            type: 'radio',
            options: [
              { id: 'ha-none', name: 'Single Region', price: 0 },
              { id: 'ha-multiaz', name: 'Multi-AZ', price: 100 },
              { id: 'ha-region', name: 'Multi-Region', price: 200, included: ['enterprise'] }
            ]
          }
        }
      },
      {
        name: 'Performance',
        items: {
          cdn: {
            name: 'Content Delivery',
            type: 'radio',
            options: [
              { id: 'cdn-none', name: 'No CDN', price: 0 },
              { id: 'cdn-basic', name: 'Basic CDN', price: 30, included: ['professional', 'enterprise'] },
              { id: 'cdn-premium', name: 'Premium CDN with WAF', price: 100 }
            ]
          },
          cache: {
            name: 'Caching',
            type: 'radio',
            options: [
              { id: 'cache-basic', name: 'Basic Cache', price: 0 },
              { id: 'cache-redis', name: 'Redis Cache', price: 40 }
            ]
          }
        }
      },
      {
        name: 'Storage',
        items: {
          storage: {
            name: 'Additional Storage',
            type: 'slider',
            basePrice: 0.15,
            unit: 'GB',
            sliderMax: 1000,
            included: {
              starter: 20,
              professional: 50,
              enterprise: 100
            }
          }
        }
      }
    ]
  },
  compute: {
    categories: [
      {
        name: 'Resources',
        items: {
          cpu: {
            name: 'CPU Cores',
            type: 'slider',
            basePrice: 20,
            unit: 'core',
            sliderMax: 32,
            included: {
              basic: 2,
              standard: 4,
              premium: 8
            }
          },
          memory: {
            name: 'Memory',
            type: 'slider',
            basePrice: 10,
            unit: 'GB',
            sliderMax: 128,
            included: {
              basic: 4,
              standard: 8,
              premium: 16
            }
          }
        }
      },
      {
        name: 'Storage',
        items: {
          storage_type: {
            name: 'Storage Type',
            type: 'radio',
            options: [
              { id: 'storage-standard', name: 'Standard SSD', price: 0.1, per: 'GB' },
              { id: 'storage-premium', name: 'Premium SSD', price: 0.2, per: 'GB' },
              { id: 'storage-ultra', name: 'Ultra SSD', price: 0.3, per: 'GB' }
            ]
          },
          storage_size: {
            name: 'Storage Size',
            type: 'slider',
            basePrice: 0,  // Price determined by storage_type
            unit: 'GB',
            sliderMax: 2000,
            included: {
              basic: 40,
              standard: 80,
              premium: 160
            }
          }
        }
      },
      {
        name: 'Reliability',
        items: {
          backup: {
            name: 'Backup Plan',
            type: 'radio',
            options: [
              { id: 'backup-none', name: 'No Backup', price: 0 },
              { id: 'backup-daily', name: 'Daily Backup', price: 30 },
              { id: 'backup-hourly', name: 'Hourly Backup', price: 80 }
            ]
          },
          ha: {
            name: 'High Availability',
            type: 'radio',
            options: [
              { id: 'ha-none', name: 'Single Zone', price: 0 },
              { id: 'ha-multiaz', name: 'Multi-AZ', price: 100 },
              { id: 'ha-region', name: 'Multi-Region', price: 300 }
            ]
          }
        }
      }
    ]
  }
};

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];

  const renderAddOnSection = (category) => {
    return (
      <div className="addon-category" key={category.name}>
        <h3>{category.name}</h3>
        <div className="addon-items">
          {Object.entries(category.items).map(([key, item]) => (
            <div className="addon-item" key={key}>
              <label className="addon-label">{item.name}</label>
              {item.type === 'radio' ? (
                <div className="radio-options">
                  {item.options.map(option => {
                    const isIncluded = option.included?.includes(selectedPackage);
                    return (
                      <label key={option.id} className="radio-option">
                        <input
                          type="radio"
                          name={key}
                          value={option.id}
                          checked={addOnSelections[serviceType][key] === option.id}
                          onChange={() => handleAddonChange(key, option.id)}
                          disabled={isIncluded}
                        />
                        <span className="radio-label">
                          {option.name}
                          {isIncluded ? (
                            <span className="included-tag">Included</span>
                          ) : (
                            <span className="price-tag">
                              +${option.price}{option.per ? `/${option.per}` : ''}/mo
                            </span>
                          )}
                        </span>
                      </label>
                    );
                  })}
                </div>
              ) : item.type === 'slider' ? (
                <div className="slider-control">
                  <input
                    type="range"
                    min={item.included[selectedPackage]}
                    max={item.sliderMax}
                    value={addOnSelections[serviceType][key]}
                    onChange={(e) => handleAddonChange(key, parseInt(e.target.value))}
                  />
                  <div className="slider-details">
                    <span>{addOnSelections[serviceType][key]} {item.unit}</span>
                    <span className="price-tag">
                      +${((addOnSelections[serviceType][key] - item.included[selectedPackage]) * item.basePrice).toFixed(2)}/mo
                    </span>
                  </div>
                </div>
              ) : null}
            </div>
          ))}
        </div>
      </div>
    );
  };

  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>

        <div className="addons-section">
          <h2>Customize Your Package</h2>
          {ADDONS[serviceType].categories.map(category => renderAddOnSection(category))}
        </div>

        {/* Add total calculation section */}
      </div>
    </div>
  );
}

export default CalculatorPage; 