"use client"

import { TopNav } from "@/components/layout/top-nav"
import { BottomNav } from "@/components/layout/bottom-nav"
import { ContentTransition } from "@/components/layout/content-transition"
import { usePathname } from "next/navigation"
import { useMemo } from "react"

interface AppShellProps {
  children: React.ReactNode
}

// Persistent shell component that doesn't remount
const PersistentShell = ({ children }: { children: React.ReactNode }) => (
  <div className="flex min-h-screen bg-background">
    <div className="fixed inset-0 dark:bg-gradient-to-br dark:from-[#0a0e13] dark:via-[#151a26] dark:to-[#1a1f2e] -z-10" />
    <div className="flex-1 min-h-screen pb-0 md:pb-20 w-full">
      <TopNav key="top-nav" />
      <main className="max-w-4xl mx-auto px-2 sm:px-4 relative">
        {children}
      </main>
      <BottomNav key="bottom-nav" />
    </div>
  </div>
)

export function AppShell({ children }: AppShellProps) {
  const pathname = usePathname()
  
  // Only show header/nav on main app pages
  const isAppPage = useMemo(() => 
    pathname?.startsWith("/feed") || 
    pathname?.startsWith("/leaders") || 
    pathname?.startsWith("/messages") || 
    pathname?.startsWith("/friendlies") || 
    pathname?.startsWith("/alerts") || 
    pathname?.startsWith("/profile") ||
    pathname?.startsWith("/search"),
    [pathname]
  )

  if (!isAppPage) {
    return <>{children}</>
  }

  return (
    <PersistentShell>
      <ContentTransition>
        {children}
      </ContentTransition>
    </PersistentShell>
  )
}