'use client';

import React, { useEffect, useState } from 'react';
import { DesktopLayout, DesktopLayoutProps } from './desktop-layout/desktop-layout';
import { MobileLayout, MobileLayoutProps } from './mobile-layout/mobile-layout';

/**
 * EN: Responsive Layout Props - combines desktop and mobile layouts
 * VI: Responsive Layout Props - kết hợp desktop và mobile layouts
 */
export interface ResponsiveLayoutProps extends DesktopLayoutProps, MobileLayoutProps {
  /** EN: Force desktop layout even on mobile / VI: Buộc desktop layout ngay cả trên mobile */
  forceDesktop?: boolean;
  /** EN: Force mobile layout even on desktop / VI: Buộc mobile layout ngay cả trên desktop */
  forceMobile?: boolean;
}

/**
 * EN: Responsive Layout Component - automatically switches between desktop and mobile layouts
 * VI: Responsive Layout Component - tự động chuyển đổi giữa desktop và mobile layouts
 *
 * Features:
 * - Automatically detects screen size
 * - Uses DesktopLayout for desktop/tablet landscape
 * - Uses MobileLayout for mobile/tablet portrait
 * - Supports force overrides for testing
 * - Handles all props for both layout types
 *
 * @example
 * ```tsx
 * <ResponsiveLayout
 *   showSidebar
 *   sidebar={<Sidebar />}
 *   showBottomNav
 *   bottomNavItems={navItems}
 * >
 *   <YourContent />
 * </ResponsiveLayout>
 * ```
 */
export function ResponsiveLayout({
  forceDesktop = false,
  forceMobile = false,
  // Desktop props
  header,
  sidebar,
  footer,
  showSidebar = false,
  showHeader = true,
  showFooter = false,
  sidebarPosition = 'left',
  sidebarWidth = 280,
  sidebarCollapsible = false,
  sidebarCollapsed = false,
  // Mobile props
  bottomNav,
  enablePullToRefresh = false,
  onRefresh,
  showBottomNav = false,
  bottomNavItems = [],
  activeNavItem,
  onNavItemPress,
  // Common props
  children,
  className,
}: ResponsiveLayoutProps) {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    if (forceDesktop) {
      setIsMobile(false);
      return;
    }
    if (forceMobile) {
      setIsMobile(true);
      return;
    }

    // Check screen size
    const checkMobile = () => {
      // Consider mobile if screen width < 768px (md breakpoint)
      // or if device is touch-based and screen height > width (portrait mobile)
      const isSmallScreen = window.innerWidth < 768;
      const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
      const isPortrait = window.innerHeight > window.innerWidth;

      setIsMobile(isSmallScreen || (isTouchDevice && isPortrait));
    };

    checkMobile();
    window.addEventListener('resize', checkMobile);
    window.addEventListener('orientationchange', checkMobile);

    return () => {
      window.removeEventListener('resize', checkMobile);
      window.removeEventListener('orientationchange', checkMobile);
    };
  }, [forceDesktop, forceMobile]);

  if (isMobile && !forceDesktop) {
    return (
      <MobileLayout
        header={header}
        footer={footer}
        bottomNav={bottomNav}
        showHeader={showHeader}
        showFooter={showFooter}
        enablePullToRefresh={enablePullToRefresh}
        onRefresh={onRefresh}
        showBottomNav={showBottomNav}
        bottomNavItems={bottomNavItems}
        activeNavItem={activeNavItem}
        onNavItemPress={onNavItemPress}
        className={className}
      >
        {children}
      </MobileLayout>
    );
  }

  return (
    <DesktopLayout
      header={header}
      sidebar={sidebar}
      footer={footer}
      showSidebar={showSidebar}
      showHeader={showHeader}
      showFooter={showFooter}
      sidebarPosition={sidebarPosition}
      sidebarWidth={sidebarWidth}
      sidebarCollapsible={sidebarCollapsible}
      sidebarCollapsed={sidebarCollapsed}
      className={className}
    >
      {children}
    </DesktopLayout>
  );
}