// Main App Component
function App() {
  const [showOffsetOrder, setShowOffsetOrder] = React.useState(false);
  const [offsetTons, setOffsetTons] = React.useState(0);
  const [monetaryAmount, setMonetaryAmount] = React.useState(undefined);
  const [calculatorType, setCalculatorType] = React.useState('trip');
  
  React.useEffect(() => {
    // Log page view when component mounts
    analytics.pageView('calculator');
    
    // Make the app available globally for iframe communication
    window.PuffinCalculator = {
      setTheme: (theme) => {
        document.body.className = theme === 'dark' ? 'dark bg-gray-900' : 'bg-gray-50';
      },
      resetCalculator: () => {
        setShowOffsetOrder(false);
        setOffsetTons(0);
        setMonetaryAmount(undefined);
      }
    };
    
    // Handle iframe resize
    const resizeObserver = new ResizeObserver(entries => {
      for (let entry of entries) {
        // Notify parent if using postMessage API
        if (window.parent !== window) {
          window.parent.postMessage({
            type: 'puffin-calculator-resize',
            height: entry.contentRect.height
          }, '*');
        }
      }
    });
    
    const rootElement = document.getElementById('root');
    if (rootElement) {
      resizeObserver.observe(rootElement);
    }
    
    return () => {
      if (rootElement) {
        resizeObserver.unobserve(rootElement);
      }
    };
  }, []);
  
  const handleOffsetClick = (tons, monetaryAmount) => {
    setOffsetTons(tons);
    setMonetaryAmount(monetaryAmount);
    setShowOffsetOrder(true);
    
    // Scroll to top
    window.scrollTo({ top: 0, behavior: 'smooth' });
    
    // Track event
    analytics.event('calculator', 'offset_click', `${tons} tons`);
  };
  
  // Render the appropriate component based on state
  const renderContent = () => {
    if (showOffsetOrder) {
      return React.createElement(OffsetOrder, {
        tons: offsetTons,
        monetaryAmount: monetaryAmount,
        onBack: () => {
          setShowOffsetOrder(false);
          window.scrollTo({ top: 0, behavior: 'smooth' });
        },
        calculatorType: calculatorType
      });
    }
    
    return React.createElement(TripCalculator, {
      vesselData: sampleVessel,
      onOffsetClick: handleOffsetClick
    });
  };
  
  return React.createElement('div', {
    className: 'puffin-calculator min-h-[600px]'
  }, [
    React.createElement('div', {
      key: 'content',
      className: 'px-4 sm:px-6 flex justify-center'
    }, renderContent())
  ]);
}

// Initialize the application when the DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
  const rootElement = document.getElementById('root');
  
  if (!rootElement) {
    console.error('Root element not found. Cannot mount Puffin Calculator.');
    return;
  }
  
  // Check for React and ReactDOM
  if (!window.React || !window.ReactDOM) {
    console.error('React or ReactDOM not loaded. Cannot mount Puffin Calculator.');
    return;
  }
  
  // Initialize React app
  const root = ReactDOM.createRoot(rootElement);
  root.render(React.createElement(App, {}));
  
  // Notify when ready
  if (window.parent !== window) {
    window.parent.postMessage({
      type: 'puffin-calculator-ready'
    }, '*');
  }
});