// Status Indicators Component Specification
// Framework-agnostic status indicator components (badges, tags, alerts, toasts)

export type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
export type BadgeSize = 'sm' | 'md' | 'lg';
export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';

export interface BadgeProps {
  label: string | number;
  variant?: BadgeVariant;
  size?: BadgeSize;
  dot?: boolean; // Show as dot instead of badge
  rounded?: boolean;
  className?: string;
}

export interface TagProps extends BadgeProps {
  closable?: boolean;
  onClose?: () => void;
  icon?: string;
}

export interface AlertProps {
  variant: AlertVariant;
  title?: string;
  message: string;
  icon?: string;
  closable?: boolean;
  onClose?: () => void;
  action?: {
    label: string;
    onClick: () => void;
  };
  className?: string;
}

export interface ToastProps {
  id?: string;
  variant: AlertVariant;
  title?: string;
  message: string;
  icon?: string;
  duration?: number; // milliseconds, 0 = persistent
  closable?: boolean;
  action?: {
    label: string;
    onClick: () => void;
  };
  onClose?: () => void;
  className?: string;
}

export interface ToastContainerProps {
  position?: ToastPosition;
  maxToasts?: number;
  className?: string;
}

export const badgeVariants = {
  default: {
    backgroundColor: 'var(--theme-bg-secondary)',
    color: 'var(--theme-text-primary)',
  },
  primary: {
    backgroundColor: 'var(--theme-participant-primary)',
    color: 'var(--theme-text-inverse)',
  },
  success: {
    backgroundColor: '#4CAF50',
    color: '#FFFFFF',
  },
  warning: {
    backgroundColor: '#FF9800',
    color: '#FFFFFF',
  },
  error: {
    backgroundColor: '#F44336',
    color: '#FFFFFF',
  },
  info: {
    backgroundColor: '#2196F3',
    color: '#FFFFFF',
  },
};

export const alertVariants = {
  info: {
    backgroundColor: '#E3F2FD',
    borderColor: '#2196F3',
    iconColor: '#2196F3',
    textColor: '#0D47A1',
  },
  success: {
    backgroundColor: '#E8F5E9',
    borderColor: '#4CAF50',
    iconColor: '#4CAF50',
    textColor: '#1B5E20',
  },
  warning: {
    backgroundColor: '#FFF3E0',
    borderColor: '#FF9800',
    iconColor: '#FF9800',
    textColor: '#E65100',
  },
  error: {
    backgroundColor: '#FFEBEE',
    borderColor: '#F44336',
    iconColor: '#F44336',
    textColor: '#B71C1C',
  },
};

/**
 * Status Indicator Components
 * 
 * Usage example (React):
 * ```tsx
 * <Badge label="New" variant="success" />
 * <Tag label="Settlement" variant="primary" closable onClose={handleClose} />
 * 
 * <Alert
 *   variant="warning"
 *   title="Attention Required"
 *   message="Please review the settlement before proceeding"
 *   closable
 * />
 * 
 * <ToastContainer position="top-right">
 *   <Toast
 *     variant="success"
 *     message="Settlement created successfully"
 *     duration={3000}
 *   />
 * </ToastContainer>
 * ```
 */
export interface BadgeComponent {
  props: BadgeProps;
  render(): unknown;
}

export interface TagComponent {
  props: TagProps;
  render(): unknown;
}

export interface AlertComponent {
  props: AlertProps;
  render(): unknown;
}

export interface ToastComponent {
  props: ToastProps;
  show(): void;
  hide(): void;
  render(): unknown;
}

export interface ToastContainerComponent {
  props: ToastContainerProps;
  addToast(toast: ToastProps): void;
  removeToast(id: string): void;
  clearAll(): void;
  render(): unknown;
}

