<div class="completeline" [style.width]="scrollProgress"></div>
<app-header></app-header>


<div class="container mx-auto px-4 py-6 flex flex-col lg:flex-row gap-6">
    <!-- Sidebar -->
    <aside class="lg:w-1/4 hidden lg:block">
        <div class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm mb-6 sticky top-20">
            <!-- Writer Profile -->
            <div class="flex items-center space-x-4 mb-4">
                <div class="bg-gray-200 dark:bg-gray-700 w-16 h-16 rounded-full flex items-center justify-center">
                    
                    <ng-container *ngIf="storyDetail?.author_profile; else authorInitialTpl">
    <img [src]="storyImgPath + storyDetail.author_profile" 
         (error)="hideAuthorImage = true"
         alt="Author Image" 
         class="w-full h-full object-cover rounded-full">
  </ng-container>
  
  <ng-template #authorInitialTpl>
    <span class="text-4xl text-gray-500 dark:text-gray-400">
      {{ storyDetail?.author_name?.charAt(0) || 'U' }}
    </span>
  </ng-template>
                </div>
                <div>
                   <h3 class="font-bold">
       <h3 class="font-bold">{{ storyDetail.author_name || 'Unknown Author' }}</h3>
      </h3>
      
                    <p class="text-sm text-wattpad-light">{{ formatCount(followerCount) }} {{t('FOLLOWERS')}}</p>
                </div>
            </div>
             <button 
  *ngIf="storyDetail && storyDetail.author_id !== userId"
  (click)="toggleFollow()"
  [ngClass]="{
    'bg-wattpad-primary text-white': !isFollowing,
    'bg-white text-wattpad-primary border border-wattpad-primary': isFollowing
  }"
  class="px-4 py-2 rounded-full text-sm font-medium hover:bg-opacity-80 transition-colors"
>
  {{ isFollowing ? 'Unfollow' : 'Follow' }}
</button>
            
            <!-- Share Buttons -->
            <div class="mb-4">
  <h4 class="font-medium mb-2">{{t('SHARE_THIS_STORY')}}</h4>
  <div class="flex space-x-2">
    <a (click)="shareOnFacebook($event)" class="pointer bg-blue-600 text-white p-2 rounded-full hover:bg-blue-700">
      <i class="fab fa-facebook-f"></i>
    </a>
    <a (click)="shareOnTwitter()" class="pointer bg-blue-400 text-white p-2 rounded-full hover:bg-blue-500">
      <i class="fab fa-twitter"></i>
    </a>
    <a (click)="shareOnWhatsApp($event)" class="pointer bg-green-500 text-white p-2 rounded-full hover:bg-green-600">
      <i class="fab fa-whatsapp"></i>
    </a>
    
  </div>
</div>
            
          
            <div class="mb-4" *ngIf="storyContent?.audio">
  <h4 class="font-medium mb-2">{{t('LISTEN_TO_THIS_STORY')}}</h4>
  <div class="audio-player flex items-center justify-between text-white">
    <button class="play-pause" (click)="toggleAudioPlayback()">
      <i class="fas" [ngClass]="{'fa-play': !isPlaying, 'fa-pause': isPlaying}"></i>
    </button>
    <div class="flex-1 mx-4">
      <div class="w-full bg-gray-400 h-1 rounded-full" (click)="seekAudio($event)">
        <div class="bg-white h-1 rounded-full" [style.width]="progressBarWidth"></div>
      </div>
    </div>
    <span class="text-xs">{{ currentTimeDisplay }} / {{ durationDisplay }}</span>
    <audio #audioPlayer (timeupdate)="updateProgressBar()" (ended)="onAudioEnded()">
      <source [src]="storyContent.audio" type="audio/mpeg">
    </audio>
  </div>
</div>
            
            <!-- Ad Space -->
            <div class="bg-gray-200 dark:bg-gray-700 h-40 w-full rounded-lg flex items-center justify-center mt-4">
                <span class="text-gray-500 dark:text-gray-400">Advertisement</span>
            </div>
        </div>
    </aside>

    <!-- Story Content -->
    <main class="lg:w-2/4">
        <article class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm mb-6">
            <div class="flex justify-between items-start">
                <div>
                    <h1 class="text-2xl lg:text-3xl font-bold mb-2" *ngIf="storyContent && !isLoading">{{storyContent.title}}</h1>
                    
                    <!-- Rating System -->
                    <div class="flex items-center mb-4">
                        <div class="star-rating flex space-x-1 mt-4">
  <ng-container *ngFor="let star of [5,4,3,2,1]">
    <input 
      type="radio"
      [id]="'star' + star"
      name="rating"
      [value]="star"
      [checked]="userRating === star"
      (change)="submitRating(star)" 
    />
    <label [for]="'star' + star" title="{{ star }} stars">
      <i class="fas fa-star"
        [ngClass]="{
          'text-yellow-400': star <= userRating,
          'text-gray-300': star > userRating
        }">
      </i>
    </label>
  </ng-container>
</div>

<!-- Average -->
<span class="text-sm text-wattpad-light ml-2 mt-4">
  ({{ averageRating.toFixed(1) }} {{t('FORM')}} {{ totalRatings }} {{t('RATINGS')}})
</span>
                    </div>
                </div>
                
       <button (click)="toggleFullscreen()" class="p-2 pointer rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
  <i class="fas fa-expand gradient-box"></i>
</button>
  
               
            </div>
            
            <!-- Video Embed -->
            <div class="video-container mb-6 rounded-lg overflow-hidden"
     *ngIf="storyContent && storyContent.video_url && !isLoading">

  <video width="100%" height="auto" controls>
    <source [src]="storyContent.video_url" type="video/mp4">
    Your browser does not support the video tag.
  </video>

</div>
            
            <!-- Story Text -->
           <div class="story-content text-base leading-relaxed space-y-4"
     #storyTextEl
     id="storyContent"
     *ngIf="storyContent && !isLoading"
     [innerHTML]="storyContent.content">
</div>
            
            <!-- Next Part CTA -->
            <div class="mt-8 text-center" *ngIf="partsLoaded && !isLastPart()">
  <button class="bg-wattpad-primary text-white px-8 pointer py-3 pointer rounded-full font-medium hover:bg-[#E5274B]" (click)="continueToNextPart()">
    {{t('CONTINUE_NEXT')}} <i class="fas fa-arrow-right ml-2"></i>
  </button>
</div>
            <div *ngIf="allParts.length > 0 && isLastPart()" class="">
   --- {{t('END_STORY')}} ---
  </div>

        </article>

        <!-- Comments Section -->
      <app-comment-section *ngIf="storyId !== null" [storyId]="storyId"></app-comment-section>
    </main>

    <!-- Right Sidebar (Ad Space) -->
    <aside class="lg:w-1/4 hidden lg:block">
        <div class="bg-gray-200 dark:bg-gray-700 h-96 w-full rounded-lg flex items-center justify-center sticky top-20">
            <span class="text-gray-500 dark:text-gray-400">Advertisement</span>
        </div>
    </aside>
</div>

<!-- Full Screen Reader -->
<!-- Full Screen Reader -->
<div id="fullscreenReader" class="fullscreen-reader" [class.active]="isFullscreen" [class.dark]="readerMode === 'dark'" [class.reading-mode]="readerMode === 'reading'">
    <div class="container mx-auto max-w-4xl">
        <h1 class="text-3xl font-bold mb-6">{{storyContent?.title}}</h1>
        <div id="readerContent" class="text-lg leading-relaxed space-y-6" [style.fontSize]="fontSize + 'rem'" [innerHTML]="storyContent?.content">
        </div>
    </div>
    <div id="readerControls" class="reader-controls" [class.dark]="readerMode === 'dark'" [class.reading-mode]="readerMode === 'reading'">
        <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 pointer" (click)="changeReaderMode('light')">
            <i class="fas fa-sun"></i>
        </button>
        <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 pointer" (click)="changeReaderMode('dark')">
            <i class="fas fa-moon"></i>
        </button>
        <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 pointer" (click)="changeReaderMode('reading')">
            <i class="fas fa-book-open"></i>
        </button>
        <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 pointer" (click)="adjustFontSize('decrease')">
            <i class="fas fa-font"></i> <i class="fas fa-minus"></i>
        </button>
        <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 pointer" (click)="adjustFontSize('increase')">
            <i class="fas fa-font"></i> <i class="fas fa-plus"></i>
        </button>
        <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 text-wattpad-primary" (click)="toggleFullscreen()">
            <i class="fas fa-times"></i>
        </button>
    </div>
</div>

<!-- Desktop Footer -->
<footer class="hidden lg:block bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-12">
    <!-- Footer content from index4.html -->
</footer>

<!-- Mobile Bottom Navigation -->
<nav class="bottom-nav fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 lg:hidden">
    <!-- Bottom nav content from index4.html -->
</nav>

<!-- Comment Box (Hidden by default) -->
<div id="commentBox" class="comment-box">
    <textarea class="w-full px-3 py-2 mb-2 rounded-lg border border-gray-300 focus:outline-none" placeholder="Write your comment..."></textarea>
    <div class="flex justify-end">
        <button class="bg-wattpad-primary text-white px-3 py-1 rounded text-sm font-medium hover:bg-[#E5274B]">
            {{t('POST')}}
        </button>
    </div>
</div>