// Modal/Dialog Component Specification
// Framework-agnostic modal component definition

export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
export type ModalVariant = 'default' | 'confirmation' | 'form' | 'information' | 'warning' | 'error';

export interface ModalProps {
  // Content
  title?: string;
  content?: unknown; // React/Vue component or HTML
  footer?: unknown; // Custom footer content
  
  // Variants
  variant?: ModalVariant;
  size?: ModalSize;
  
  // Behavior
  isOpen: boolean;
  onClose: () => void;
  onConfirm?: () => void | Promise<void>;
  onCancel?: () => void;
  
  // Confirmation modal
  confirmLabel?: string;
  cancelLabel?: string;
  confirmVariant?: 'primary' | 'secondary' | 'danger';
  showCancel?: boolean;
  
  // Form modal
  formId?: string;
  submitLabel?: string;
  onSubmit?: () => void | Promise<void>;
  
  // Behavior options
  closeOnOverlayClick?: boolean;
  closeOnEscape?: boolean;
  showCloseButton?: boolean;
  
  // Styling
  className?: string;
  overlayClassName?: string;
  
  // Accessibility
  ariaLabel?: string;
  ariaLabelledBy?: string;
  ariaDescribedBy?: string;
  
  // Loading state
  loading?: boolean;
  loadingMessage?: string;
}

export interface ModalSizes {
  xs: {
    width: string;
    maxWidth: string;
  };
  sm: {
    width: string;
    maxWidth: string;
  };
  md: {
    width: string;
    maxWidth: string;
  };
  lg: {
    width: string;
    maxWidth: string;
  };
  xl: {
    width: string;
    maxWidth: string;
  };
  full: {
    width: string;
    maxWidth: string;
  };
}

export const modalSizes: ModalSizes = {
  xs: {
    width: '20rem',
    maxWidth: '90vw',
  },
  sm: {
    width: '24rem',
    maxWidth: '90vw',
  },
  md: {
    width: '32rem',
    maxWidth: '90vw',
  },
  lg: {
    width: '48rem',
    maxWidth: '90vw',
  },
  xl: {
    width: '64rem',
    maxWidth: '90vw',
  },
  full: {
    width: '100vw',
    maxWidth: '100vw',
  },
};

export const modalVariants = {
  default: {
    headerBackground: 'var(--theme-bg-primary)',
    bodyBackground: 'var(--theme-bg-primary)',
    footerBackground: 'var(--theme-bg-secondary)',
  },
  confirmation: {
    headerBackground: 'var(--theme-bg-primary)',
    bodyBackground: 'var(--theme-bg-primary)',
    footerBackground: 'var(--theme-bg-secondary)',
    showIcon: true,
  },
  form: {
    headerBackground: 'var(--theme-bg-primary)',
    bodyBackground: 'var(--theme-bg-primary)',
    footerBackground: 'var(--theme-bg-secondary)',
  },
  information: {
    headerBackground: '#E3F2FD',
    bodyBackground: 'var(--theme-bg-primary)',
    footerBackground: 'var(--theme-bg-secondary)',
    showIcon: true,
  },
  warning: {
    headerBackground: '#FFF3E0',
    bodyBackground: 'var(--theme-bg-primary)',
    footerBackground: 'var(--theme-bg-secondary)',
    showIcon: true,
  },
  error: {
    headerBackground: '#FFEBEE',
    bodyBackground: 'var(--theme-bg-primary)',
    footerBackground: 'var(--theme-bg-secondary)',
    showIcon: true,
  },
};

/**
 * Modal Component Interface
 * 
 * Usage example (React):
 * ```tsx
 * <Modal
 *   isOpen={isOpen}
 *   onClose={handleClose}
 *   variant="confirmation"
 *   title="Confirm Action"
 *   content="Are you sure you want to proceed?"
 *   confirmLabel="Confirm"
 *   cancelLabel="Cancel"
 *   onConfirm={handleConfirm}
 * />
 * ```
 */
export interface ModalComponent {
  props: ModalProps;
  open(): void;
  close(): void;
  render(): unknown;
}

