import type { ReactNode } from 'react';
import { DashboardLayout } from '@/features/dashboard/DashboardLayout';
import { ViewHeader } from './ViewHeader';
import { PageContainer } from './PageContainer';

type PageMaxWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '4xl' | '5xl' | '6xl' | 'full';

interface PageLayoutProps {
  title: string | ReactNode;
  subtitle?: string;
  icon?: ReactNode;
  actions?: ReactNode;
  rightContent?: ReactNode;
  breadcrumbs?: ReactNode;
  gradient?: boolean;
  badge?: string;
  badgeColor?: 'blue' | 'green' | 'purple' | 'orange' | 'gray';
  children: ReactNode;
  /** Content rendered outside the boxed container (modals, panels, etc.) */
  overlay?: ReactNode;
  /** Inner container max width. Default '6xl' keeps centered comfortable
   *  line-length; routes with long forms (e.g. plugin-settings) can opt
   *  into 'full' so content fills the main column instead of leaving
   *  large dead space to the right of a centered card. */
  maxWidth?: PageMaxWidth;
}

export function PageLayout({
  title,
  subtitle,
  icon,
  actions,
  rightContent,
  breadcrumbs,
  gradient,
  badge,
  badgeColor,
  children,
  overlay,
  maxWidth = '6xl',
}: PageLayoutProps) {
  return (
    <DashboardLayout>
      <ViewHeader
        title={title}
        subtitle={subtitle}
        icon={icon}
        actions={actions}
        rightContent={rightContent}
        breadcrumbs={breadcrumbs}
        gradient={gradient}
        badge={badge}
        badgeColor={badgeColor}
      />
      <PageContainer maxWidth={maxWidth}>
        <div className="p-8 space-y-6">
          {children}
        </div>
      </PageContainer>
      {overlay}
    </DashboardLayout>
  );
}