import React from 'react';
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
import { ChatButton } from './components/ui/ChatButton';
import { AccountSelectionPage } from './pages/AccountSelectionPage';
import { CheckoutPageRoute } from './pages/CheckoutPageRoute';
import { SuccessPageRoute } from './pages/SuccessPageRoute';
import { Error404 } from './components/errors/Error404';
import { NoInternet } from './components/errors/NoInternet';
import { useNetworkStatus } from './hooks/useNetworkStatus';

const AppRoutes: React.FC = () => {
  const isOnline = useNetworkStatus();
  const location = useLocation();

  // Don't show NoInternet on the no-internet page itself to avoid infinite loop
  if (!isOnline && location.pathname !== '/no-internet') {
    return <NoInternet />;
  }

  return (
    <Routes>
      <Route path="/" element={<AccountSelectionPage />} />
      <Route path="/checkout" element={<CheckoutPageRoute />} />
      <Route path="/success" element={<SuccessPageRoute />} />
      <Route path="/no-internet" element={<NoInternet />} />
      <Route path="*" element={<Error404 />} />
    </Routes>
  );
};

function App() {
  return (
    <BrowserRouter>
      <AppRoutes />
      <ChatButton />
    </BrowserRouter>
  );
}

export default App;