import { useEffect } from 'react'
import Modals from './components/Modals'
import Sidebar from './components/Sidebar'
import Topbar from './components/Topbar'
import BookingFlow from './pages/BookingFlow'
import Dashboard from './pages/Dashboard'
import Login from './pages/Login'
import { useAuthStore } from './store/authStore'
import {
  AgentsPage,
  BarPOSPage,
  BookingsListPage,
  CommissionPage,
  DiveSchedulePage,
  EquipmentPage,
  EventsPage,
  GuestsPage,
  InstructorsPage,
  ReportsPage,
  RoomMapPage,
  TransportPage,
  WalletPage,
} from './pages/ExtraPages'
import { usePosStore } from './store/usePosStore'

function PageView() {
  const activePage = usePosStore((s) => s.activePage)

  switch (activePage) {
    case 'dashboard':
      return <Dashboard />
    case 'booking':
      return <BookingFlow />
    case 'bookings-list':
      return <BookingsListPage />
    case 'rooms':
      return <RoomMapPage />
    case 'guests':
      return <GuestsPage />
    case 'dive':
      return <DiveSchedulePage />
    case 'equipment':
      return <EquipmentPage />
    case 'instructors':
      return <InstructorsPage />
    case 'bar':
      return <BarPOSPage />
    case 'transport':
      return <TransportPage />
    case 'events':
      return <EventsPage />
    case 'wallet':
      return <WalletPage />
    case 'agents':
      return <AgentsPage />
    case 'commission':
      return <CommissionPage />
    case 'reports':
      return <ReportsPage />
    default:
      return <Dashboard />
  }
}

export default function App() {
  const token = useAuthStore((s) => s.token)
  const hydrateBookingsFromApi = usePosStore((s) => s.hydrateBookingsFromApi)

  useEffect(() => {
    if (token) {
      hydrateBookingsFromApi()
    }
  }, [token, hydrateBookingsFromApi])

  if (!token) {
    return <Login />
  }

  return (
    <>
      <Topbar />
      <div className="app-body">
        <Sidebar />
        <div className="content">
          <div className="page active">
            <PageView />
          </div>
        </div>
      </div>
      <Modals />
    </>
  )
}
