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

const PACKAGES = {
  starter: {
    name: 'Starter',
    basePrice: 49,
    included: {
      cpu: 2,
      memory: 4,
      storage: 20,
      bandwidth: 1000
    }
  },
  pro: {
    name: 'Professional',
    basePrice: 99,
    included: {
      cpu: 4,
      memory: 8,
      storage: 50,
      bandwidth: 2000
    }
  },
  enterprise: {
    name: 'Enterprise',
    basePrice: 199,
    included: {
      cpu: 8,
      memory: 16,
      storage: 100,
      bandwidth: 5000
    }
  }
};

const ADD_ONS = {
  cpu: {
    name: 'Additional CPU Cores',
    price: 10,
    unit: 'core',
    defaultMax: 32,
    sliderMax: 32
  },
  memory: {
    name: 'Additional Memory',
    price: 5,
    unit: 'GB',
    defaultMax: 64,
    sliderMax: 64
  },
  storage: {
    name: 'Additional Storage',
    price: 0.5,
    unit: 'GB',
    defaultMax: 500,
    sliderMax: 500
  },
  bandwidth: {
    name: 'Additional Bandwidth',
    price: 0.1,
    unit: 'GB',
    defaultMax: 10000,
    sliderMax: 10000
  }
};

function CalculatorPage() {
  const [selectedPackage, setSelectedPackage] = useState('starter');
  const [addOns, setAddOns] = useState({
    cpu: 0,
    memory: 0,
    storage: 0,
    bandwidth: 0
  });
  const [showCustomInput, setShowCustomInput] = useState({
    cpu: false,
    memory: false,
    storage: false,
    bandwidth: false
  });
  const [tempInputs, setTempInputs] = useState({
    cpu: '',
    memory: '',
    storage: '',
    bandwidth: ''
  });

  const calculateTotal = () => {
    const basePrice = PACKAGES[selectedPackage].basePrice;
    const addOnCosts = Object.entries(addOns).reduce((total, [key, value]) => {
      return total + (ADD_ONS[key].price * value);
    }, 0);
    return basePrice + addOnCosts;
  };

  const handleAddOnChange = (type, value, isCustomInput = false) => {
    if (isCustomInput) {
      setTempInputs(prev => ({
        ...prev,
        [type]: value
      }));
      
      if (value === '' || !isNaN(value)) {
        const parsedValue = value === '' ? 0 : parseInt(value);
        setAddOns(prev => ({
          ...prev,
          [type]: parsedValue
        }));
      }
    } else {
      const parsedValue = parseInt(value) || 0;
      const maxValue = ADD_ONS[type].sliderMax;
      
      setAddOns(prev => ({
        ...prev,
        [type]: parsedValue
      }));

      setTempInputs(prev => ({
        ...prev,
        [type]: parsedValue.toString()
      }));

      setShowCustomInput(prev => ({
        ...prev,
        [type]: parsedValue >= maxValue
      }));
    }
  };

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

        <div className="package-selector">
          <h2>Select Package</h2>
          <div className="package-options">
            {Object.entries(PACKAGES).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-features">
                  <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>
            ))}
          </div>
        </div>

        <div className="add-ons-section">
          <h2>Additional Resources</h2>
          <div className="add-ons-grid">
            {Object.entries(ADD_ONS).map(([key, addon]) => (
              <div key={key} className="add-on-item">
                <label>
                  <div className="add-on-header">
                    <span>{addon.name}</span>
                    <span className="add-on-price">${addon.price}/{addon.unit}</span>
                  </div>
                  <div className="add-on-controls">
                    <div className="slider-container">
                      <input
                        type="range"
                        min="0"
                        max={addon.sliderMax}
                        value={Math.min(addOns[key], addon.sliderMax)}
                        onChange={(e) => handleAddOnChange(key, e.target.value)}
                        className="slider"
                      />
                      <div className="slider-value">
                        {showCustomInput[key] ? (
                          <input
                            type="text"
                            value={tempInputs[key]}
                            onChange={(e) => handleAddOnChange(key, e.target.value, true)}
                            className="custom-value-input"
                            placeholder={`Enter ${addon.unit}s`}
                          />
                        ) : (
                          <span>{addOns[key]} {addon.unit}s</span>
                        )}
                      </div>
                    </div>
                  </div>
                </label>
              </div>
            ))}
          </div>
        </div>

        <div className="total-section">
          <div className="total-breakdown">
            <div className="breakdown-item">
              <span>Base Package:</span>
              <span>${PACKAGES[selectedPackage].basePrice}/mo</span>
            </div>
            {Object.entries(addOns).map(([key, value]) => (
              value > 0 && (
                <div key={key} className="breakdown-item">
                  <span>{ADD_ONS[key].name}:</span>
                  <span>${(ADD_ONS[key].price * value).toFixed(2)}/mo</span>
                </div>
              )
            ))}
          </div>
          <div className="total-amount">
            <span>Estimated Total:</span>
            <span>${calculateTotal().toFixed(2)}/mo</span>
          </div>
        </div>
      </div>
    </div>
  );
}

export default CalculatorPage; 