import React, { useEffect } from 'react';
import { Routes, Route, useLocation } from 'react-router-dom';
import Home from './pages/Home';
import Plugin from './pages/Plugin';
import EnhancedPlugin from './pages/EnhancedPlugin';
import Glossary from './pages/Glossary';
import Category from './pages/Category';
import CircuitDesigner from './pages/CircuitDesigner';
import Error from './pages/Error';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import FloatingActionButton from './components/FloatingActionButton';
import ErrorBoundary from './components/ErrorBoundary';
import analytics from './services/analytics';

function App() {
  const location = useLocation();

  // Initialize Google Analytics
  useEffect(() => {
    analytics.initialize();
  }, []);

  // Track page views on route changes
  useEffect(() => {
    const getPageTitle = (pathname) => {
      const routes = {
        '/': 'Home - GXS QuantumNexus',
        '/glossary': 'Glossary - GXS QuantumNexus',
        '/circuit-designer': 'Circuit Designer - GXS QuantumNexus'
      };

      // Handle dynamic routes
      if (pathname.startsWith('/plugin/')) {
        const pluginKey = pathname.split('/')[2];
        return `${pluginKey} Plugin - GXS QuantumNexus`;
      }
      
      if (pathname.startsWith('/legacy-plugin/')) {
        const pluginKey = pathname.split('/')[2];
        return `${pluginKey} Legacy Plugin - GXS QuantumNexus`;
      }
      
      if (pathname.startsWith('/category/')) {
        const category = pathname.split('/')[2];
        return `${category} Category - GXS QuantumNexus`;
      }

      return routes[pathname] || 'GXS QuantumNexus';
    };

    const title = getPageTitle(location.pathname);
    analytics.trackPageView(location.pathname, title);
  }, [location]);

  return (
    <ErrorBoundary>
      <div className="App app-shell min-h-screen bg-base-100 text-base-content">
        <Navbar />
        <main>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/plugin/:pluginKey" element={<EnhancedPlugin />} />
            <Route path="/legacy-plugin/:pluginKey" element={<Plugin />} />
            <Route path="/glossary" element={<Glossary />} />
            <Route path="/category/:category" element={<Category />} />
            <Route path="/circuit-designer" element={<CircuitDesigner />} />
            <Route path="*" element={<Error />} />
          </Routes>
        </main>
        <Footer />
        <FloatingActionButton />
      </div>
    </ErrorBoundary>
  );
}

export default App;