import React from 'react'
import { useLocation } from '@tanstack/react-router'
import { BottomNavigation } from './BottomNavigation'
import { FloatingCartBar } from './FloatingCartBar'
import { Sidebar } from './shell/Sidebar'
import { Topbar } from './shell/Topbar'

interface AppLayoutProps {
  children: React.ReactNode
  showCartBar?: boolean
  isFlashDelivery?: boolean
  hideShell?: boolean
}

// Routes where the full shell (sidebar/topbar/bottom nav) should be hidden
const hideShellRoutes = ['/login', '/register', '/checkout', '/home/checkout', '/flash/checkout']

// Routes that render their own top bar UI — skip the global Topbar there
const selfTopbarRoutes = ['/home/search']

export function AppLayout({
  children,
  showCartBar = true,
  isFlashDelivery = false,
  hideShell = false,
}: AppLayoutProps) {
  const location = useLocation()
  const currentPath = location.pathname

  const shouldHideShell =
    hideShell ||
    hideShellRoutes.some((route) => currentPath === route || currentPath.startsWith(`${route}/`))

  const hasOwnTopbar = selfTopbarRoutes.some(
    (route) => currentPath === route || currentPath.startsWith(`${route}/`)
  )

  // On mobile the cart bar replaces the old floating pill
  const shouldShowCartBar = showCartBar && !shouldHideShell

  if (shouldHideShell) {
    return <main className="min-h-screen">{children}</main>
  }

  return (
    <div className="shell-grid">
      {/* Desktop rail */}
      <Sidebar />

      <div className="shell-main">
        {/* Single top bar — logo + search + cart (desktop) / search only (mobile) */}
        {!hasOwnTopbar && <Topbar isFlashDelivery={isFlashDelivery} />}

        {/* Main content */}
        <main className="shell-content min-w-0">{children}</main>
      </div>

      {/* Cart slide-over (desktop) / bottom bar (mobile) */}
      {shouldShowCartBar && <FloatingCartBar isFlashDelivery={isFlashDelivery} />}

      {/* Mobile bottom nav */}
      <BottomNavigation />
    </div>
  )
}