@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-video-player {
  position: relative;
  width: 100%;
  background: $semantic-color-surface;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: $semantic-shadow-elevation-2;

  // Default size (medium)
  max-width: 800px;

  &--fullscreen {
    max-width: none !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
  }

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

  &--loading {
    .ui-video-player__video {
      cursor: wait;
    }
  }

  // Size variants - placed after default to override
  &--sm {
    max-width: 400px;
  }

  &--md {
    max-width: 800px;
  }

  &--lg {
    max-width: 1200px;
  }

  // Variant styles
  &--minimal {
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  &--theater {
    width: 100%;
    background: #000;
    
    .ui-video-player__video-container {
      padding-bottom: 42.85%; // 21:9 aspect ratio for theater mode
    }
    
    // Only remove max-width if no size variant is applied
    &:not(.ui-video-player--sm):not(.ui-video-player--md):not(.ui-video-player--lg) {
      max-width: none;
    }
  }

  &__video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; // 16:9 aspect ratio
    background: #000;
  }

  &__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
  }

  &__loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: $semantic-spacing-component-md;
    z-index: 2;
  }

  &__loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid $semantic-color-primary;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  &__loading-text {
    color: white;
    @include font-properties($semantic-typography-body-medium);
  }

  &__controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: $semantic-spacing-component-lg $semantic-spacing-component-md $semantic-spacing-component-md;
    opacity: 0;
    transition: opacity $semantic-duration-medium $semantic-easing-standard;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: $semantic-spacing-component-sm;

    &--visible {
      opacity: 1;
    }
  }

  &__control {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: $semantic-spacing-component-xs;
    border-radius: 4px;
    transition: background-color $semantic-duration-fast $semantic-easing-standard;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover:not(:disabled) {
      background: rgba(255, 255, 255, 0.2);
    }

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

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  &__control-icon {
    width: 20px;
    height: 20px;
  }

  &__progress-container {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    margin: 0 $semantic-spacing-component-sm;
  }

  &__progress-bar {
    width: 100%;
    height: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    appearance: none;

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: $semantic-color-primary;
      cursor: pointer;
      border: 2px solid white;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    &::-moz-range-thumb {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: $semantic-color-primary;
      cursor: pointer;
      border: 2px solid white;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
  }

  &__progress-track {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    pointer-events: none;
  }

  &__progress-filled {
    height: 100%;
    background: $semantic-color-primary;
    border-radius: 2px;
    transition: width 0.1s linear;
  }

  &__time {
    color: white;
    @include font-properties($semantic-typography-body-small);
    white-space: nowrap;
    margin: 0 $semantic-spacing-component-xs;
  }

  &__volume-bar {
    width: 80px;
    height: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    margin-left: $semantic-spacing-component-xs;

    &::-webkit-slider-track {
      width: 100%;
      height: 4px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2px;
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: $semantic-color-primary;
      cursor: pointer;
      border: 2px solid white;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    &::-moz-range-track {
      width: 100%;
      height: 4px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2px;
    }

    &::-moz-range-thumb {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: $semantic-color-primary;
      cursor: pointer;
      border: 2px solid white;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
  }

  &__fallback {
    color: white;
    @include font-properties($semantic-typography-body-medium);
    text-align: center;
    padding: $semantic-spacing-component-lg;

    a {
      color: $semantic-color-primary;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  &__error {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: $semantic-spacing-component-md;
    z-index: 4;
    padding: $semantic-spacing-component-lg;
  }

  &__error-icon {
    width: 48px;
    height: 48px;
    color: $semantic-color-error;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  &__error-message {
    color: white;
    @include font-properties($semantic-typography-body-large);
    text-align: center;
    margin: 0;
  }

  &__error-link {
    color: $semantic-color-primary;
    @include font-properties($semantic-typography-body-medium);
    text-decoration: none;
    padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
    border: 1px solid $semantic-color-primary;
    border-radius: 4px;
    transition: all $semantic-duration-fast $semantic-easing-standard;

    &:hover {
      background: $semantic-color-primary;
      color: white;
    }
  }

  // Show controls on hover or when paused
  &:hover &__controls,
  &__controls--visible {
    opacity: 1;
  }

  // Responsive design
  @media (max-width: 768px) {
    // On mobile, make size variants responsive but maintain relative sizing
    &--sm {
      max-width: 320px;
    }
    
    &--md {
      max-width: 600px;
    }
    
    &--lg {
      max-width: 100%;
    }

    &__controls {
      padding: $semantic-spacing-component-md $semantic-spacing-component-sm;
      gap: $semantic-spacing-component-xs;
    }

    &__control-icon {
      width: 18px;
      height: 18px;
    }

    &__volume-bar {
      width: 60px;
    }

    &__time {
      @include font-properties($semantic-typography-body-small);
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}