<ion-header [translucent]="true" class="ion-no-border">
  <ion-toolbar class="bg-gradient top-toolbar">
    <ion-buttons slot="start">
      <ion-back-button text="" defaultHref="/home" color="secondary"></ion-back-button>
    </ion-buttons>
    <ion-title class="outfit-font wrapped-title">
      <div class="title-main" [style.fontSize.rem]="fontSize() * 1.1">
        <span class="canto-number" *ngIf="canto()?.id_canti">
          {{ canto()?.id?.startsWith('my_') ? getMySongNumber(canto()) : canto()?.id_canti }}
        </span>
        <span class="title-text" style="display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px;">
          <span *ngIf="getCommunitySongNumber(canto())" style="color: var(--ion-color-secondary); font-weight: 600; margin-right: 8px; opacity: 0.9;">{{ getCommunitySongNumber(canto()) }}</span>
          <span>{{ canto()?.titolo || 'Player' }}</span>
        </span>
      </div>
    </ion-title>
    <ion-buttons slot="end">
      <div class="offline-badge-header" *ngIf="!connectivityService.isOnline()">
        <ion-icon name="cloud-offline-outline"></ion-icon>
      </div>
      <ion-button fill="clear" (click)="editOrCloneCanto()" *ngIf="settingsService.showEditor() && !isLandscapeActive()" style="margin: 0; --padding-start: 6px; --padding-end: 6px;">
        <ion-icon slot="icon-only" name="create-outline" color="secondary" style="font-size: 1.3rem;"></ion-icon>
      </ion-button>
      <ion-button fill="clear" (click)="shareCanto()" *ngIf="!isLandscapeActive()" style="margin: 0; --padding-start: 6px; --padding-end: 6px;">
        <ion-icon slot="icon-only" name="share-social-outline" color="secondary" style="font-size: 1.3rem;"></ion-icon>
      </ion-button>
      <ion-button fill="clear" (click)="toggleChords()" *ngIf="!isLandscapeActive()" style="margin: 0; --padding-start: 6px; --padding-end: 6px;">
        <ion-icon slot="icon-only" 
          [name]="showChords() ? 'musical-notes-outline' : 'text-outline'"
          [color]="showChords() ? 'secondary' : 'medium'"
          style="font-size: 1.3rem;">
        </ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>

  <!-- Audio Toolbar Removed -->
</ion-header>

<ion-content class="bg-gradient" [class.full-screen-content]="settingsService.fullscreenMode()">
  <div class="lyrics-container" 
       [style.fontSize.rem]="fontSize()"
       [class.full-screen-container]="settingsService.fullscreenMode()"
       [class.has-landscape-audio]="youtubePlayerService.isPlayerSupported() && canto()?.link_youtube && canto()?.link_youtube!.length > 5"
       (touchstart)="onTouchStart($event)"
       (touchmove)="onTouchMove($event)"
       (touchend)="onTouchEnd()">

    <!-- Landscape Side Controls (Scrollable) -->
    <div class="landscape-side-controls" [class.active-fullscreen]="settingsService.fullscreenMode()">
      <div class="side-scroll-container">
        
        <!-- Navigation Group -->
        <div class="side-group">
          <ion-button fill="clear" color="secondary" (click)="prevSong()" class="landscape-playlist-btn prev-btn">
            prv
          </ion-button>
        </div>
        <div class="side-group">
          <ion-button fill="clear" (click)="prev()" [disabled]="currentLineIndex() === 0">
            <ion-icon slot="icon-only" name="chevron-up" color="secondary"></ion-icon>
          </ion-button>
        </div>

        <div class="side-group">
          <ion-button fill="clear" (click)="next()" [disabled]="currentLineIndex() === getTotalLines() - 1">
            <ion-icon slot="icon-only" name="chevron-down" color="secondary"></ion-icon>
          </ion-button>
        </div>
        <div class="side-group">
          <ion-button fill="clear" color="secondary" (click)="nextSong()" class="landscape-playlist-btn next-btn">
            nxt
          </ion-button>
        </div>

        <!-- Zoom Group -->
        <div class="side-group">
          <ion-button fill="clear" (click)="zoomIn()" [disabled]="fontSize() >= maxZoom()">
            <ion-icon slot="icon-only" name="add-circle-outline" color="secondary"></ion-icon>
          </ion-button>
          <div class="side-indicator" style="display: flex; flex-direction: column; align-items: center; gap: 2px;">
            <ion-icon name="search-outline" color="secondary" style="font-size: 1.0rem;"></ion-icon>
            <span class="side-val" style="font-size: 0.7rem; font-weight: 700; color: var(--ion-color-secondary);">{{ fontSize().toFixed(1) }}</span>
          </div>
          <ion-button fill="clear" (click)="zoomOut()" [disabled]="fontSize() <= minZoom()">
            <ion-icon slot="icon-only" name="remove-circle-outline" color="secondary"></ion-icon>
          </ion-button>
        </div>

        <!-- Autoscroll Standard Group -->
        <div class="side-group" *ngIf="settingsService.enableStandardAutoscroll()">
          <ion-button fill="clear" (click)="decreaseAutoscrollSpeed()" [disabled]="autoscrollSpeed() <= 1">
            <ion-icon slot="icon-only" name="remove"></ion-icon>
          </ion-button>
          <div class="side-indicator" (click)="toggleAutoscroll()">
            <ion-icon [name]="isAutoscrolling() ? 'pause' : 'play'" [color]="isAutoscrolling() ? 'danger' : 'secondary'"></ion-icon>
            <span class="side-val">V{{ autoscrollSpeed() }}</span>
          </div>
          <ion-button fill="clear" (click)="increaseAutoscrollSpeed()" [disabled]="autoscrollSpeed() >= 10">
            <ion-icon slot="icon-only" name="add"></ion-icon>
          </ion-button>
        </div>

      </div>
    </div>

    <!-- Sections rendering -->
    <div class="lyrics-view">
      <div *ngFor="let section of parsedSections(); let si = index" 
           class="section" 
           [class.chorus]="section.type === 'chorus'"
           [class.verse-num]="section.type === 'verse_num'">
        
        <!-- Section label for chorus -->
        <div *ngIf="section.type === 'chorus'" class="section-label">Rit.</div>
        <div *ngIf="section.type === 'verse_num' && section.verseNumber" class="section-label verse-num-label">{{ section.verseNumber }}.</div>

        <div *ngFor="let line of section.lines; let li = index" 
             class="lyric-line"
             [class.active]="isActiveLine(si, li)">

          <!-- Chord mode: show chords above text -->
          <ng-container *ngIf="showChords() && !isLandscapeActive(); else textOnly">
            <span *ngFor="let seg of line.segments; let i = index" class="chord-segment" [class.contiguous-next]="lyricsParser.isContiguousNext(line.segments, i)">
              <span *ngIf="seg.chord" class="chord">{{ seg.chord }}</span>
              <span class="seg-text">{{ seg.text }}</span>
            </span>
          </ng-container>

          <!-- Text only mode -->
          <ng-template #textOnly>
            {{ line.text }}
          </ng-template>
        </div>
      </div>
      <!-- Spazio bianco finale per consentire lo scorrimento a pagine perfetto dell'ultima riga in cima sullo schermo -->
      <div class="bottom-spacer" *ngIf="settingsService.karaokePageScrollMode()" style="height: 75vh; width: 100%; pointer-events: none;"></div>
    </div>

  </div>
</ion-content>

<ion-footer class="ion-no-border">
  <!-- Audio Player / Playlist Navigation Toolbar -->
  <ion-toolbar class="global-player-toolbar glass">
    <div class="player-content">
      <div class="controls-row">
        <ion-button fill="clear" color="secondary" (click)="prevSong()" class="skip-btn">
          <ion-icon slot="icon-only" name="chevron-back"></ion-icon>
        </ion-button>
        
        <ng-container *ngIf="youtubePlayerService.isPlayerSupported() && canto()?.link_youtube && canto()?.link_youtube!.length > 5; else noAudioMsg">
          <ion-button fill="clear" color="secondary" (click)="toggleAudio()" class="play-btn">
            <ion-icon slot="icon-only" [name]="youtubePlayerService.isPlaying() ? 'pause-sharp' : 'play-sharp'"></ion-icon>
          </ion-button>
  
          <ion-range 
            [min]="0" 
            [max]="youtubePlayerService.videoDuration()" 
            [value]="youtubePlayerService.videoProgress()"
            (ionChange)="onSeek($event)"
            color="secondary"
            class="global-range">
          </ion-range>
        </ng-container>
        <ng-template #noAudioMsg>
          <div class="no-audio-msg outfit-font" style="flex: 1; text-align: center; font-size: 0.85rem; opacity: 0.6; color: var(--ion-color-medium);">
            Nessun audio disponibile
          </div>
        </ng-template>

        <ion-button fill="clear" color="secondary" (click)="nextSong()" class="skip-btn">
          <ion-icon slot="icon-only" name="chevron-forward"></ion-icon>
        </ion-button>
      </div>
    </div>
  </ion-toolbar>

  <ion-toolbar class="bg-gradient slim-toolbar">
    <div class="slim-controls">
      <!-- Autoscroll Standard in Portrait Footer -->
      <div class="group" *ngIf="settingsService.enableStandardAutoscroll()">
        <ion-button fill="clear" size="small" (click)="decreaseAutoscrollSpeed()" [disabled]="autoscrollSpeed() <= 1">
          <ion-icon slot="icon-only" name="remove"></ion-icon>
        </ion-button>
        <div class="autoscroll-indicator" (click)="toggleAutoscroll()" style="display: flex; align-items: center; gap: 4px; padding: 0 4px; cursor: pointer;">
          <ion-icon [name]="isAutoscrolling() ? 'pause' : 'play'" [color]="isAutoscrolling() ? 'danger' : 'secondary'"></ion-icon>
          <span style="font-size: 0.75rem; font-weight: 700; color: var(--ion-color-secondary); min-width: 32px; text-align: center;">V{{ autoscrollSpeed() }}</span>
        </div>
        <ion-button fill="clear" size="small" (click)="increaseAutoscrollSpeed()" [disabled]="autoscrollSpeed() >= 10">
          <ion-icon slot="icon-only" name="add"></ion-icon>
        </ion-button>
      </div>

      <!-- Camera Head Gestures Toggle in Portrait -->
      <div class="group" *ngIf="settingsService.enableVisualAutoscroll()">
        <ion-button fill="clear" size="small" (click)="toggleCameraNavigation()" [color]="enableCameraNavigation() ? 'success' : 'secondary'" style="margin: 0;">
          <ion-icon slot="icon-only" [name]="enableCameraNavigation() ? 'videocam' : 'videocam-off-outline'"></ion-icon>
        </ion-button>
        <div class="camera-indicator" *ngIf="enableCameraNavigation()" [class.tilted]="faceDetector.isTilted()">
          <ion-icon name="person-outline" 
                    [style.transform]="'rotate(' + (-faceDetector.currentTiltAngle()) + 'deg)'"></ion-icon>
          <span class="val">{{ faceDetector.currentTiltAngle() }}°</span>
        </div>
      </div>

      <!-- Navigation -->
      <div class="group">
        <ion-button fill="clear" size="small" (click)="restart()">
          <ion-icon slot="icon-only" name="arrow-up-circle" color="secondary"></ion-icon>
        </ion-button>
        <ion-button fill="clear" size="small" (click)="prev()" [disabled]="currentLineIndex() === 0">
          <ion-icon slot="icon-only" name="chevron-back" color="secondary"></ion-icon>
        </ion-button>
        <ion-button fill="clear" size="small" (click)="next()" [disabled]="currentLineIndex() === getTotalLines() - 1">
          <ion-icon slot="icon-only" name="chevron-forward" color="secondary"></ion-icon>
        </ion-button>
      </div>

      <!-- Transposition (Only in chords mode) -->
      <div class="group" *ngIf="showChords()">
        <ion-button fill="clear" size="small" (click)="transposeDown()">
          <ion-icon slot="icon-only" name="remove"></ion-icon>
        </ion-button>
        <div class="transpose-indicator">
          <ion-icon name="musical-note" color="secondary"></ion-icon>
          <span class="val" *ngIf="transposeAmount() !== 0">{{ transposeAmount() > 0 ? '+' : '' }}{{ transposeAmount() }}</span>
        </div>
        <ion-button fill="clear" size="small" (click)="transposeUp()">
          <ion-icon slot="icon-only" name="add"></ion-icon>
        </ion-button>
      </div>

      <!-- Zoom -->
      <div class="group">
        <ion-button fill="clear" size="small" (click)="zoomOut()" [disabled]="fontSize() <= minZoom()">
          <ion-icon slot="icon-only" name="remove-circle-outline" color="secondary"></ion-icon>
        </ion-button>
        <div class="zoom-indicator">
          <ion-icon name="search-outline" color="secondary"></ion-icon>
          <span class="val">{{ fontSize().toFixed(1) }}</span>
        </div>
        <ion-button fill="clear" size="small" (click)="zoomIn()" [disabled]="fontSize() >= maxZoom()">
          <ion-icon slot="icon-only" name="add-circle-outline" color="secondary"></ion-icon>
        </ion-button>
      </div>

      <!-- YouTube Link in Portrait Footer -->
      <div class="group" *ngIf="connectivityService.isOnline() && canto()?.link_youtube && canto()?.link_youtube!.length > 5">
        <ion-button fill="clear" size="small" (click)="openYoutube()">
          <ion-icon slot="icon-only" name="logo-youtube" color="danger"></ion-icon>
        </ion-button>
      </div>


    </div>
  </ion-toolbar>
</ion-footer>

<!-- Black Screen Overlay -->
<div class="black-screen-overlay" *ngIf="isBlackScreen()" (click)="deactivateBlackScreen()"></div>

<!-- Hidden Camera Video for Head Navigation (needed for face detection API to run) -->
<video *ngIf="enableCameraNavigation()" id="face-preview-video" muted playsinline autoplay style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;"></video>
