/**
 * EN: Responsive Layout Component
 * VI: Component Layout Responsive
 *
 * A smart layout that automatically switches between mobile and desktop layouts based on screen size.
 * Layout thông minh tự động chuyển đổi giữa mobile và desktop layouts dựa trên kích thước màn hình.
 *
 * @example
 * ```tsx
 * <ResponsiveLayout>
 *   <YourContent />
 * </ResponsiveLayout>
 * ```
 */

'use client';

import React from 'react';
import { useDeviceType } from '@/shared/hooks';
import { MobileLayout, type MobileLayoutProps } from '../mobile-layout';
import { DesktopLayout, type DesktopLayoutProps } from '../desktop-layout';

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

  /**
   * Optional: Force specific layout (for testing/preview)
   */
  forceLayout?: 'mobile' | 'desktop';

  /**
   * Props to pass to MobileLayout when in mobile mode
   */
  mobileProps?: Omit<MobileLayoutProps, 'children'>;

  /**
   * Props to pass to DesktopLayout when in desktop mode
   */
  desktopProps?: Omit<DesktopLayoutProps, 'children'>;

  /**
   * Custom className
   */
  className?: string;
}

/**
 * Responsive Layout Component
 *
 * Features:
 * - Automatically detects device type using useDeviceType hook
 * - Renders MobileLayout for mobile/tablet devices
 * - Renders DesktopLayout for desktop devices
 * - Smooth transitions between layouts
 * - Force layout option for testing
 * - Pass-through props for both layouts
 *
 * Device detection:
 * - Mobile: < 768px
 * - Tablet: 768px - 1024px (renders as mobile)
 * - Desktop: >= 1024px
 *
 * @example
 * ```tsx
 * // Basic usage
 * <ResponsiveLayout>
 *   <ChatInterface />
 * </ResponsiveLayout>
 *
 * // With custom props for each layout
 * <ResponsiveLayout
 *   mobileProps={{
 *     header: <MobileHeader />,
 *     bottomNav: <MobileNav />
 *   }}
 *   desktopProps={{
 *     header: <DesktopHeader />,
 *     sidebar: <Sidebar />,
 *     showSidebar: true
 *   }}
 * >
 *   <ChatInterface />
 * </ResponsiveLayout>
 *
 * // Force layout for testing
 * <ResponsiveLayout forceLayout="mobile">
 *   <PreviewContent />
 * </ResponsiveLayout>
 * ```
 */
export function ResponsiveLayout({
  children,
  forceLayout,
  mobileProps,
  desktopProps,
  className,
}: ResponsiveLayoutProps) {
  const { isMobile, isTablet } = useDeviceType();

  // Force layout if specified (for testing/preview)
  if (forceLayout === 'mobile') {
    return (
      <MobileLayout className={className} {...mobileProps}>
        {children}
      </MobileLayout>
    );
  }

  if (forceLayout === 'desktop') {
    return (
      <DesktopLayout className={className} {...desktopProps}>
        {children}
      </DesktopLayout>
    );
  }

  // Auto-detect device type
  // Mobile and Tablet use MobileLayout
  if (isMobile || isTablet) {
    return (
      <MobileLayout className={className} {...mobileProps}>
        {children}
      </MobileLayout>
    );
  }

  // Desktop uses DesktopLayout
  return (
    <DesktopLayout className={className} {...desktopProps}>
      {children}
    </DesktopLayout>
  );
}
