'use client';

import { ReactNode } from 'react';
import { Header } from './Header';
import { Sidebar } from './Sidebar';
import { Breadcrumbs } from './Breadcrumbs';

/**
 * Layout Props
 */
interface LayoutProps {
  /**
   * Page content
   */
  children: ReactNode;

  /**
   * Show sidebar (desktop only)
   * @default true
   */
  showSidebar?: boolean;

  /**
   * Show header
   * @default true
   */
  showHeader?: boolean;

  /**
   * Show breadcrumbs
   * @default true
   */
  showBreadcrumbs?: boolean;

  /**
   * Maximum content width
   * @default '7xl' (1280px)
   */
  maxWidth?: 'full' | '7xl' | '6xl' | '5xl' | '4xl';

  /**
   * Custom page title (shown in breadcrumbs if provided)
   */
  title?: string;
}

/**
 * Max width classes mapping
 */
const maxWidthClasses = {
  full: '',
  '7xl': 'max-w-7xl',
  '6xl': 'max-w-6xl',
  '5xl': 'max-w-5xl',
  '4xl': 'max-w-4xl',
};

/**
 * Main Layout Component
 *
 * Provides consistent layout structure for authenticated pages.
 *
 * Layout structure:
 * - Desktop (lg+): Sidebar + Header + Main content
 * - Mobile/Tablet: Header + Main content
 *
 * Features:
 * - Responsive sidebar (desktop only)
 * - Sticky header
 * - Breadcrumb navigation
 * - Configurable max-width
 * - Proper spacing and padding
 *
 * @example
 * ```tsx
 * // Default layout (all features enabled)
 * <Layout>
 *   <h1>Dashboard</h1>
 *   <p>Content here</p>
 * </Layout>
 *
 * // Custom layout without sidebar
 * <Layout showSidebar={false} maxWidth="4xl">
 *   <h1>Profile</h1>
 * </Layout>
 *
 * // Full-width layout
 * <Layout maxWidth="full">
 *   <div>Full width content</div>
 * </Layout>
 * ```
 */
export function Layout({
  children,
  showSidebar = true,
  showHeader = true,
  showBreadcrumbs = true,
  maxWidth = '7xl',
  title,
}: LayoutProps) {
  const maxWidthClass = maxWidthClasses[maxWidth];

  return (
    <div className="flex min-h-screen bg-slate-50">
      {/* Sidebar - Desktop only */}
      {showSidebar && <Sidebar />}

      {/* Main content area */}
      <div className={`flex flex-1 flex-col ${showSidebar ? 'lg:pl-64' : ''}`}>
        {/* Header */}
        {showHeader && <Header />}

        {/* Page content */}
        <main className="flex-1">
          <div className={`mx-auto px-4 py-6 sm:px-6 lg:px-8 ${maxWidthClass}`}>
            {/* Breadcrumbs */}
            {showBreadcrumbs && (
              <div className="mb-6">
                <Breadcrumbs />
              </div>
            )}

            {/* Page title (if provided) */}
            {title && (
              <div className="mb-6">
                <h1 className="text-2xl font-semibold text-slate-900">{title}</h1>
              </div>
            )}

            {/* Page content */}
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}