import type { ReactNode } from 'react'
import { AppHeader } from '@/components/layout/AppHeader'
import { SidebarNav } from '@/components/layout/AppSidebar'

interface ProtectedLayoutProps {
  children: ReactNode
}

export function ProtectedLayout({ children }: ProtectedLayoutProps) {
  return (
    <div className="relative flex h-svh overflow-hidden bg-background text-foreground">
      {/* Grid texture — fondo cuadriculado para dar profundidad y resaltar glass */}
      <div className="absolute inset-0 grid-bg pointer-events-none" />

      {/* Subtle brand/violet glow accents — corners */}
      <div className="absolute top-[-15%] right-[-8%] w-[500px] h-[500px] rounded-full bg-brand-500/10 dark:bg-brand-500/12 blur-[140px] pointer-events-none" />
      <div className="absolute bottom-[-15%] left-[20%] w-[500px] h-[500px] rounded-full bg-violet-500/8 dark:bg-violet-500/10 blur-[140px] pointer-events-none" />

      {/* Desktop sidebar — width controlled by SidebarNav itself (collapsed/expanded) */}
      <div className="relative z-10 hidden lg:flex lg:flex-col lg:shrink-0 border-r border-border">
        <SidebarNav />
      </div>

      {/* Main column */}
      <div className="relative z-10 flex flex-1 flex-col min-w-0 overflow-hidden">
        <AppHeader />
        <main className="flex-1 overflow-y-auto p-6">{children}</main>
      </div>
    </div>
  )
}
