// Button Component Specification
// Framework-agnostic button component definition

import { Action } from '@/core/operations/permissions/permission-types';

export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost' | 'link';
export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
export type ButtonState = 'default' | 'loading' | 'disabled' | 'success' | 'error';

export interface ButtonProps {
  // Content
  label: string;
  icon?: string; // Icon name or component
  iconPosition?: 'left' | 'right';
  
  // Variants
  variant?: ButtonVariant;
  size?: ButtonSize;
  state?: ButtonState;
  
  // Behavior
  onClick?: () => void | Promise<void>;
  type?: 'button' | 'submit' | 'reset';
  href?: string; // For link variant
  target?: '_blank' | '_self' | '_parent' | '_top';
  
  // Permissions
  requiredAction?: Action;
  requiredModule?: string;
  hideIfNoPermission?: boolean;
  
  // Accessibility
  ariaLabel?: string;
  ariaDescribedBy?: string;
  disabled?: boolean;
  
  // Styling
  fullWidth?: boolean;
  className?: string;
  
  // Loading state
  loadingText?: string;
}

export interface ButtonStates {
  default: {
    opacity: number;
    cursor: string;
    pointerEvents: string;
  };
  loading: {
    opacity: number;
    cursor: string;
    pointerEvents: string;
    showSpinner: boolean;
  };
  disabled: {
    opacity: number;
    cursor: string;
    pointerEvents: string;
  };
  success: {
    opacity: number;
    cursor: string;
    showCheckmark: boolean;
  };
  error: {
    opacity: number;
    cursor: string;
    showErrorIcon: boolean;
  };
}

export const buttonStates: ButtonStates = {
  default: {
    opacity: 1,
    cursor: 'pointer',
    pointerEvents: 'auto',
  },
  loading: {
    opacity: 0.7,
    cursor: 'wait',
    pointerEvents: 'none',
    showSpinner: true,
  },
  disabled: {
    opacity: 0.5,
    cursor: 'not-allowed',
    pointerEvents: 'none',
  },
  success: {
    opacity: 1,
    cursor: 'default',
    showCheckmark: true,
  },
  error: {
    opacity: 1,
    cursor: 'default',
    showErrorIcon: true,
  },
};

export const buttonVariants = {
  primary: {
    backgroundColor: 'var(--theme-participant-primary)',
    color: 'var(--theme-text-inverse)',
    border: 'none',
  },
  secondary: {
    backgroundColor: 'var(--theme-participant-secondary)',
    color: 'var(--theme-text-inverse)',
    border: 'none',
  },
  tertiary: {
    backgroundColor: 'transparent',
    color: 'var(--theme-participant-primary)',
    border: '1px solid var(--theme-participant-primary)',
  },
  danger: {
    backgroundColor: '#F44336',
    color: 'var(--theme-text-inverse)',
    border: 'none',
  },
  ghost: {
    backgroundColor: 'transparent',
    color: 'var(--theme-text-primary)',
    border: 'none',
  },
  link: {
    backgroundColor: 'transparent',
    color: 'var(--theme-participant-primary)',
    border: 'none',
    textDecoration: 'underline',
  },
};

export const buttonSizes = {
  xs: {
    padding: '0.25rem 0.5rem',
    fontSize: '0.75rem',
    minHeight: '1.5rem',
  },
  sm: {
    padding: '0.375rem 0.75rem',
    fontSize: '0.875rem',
    minHeight: '2rem',
  },
  md: {
    padding: '0.5rem 1rem',
    fontSize: '1rem',
    minHeight: '2.5rem',
  },
  lg: {
    padding: '0.75rem 1.5rem',
    fontSize: '1.125rem',
    minHeight: '3rem',
  },
  xl: {
    padding: '1rem 2rem',
    fontSize: '1.25rem',
    minHeight: '3.5rem',
  },
};

/**
 * Button Component Interface
 * 
 * Usage example (React):
 * ```tsx
 * <Button
 *   label="Create Settlement"
 *   variant="primary"
 *   size="md"
 *   requiredAction="create"
 *   requiredModule="settlement"
 *   onClick={handleCreate}
 * />
 * ```
 * 
 * Usage example (Vue):
 * ```vue
 * <Button
 *   label="Create Settlement"
 *   variant="primary"
 *   size="md"
 *   :required-action="'create'"
 *   :required-module="'settlement'"
 *   @click="handleCreate"
 * />
 * ```
 */
export interface ButtonComponent {
  props: ButtonProps;
  render(): unknown; // Framework-specific render method
}

