/**
 * EN: Desktop Layout Component
 * VI: Component Layout cho Desktop
 *
 * A layout optimized for desktop/laptop screens with optional sidebar and wide content area.
 * Layout được tối ưu cho màn hình desktop/laptop với sidebar tùy chọn và content area rộng.
 *
 * @example
 * ```tsx
 * <DesktopLayout sidebar={<Sidebar />}>
 *   <YourContent />
 * </DesktopLayout>
 * ```
 */

'use client';

import React from 'react';
import { cn } from '@/shared/utils';

export interface DesktopLayoutProps {
  /**
   * Content to render inside the layout
   */
  children: React.ReactNode;

  /**
   * Custom className for the container
   */
  className?: string;

  /**
   * Header content (optional)
   */
  header?: React.ReactNode;

  /**
   * Sidebar content (optional)
   */
  sidebar?: React.ReactNode;

  /**
   * Footer content (optional)
   */
  footer?: React.ReactNode;

  /**
   * Whether to show the sidebar
   */
  showSidebar?: boolean;

  /**
   * Whether to show the header
   */
  showHeader?: boolean;

  /**
   * Whether to show the footer
   */
  showFooter?: boolean;

  /**
   * Sidebar position
   */
  sidebarPosition?: 'left' | 'right';

  /**
   * Sidebar width in pixels or custom value
   */
  sidebarWidth?: number | string;

  /**
   * Whether sidebar is collapsible
   */
  sidebarCollapsible?: boolean;

  /**
   * Whether sidebar is currently collapsed
   */
  sidebarCollapsed?: boolean;
}

/**
 * Desktop Layout Component
 *
 * Features:
 * - Sticky glass header (h-16 / 64px)
 * - Optional sidebar with customizable width
 * - Wide scrollable content area
 * - Desktop-optimized spacing
 * - Glassmorphism styling
 * - Sidebar positioning (left/right)
 *
 * Layout structure:
 * - Header: Fixed at top with glass effect
 * - Sidebar: Optional, fixed height, scrollable
 * - Main: Flexible scrollable content area
 * - Footer: Optional at bottom
 *
 * @example
 * ```tsx
 * <DesktopLayout
 *   header={<DesktopHeader />}
 *   sidebar={<ConversationList />}
 *   showSidebar={true}
 *   sidebarWidth={280}
 * >
 *   <ChatInterface />
 * </DesktopLayout>
 * ```
 */
export function DesktopLayout({
  children,
  className,
  header,
  sidebar,
  footer,
  showSidebar = false,
  showHeader = true,
  showFooter = false,
  sidebarPosition = 'left',
  sidebarWidth = 280,
  sidebarCollapsible = false,
  sidebarCollapsed = false,
}: DesktopLayoutProps) {
  const sidebarWidthValue = typeof sidebarWidth === 'number' ? `${sidebarWidth}px` : sidebarWidth;
  const collapsedWidth = sidebarCollapsible && sidebarCollapsed ? '64px' : sidebarWidthValue;

  return (
    <div
      className={cn(
        'flex flex-col min-h-screen',
        'desktop-layout',
        className
      )}
    >
      {/* Desktop Header - Sticky with glass effect */}
      {showHeader && header && (
        <header
          className={cn(
            'glass-nav',
            'sticky top-0 z-50',
            'h-16',
            'flex items-center px-6'
          )}
        >
          {header}
        </header>
      )}

      {/* Main Container with Sidebar */}
      <div className="flex flex-1 overflow-hidden">
        {/* Sidebar - Left or Right */}
        {showSidebar && sidebar && sidebarPosition === 'left' && (
          <aside
            className={cn(
              'glass-sidebar',
              'flex-shrink-0 overflow-y-auto',
              'transition-all duration-normal ease-smooth'
            )}
            style={{ width: collapsedWidth }}
          >
            {sidebar}
          </aside>
        )}

        {/* Main Content - Scrollable */}
        <main
          className={cn(
            'flex-1 overflow-y-auto overflow-x-hidden',
            'bg-bg-primary'
          )}
        >
          {children}
        </main>

        {/* Sidebar - Right */}
        {showSidebar && sidebar && sidebarPosition === 'right' && (
          <aside
            className={cn(
              'glass-sidebar',
              'flex-shrink-0 overflow-y-auto',
              'border-l border-glass',
              'transition-all duration-normal ease-smooth'
            )}
            style={{ width: collapsedWidth }}
          >
            {sidebar}
          </aside>
        )}
      </div>

      {/* Footer (optional) */}
      {showFooter && footer && (
        <footer className="border-t border-glass-subtle">
          {footer}
        </footer>
      )}
    </div>
  );
}
