<div
  #playerRoot
  class="video-player-shell"
  [class.fullscreen]="isFullscreen()"
  [class.controls-hidden]="isFullscreen() && !controlsVisible()"
  (mousemove)="onPlayerMouseMove()"
>
  @if (!isFullscreen()) {
    <div class="video-top-bar">
      <div class="min-w-0 flex-1">
        <div class="truncate text-sm font-medium text-foreground">{{ filename() }}</div>
        @if (sizeLabel()) {
          <div class="text-xs text-muted-foreground">{{ sizeLabel() }}</div>
        }
      </div>
      <button
        type="button"
        (click)="requestDownload()"
        class="video-control-btn"
        title="Save to folder"
        aria-label="Save video to folder"
      >
        <ng-icon
          name="lucideDownload"
          class="w-4 h-4"
        />
      </button>
    </div>
  }

  <div
    class="video-stage"
    (click)="onVideoClick()"
    (dblclick)="onVideoDoubleClick($event)"
    (keydown.enter)="onVideoClick()"
    (keydown.space)="onVideoClick(); $event.preventDefault()"
    role="button"
    tabindex="0"
    aria-label="Toggle video playback"
  >
    <video
      #videoEl
      [src]="src()"
      playsinline
      preload="metadata"
      class="chat-video-element"
      (ended)="onPause()"
      (loadedmetadata)="onLoadedMetadata()"
      (pause)="onPause()"
      (play)="onPlay()"
      (timeupdate)="onTimeUpdate()"
      (volumechange)="onVolumeChange()"
    ></video>

    @if (!isPlaying()) {
      <button
        type="button"
        (click)="onOverlayPlayClick($event)"
        class="video-play-overlay"
        title="Play video"
        aria-label="Play video"
      >
        <ng-icon
          name="lucidePlay"
          class="w-8 h-8"
        />
      </button>
    }
  </div>

  <div
    class="video-bottom-bar"
    [class.fullscreen-overlay]="isFullscreen()"
    [class.hidden-overlay]="isFullscreen() && !controlsVisible()"
  >
    <input
      type="range"
      min="0"
      [max]="durationSeconds() || 0"
      [value]="currentTimeSeconds()"
      (input)="onSeek($event)"
      class="seek-slider"
      [style.background]="seekTrackBackground()"
      aria-label="Seek video"
    />

    <div class="video-controls-row">
      <div class="flex items-center gap-2 min-w-0 flex-1">
        <button
          type="button"
          (click)="togglePlayback()"
          class="video-control-btn"
          [title]="isPlaying() ? 'Pause' : 'Play'"
          [attr.aria-label]="isPlaying() ? 'Pause video' : 'Play video'"
        >
          <ng-icon
            [name]="isPlaying() ? 'lucidePause' : 'lucidePlay'"
            class="w-4 h-4"
          />
        </button>

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

      <div class="video-volume-group">
        <button
          type="button"
          (click)="toggleMute()"
          class="video-control-btn"
          [title]="isMuted() ? 'Unmute' : 'Mute'"
          [attr.aria-label]="isMuted() ? 'Unmute video' : 'Mute video'"
        >
          <ng-icon
            [name]="isMuted() ? 'lucideVolumeX' : 'lucideVolume2'"
            class="w-4 h-4"
          />
        </button>

        <input
          type="range"
          min="0"
          max="100"
          [value]="isMuted() ? 0 : volumePercent()"
          (input)="onVolumeInput($event)"
          class="volume-slider"
          [style.background]="volumeTrackBackground()"
          aria-label="Video volume"
        />
      </div>

      @if (isFullscreen()) {
        <button
          type="button"
          (click)="requestDownload()"
          class="video-control-btn"
          title="Save to folder"
          aria-label="Save video to folder"
        >
          <ng-icon
            name="lucideDownload"
            class="w-4 h-4"
          />
        </button>
      }

      <button
        type="button"
        (click)="toggleFullscreen()"
        class="video-control-btn"
        [title]="isFullscreen() ? 'Exit fullscreen' : 'Fullscreen'"
        [attr.aria-label]="isFullscreen() ? 'Exit fullscreen' : 'Enter fullscreen'"
      >
        <ng-icon
          [name]="isFullscreen() ? 'lucideMinimize' : 'lucideMaximize'"
          class="w-4 h-4"
        />
      </button>
    </div>
  </div>
</div>
