import type { ReactNode } from 'react';
import { Header } from './Header';
import { Sidebar } from './Sidebar';
import { MobileBottomNav } from './MobileBottomNav';
import { AnnouncementBanner } from '../feedback/AnnouncementBanner';
import { GlobalPlayer } from '@/features/player/components/GlobalPlayer';
import { useQueueSync } from '@/features/player/hooks/useQueueSync';
import { useUIStore } from '@/stores/ui';
import { cn } from '@/lib/utils';
import { AstralBackground } from '../ui/AstralBackground';

interface DashboardLayoutProps {
  children: ReactNode;
}

/**
 * Layout principal "App Shell" - Veza Professional V2
 *
 * Architecture:
 * - Body: Fixed viewport (overflow-hidden)
 * - Sidebar: Fixed left, z-index high (desktop only)
 * - MobileBottomNav: Fixed bottom (mobile only, lg:hidden)
 * - Main: Scrollable container independent of window
 * - Header: Sticky top within Main
 * - Player: Fixed above bottom nav (mobile) / above content (desktop)
 *
 * Z-index hierarchy (bottom to top):
 *   z-raised (10) — main content
 *   z-40         — MobileBottomNav
 *   z-player     — GlobalPlayer (z-sticky = 200)
 *   z-sidebar    — Sidebar (95)
 *   z-sticky     — Header (200)
 */
export function DashboardLayout({ children }: DashboardLayoutProps) {
  const { sidebarOpen } = useUIStore();
  useQueueSync();

  return (
    <div className="flex h-screen w-full overflow-hidden relative bg-background">
      {/* 1. Global Background (Fixed z-0) */}
      <AstralBackground />

      {/* 2. Fixed Sidebar — desktop only (z-90) */}
      <Sidebar />

      {/* 3. Main Content Area (The only thing that scrolls) */}
      <div
        className={cn(
          'flex-1 flex flex-col h-full min-w-0 relative z-[var(--sumi-z-raised)] transition-all duration-[var(--sumi-duration-slow)] ease-[var(--sumi-ease-in-out)]',
          sidebarOpen ? 'lg:ml-main-expanded' : 'lg:ml-main-collapsed',
          'max-lg:ml-0'
        )}
      >
        {/* Header is part of the flow but stays at top */}
        <Header />

        {/* Scrollable Content Container — bottom padding accounts for player + mobile nav */}
        <main
          id="main-content"
          className="flex-1 overflow-y-auto overflow-x-hidden pt-main pb-main px-4 md:px-8 custom-scrollbar"
          data-scroll-container="main"
        >
          <div className="max-w-layout-content mx-auto w-full">
            <AnnouncementBanner />
            {children}
          </div>
        </main>

        {/* Floating Player — sits above MobileBottomNav on mobile */}
        <div className="absolute bottom-0 left-0 right-0 z-player w-full min-w-0" aria-label="Player bar container">
          <GlobalPlayer />
        </div>
      </div>

      {/* 4. Mobile Bottom Navigation — fixed, below player, above content */}
      <MobileBottomNav />
    </div>
  );
}