import React from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'
import AuthGate, { useAuth } from './components/AuthGate'
import { UpdateBanner } from './components/UpdateBanner'
import IosInstallHint from './components/IosInstallHint'
import { useVersionCheck } from './hooks/useVersionCheck'
import Layout from './components/Layout'
import { can } from './types'

// Re-export so existing components can keep `import { useAuth } from '../App'`
export { useAuth }

function ProtectedRoute({ cap, element }: { cap: string; element: React.ReactElement }) {
  const { user } = useAuth()
  return can(user, cap) ? element : <Navigate to="/dashboard" replace />
}

// Pages
import Settings from './pages/Settings'
import NewbookData from './pages/NewbookData'
import ResosData from './pages/ResosData'
import ResidentsTableChart from './pages/ResidentsTableChart'
import BookingsStats from './pages/BookingsStats'
import WastageLogbook from './pages/WastageLogbook'
import UploadApp from './pages/UploadApp'

// Components used as full pages
import Dashboard from './components/Dashboard'
import Upload from './components/Upload'
import InvoiceList from './components/InvoiceList'
import Review from './components/Review'
import Disputes from './components/Disputes'
import Purchases from './components/Purchases'
import Budget from './components/Budget'
import GPReport from './components/GPReport'
import PurchasesReport from './components/PurchasesReport'
import AllowancesReport from './components/AllowancesReport'
import SalesGPReport from './components/SalesGPReport'
import ReconcilePurchases from './components/ReconcilePurchases'
import UsageVarianceReport from './components/UsageVarianceReport'
import SearchInvoices from './components/SearchInvoices'
import SearchLineItems from './components/SearchLineItems'
import PurchaseOrderList from './components/PurchaseOrderList'
import Ingredients from './components/Ingredients'
import RecipeList from './components/RecipeList'
import RecipeEditor from './components/RecipeEditor'
import EventOrders from './components/EventOrders'
import EventOrderEditor from './components/EventOrderEditor'
import DishList from './components/DishList'
import DishEditor from './components/DishEditor'
import MenuList from './components/MenuList'
import MenuEditor from './components/MenuEditor'
import BulkAllergens from './components/BulkAllergens'
import PriceImpact from './components/PriceImpact'

export default function App() {
  const updateAvailable = useVersionCheck('/kitchen/health')
  return (
    <>
    <AuthGate>
      <Routes>
        {/* Fullscreen PWA routes — no sidebar layout */}
        <Route path="/upload-app" element={<UploadApp />} />

        {/* All other routes get the sidebar Layout via Outlet */}
        <Route element={<Layout />}>
          <Route path="/" element={<Navigate to="/dashboard" replace />} />
          <Route path="/dashboard" element={<Dashboard />} />

          {/* Invoices */}
          <Route path="/upload" element={<ProtectedRoute cap="invoices" element={<Upload />} />} />
          <Route path="/invoices" element={<ProtectedRoute cap="invoices" element={<InvoiceList />} />} />
          <Route path="/invoice/:id" element={<ProtectedRoute cap="invoices" element={<Review />} />} />
          <Route path="/disputes" element={<ProtectedRoute cap="disputes" element={<Disputes />} />} />
          <Route path="/search/invoices" element={<ProtectedRoute cap="invoices" element={<SearchInvoices />} />} />
          <Route path="/search/line-items" element={<ProtectedRoute cap="invoices" element={<SearchLineItems />} />} />
          <Route path="/purchase-orders" element={<ProtectedRoute cap="orders" element={<PurchaseOrderList />} />} />

          {/* Reports */}
          <Route path="/gp" element={<ProtectedRoute cap="view" element={<GPReport />} />} />
          <Route path="/purchases-report" element={<ProtectedRoute cap="view" element={<PurchasesReport />} />} />
          <Route path="/purchases" element={<ProtectedRoute cap="invoices" element={<Purchases />} />} />
          <Route path="/purchases/reconcile" element={<ProtectedRoute cap="view" element={<ReconcilePurchases />} />} />
          <Route path="/allowances-report" element={<ProtectedRoute cap="view" element={<AllowancesReport />} />} />
          <Route path="/sales-gp" element={<ProtectedRoute cap="view" element={<SalesGPReport />} />} />
          <Route path="/usage-variance" element={<ProtectedRoute cap="view" element={<UsageVarianceReport />} />} />

          {/* Kitchen */}
          <Route path="/logbook" element={<ProtectedRoute cap="logbook" element={<WastageLogbook />} />} />
          <Route path="/budget" element={<ProtectedRoute cap="logbook" element={<Budget />} />} />
          <Route path="/event-orders" element={<ProtectedRoute cap="orders" element={<EventOrders />} />} />
          <Route path="/event-orders/:id" element={<ProtectedRoute cap="orders" element={<EventOrderEditor />} />} />

          {/* Bookings */}
          <Route path="/resos" element={<ProtectedRoute cap="view" element={<ResosData />} />} />
          <Route path="/resos-stats" element={<ProtectedRoute cap="view" element={<BookingsStats />} />} />
          <Route path="/residents-table-chart" element={<ProtectedRoute cap="view" element={<ResidentsTableChart />} />} />
          <Route path="/newbook" element={<ProtectedRoute cap="view" element={<NewbookData />} />} />

          {/* Recipes */}
          <Route path="/ingredients" element={<ProtectedRoute cap="recipes" element={<Ingredients />} />} />
          <Route path="/recipes" element={<ProtectedRoute cap="recipes" element={<RecipeList />} />} />
          <Route path="/recipes/:id" element={<ProtectedRoute cap="recipes" element={<RecipeEditor />} />} />
          <Route path="/dishes" element={<ProtectedRoute cap="recipes" element={<DishList />} />} />
          <Route path="/dishes/:id" element={<ProtectedRoute cap="recipes" element={<DishEditor />} />} />
          <Route path="/menus" element={<ProtectedRoute cap="menus" element={<MenuList />} />} />
          <Route path="/menus/:id" element={<ProtectedRoute cap="menus" element={<MenuEditor />} />} />
          <Route path="/allergens" element={<ProtectedRoute cap="recipes" element={<BulkAllergens />} />} />
          <Route path="/price-impact" element={<ProtectedRoute cap="recipes" element={<PriceImpact />} />} />

          {/* Settings */}
          <Route path="/settings" element={<ProtectedRoute cap="settings" element={<Settings />} />} />

          <Route path="*" element={<Navigate to="/dashboard" replace />} />
        </Route>
      </Routes>
    </AuthGate>
    <UpdateBanner visible={updateAvailable} />
    <IosInstallHint />
    </>
  )
}
