resolutionflow/frontend/src/components/layout/AppLayout.tsx

import { useEffect, useState, useCallback } from 'react'
import { useLocation, useNavigate, Link } from 'react-router-dom'
import { Menu, X, LayoutGrid, Clock, Network, AlertTriangle, Code2, BarChart3, Settings, LogOut, Shield, Library } from 'lucide-react'
import { useAuthStore } from '@/store/authStore'
import { usePermissions } from '@/hooks/usePermissions'
import { useUserPreferencesStore } from '@/store/userPreferencesStore'
import { BrandLogo } from '@/components/common/BrandLogo'
import { TopBar } from './TopBar'
import { Sidebar } from './Sidebar'
import { EmailVerificationBanner } from './EmailVerificationBanner'
import { ViewTransitionOutlet } from './ViewTransitionOutlet'
import { cn } from '@/lib/utils'

export function AppLayout() {
  const location = useLocation()
  const navigate = useNavigate()
  const { user, logout } = useAuthStore()
  const { effectiveRole } = usePermissions()
  const sidebarCollapsed = useUserPreferencesStore(s => s.sidebarCollapsed)
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

  // Close mobile menu on route change
  const [prevPath, setPrevPath] = useState(location.pathname)
  if (prevPath !== location.pathname) {
    setPrevPath(location.pathname)
    if (mobileMenuOpen) setMobileMenuOpen(false)
  }

  // Close on Escape
  const handleKeyDown = useCallback((e: KeyboardEvent) => {
    if (e.key === 'Escape') setMobileMenuOpen(false)
  }, [])

  useEffect(() => {
    if (mobileMenuOpen) {
      document.addEventListener('keydown', handleKeyDown)
      document.body.style.overflow = 'hidden'
    } else {
      document.body.style.overflow = ''
    }
    return () => {
      document.removeEventListener('keydown', handleKeyDown)
      document.body.style.overflow = ''
    }
  }, [mobileMenuOpen, handleKeyDown])

  const handleLogout = async () => {
    setMobileMenuOpen(false)
    await logout()
    navigate('/login')
  }

  const mobileNavItems = [
    { path: '/', label: 'Dashboard', icon: LayoutGrid },
    { path: '/sessions', label: 'Active Sessions', icon: Clock },
    { path: '/escalations', label: 'Escalations', icon: AlertTriangle },
    { path: '/trees', label: 'Flows', icon: Network },
    { path: '/step-library', label: 'Step Library', icon: Library },
    { path: '/scripts', label: 'Scripts', icon: Code2 },
    { path: '/analytics', label: 'Analytics', icon: BarChart3 },
    { path: '/account', label: 'Account', icon: Settings },
  ]

  return (
    <>
      {/* Atmosphere orbs — ambient light behind glass */}
      <div
        className="pointer-events-none fixed z-0"
        style={{
          top: '-120px',
          right: '-80px',
          width: '600px',
          height: '600px',
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.04) 40%, transparent 70%)',
          filter: 'blur(60px)',
        }}
      />
      <div
        className="pointer-events-none fixed z-0"
        style={{
          bottom: '-100px',
          left: '-60px',
          width: '500px',
          height: '500px',
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0.02) 40%, transparent 70%)',
          filter: 'blur(50px)',
        }}
      />

      <div
        className={cn('app-shell relative z-1', sidebarCollapsed && 'app-shell--collapsed')}
        data-testid="app-shell"
      >
      {/* Top Bar - spans full width */}
      <TopBar />

      {/* Sidebar - desktop only */}
      <div className="hidden md:block">
        <Sidebar />
      </div>

      {/* Mobile hamburger - overlaid on topbar */}
      <button
        onClick={() => setMobileMenuOpen(true)}
        className="fixed left-4 top-3.5 z-50 rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors md:hidden"
        aria-label="Open menu"
      >
        <Menu size={20} />
      </button>

      {/* Mobile Nav Drawer */}
      {mobileMenuOpen && (
        <div className="fixed inset-0 z-50 md:hidden">
          <div
            className="absolute inset-0 bg-black/80 backdrop-blur-xs animate-fade-in"
            onClick={() => setMobileMenuOpen(false)}
            aria-hidden="true"
          />
          <nav className="absolute inset-y-0 left-0 w-72 border-r border-border bg-[var(--sidebar-bg)] shadow-2xl animate-slide-in-left">
            <div className="flex h-14 items-center justify-between border-b border-border px-4">
              <Link to="/" className="flex items-center gap-2.5">
                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-brand">
                  <BrandLogo size="sm" className="h-4 w-4" />
                </div>
                <span className="text-sm font-heading font-bold">ResolutionFlow</span>
              </Link>
              <button
                onClick={() => setMobileMenuOpen(false)}
                className="rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground"
                aria-label="Close menu"
              >
                <X size={18} />
              </button>
            </div>

            <div className="flex flex-col p-3">
              {/* User info */}
              <div className="mb-3 border-b border-border pb-3 px-3">
                <p className="text-sm font-medium text-foreground">{user?.name || user?.email}</p>
                {effectiveRole && effectiveRole !== 'engineer' && (
                  <span className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground">
                    <Shield size={10} />
                    {effectiveRole === 'super_admin' ? 'Super Admin' : effectiveRole === 'owner' ? 'Owner' : 'Viewer'}
                  </span>
                )}
              </div>

              {/* Nav items */}
              <div className="space-y-0.5">
                {mobileNavItems.map((item) => {
                  const Icon = item.icon
                  const isActive = item.path === '/'
                    ? location.pathname === '/'
                    : location.pathname.startsWith(item.path)
                  return (
                    <Link
                      key={item.path + item.label}
                      to={item.path}
                      className={cn(
                        'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
                        isActive
                          ? 'bg-[var(--sidebar-active)] text-foreground'
                          : 'text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground'
                      )}
                    >
                      <Icon size={18} />
                      {item.label}
                    </Link>
                  )
                })}
              </div>

              {/* Logout */}
              <div className="mt-3 border-t border-border pt-3">
                <button
                  onClick={handleLogout}
                  className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground hover:bg-[var(--sidebar-hover)] hover:text-foreground transition-colors"
                >
                  <LogOut size={18} />
                  Logout
                </button>
              </div>
            </div>
          </nav>
        </div>
      )}

      {/* Main Content */}
      <main className="main-content flex flex-col overflow-hidden min-h-0">
        <EmailVerificationBanner />
        <ViewTransitionOutlet />
      </main>
    </div>
    </>
  )
}

export default AppLayout