@use 'ui-design-system/src/styles/semantic/index' as *;

// Tokens available globally via main application styles

.ui-image-container {
  // Core Structure
  position: relative;
  display: inline-block;
  overflow: hidden;
  
  // Layout & Aspect Ratio
  aspect-ratio: var(--aspect-ratio, 1/1);
  
  // Visual Design
  background: $semantic-color-surface-secondary;
  border: $semantic-border-width-1 solid $semantic-color-border-primary;
  border-radius: $semantic-border-radius-md;
  
  // Transitions
  transition: all $semantic-duration-fast $semantic-easing-standard;

  // Size Variants
  &--size-sm {
    min-width: $semantic-sizing-card-width-sm * 0.5; // 8rem
    max-width: $semantic-sizing-card-width-sm; // 16rem
    min-height: $semantic-sizing-card-height-sm * 0.5; // 4rem
  }
  
  &--size-md {
    min-width: $semantic-sizing-card-width-md * 0.5; // 10rem
    max-width: $semantic-sizing-card-width-md; // 20rem
    min-height: $semantic-sizing-card-height-md * 0.5; // 6rem
  }
  
  &--size-lg {
    min-width: $semantic-sizing-card-width-lg * 0.5; // 12rem
    max-width: $semantic-sizing-card-width-lg; // 24rem
    min-height: $semantic-sizing-card-height-lg * 0.5; // 8rem
  }
  
  &--size-xl {
    min-width: $semantic-sizing-card-width-lg * 0.75; // 18rem
    max-width: $semantic-sizing-content-narrow; // 42rem
    min-height: $semantic-sizing-card-height-lg * 0.75; // 12rem
  }

  // Aspect Ratio Variants
  &--aspect-1-1 { aspect-ratio: 1/1; }
  &--aspect-4-3 { aspect-ratio: 4/3; }
  &--aspect-16-9 { aspect-ratio: 16/9; }
  &--aspect-3-2 { aspect-ratio: 3/2; }
  &--aspect-2-1 { aspect-ratio: 2/1; }
  &--aspect-3-4 { aspect-ratio: 3/4; }
  &--aspect-9-16 { aspect-ratio: 9/16; }

  // Shape Variants
  &--shape-square {
    border-radius: $semantic-border-radius-sm;
  }
  
  &--shape-rounded {
    border-radius: $semantic-border-radius-md;
  }
  
  &--shape-circle {
    border-radius: $semantic-border-radius-full;
    aspect-ratio: 1/1;
  }

  // State Variants
  &--loading {
    cursor: wait;
  }
  
  &--error {
    border-color: $semantic-color-border-error;
    border-style: dashed;
  }
  
  &--lazy {
    background: $semantic-color-surface-secondary;
    
    &:not(.ui-image-container--loaded) {
      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
  }

  // Interactive States
  &:not(.ui-image-container--error) {
    &:hover {
      box-shadow: $semantic-shadow-elevation-2;
      transform: translateY(-1px);
      border-color: $semantic-color-border-primary;
    }
    
    &:focus-visible {
      outline: 2px solid $semantic-color-focus-ring;
      outline-offset: 2px;
    }
    
    &:active {
      transform: translateY(0);
      box-shadow: $semantic-shadow-elevation-1;
    }
  }

  // Image Element
  &__image {
    width: 100%;
    height: 100%;
    display: block;
    
    // Object Fit Variants
    &--fit-contain { object-fit: contain; }
    &--fit-cover { object-fit: cover; }
    &--fit-fill { object-fit: fill; }
    &--fit-scale-down { object-fit: scale-down; }
    &--fit-none { object-fit: none; }
    
    // Smooth appearance transition
    opacity: 0;
    transition: opacity $semantic-duration-medium $semantic-easing-standard;
    
    .ui-image-container--loaded & {
      opacity: 1;
    }
  }

  // Loading State
  &__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: $semantic-color-surface-secondary;
    z-index: 2;
  }
  
  &__spinner {
    width: $semantic-sizing-icon-navigation;
    height: $semantic-sizing-icon-navigation;
    border: 2px solid $semantic-color-border-primary;
    border-top: 2px solid $semantic-color-interactive-primary;
    border-radius: $semantic-border-radius-full;
    animation: spin 1s linear infinite;
  }

  // Error State
  &__error {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: $semantic-spacing-component-xs;
    background: $semantic-color-surface-secondary;
    color: $semantic-color-danger;
    z-index: 2;
    padding: $semantic-spacing-component-sm;
    text-align: center;
  }
  
  &__error-icon {
    color: $semantic-color-text-secondary;
    
    svg {
      width: $semantic-sizing-icon-navigation;
      height: $semantic-sizing-icon-navigation;
    }
  }
  
  &__error-text {
    font-size: $semantic-typography-font-size-xs;
    color: $semantic-color-text-secondary;
    font-weight: $semantic-typography-font-weight-medium;
  }

  // Overlay
  &__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity $semantic-duration-fast $semantic-easing-standard;
    z-index: 3;
    
    .ui-image-container:hover & {
      opacity: 1;
    }
  }

  // Caption
  &__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: white;
    padding: $semantic-spacing-component-md $semantic-spacing-component-sm $semantic-spacing-component-sm;
    font-size: $semantic-typography-font-size-sm;
    line-height: $semantic-typography-line-height-tight;
    z-index: 4;
  }

  // Dark Mode Support
  :host-context(.dark-theme) & {
    background: $semantic-color-surface-primary;
    border-color: $semantic-color-border-subtle;
    
    &__loading {
      background: $semantic-color-surface-primary;
    }
    
    &__spinner {
      border-color: $semantic-color-border-subtle;
      border-top-color: $semantic-color-interactive-primary;
    }
  }

  // Responsive Design
  @media (max-width: $semantic-sizing-breakpoint-tablet - 1) {
    &--size-xl {
      max-width: $semantic-sizing-card-width-lg;
    }
    
    &--size-lg {
      max-width: $semantic-sizing-card-width-md;
    }
  }
  
  @media (max-width: $semantic-sizing-breakpoint-mobile - 1) {
    // Mobile adjustments
    &__caption {
      font-size: $semantic-typography-font-size-xs;
      padding: $semantic-spacing-component-xs;
    }
    
    &__error-text {
      font-size: $semantic-typography-font-size-xs;
    }
  }

  // Accessibility - Reduced motion
  @media (prefers-reduced-motion: reduce) {
    transition: none;
    
    &__image {
      transition: none;
    }
    
    &__overlay {
      transition: none;
    }
    
    &--lazy:not(.ui-image-container--loaded) {
      animation: none;
    }
    
    &__spinner {
      animation: none;
    }
  }
}

// Animation Keyframes
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

// Utility classes for content projection
.ui-image-container {
  [slot='error'] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: $semantic-spacing-component-xs;
    padding: $semantic-spacing-component-sm;
    text-align: center;
    height: 100%;
    color: $semantic-color-danger;
  }
  
  [slot='overlay'] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: $semantic-typography-font-weight-medium;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
  
  [slot='caption'] {
    font-size: $semantic-typography-font-size-sm;
    line-height: $semantic-typography-line-height-tight;
  }
}