import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom'
import { HelmetProvider } from 'react-helmet-async'
import './index.css'
import App from './App'
import Home from './pages/Home'
import About from './pages/About'
import Services from './pages/Services'
import Resources from './pages/Resources'
import PrayerRequests from './pages/PrayerRequests'
import Calendar from './pages/Calendar'
import Beliefs from './pages/Beliefs'
import Contact from './pages/Contact'
import Privacy from './pages/Privacy'
import Terms from './pages/Terms'
import Events from './pages/Events'
import EventDetail from './pages/EventDetail'
import AdminLayout from './pages/admin/AdminLayout'
import AdminLogin from './pages/admin/AdminLogin'
import AdminEvents from './pages/admin/AdminEvents'
import AdminEventForm from './pages/admin/AdminEventForm'
import RequireAdmin from './pages/admin/RequireAdmin'
import { initAnalytics } from './utils/analytics'
import { initGA, initGTM } from './utils/analytics-config'

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      { index: true, element: <Home /> },
      { path: 'about', element: <About /> },
      { path: 'services', element: <Services /> },
      { path: 'resources', element: <Resources /> },
      { path: 'prayer-requests', element: <PrayerRequests /> },
      { path: 'calendar', element: <Calendar /> },
      { path: 'beliefs', element: <Beliefs /> },
      { path: 'contact', element: <Contact /> },
      { path: 'privacy', element: <Privacy /> },
      { path: 'terms', element: <Terms /> },
      { path: 'events', element: <Events /> },
      { path: 'events/:slug', element: <EventDetail /> }
    ]
  },
  {
    path: '/admin',
    element: <AdminLayout />,
    children: [
      { index: true, element: <Navigate to="/admin/events" replace /> },
      { path: 'login', element: <AdminLogin /> },
      {
        element: <RequireAdmin />,
        children: [
          { path: 'events', element: <AdminEvents /> },
          { path: 'events/new', element: <AdminEventForm /> },
          { path: 'events/:slug/edit', element: <AdminEventForm /> }
        ]
      }
    ]
  }
])

// Initialize analytics after DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  initAnalytics()
  
  // Initialize Google Analytics and GTM
  // Uncomment these lines and add your tracking IDs in analytics-config.js
  // initGA()
  // initGTM()
})

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <HelmetProvider>
      <RouterProvider router={router} />
    </HelmetProvider>
  </React.StrictMode>
)