 <app-header></app-header>
 <main class="container mx-auto px-0 lg:px-6">
<ng-container *ngIf="deleteMessage" >
  <div class="success-message" class="fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded shadow z-50">
    Story deleted successfully!
    
  </div>
</ng-container>        <!-- Profile Cover -->
        <!-- Cover -->
<div class="relative h-48 lg:h-64 cursor-pointer" (click)="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>

  <!-- Overlay camera icon -->
  <div 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 cursor-pointer" (click)="$event.stopPropagation(); triggerProfileUpload();">
    <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 -->
<input type="file" #profileInput accept="image/*" (change)="onProfileSelected($event)" hidden>
<input 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 id="followBtn" class="px-6 py-2 rounded-full font-medium bg-wattpad-primary text-white hover:bg-[#E5274B] transition-colors">
                        Follow
                    </button>
                    <a href="new" class="px-6 py-2 rounded-full font-medium bg-wattpad-secondary text-white hover:bg-[#009966] transition-colors">
                        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">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">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">Following</span>
                </div>
            </div>

            <!-- About -->
            <div class="mt-4" *ngIf="userDetail?.about">
                <h3 class="font-bold">लेखक के बारे में</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">
      रचनाएँ ({{ totalStories }})
    </button>
    <button 
      [class]="getTabClass('followers')"
      (click)="setActiveTab('followers')"
      data-tab="followers">
      Followers ({{ followersList.length }})
    </button>
    <button 
      [class]="getTabClass('following')"
      (click)="setActiveTab('following')"
      data-tab="following">
      Following ({{ followingList.length }})
    </button>
  </div>
</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">
                        <!-- Story Card 1 - Published -->
                        <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm hover:shadow-md transition-all pointer relative" *ngFor="let story of stories, let i = index" (click)="continueWriting(story.id, story.story_title)">
                            <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 [src]="storyImgPath + '/' + story.story_image" alt="{{ story.story_title }}">
                                </div>
                                <div class="flex-1 min-w-0">
                                    <h3 class="font-bold text-lg lg:text-xl">{{story.story_title}}
                                        
                                        <span 
  [ngClass]="{
    'story-status': true,
    'status-published bg-success': story.story_status == '1',
    'status-draft bg-warning': story.story_status == '0'
  }">
  {{ story.story_status == '0' ? 'Draft' : 'Published' }}
</span>
                                    </h3>
                                    <p class="text-sm lg:text-base text-wattpad-light mt-1">{{story.category}} • {{story.total_views}} reads • {{story.total_episodes}} episodes</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}} ({{story.total_ratings}})</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">Updated: {{story.created_at}}</span>
                                        <button class="text-xs lg:text-sm bg-wattpad-primary text-white px-3 py-1 rounded-full hover:bg-[#E5274B] transition-colors">
                                            Read
                                        </button>
                                        <button type="button" class="deletebutton" (click)="deleteStory(story.id)" (click)="$event.stopPropagation()">
  <i class="fas fa-trash text-gray-500 hover:text-red-500 transition-colors "></i>
</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                       <div *ngIf="stories.length === 0" class="alert alert-info">
  No stories found. Start writing a new one!
</div>
                        <!-- Add more story cards as needed -->
                    </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">{{ follower.name }}</h3>
                                    <p class="text-sm lg:text-base text-wattpad-light">12.5k followers • 8 stories</p>
                                </div>
                                <button class="text-xs lg:text-sm bg-wattpad-primary text-white px-3 py-1 rounded-full hover:bg-[#E5274B] transition-colors">
                                    Follow
                                </button>
                            </div>
                        </div>  
                    </div>
                     <ng-template #noFollowers>
      <p>No followers yet.</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">
                        <!-- Following Card 1 -->
                        <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">
                                <div class="bg-gray-200 w-12 h-12 rounded-full flex-shrink-0 flex items-center justify-center">
                                    <span class="text-gray-500">{{ user.name.charAt(0) }}</span>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <h3 class="font-bold text-base lg:text-lg">{{ user.name }}</h3>
                                    <p class="text-sm lg:text-base text-wattpad-light">20.1k followers • 25 stories</p>
                                </div>
                                <button class="text-xs lg:text-sm bg-gray-200 dark:bg-gray-700 px-3 py-1 rounded-full hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
                                    Following
                                </button>
                            </div>
                        </div>      
                    </div>
                    <ng-template #noFollowing>
      <p>Not following anyone yet.</p>
    </ng-template>
                </div>
              </div>
            </div>
        
    </main>

    <!-- Desktop Footer -->
    <footer class="hidden lg:block bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-12">
        <div class="container mx-auto px-6">
            <div class="grid grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-bold text-wattpad-primary mb-4">StoryVerse</h3>
                    <p class="text-sm text-wattpad-light mb-4">The world's most vibrant storytelling community.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-wattpad-light hover:text-wattpad-primary transition-colors">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="text-wattpad-light hover:text-wattpad-primary transition-colors">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="text-wattpad-light hover:text-wattpad-primary transition-colors">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="text-wattpad-light hover:text-wattpad-primary transition-colors">
                            <i class="fab fa-tiktok"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="font-bold mb-4">Discover</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-sm text-wattpad-light hover:text-wattpad-primary transition-colors">Browse Stories</a></li>
                        <li><a href="#" class="text-sm text-wattpad-light hover:text-wattpad-primary transition-colors">Wattpad Picks</a></li>
                        <li><a href="#" class="text-sm text-wattpad-light hover:text-wattpad-primary transition-colors">Community</a></li>
                        <li><a href="#" class="text-sm text-wattpad-light hover:text-wattpad-primary transition-colors">Events</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-bold mb-4">Write</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-sm text-wattpad-light hover:text-wattpad-primary transition-colors">Start Writing</a></li>
                        <li><a href="#" class="text-sm text-wattpad-light hover:text-wattpad-primary transition-colors">Writer Resources</a></li>
                        <li><a href="#" class="text-sm text-wattpad-light hover:text-wattpad-primary transition-colors">Writer Contests</a></li>
                        <li><a href="#" class="text-sm text-wattpad-light hover:text-wattpad-primary transition-colors">Writer Programs</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-bold mb-4">Company</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-sm text-wattpad-light hover:text-wattpad-primary transition-colors">About</a></li>
                        <li><a href="#" class="text-sm text-wattpad-light hover:text-wattpad-primary transition-colors">Careers</a></li>
                        <li><a href="#" class="text-sm text-wattpad-light hover:text-wattpad-primary transition-colors">Press</a></li>
                        <li><a href="#" class="text-sm text-wattpad-light hover:text-wattpad-primary transition-colors">Contact</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-200 dark:border-gray-700 mt-12 pt-8">
                <div class="flex flex-wrap justify-between items-center">
                    <p class="text-xs text-wattpad-light">&copy; 2023 StoryVerse. All rights reserved.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-xs text-wattpad-light hover:text-wattpad-primary transition-colors">Terms</a>
                        <a href="#" class="text-xs text-wattpad-light hover:text-wattpad-primary transition-colors">Privacy</a>
                        <a href="#" class="text-xs text-wattpad-light hover:text-wattpad-primary transition-colors">Guidelines</a>
                        <a href="#" class="text-xs text-wattpad-light hover:text-wattpad-primary transition-colors">Help</a>
                    </div>
                </div>
            </div>
        </div>
    </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">
        <div class="flex justify-around items-center h-full">
            <a href="#" class="text-gray-500 dark:text-gray-400 flex flex-col items-center">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">Home</span>
            </a>
            <a href="#" class="text-gray-500 dark:text-gray-400 flex flex-col items-center">
                <i class="fas fa-search text-xl"></i>
                <span class="text-xs mt-1">Search</span>
            </a>
            <a href="#" class="fab-button bg-wattpad-primary text-white p-4 rounded-full -mt-10 flex items-center justify-center">
                <i class="fas fa-plus text-xl"></i>
            </a>
            <a href="#" class="text-wattpad-primary flex flex-col items-center">
                <i class="fas fa-bookmark text-xl"></i>
                <span class="text-xs mt-1">Library</span>
            </a>
            <a href="#" class="text-gray-500 dark:text-gray-400 flex flex-col items-center">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">Profile</span>
            </a>
        </div>
    </nav>

    <!-- Write Story Modal -->
    <div id="writeStoryModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white dark:bg-gray-800 rounded-xl w-full max-w-4xl max-h-[90vh] overflow-auto">
            <div class="sticky top-0 bg-white dark:bg-gray-800 p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
                <h3 class="text-xl font-bold">Create New Story</h3>
                <button id="closeModal" class="text-gray-500 dark:text-gray-300 hover:text-wattpad-primary">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 p-6">
                <!-- Left Column - Cover Upload -->
                <div>
                    <div class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg h-64 flex flex-col items-center justify-center p-4">
                        <i class="fas fa-cloud-upload-alt text-4xl text-wattpad-light mb-3"></i>
                        <p class="text-center text-wattpad-light mb-3">Upload your story cover</p>
                        <button class="px-4 py-2 rounded-full font-medium bg-wattpad-primary text-white hover:bg-[#E5274B] transition-colors">
                            Select Image
                        </button>
                        <p class="text-xs text-wattpad-light mt-2">JPEG or PNG, 800x1200 recommended</p>
                    </div>
                </div>
                
                <!-- Right Column - Form -->
                <div>
                    <div class="space-y-4">
                        <!-- Title -->
                        <div>
                            <label class="block text-sm font-medium mb-1">Title</label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-wattpad-primary focus:border-transparent dark:bg-gray-700">
                        </div>
                        
                        <!-- Description -->
                        <div>
                            <label class="block text-sm font-medium mb-1">Description</label>
                            <textarea rows="4" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-wattpad-primary focus:border-transparent dark:bg-gray-700"></textarea>
                        </div>
                        
                        <!-- Category -->
                        <div>
                            <label class="block text-sm font-medium mb-1">Category</label>
                            <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-wattpad-primary focus:border-transparent dark:bg-gray-700">
                                <option>Select a category</option>
                                <option>Romance</option>
                                <option>Fantasy</option>
                                <option>Mystery</option>
                                <option>Sci-Fi</option>
                                <option>Horror</option>
                                <option>Teen Fiction</option>
                            </select>
                        </div>
                        
                        <!-- Tags -->
                        <div>
                            <label class="block text-sm font-medium mb-1">Tags (up to 5)</label>
                            <div class="flex flex-wrap gap-2 mb-2">
                                <span class="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded-full text-xs">#romance</span>
                                <span class="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded-full text-xs">#mystery</span>
                            </div>
                            <input type="text" placeholder="Add tags..." class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-wattpad-primary focus:border-transparent dark:bg-gray-700">
                        </div>
                        
                        <!-- Target Audience -->
                        <div>
                            <label class="block text-sm font-medium mb-1">Target Audience</label>
                            <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-wattpad-primary focus:border-transparent dark:bg-gray-700">
                                <option>All Audiences</option>
                                <option>Teen</option>
                                <option>Young Adult</option>
                                <option>Adult</option>
                            </select>
                        </div>
                        
                        <!-- Language -->
                        <div>
                            <label class="block text-sm font-medium mb-1">Language</label>
                            <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-wattpad-primary focus:border-transparent dark:bg-gray-700">
                                <option>English</option>
                                <option>Hindi</option>
                                <option>Spanish</option>
                                <option>French</option>
                            </select>
                        </div>
                        
                        <!-- Copyright -->
                        <div>
                            <label class="block text-sm font-medium mb-1">Copyright</label>
                            <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-wattpad-primary focus:border-transparent dark:bg-gray-700">
                                <option>All Rights Reserved</option>
                                <option>Public Domain</option>
                                <option>Creative Commons</option>
                            </select>
                        </div>
                        
                        <!-- Rating Toggle -->
                        <div class="flex items-center">
                            <label class="inline-flex items-center cursor-pointer">
                                <input type="checkbox" value="" class="sr-only peer" checked>
                                <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-wattpad-primary/30 dark:peer-focus:ring-wattpad-primary/50 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-wattpad-primary"></div>
                                <span class="ms-3 text-sm font-medium">Mature Content</span>
                            </label>
                        </div>
                    </div>
                    
                    <!-- Buttons -->
                    <div class="flex justify-end space-x-3 mt-6">
                        <button class="px-4 py-2 rounded-full font-medium border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                            Cancel
                        </button>
                        <button class="px-6 py-2 rounded-full font-medium bg-wattpad-primary text-white hover:bg-[#E5274B] transition-colors">
                            Continue
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>