 <app-header></app-header>
 <main class="container mx-auto px-0 lg:px-6">
<div class="relative h-48 lg:h-64"
     [class.cursor-pointer]="isOwnProfile"
     (click)="isOwnProfile && triggerCoverUpload()">
  <ng-container *ngIf="userDetail?.coverimage_url; else noCover">
    <img [src]="userDetail.coverimage_url" alt="Cover" class="absolute inset-0 w-full h-full object-cover" />
  </ng-container>
  <ng-template #noCover>
    <div class="absolute inset-0 bg-gradient-to-r from-purple-500 to-pink-500"></div>
  </ng-template>

  <div *ngIf="isOwnProfile" class="absolute inset-0 flex items-center justify-center bg-black/20 opacity-0 hover:opacity-100 transition">
    <i class="fas fa-camera text-white text-2xl"></i>
  </div>

  <!-- Profile Avatar -->
  <div class="absolute -bottom-16 left-4 lg:left-8"
       [class.cursor-pointer]="isOwnProfile"
       (click)="isOwnProfile && triggerProfileUpload(); $event.stopPropagation();">
    <div class="profile-avatar w-32 h-32 lg:w-40 lg:h-40 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center overflow-hidden">
      <ng-container *ngIf="userDetail?.profileimg_url; else initials">
        <img [src]="userDetail.profileimg_url" alt="Profile" class="w-full h-full object-cover" />
      </ng-container>
      <ng-template #initials>
        <span class="text-4xl text-gray-500 dark:text-gray-400">{{ userDetail?.name?.charAt(0) }}</span>
      </ng-template>
    </div>
  </div>
</div>

<!-- Hidden file inputs (ONLY for own profile) -->
<input *ngIf="isOwnProfile" type="file" #profileInput accept="image/*" (change)="onProfileSelected($event)" hidden>
<input *ngIf="isOwnProfile" type="file" #coverInput accept="image/*" (change)="onCoverSelected($event)" hidden>
        <!-- Profile Info -->
        <div class="mt-20 lg:mt-24 px-4 lg:px-8">
            <div class="flex justify-between items-start">
                <div>
                    <h1 class="text-2xl lg:text-3xl font-bold">{{ userDetail?.name || 'Loading Name...' }}</h1>
                    <p class="text-wattpad-light text-sm lg:text-base">{{ userDetail?.name }}writer</p>
                </div>
                <div class="flex space-x-2">
                    <button *ngIf="!isOwnProfile && userDetail?.id"
  class="px-6 py-2 rounded-full font-medium transition-colors"
  [ngClass]="{
    'bg-wattpad-primary text-white hover:bg-[#E5274B]': !isFollowingMap[userDetail.id],
    'bg-white text-wattpad-primary border border-wattpad-primary': isFollowingMap[userDetail.id]
  }"
  (click)="toggleFollow(userDetail.id); $event.stopPropagation()">
  {{ isFollowingMap[userDetail.id] ? 'Following' : 'Follow' }}
</button>
                    <a href="new" class="px-6 py-2 rounded-full font-medium bg-wattpad-secondary text-white hover:bg-[#009966] transition-colors" *ngIf="isOwnProfile">
                        Write Story
                    </a>
                </div>
            </div>

            <!-- Stats -->
            <div class="flex items-center space-x-6 mt-4 text-sm lg:text-base">
                <div class="flex items-center">
                    <i class="fas fa-book text-wattpad-light mr-1"></i>
                    <span class="font-medium">{{ totalStories }}</span>
                    <span class="text-wattpad-light ml-1">{{t('STORIES')}}</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-users text-wattpad-light mr-1"></i>
                    <span class="font-medium">{{ followersList.length }}</span>
                    <span class="text-wattpad-light ml-1">{{t('FOLLOWERS')}}</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-user-friends text-wattpad-light mr-1"></i>
                    <span class="font-medium">{{ followingList.length }}</span>
                    <span class="text-wattpad-light ml-1">{{t('FOLLOWING')}}</span>
                </div>
            </div>

            <!-- About -->
            <div class="mt-4" *ngIf="userDetail?.about">
                <h3 class="font-bold">About Writer</h3>
                <p class="text-sm lg:text-base mt-1">{{ userDetail?.about || 'Loading about...' }}</p>
                <div class="flex items-center mt-2 text-sm text-wattpad-light">
                    <i class="fas fa-calendar-alt mr-2"></i>
<span *ngIf="userDetail?.created">Joined {{ getJoinedMonthYear(userDetail.created) }}</span>


                </div>
                <!-- <div class="flex items-center mt-1 text-sm text-wattpad-light">
                    <i class="fas fa-rupee-sign mr-2"></i>
                    <span class="font-medium">Total Earnings: ₹25,420</span>
                </div> -->
            </div>

            <!-- Tabs -->
            <div class="mt-6 border-b border-gray-200 dark:border-gray-700">
  <div class="flex">
    <button 
      [class]="getTabClass('stories')"
      (click)="setActiveTab('stories')"
      data-tab="stories">
      {{t('STORIES')}} ({{ totalStories }})
    </button>
    <button 
      [class]="getTabClass('followers')"
      (click)="setActiveTab('followers')"
      data-tab="followers">
      {{t('FOLLOWERS')}} ({{ followersList.length }})
    </button>
    <button 
      [class]="getTabClass('following')"
      (click)="setActiveTab('following')"
      data-tab="following">
      {{t('FOLLOWING')}} ({{ followingList.length }})
    </button>
  </div>
  <!-- <select>
    <option value="" *ngFor="let name of categories">
      {{ name.categoryName }}
    </option>
  </select> -->
</div>

            <!-- Tab Contents -->
            <div class="py-4">
                <!-- Stories Tab -->
               <div
  id="stories-tab"
  class="tab-content"
  [class.hidden]="!isActiveTab('stories')"
>
  <div class="grid grid-cols-1 gap-4">
    <!-- If no stories -->
    <div *ngIf="!isLoading && stories.length === 0" class="text-center py-8 text-gray-500">
    {{ errorMessage || 'No stories found. Start writing a new one!' }}
  </div>

    <!-- If stories exist -->
    <div
      *ngFor="let story of stories; let i = index"
      class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm hover:shadow-md transition-all pointer relative"
      
    >
      <div class="flex space-x-4">
        <div
          class="bg-gray-200 w-20 h-28 lg:w-24 lg:h-32 rounded-lg flex-shrink-0 flex items-center justify-center overflow-h"
        >
          <img *ngIf="story.story_image" 
             [src]="storyImgPath + story.story_image" 
             [alt]="story.story_title"
             class="w-full h-full object-cover">
             <div *ngIf="!story.story_image" class="w-full h-full flex items-center justify-center">
          <i class="fas fa-book text-gray-400 text-2xl"></i>
        </div>
        </div>
        <div class="flex-1 min-w-0">
          <h3 class="font-bold text-lg lg:text-xl truncate">
          {{ story.story_title }}
         <span class="ml-2 text-xs px-2 py-1 rounded-full" 
      [ngClass]="{
        'bg-green-100 text-green-800': story.story_status === '1',
        'bg-yellow-100 text-yellow-800': story.story_status === '0'
      }"  *ngIf="isOwnProfile">
  {{ story.story_status === '1' ? 'Published' : 'Draft' }}
</span>

        </h3>
          <p class="text-sm lg:text-base text-gray-500 mt-1">
          {{ story.views }} {{t('READS')}} • 
          {{ story.total_ratings }} {{t('RATINGS')}}
        </p>
<div class="flex items-center mt-2 text-sm lg:text-base">
  <i class="fas fa-star text-yellow-400 mr-1"></i>
  <span>{{ story.average_rating || '0.0' }} ({{ story.total_ratings || 0 }})</span>
</div>
          <p class="text-sm lg:text-base mt-2 line-clamp-2">
            {{ story.description }}
          </p>
          <div class="flex justify-between items-center mt-3">
            <span class="text-xs lg:text-sm text-wattpad-light">
  {{t('UPDATED')}}: {{ getTimeAgo(getValidDate(story)) }}
</span>
<div class="newEp">
  <button
              class="text-xs lg:text-sm bg-wattpad-primary mr-4 text-white px-3 py-1 rounded-full hover:bg-[#E5274B] transition-colors"    *ngIf="isOwnProfile" (click)="NewEp(story.id)"
            >
              {{t('NEW_EPISODE')}}
</button>
            <button
              class="text-xs lg:text-sm bg-wattpad-primary text-white px-3 py-1 rounded-full hover:bg-[#E5274B] transition-colors" (click)="continueWriting(story.id, story.story_title)" *ngIf="isOwnProfile"
            >
              {{t('VIEW_EDIT_EPISODE')}}
            </button>

            <button
              class="text-xs lg:text-sm bg-wattpad-primary text-white px-3 py-1 rounded-full hover:bg-[#E5274B] transition-colors" (click)="continueIsNotOwner(story.id, story.story_title)" *ngIf="!isOwnProfile"
            >
              {{t('VIEW_EPISODE')}}
            </button>
</div>

            <div class="actionbtn" *ngIf="isOwnProfile">
  <button 
    type="button" 
    class="deletebutton"
    (click)="deleteStory(story.id); $event.stopPropagation()">
    <i class="fas fa-trash text-gray-500 hover:text-red-500 transition-colors"></i>
  </button>
  <button
  type="button"
  class="editbutton"
  (click)="editStory(story.id); $event.stopPropagation()">
  <i class="fas fa-edit text-gray-500 hover:text-red-500 transition-colors"></i>
</button>
</div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

                <!-- Followers Tab -->
                <div id="followers-tab" class="tab-content" [class.hidden]="!isActiveTab('followers')">
                    <div class="grid grid-cols-1 gap-4" *ngIf="followersList.length > 0; else noFollowers">
                        <!-- Follower Card 1 -->
                        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm hover:shadow-md transition-all" *ngFor="let follower of followersList">
                            <div class="flex items-center space-x-4" >
                                <div class="bg-gray-200 w-12 h-12 rounded-full flex-shrink-0 flex items-center justify-center">
                                    <span class="text-gray-500">{{follower.name.charAt(0)}}</span>
                                </div>
                                <div class="flex-1 min-w-0">
                                   
                                    <h3 class="font-bold text-base lg:text-lg truncate pointer"  (click)="viewProfile(follower.id)">{{ follower.name }}</h3>
                                    <p class="text-sm lg:text-base text-wattpad-light">{{ followerCount || 0 }} {{t('FOLLOWERS')}} • 
    {{ stories.length || 0 }} {{t('STORIES')}}</p>
                                </div>
                                <button
  *ngIf="!isOwnProfile"
  class="text-xs lg:text-sm px-3 py-1 rounded-full transition-colors"
  [ngClass]="{
    'bg-wattpad-primary text-white hover:bg-[#E5274B]': !isFollowingMap[follower.id],
    'bg-white text-wattpad-primary border border-wattpad-primary': isFollowingMap[follower.id]
  }"
  (click)="toggleFollow(follower.id)">
  {{ isFollowingMap[follower.id] ? 'Unfollow' : 'Follow' }}
</button>
                            </div>
                        </div>  
                    </div>
                     <ng-template #noFollowers>
      <p>{{t('NO_FOLLOWERS')}}.</p>
    </ng-template>
                </div>


                <!-- Following Tab -->
                <div id="following-tab" class="tab-content" [class.hidden]="!isActiveTab('following')">
    <div class="grid grid-cols-1 gap-4" *ngIf="followingList.length > 0; else noFollowing">
        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm hover:shadow-md transition-all" 
             *ngFor="let user of followingList">
            <div class="flex items-center space-x-4">
                <!-- Profile Image -->
                <div class="bg-gray-200 w-12 h-12 rounded-full flex-shrink-0 overflow-hidden">
                    <img [src]="user.profileimg_url || 'default-profile.png'" 
                         alt="Profile" 
                         class="w-full h-full object-cover"
                         onerror="this.src='default-profile.png'">
                </div>
                
                <!-- User Info -->
                <div class="flex-1 min-w-0">
                    <h3 class="font-bold text-base lg:text-lg truncate pointer"  (click)="viewProfile(user.id)">{{ user.name }}</h3>
                     <p class="text-sm lg:text-base text-wattpad-light">{{ followerCount || 0 }} {{t('FOLLOWERS')}} • 
    {{ stories.length || 0 }} {{t('STORIES')}}</p>
                </div>
                
                <!-- Follow Button -->
                <!-- <button 
                    class="text-xs lg:text-sm px-3 py-1 rounded-full transition-colors"
                    [class.bg-gray-200]="!isFollowingMap[user.id]"
                    [class.dark:bg-gray-700]="!isFollowingMap[user.id]"
                    [class.hover:bg-gray-300]="!isFollowingMap[user.id]"
                    [class.dark:hover:bg-gray-600]="!isFollowingMap[user.id]"
                    [class.bg-wattpad-primary]="isFollowingMap[user.id]"
                    [class.text-white]="isFollowingMap[user.id]"
                    (click)="toggleFollow(user.id)">
                    {{ isFollowingMap[user.id] ? 'Following' : 'Follow' }}
                </button> -->
            </div>
        </div>      
    </div>
    
    <ng-template #noFollowing>
        <p class="text-gray-500 dark:text-gray-400">{{t('NOT_FOLLOWING_ANYONE')}}.</p>
    </ng-template>
</div>
              </div>
            </div>
        
    </main>

   