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

@mixin font-properties($font-map) {
  @if type-of($font-map) == 'map' {
    font-family: map-get($font-map, 'font-family');
    font-size: map-get($font-map, 'font-size');
    line-height: map-get($font-map, 'line-height');
    font-weight: map-get($font-map, 'font-weight');
    letter-spacing: map-get($font-map, 'letter-spacing');
  } @else {
    font: $font-map;
  }
}

.ui-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: $semantic-color-surface-container;

  &__container {
    position: relative;
    width: 100%;
    height: 400px; // Default height
    overflow: hidden;
  }

  &__track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform $semantic-duration-medium $semantic-easing-standard;
  }

  &__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transform: scale(1);
    transition: opacity $semantic-duration-medium $semantic-easing-standard,
                transform $semantic-duration-medium $semantic-easing-standard;

    &--active {
      opacity: 1;
      transform: scale(1);
    }

    .ui-carousel__image-container,
    .ui-carousel__card,
    .ui-carousel__content-slide {
      width: 100%;
      height: 100%;
    }
  }

  &__image-container {
    position: relative;
    width: 100%;
    height: 100%;
    
    .ui-carousel__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .ui-carousel__image-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
      padding: $semantic-spacing-component-lg;
      color: white;

      .ui-carousel__title {
        @include font-properties($semantic-typography-heading-h3);
        margin-bottom: $semantic-spacing-component-sm;
      }

      .ui-carousel__subtitle {
        @include font-properties($semantic-typography-body-medium);
        opacity: 0.9;
      }
    }
  }

  &__card {
    background: $semantic-color-surface-container;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: $semantic-shadow-elevation-2;

    .ui-carousel__card-image {
      width: 100%;
      height: 60%;
      object-fit: cover;
    }

    .ui-carousel__card-content {
      padding: $semantic-spacing-component-lg;
      height: 40%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .ui-carousel__title {
        @include font-properties($semantic-typography-heading-h4);
        margin-bottom: $semantic-spacing-component-sm;
      }

      .ui-carousel__subtitle {
        @include font-properties($semantic-typography-body-medium);
        color: $semantic-color-text-secondary;
        margin-bottom: $semantic-spacing-component-sm;
      }

      .ui-carousel__content {
        @include font-properties($semantic-typography-body-small);
        color: $semantic-color-text-secondary;
      }
    }
  }

  &__content-slide {
    padding: $semantic-spacing-component-lg;
    text-align: center;
    color: $semantic-color-text-primary;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .ui-carousel__title {
      @include font-properties($semantic-typography-heading-h3);
      margin-bottom: $semantic-spacing-component-md;
    }

    .ui-carousel__subtitle {
      @include font-properties($semantic-typography-body-medium);
      color: $semantic-color-text-secondary;
      margin-bottom: $semantic-spacing-component-md;
    }

    .ui-carousel__content {
      @include font-properties($semantic-typography-body-medium);
      color: $semantic-color-text-secondary;
    }
  }

  &__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: $semantic-shadow-elevation-3;
    transition: all $semantic-motion-duration-fast $semantic-easing-standard;

    &:hover {
      background: white;
      transform: translateY(-50%) scale(1.1);
    }

    &:focus {
      outline: 2px solid $semantic-color-primary;
      outline-offset: 2px;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: translateY(-50%);
    }

    &--prev {
      left: $semantic-spacing-component-md;
    }

    &--next {
      right: $semantic-spacing-component-md;
    }

    .ui-carousel__nav-icon {
      width: 20px;
      height: 20px;
      color: $semantic-color-text-primary;
    }
  }

  &__indicators {
    position: absolute;
    bottom: $semantic-spacing-component-md;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: $semantic-spacing-component-xs;
    z-index: 2;

    &--dots .ui-carousel__indicator {
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }

    &--bars .ui-carousel__indicator {
      width: 24px;
      height: 4px;
      border-radius: 2px;
    }

    &--thumbnails .ui-carousel__indicator {
      width: 48px;
      height: 32px;
      border-radius: 4px;
      overflow: hidden;
    }
  }

  &__indicator {
    border: none;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all $semantic-duration-medium $semantic-easing-standard;

    &--active {
      background: $semantic-color-primary;
      transform: scale(1.2);
    }

    &:hover {
      background: rgba(255, 255, 255, 0.8);
    }

    &:focus {
      outline: 2px solid $semantic-color-primary;
      outline-offset: 2px;
    }

    .ui-carousel__indicator-dot,
    .ui-carousel__indicator-bar {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
    }

    .ui-carousel__indicator-thumbnail {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  // Size variants
  &--sm {
    .ui-carousel__container {
      height: 250px;
    }
  }

  &--md {
    .ui-carousel__container {
      height: 400px;
    }
  }

  &--lg {
    .ui-carousel__container {
      height: 600px;
    }
  }

  // Transition effects
  &--fade {
    .ui-carousel__track {
      // For fade transition, we need to position slides absolutely
      position: relative;
    }
    
    .ui-carousel__slide {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      opacity: 0;
      transition: opacity $semantic-duration-medium $semantic-easing-standard;
      flex: none; // Override the flex property
      
      &--active {
        opacity: 1;
        z-index: 1;
      }
    }
  }

  &--scale {
    .ui-carousel__track {
      position: relative;
    }
    
    .ui-carousel__slide {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      transform: scale(0.8);
      opacity: 0.3;
      transition: transform $semantic-duration-medium $semantic-easing-standard,
                  opacity $semantic-duration-medium $semantic-easing-standard;
      flex: none; // Override the flex property
      
      &--active {
        transform: scale(1);
        opacity: 1;
        z-index: 1;
      }
    }
  }

  &--slide {
    // Default slide behavior - already handled by track transform
    .ui-carousel__track {
      transition: transform $semantic-duration-medium $semantic-easing-standard;
    }
  }

  // Disabled state
  &--disabled {
    opacity: 0.6;
    pointer-events: none;
  }

  // Responsive design
  @media (max-width: 768px) {
    &__container {
      height: 300px;
    }

    &--sm .ui-carousel__container {
      height: 200px;
    }

    &--lg .ui-carousel__container {
      height: 400px;
    }

    &__nav {
      width: 40px;
      height: 40px;

      .ui-carousel__nav-icon {
        width: 16px;
        height: 16px;
      }
    }

    &__card .ui-carousel__card-content,
    &__content-slide {
      padding: $semantic-spacing-component-md;
    }
  }
}