---
export interface Props {
  variant?: 'glass' | 'glass-dark' | 'solid' | 'outline';
  size?: 'small' | 'medium' | 'large' | 'full';
  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
  shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
  animated?: boolean;
  hover?: boolean;
  className?: string;
  reveal?: boolean;
  revealDirection?: 'up' | 'down' | 'left' | 'right' | 'fade' | 'none';
  revealDistance?: string;
  revealDelay?: string;
  revealBlur?: string;
  revealScale?: string;
  revealOnce?: boolean;
}

const { 
  variant = 'glass',
  size = 'medium',
  rounded = 'xl',
  padding = 'md',
  shadow = 'md',
  animated = true,
  hover = false,
  className = '',
  reveal = true,
  revealDirection,
  revealDistance,
  revealDelay,
  revealBlur,
  revealScale,
  revealOnce
} = Astro.props;

const variantClasses = {
  glass: 'container-glass',
  'glass-dark': 'container-glass-dark',
  solid: 'container-solid',
  outline: 'container-outline'
};

const sizeClasses = {
  small: 'container-small',
  medium: 'container-medium',
  large: 'container-large',
  full: 'container-full'
};

const roundedClasses = {
  none: 'rounded-none',
  sm: 'rounded-sm',
  md: 'rounded-md',
  lg: 'rounded-lg',
  xl: 'rounded-xl',
  '2xl': 'rounded-2xl',
  '3xl': 'rounded-3xl',
  full: 'rounded-full'
};

const paddingClasses = {
  none: 'p-0',
  sm: 'p-3',
  md: 'p-4 md:p-6',
  lg: 'p-6 md:p-8',
  xl: 'p-8 md:p-10',
  '2xl': 'p-10 md:p-12'
};

const shadowClasses = {
  none: 'shadow-none',
  sm: 'shadow-sm',
  md: 'shadow-md',
  lg: 'shadow-lg',
  xl: 'shadow-xl',
  '2xl': 'shadow-2xl'
};

const revealAttributes = reveal
  ? {
      'data-reveal': revealDirection ?? '',
      ...(revealDistance ? { 'data-reveal-distance': revealDistance } : {}),
      ...(revealDelay ? { 'data-reveal-delay': revealDelay } : { 'data-reveal-delay': 'var(--container-delay, 0s)' }),
      ...(revealBlur ? { 'data-reveal-blur': revealBlur } : {}),
      ...(revealScale ? { 'data-reveal-scale': revealScale } : {}),
      ...(revealOnce === false ? { 'data-reveal-once': 'false' } : {})
    }
  : {};
---

<div 
  class={`
    container-base 
    ${variantClasses[variant]} 
    ${sizeClasses[size]} 
    ${roundedClasses[rounded]} 
    ${paddingClasses[padding]} 
    ${shadowClasses[shadow]}
    ${animated && !reveal ? 'container-animated' : ''}
    ${hover ? 'container-hover' : ''}
    ${className}
  `}
  {...revealAttributes}
>
  <slot />
</div>

<style>
  .container-base {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* 变体样式 */
  .container-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .container-glass-dark {
    background: rgba(122, 107, 93, 0.15);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(166, 139, 123, 0.25);
  }
  
  .container-solid {
    background: #F4F1E8;
    border: 1px solid #E8DCC0;
  }
  
  .container-outline {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
  }
  
  /* 尺寸样式 */
  .container-small {
    max-width: 400px;
    margin: 0 auto;
  }
  
  .container-medium {
    max-width: 600px;
    margin: 0 auto;
  }
  
  .container-large {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .container-full {
    width: 100%;
  }
  
  /* 动画效果 */
  .container-animated {
    animation: containerFadeIn 0.6s ease-out;
  }
  
  .container-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
  }
  
  .container-glass.container-hover:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
  }
  
  .container-glass-dark.container-hover:hover {
    background: rgba(122, 107, 93, 0.25);
    border-color: rgba(166, 139, 123, 0.35);
  }
  
  .container-outline.container-hover:hover {
    border-color: rgba(255, 255, 255, 0.5);
  }
  
  /* 响应式调整 */
  @media (max-width: 768px) {
    .container-small,
    .container-medium,
    .container-large {
      max-width: 100%;
      margin: 0 1rem;
    }
  }
  
  @keyframes containerFadeIn {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  
  /* 实用工具类 */
  .p-0 { padding: 0 !important; }
  .p-3 { padding: 0.75rem !important; }
  .p-4 { padding: 1rem !important; }
  .p-6 { padding: 1.5rem !important; }
  .p-8 { padding: 2rem !important; }
  .p-10 { padding: 2.5rem !important; }
  .p-12 { padding: 3rem !important; }
  
  @media (min-width: 768px) {
    .md\:p-6 { padding: 1.5rem !important; }
    .md\:p-8 { padding: 2rem !important; }
    .md\:p-10 { padding: 2.5rem !important; }
    .md\:p-12 { padding: 3rem !important; }
  }
  
  .rounded-none { border-radius: 0 !important; }
  .rounded-sm { border-radius: 0.125rem !important; }
  .rounded-md { border-radius: 0.375rem !important; }
  .rounded-lg { border-radius: 0.5rem !important; }
  .rounded-xl { border-radius: 0.75rem !important; }
  .rounded-2xl { border-radius: 1rem !important; }
  .rounded-3xl { border-radius: 1.5rem !important; }
  .rounded-full { border-radius: 9999px !important; }
  
  .shadow-none { box-shadow: none !important; }
  .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
  .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; }
  .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important; }
  .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important; }
  .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }
</style>