import { ReactNode } from 'react';
import { LucideIcon } from 'lucide-react';

// ==================== EMPTY STATE TYPES ====================

export interface EmptyStateAction {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'race-final' | 'discord';
  icon?: LucideIcon;
}

export interface EmptyStateProps {
  icon?: LucideIcon;
  title: string;
  description?: string;
  action?: EmptyStateAction;
  variant?: 'default' | 'minimal' | 'full-page';
  className?: string;
  illustration?: 'racing' | 'league' | 'team' | 'sponsor' | 'driver';
  ariaLabel?: string;
}

// ==================== LOADING WRAPPER TYPES ====================

export interface LoadingWrapperCardConfig {
  count?: number;
  height?: string;
  className?: string;
}

export interface LoadingWrapperProps {
  variant?: 'spinner' | 'skeleton' | 'full-screen' | 'inline' | 'card';
  message?: string;
  className?: string;
  size?: 'sm' | 'md' | 'lg';
  skeletonCount?: number;
  cardConfig?: LoadingWrapperCardConfig;
  ariaLabel?: string;
}

// ==================== ERROR DISPLAY TYPES ====================

export interface ErrorDisplayAction {
  label: string;
  onClick: () => void;
  variant: 'primary' | 'secondary' | 'outline' | 'ghost';
  icon?: LucideIcon;
}

export interface ErrorDisplayProps {
  error: Error;
  onRetry?: () => void;
  variant?: 'full-screen' | 'card' | 'inline';
  actions?: ErrorDisplayAction[];
  showRetry?: boolean;
  showNavigation?: boolean;
  hideTechnicalDetails?: boolean;
  className?: string;
}

// ==================== STATE CONTAINER TYPES ====================

export interface StateContainerConfig<T> {
  loading?: Pick<LoadingWrapperProps, 'variant' | 'message' | 'size' | 'skeletonCount'>;
  error?: {
    variant?: 'full-screen' | 'card' | 'inline';
    actions?: ErrorDisplayAction[];
    showRetry?: boolean;
    showNavigation?: boolean;
    hideTechnicalDetails?: boolean;
  };
  empty?: {
    icon?: LucideIcon;
    title?: string;
    description?: string;
    action?: EmptyStateAction;
  };
  customRender?: {
    loading?: () => ReactNode;
    error?: (error: Error) => ReactNode;
    empty?: () => ReactNode;
    success?: (data: T) => ReactNode;
  };
}

export interface StateContainerProps<T> {
  data: T | undefined;
  isLoading?: boolean;
  error?: Error | null;
  retry?: () => void;
  children: (data: T) => ReactNode;
  config?: StateContainerConfig<T>;
  className?: string;
  showEmpty?: boolean;
  isEmpty?: (data: T) => boolean;
}

// ==================== PAGE WRAPPER TYPES ====================

export interface PageWrapperLoadingConfig {
  variant?: 'skeleton' | 'full-screen';
  message?: string;
}

export interface PageWrapperErrorConfig {
  variant?: 'full-screen' | 'card';
  card?: {
    title?: string;
    description?: string;
  };
}

export interface PageWrapperEmptyConfig {
  icon?: LucideIcon;
  title?: string;
  description?: string;
  action?: {
    label: string;
    onClick: () => void;
  };
}

export interface PageWrapperProps<TData> {
  data: TData | undefined;
  isLoading?: boolean;
  error?: Error | null;
  retry?: () => void;
  Template: React.ComponentType<{ data: TData }>;
  loading?: PageWrapperLoadingConfig;
  errorConfig?: PageWrapperErrorConfig;
  empty?: PageWrapperEmptyConfig;
  children?: ReactNode;
  className?: string;
}