import React, { useEffect, lazy, Suspense } from 'react'
import { Routes, Route, useLocation } from 'react-router-dom'
import { Helmet } from 'react-helmet-async'
import { useNavigate } from 'react-router-dom';
import { API_URL } from './lib/api';

// Loading Component
import PageLoader from './components/PageLoader';

// Lazy Load Components
const Home = lazy(() => import('./app/page'));
const About = lazy(() => import('./app/about/page'));
const Contact = lazy(() => import('./app/contact/page'));
const Portfolio = lazy(() => import('./app/portfolio/page'));
const AccessControl = lazy(() => import('./app/services/access-control/page'));
const CCTV = lazy(() => import('./app/services/cctv/page'));
const FireAlarm = lazy(() => import('./app/services/fire-alarm/page'));
const DynamicServicePage = lazy(() => import('./app/services/[slug]/page'));
const Privacy = lazy(() => import('./app/privacy/page'));
const Terms = lazy(() => import('./app/terms/page'));
const Cookies = lazy(() => import('./app/cookies/page'));
const ServicesHub = lazy(() => import('./app/services/page'));
const FAQs = lazy(() => import('./app/portfolio/faqs/page'));
const ProjectDetails = lazy(() => import('./app/portfolio/[id]/page'));
const AdminDashboard = lazy(() => import('./admin/page'));
const AdminLogin = lazy(() => import('./admin/login/page'));
const InquiriesPage = lazy(() => import('./admin/inquiries/page'));
const QuotesPage = lazy(() => import('./admin/quotes/page'));
const AdminPortfolio = lazy(() => import('./admin/portfolio/page'));
const AdminSettings = lazy(() => import('./admin/settings/page'));
const AdminLogs = lazy(() => import('./admin/logs/page'));
const TeamManagement = lazy(() => import('./admin/team/page'));
const AdminServices = lazy(() => import('./admin/services/page'));
const QuoteModal = lazy(() => import('./components/QuoteModal'));

// Helper Components
import BackToTopButton from './components/BackToTopButton';
import WhatsAppFloating from './components/WhatsAppFloating';

function QuotePage() {
  const navigate = useNavigate();
  return (
    <Suspense fallback={<PageLoader />}>
      <QuoteModal isOpen={true} onClose={() => navigate(-1)} asPage={true} />
    </Suspense>
  );
}

function App() {
  const { pathname, hash } = useLocation();

  useEffect(() => {
    // Track site visit - only once per session or on load
    const trackVisit = async () => {
      try {
        await fetch(`${API_URL}/api/analytics/visit`, { method: 'POST' });
      } catch (err) {
        console.error('Failed to track visit:', err);
      }
    };
    trackVisit();
  }, []);

  useEffect(() => {
    if (hash) {
      const id = hash.replace('#', '');
      const element = document.getElementById(id);
      if (element) {
        setTimeout(() => element.scrollIntoView({ behavior: 'smooth' }), 100);
      }
    } else {
      window.scrollTo(0, 0);
    }
  }, [pathname, hash]);

  return (
    <>
      <Helmet>
        <title>Safehive | Your Main Security Partner</title>
        <meta name="description" content="Safehive is your main security partner in Ethiopia, specializing in advanced CCTV and Alarm systems for businesses, industries, and homes." />
      </Helmet>
      
      <Suspense fallback={<PageLoader />}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/portfolio" element={<Portfolio />} />
          <Route path="/portfolio/faqs" element={<FAQs />} />
          <Route path="/portfolio/:id" element={<ProjectDetails />} />
          <Route path="/services" element={<ServicesHub />} />
          <Route path="/services/access-control" element={<AccessControl />} />
          <Route path="/services/cctv" element={<CCTV />} />
          <Route path="/services/fire-alarm" element={<FireAlarm />} />
          <Route path="/services/:slug" element={<DynamicServicePage />} />
          <Route path="/privacy" element={<Privacy />} />
          <Route path="/terms" element={<Terms />} />
          <Route path="/cookies" element={<Cookies />} />
          <Route path="/admin" element={<AdminDashboard />} />
          <Route path="/admin/login" element={<AdminLogin />} />
          <Route path="/admin/inquiries" element={<InquiriesPage />} />
          <Route path="/admin/quotes" element={<QuotesPage />} />
          <Route path="/admin/services" element={<AdminServices />} />
          <Route path="/admin/portfolio" element={<AdminPortfolio />} />
          <Route path="/admin/settings" element={<AdminSettings />} />
          <Route path="/admin/team" element={<TeamManagement />} />
          <Route path="/admin/logs" element={<AdminLogs />} />
          <Route path="/quote" element={<QuotePage />} />
        </Routes>
      </Suspense>

      {/* Render floating UI components only on non-admin pages */}
      {!(pathname.startsWith('/admin')) && <WhatsAppFloating />}
      {!(pathname.startsWith('/admin')) && <BackToTopButton />}
    </>
  )
}

export default App