/*
 * Video Player Component
 * HLS video player, placeholder, and stats
 */

@layer components {

  /* ─── Video Placeholder (no video yet) ─── */

  .video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    inline-size: 100%;
    background-color: var(--color-gray-lighter);
    border-radius: var(--radius);
  }

  .video-placeholder__icon {
    inline-size: calc(var(--block-space) * 3);
    block-size: calc(var(--block-space) * 3);
    color: var(--color-gray-medium);
    margin-block-end: var(--block-space-half);
  }

  .video-placeholder__text {
    font-size: var(--text-normal);
    color: var(--color-gray);
  }

  /* ─── Video Stats ─── */

  .video-stats {
    display: flex;
    align-items: center;
    gap: var(--block-space-double);
    font-size: var(--text-normal);
    color: var(--color-gray-dark);
  }

  .video-stat {
    display: flex;
    align-items: center;
    gap: var(--block-space-half);
  }

  .video-stat .icon {
    inline-size: var(--icon-md);
    block-size: var(--icon-md);
  }

  /* ─── Video Player ─── */

  .video-player {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--color-gray-darker);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    user-select: none;

    /* Flatten bottom corners when paired with video-info bar */
    &:has(+ .video-info) {
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    /* Show controls on hover (pointer devices) */
    @media (any-hover: hover) {
      &:hover .video-player__controls:not(.video-player__controls--hidden) {
        opacity: 1;
      }
    }

    /* Always show controls on touch devices (no hover capability) */
    @media (any-hover: none) {
      .video-player__controls:not(.video-player__controls--hidden) {
        opacity: 1;
      }
    }

    /* Fullscreen adjustments */
    &:fullscreen {
      border-radius: 0;
      aspect-ratio: auto;
      inline-size: 100%;
      block-size: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .video-player__container {
        inline-size: 100%;
        block-size: 100%;
      }

      .video-player__video {
        border-radius: 0;
      }
    }

    /* Webkit fullscreen (iOS Safari) */
    &:-webkit-full-screen {
      border-radius: 0;
      aspect-ratio: auto;
      inline-size: 100%;
      block-size: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .video-player__container {
        inline-size: 100%;
        block-size: 100%;
      }
    }
  }

  .video-player--flat-bottom {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .video-player__iframe {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
  }

  .video-player__container {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
  }

  .video-player__video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    background-color: oklch(var(--lch-black));
  }

  /* Visibility toggles (used by Stimulus to show/hide icons, controls, etc.) */
  .video-player__icon--hidden,
  .video-player__controls--hidden,
  .video-player__settings-menu--hidden {
    display: none !important;
  }

  /* Center play button */
  .video-player__center-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    opacity: 1;
    transition: opacity 200ms ease;
  }

  /* Faded state (touch auto-hide): fade controls bar and center button together */
  .video-player--controls-faded .video-player__controls:not(.video-player__controls--hidden) {
    opacity: 0;
    pointer-events: none;
  }

  .video-player--controls-faded .video-player__center-play {
    opacity: 0;
  }

  .video-player--controls-faded .video-player__center-play-btn {
    pointer-events: none;
  }

  .video-player__center-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 4rem;
    block-size: 4rem;
    background-color: oklch(var(--lch-white) / 0.9);
    border-radius: var(--radius-full);
    border: none;
    box-shadow: var(--shadow);
    pointer-events: auto;
    cursor: pointer;
    transition: transform 200ms ease, opacity 200ms ease;

    .icon {
      color: oklch(var(--lch-black));
      margin-inline-start: 0.125rem;
    }

    @media (any-hover: hover) {
      &:hover {
        transform: scale(1.05);
      }
    }
  }

  /* Seek indicators (shown on double-tap / arrow key skip) */
  .video-player__seek-indicator {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.125rem;
    color: oklch(var(--lch-white));
    font-size: var(--text-large);
    font-weight: 600;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    text-shadow: 0 1px 4px oklch(var(--lch-black) / 0.5);
  }

  .video-player__seek-indicator--left {
    inset-inline-start: 2rem;
  }

  .video-player__seek-indicator--right {
    inset-inline-end: 2rem;
  }

  .video-player__seek-arrow {
    font-size: 1.5rem;
    line-height: 1;
  }

  .video-player__seek-indicator--active {
    animation: seek-fade 800ms ease forwards;
  }

  @keyframes seek-fade {
    0% { opacity: 0; transform: translateY(-50%) scale(0.8); }
    15% { opacity: 1; transform: translateY(-50%) scale(1); }
    70% { opacity: 1; transform: translateY(-50%) scale(1); }
    100% { opacity: 0; transform: translateY(-50%) scale(1); }
  }

  /* Bottom controls bar */
  .video-player__controls {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding-block: var(--block-space) var(--block-space-half);
    padding-inline: var(--block-space);
    background: linear-gradient(transparent, oklch(var(--lch-black) / 0.7));
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    opacity: 0;
    transition: opacity 200ms ease;
    z-index: 3;
  }

  .video-player__controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--block-space-half);
  }

  .video-player__controls-left {
    display: flex;
    align-items: center;
    gap: var(--block-space-half);
  }

  .video-player__controls-right {
    display: flex;
    align-items: center;
    gap: var(--block-space-quarter);
  }

  /* Progress bar */
  .video-player__progress {
    position: relative;
    inline-size: 100%;
    block-size: 4px;
    background-color: oklch(var(--lch-white) / 0.3);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: block-size 100ms ease;

    @media (any-hover: hover) {
      &:hover {
        block-size: 6px;
      }
    }
  }

  .video-player__progress-fill {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    block-size: 100%;
    background-color: var(--color-green);
    border-radius: var(--radius-full);
    pointer-events: none;
  }

  /* Control buttons */
  .video-player__btn {
    background: none;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    opacity: 0.9;
    transition: opacity 150ms ease;
    display: inline-flex;
    align-items: center;

    @media (any-hover: hover) {
      &:hover {
        opacity: 1;
      }
    }
  }

  /* Time display */
  .video-player__time {
    font-size: var(--text-x-small);
    color: var(--color-white);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .video-player__time-separator {
    margin-inline: 0.15em;
    opacity: 0.6;
  }

  /* Volume */
  .video-player__volume {
    display: flex;
    align-items: center;
    gap: var(--block-space-quarter);
  }

  .video-player__volume-slider {
    inline-size: 4rem;
    block-size: 4px;
    accent-color: var(--color-white);
    cursor: pointer;

    @media (max-width: 639px) {
      display: none;
    }
  }

  /* Settings wrapper */
  .video-player__settings-wrapper {
    position: relative;
  }

  /* Settings menu */
  .video-player__settings-menu {
    position: absolute;
    inset-block-end: calc(100% + var(--block-space-half));
    inset-inline-end: 0;
    background-color: oklch(var(--lch-black) / 0.9);
    border-radius: var(--radius);
    min-inline-size: 10rem;
    overflow: hidden;
    z-index: 4;
  }

  .video-player__settings-panel {
    padding-block: var(--block-space-quarter);
  }

  .video-player__settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: var(--text-small);
    padding: var(--block-space-half) var(--block-space);
    cursor: pointer;
    text-align: left;

    @media (any-hover: hover) {
      &:hover {
        background-color: oklch(var(--lch-white) / 0.1);
      }
    }
  }

  .video-player__settings-item--active {
    color: var(--color-green);
  }

  .video-player__settings-item-right {
    display: flex;
    align-items: center;
    gap: var(--block-space-quarter);
    color: oklch(var(--lch-white) / 0.6);
  }

  .video-player__settings-back {
    display: flex;
    align-items: center;
    gap: var(--block-space-quarter);
    inline-size: 100%;
    background: none;
    border: none;
    border-block-end: 1px solid oklch(var(--lch-white) / 0.15);
    color: var(--color-white);
    font-size: var(--text-small);
    padding: var(--block-space-half) var(--block-space);
    cursor: pointer;
    text-align: left;
  }

  .video-player__settings-option {
    display: flex;
    align-items: center;
    gap: var(--block-space-half);
    inline-size: 100%;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: var(--text-small);
    padding: var(--block-space-half) var(--block-space);
    cursor: pointer;
    text-align: left;

    @media (any-hover: hover) {
      &:hover {
        background-color: oklch(var(--lch-white) / 0.1);
      }
    }
  }

  .video-player__settings-option--active {
    color: var(--color-green);
  }

  .video-player__settings-check {
    inline-size: 1em;
    flex-shrink: 0;
  }

  .video-player__settings-check-placeholder {
    inline-size: 1em;
    flex-shrink: 0;
  }

  /* Video info bar */
  .video-info {
    padding: var(--block-space);
    background-color: var(--color-gray-darker);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

}