<div class="audio-player-shell">
  <audio
    #audioEl
    [src]="src()"
    preload="metadata"
    (ended)="onPause()"
    (loadedmetadata)="onLoadedMetadata()"
    (pause)="onPause()"
    (play)="onPlay()"
    (timeupdate)="onTimeUpdate()"
    (volumechange)="onVolumeChange()"
  ></audio>

  <div class="audio-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="audio-control-btn"
      [title]="'shared.mediaPlayer.saveToFolder' | translate"
      [attr.aria-label]="'shared.mediaPlayer.saveAudioAria' | translate"
    >
      <ng-icon
        name="lucideDownload"
        class="w-4 h-4"
      />
    </button>
  </div>

  <div class="audio-body">
    <button
      type="button"
      (click)="togglePlayback()"
      class="audio-play-btn"
      [title]="(isPlaying() ? 'shared.mediaPlayer.pause' : 'shared.mediaPlayer.play') | translate"
      [attr.aria-label]="(isPlaying() ? 'shared.mediaPlayer.pauseAudioAria' : 'shared.mediaPlayer.playAudioAria') | translate"
    >
      <ng-icon
        [name]="isPlaying() ? 'lucidePause' : 'lucidePlay'"
        class="w-5 h-5"
      />
    </button>

    <div class="audio-main">
      <div
        class="audio-waveform-panel"
        [class.expanded]="waveformExpanded()"
        [attr.aria-hidden]="!waveformExpanded()"
      >
        <div class="audio-waveform-shell">
          <div
            #waveformContainer
            class="audio-waveform-container"
            [class.invisible]="waveformLoading() || waveformUnavailable()"
          ></div>

          @if (waveformLoading()) {
            <div class="audio-waveform-overlay text-muted-foreground">{{ 'shared.mediaPlayer.loadingWaveform' | translate }}</div>
          } @else if (waveformUnavailable()) {
            <div class="audio-waveform-overlay text-muted-foreground">
              {{ 'shared.mediaPlayer.waveformUnavailable' | translate }}
            </div>
          }
        </div>
      </div>

      <input
        type="range"
        min="0"
        [max]="durationSeconds() || 0"
        [value]="currentTimeSeconds()"
        (input)="onSeek($event)"
        class="seek-slider"
        [style.background]="seekTrackBackground()"
        [attr.aria-label]="'shared.mediaPlayer.seekAudioAria' | translate"
      />

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

        <div class="audio-actions-group">
          <div class="audio-volume-group">
            <button
              type="button"
              (click)="toggleMute()"
              class="audio-control-btn"
              [title]="(isMuted() ? 'shared.mediaPlayer.unmute' : 'shared.mediaPlayer.mute') | translate"
              [attr.aria-label]="(isMuted() ? 'shared.mediaPlayer.unmuteAudioAria' : 'shared.mediaPlayer.muteAudioAria') | translate"
            >
              <ng-icon
                [name]="isMuted() ? 'lucideVolumeX' : 'lucideVolume2'"
                class="w-4 h-4"
              />
            </button>

            <input
              type="range"
              min="0"
              max="100"
              [value]="displayVolumePercent()"
              (input)="onVolumeInput($event)"
              class="volume-slider"
              [style.background]="volumeTrackBackground()"
              [attr.aria-label]="'shared.mediaPlayer.volumeAudioAria' | translate"
            />
          </div>

          <button
            type="button"
            (click)="toggleWaveform()"
            class="audio-control-btn"
            [title]="(waveformExpanded() ? 'shared.mediaPlayer.hideWaveform' : 'shared.mediaPlayer.showWaveform') | translate"
            [attr.aria-label]="(waveformExpanded() ? 'shared.mediaPlayer.hideWaveformAria' : 'shared.mediaPlayer.showWaveformAria') | translate"
          >
            <ng-icon
              [name]="waveformToggleIcon()"
              class="w-4 h-4"
            />
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
