<div
  #playerRoot
  class="video-player-shell"
  [class.fullscreen]="isFullscreen()"
  [class.paused]="!isPlaying()"
  [class.controls-hidden]="!controlsVisible()"
  (mouseenter)="onPlayerMouseMove()"
  (mousemove)="onPlayerMouseMove()"
>
  <div
    class="video-stage"
    (click)="onVideoClick()"
    (dblclick)="onVideoDoubleClick($event)"
    (keydown.enter)="onVideoClick()"
    (keydown.space)="onVideoClick(); $event.preventDefault()"
    role="button"
    tabindex="0"
    [attr.aria-label]="'shared.mediaPlayer.togglePlaybackAria' | translate"
  >
    <video
      #videoEl
      [src]="src()"
      playsinline
      preload="metadata"
      class="chat-video-element"
      (ended)="onPause()"
      (loadedmetadata)="onLoadedMetadata()"
      (pause)="onPause()"
      (play)="onPlay()"
      (timeupdate)="onTimeUpdate()"
      (volumechange)="onVolumeChange()"
    ></video>

    <div
      class="video-top-overlay"
      [class.hidden-overlay]="!controlsVisible()"
    >
      <div class="video-meta min-w-0 flex-1">
        <div class="video-filename">{{ filename() }}</div>
        @if (sizeLabel()) {
          <div class="video-size">{{ sizeLabel() }}</div>
        }
      </div>
      <button
        type="button"
        (click)="requestDownload(); $event.stopPropagation()"
        class="video-control-btn"
        [title]="'shared.mediaPlayer.saveToFolder' | translate"
        [attr.aria-label]="'shared.mediaPlayer.saveVideoAria' | translate"
      >
        <ng-icon
          name="lucideDownload"
          class="w-4 h-4"
        />
      </button>
    </div>

    @if (!isPlaying()) {
      <button
        type="button"
        (click)="onOverlayPlayClick($event)"
        class="video-play-overlay"
        [title]="'shared.mediaPlayer.playVideoOverlay' | translate"
        [attr.aria-label]="'shared.mediaPlayer.playVideoAria' | translate"
      >
        <ng-icon
          name="lucidePlay"
          class="w-8 h-8"
        />
      </button>
    }

    <div
      class="video-bottom-overlay"
      [class.hidden-overlay]="!controlsVisible()"
      (pointerdown)="$event.stopPropagation()"
    >
      <div class="video-controls-row">
        <button
          type="button"
          (click)="onControlPlaybackClick($event)"
          class="video-control-btn"
          [title]="(isPlaying() ? 'shared.mediaPlayer.pause' : 'shared.mediaPlayer.play') | translate"
          [attr.aria-label]="(isPlaying() ? 'shared.mediaPlayer.pauseVideoAria' : 'shared.mediaPlayer.playVideoAria') | translate"
        >
          <ng-icon
            [name]="isPlaying() ? 'lucidePause' : 'lucidePlay'"
            class="w-4 h-4"
          />
        </button>

        <span class="video-time-label">{{ formatTime(currentTimeSeconds()) }} / {{ formatTime(durationSeconds()) }}</span>

        <input
          type="range"
          min="0"
          [max]="seekSliderSteps"
          step="any"
          [value]="seekSliderValue()"
          (click)="$event.stopPropagation()"
          (input)="onSeek($event)"
          class="seek-slider"
          [style.--progress.%]="progressPercent()"
          [attr.aria-label]="'shared.mediaPlayer.seekVideoAria' | translate"
        />

        <div class="video-volume-group">
          <button
            type="button"
            (click)="toggleMute(); $event.stopPropagation()"
            class="video-control-btn"
            [title]="(isMuted() ? 'shared.mediaPlayer.unmute' : 'shared.mediaPlayer.mute') | translate"
            [attr.aria-label]="(isMuted() ? 'shared.mediaPlayer.unmuteVideoAria' : 'shared.mediaPlayer.muteVideoAria') | translate"
          >
            <ng-icon
              [name]="isMuted() ? 'lucideVolumeX' : 'lucideVolume2'"
              class="w-4 h-4"
            />
          </button>

          <input
            type="range"
            min="0"
            max="100"
            [value]="isMuted() ? 0 : volumePercent()"
            (click)="$event.stopPropagation()"
            (input)="onVolumeInput($event)"
            class="volume-slider"
            [style.--progress.%]="volumeProgressPercent()"
            [attr.aria-label]="'shared.mediaPlayer.volumeVideoAria' | translate"
          />
        </div>

        <button
          type="button"
          (click)="toggleFullscreen(); $event.stopPropagation()"
          class="video-control-btn"
          [title]="(isFullscreen() ? 'shared.mediaPlayer.exitFullscreen' : 'shared.mediaPlayer.fullscreen') | translate"
          [attr.aria-label]="(isFullscreen() ? 'shared.mediaPlayer.exitFullscreenAria' : 'shared.mediaPlayer.enterFullscreenAria') | translate"
        >
          <ng-icon
            [name]="isFullscreen() ? 'lucideMinimize' : 'lucideMaximize'"
            class="w-4 h-4"
          />
        </button>
      </div>
    </div>
  </div>
</div>
