veza/apps/web/src/components/layout/DashboardLayout.tsx

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

interface DashboardLayoutProps {
  children: ReactNode;
}

/**
 * Layout principal du dashboard avec sidebar et header.
 * Utilise une structure flex avec sidebar fixe et contenu scrollable.
 * 
 * FIX: La sidebar est fixe (fixed left-6), donc le contenu principal doit avoir
 * un margin-left pour ne pas être masqué par la sidebar.
 */
export function DashboardLayout({ children }: DashboardLayoutProps) {
  const { sidebarOpen } = useUIStore();

  // FIX: Calculer le margin-left pour compenser la sidebar fixe
  // Sidebar: left-6 (24px) + width (w-64 = 256px quand ouverte, w-20 = 80px quand fermée) + gap (24px)
  // Sur desktop (lg): sidebar est toujours visible, donc toujours besoin de margin
  // Sur mobile: sidebar est cachée (-translate-x-full), donc pas de margin

  return (
    <div className="flex h-screen overflow-hidden relative">
      <AstralBackground />
      <Sidebar />
      {/* FIX: Ajouter margin-left pour compenser la sidebar fixe et éviter la superposition */}
      <div
        className={cn(
          'flex-1 flex flex-col min-w-0 transition-all duration-500 ease-in-out',
          // Sur desktop (lg), toujours ajouter le margin pour la sidebar
          // Sidebar ouverte: left-6 (24px) + w-64 (256px) + gap (24px) = 304px
          // Sidebar fermée: left-6 (24px) + w-20 (80px) + gap (24px) = 128px
          sidebarOpen
            ? 'lg:ml-[304px]' // 24 + 256 + 24 = 304px
            : 'lg:ml-[128px]', // 24 + 80 + 24 = 128px
          // Sur mobile, pas de margin car sidebar est cachée (-translate-x-full)
        )}
      >
        <Header />
        {/* FIX: Ajouter padding-top pour compenser le header fixe (h-16 + mt-4 = 80px = top-20) */}
        <main className="flex-1 overflow-auto pb-24 pt-20 relative z-0">{children}</main>
        <GlobalPlayer />
      </div>
    </div>
  );
}