<app-language-popup></app-language-popup>
<app-header></app-header>

<main class="container mx-auto px-4 pb-6 lg:px-6 lg:py-8">
    <!-- Empty State - Jab koi story nahi hai -->
    <section *ngIf="allLatestStories.length === 0"
        class="text-center py-12 lg:py-20">
        <div class="max-w-2xl mx-auto">
            <div
                class="text-6xl lg:text-8xl text-gray-300 dark:text-gray-600 mb-4">
                <i class="fas fa-book-open"></i>
            </div>
            <h3
                class="text-xl lg:text-2xl font-bold text-gray-700 dark:text-gray-300 mb-4">
                {{ getEmptyStateMessage() }}
            </h3>
            <p class="text-gray-500 dark:text-gray-400 mb-6 lg:mb-8"
                [innerHTML]="getEmptyStateSubtitle()">
            </p>
            <button
                *ngIf="isLoggedIn"
                (click)="createNewStory()"
                class="bg-wattpad-primary text-white px-6 py-3 rounded-lg hover:bg-[#E5274B] transition-colors font-medium">
                {{ t('WRITE_FIRST_STORY') }}
            </button>
            <div *ngIf="!isLoggedIn" class="space-x-4">
                <button
                    (click)="navigateToLogin()"
                    class="bg-wattpad-primary text-white px-6 py-3 rounded-lg hover:bg-[#E5274B] transition-colors font-medium">
                    {{ t('LOGIN') }}
                </button>

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

    <!-- All Other Content - Jab stories available hain -->
    <div *ngIf="allLatestStories.length > 0">
        <!-- Hero Carousel -->
      <!-- Hero Carousel -->
<section class="mt-4 mb-8 lg:mb-12 relative herobanner" *ngIf="allLatestStories.length > 0">
    
    <!-- Left Arrow - Only show when there are featured stories -->
    <button
        *ngIf="featuredStories.length > 0"
        (click)="scrollLeft()"
        class="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white/80 text-wattpad-primary p-2 rounded-full shadow hover:bg-white transition">
        <i class="fas fa-chevron-left"></i>
    </button>

    <!-- Carousel container -->
    <div #carousel class="carousel hide-scrollbar flex overflow-x-auto space-x-4 pb-4 lg:space-x-6 lg:pb-6 scroll-smooth relative">
        
        <!-- Dynamic carousel items - Only show when featured stories exist -->
        <div
            class="carousel-item w-full flex-shrink-0 lg:w-2/3"
            *ngFor="let story of featuredStories">
            <div class="relative rounded-xl overflow-hidden h-48 lg:h-80">
                <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent z-10"></div>
                <div class="bg-black h-full w-full flex items-center justify-center">
                    <img
                        [src]="story.featured_image ? (storyImgPath + '/' + story.featured_image) : (storyImgPath + '/' + story.story_image)"
                        [alt]="story.story_title"
                        class="object-cover h-full" />
                </div>
                <div
                    class="absolute bottom-0 left-0 p-6 z-20 text-white cursor-pointer"
                    (click)="goToSeries(story.id, story.story_title)">
                    <span
                        class="text-sm font-medium bg-wattpad-primary px-2 py-1 rounded">TRENDING</span>
                    <h2 class="text-2xl lg:text-4xl font-bold mt-2">
                        {{ story.story_title }}
                    </h2>
                    <p class="text-sm lg:text-base mt-1">
                        By {{ story.author_name }} • {{ formatCount(story.views) }} {{ t('READS') }} • Updated recently
                    </p>
                    <div class="story-progress w-full mt-3 rounded">
                        <div
                            class="story-progress-bar rounded"
                            [style.width]="getProgress(story.id) + '%'">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Empty state for hero carousel when no featured stories -->
        <!-- <div *ngIf="featuredStories.length === 0" class="carousel-item w-full flex-shrink-0 lg:w-2/3">
            <div class="relative rounded-xl overflow-hidden h-48 lg:h-80 bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
                <div class="text-center text-gray-500 dark:text-gray-400">
                    <i class="fas fa-image text-4xl mb-2"></i>
                    <p class="text-lg">No featured stories available</p>
                </div>
            </div>
        </div> -->

    </div>

    <!-- Right Arrow - Only show when there are featured stories -->
    <button
        *ngIf="featuredStories.length > 0"
        (click)="scrollRight()"
        class="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white/80 text-wattpad-primary p-2 rounded-full shadow hover:bg-white transition">
        <i class="fas fa-chevron-right"></i>
    </button>
</section>

        <!-- Trending Stories -->
        <section class="mb-8 lg:mb-12 relative">
            <div class="flex justify-between items-center mb-4 lg:mb-6">
                <h2 class="text-xl lg:text-2xl font-bold">{{ t('NEW_RELEASES')
                    }}</h2>
                <div class="text-center mt-4"
                    *ngIf="allLatestStories.length > 6">
                    <a (click)="toggleSeeMore()" href="allstories"
                        class="text-wattpad-primary text-sm lg:text-base font-medium hover:underline">
                        {{t("SEE_MORE")}}
                    </a>
                </div>
            </div>

            <!-- Carousel Wrapper -->
            <div class="carousel-container relative">
                <!-- Left Arrow -->

                <!-- Carousel -->
                <div
                    class="carousel hide-scrollbar flex overflow-x-auto space-x-4 pb-4 lg:space-x-6 lg:pb-6">
                    <div
                        class="carousel-item w-32 flex-shrink-0 lg:w-48 pointer"
                        *ngFor="let story of stories; let i = index">
                        <div class="relative story-card">
                            <div
                                (click)="goToSeries(story.id, story.story_title)"
                                class="text-center rounded-lg story-cover aspect-[4/6] bg-gray-200 dark:bg-gray-700 overflow-hidden">
                                <img *ngIf="story.story_image"
                                    [src]="storyImgPath + '/' + story.story_image"
                                    alt="{{ story.story_title }}">
                                <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>

                            <button (click)="addToLibrary(story.id)"
                                class="absolute top-2 right-2 bg-white/90 text-wattpad-primary p-1 rounded-full hover:bg-white transition-colors"
                                [title]="likedStories.includes(story.id) ? 'Remove from Library' : 'Add to Library'">
                                <i *ngIf="likedStories.includes(story.id)"
                                    class="fas fa-heart text-red-500"></i>
                                <i *ngIf="!likedStories.includes(story.id)"
                                    class="far fa-heart text-gray-400"></i>
                            </button>
                        </div>
                        <h3 class="font-bold text-sm lg:text-base mt-2 truncate"
                            [innerHTML]="story.story_title"></h3>
                        <p class="text-xs lg:text-sm text-wattpad-light">By {{
                            story.author_name }}</p>
                        <div
                            class="flex items-center mt-1 text-xs lg:text-sm text-wattpad-light">
                            <i class="fas fa-star text-yellow-400 mr-1"></i>
                            <span>{{ story.average_rating || 0 }}</span>
                            <span class="mx-1">•</span>
                            <span>{{ formatCount(story.views) }} {{t('READS')}}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Right Arrow -->

            </div>
        </section>
        <!-- Category Sections -->
        <section class="mb-8 lg:mb-12" *ngFor="let cat of categoryOrder">
            <ng-container *ngIf="categoryWiseStories[cat]?.length">
                <div class="flex justify-between items-center mb-4 lg:mb-6">
                    <h2 class="text-xl lg:text-2xl font-bold">{{ cat }}</h2>
                    <a
                        [routerLink]="['/category', categoryWiseStories[cat][0].category, cat.toLowerCase().replace(' ', '-')]"
                        class="text-wattpad-primary text-sm lg:text-base font-medium hover:underline">{{t('SEE_ALL')}}</a>
                </div>

                <div
                    class="carousel hide-scrollbar flex overflow-x-auto space-x-4 pb-4 lg:space-x-6 lg:pb-6">
                    <div
                        class="carousel-item w-32 flex-shrink-0 lg:w-48 pointer"
                        *ngFor="let story of categoryWiseStories[cat]">
                        <!-- Card Content -->
                        <div class="relative story-card">
                            <div
                                (click)="goToSeries(story.id, story.story_title)"
                                class="text-center rounded-lg story-cover aspect-[4/6] bg-gray-200 dark:bg-gray-700 overflow-hidden">
                                <img *ngIf="story.story_image"
                                    [src]="storyImgPath + '/' + story.story_image"
                                    alt="{{ story.story_title }}">
                                <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>

                            <button (click)="addToLibrary(story.id)"
                                class="absolute top-2 right-2 bg-white/90 text-wattpad-primary p-1 rounded-full hover:bg-white transition-colors"
                                [title]="likedStories.includes(story.id) ? 'Remove from Library' : 'Add to Library'">
                                <i *ngIf="likedStories.includes(story.id)"
                                    class="fas fa-heart text-red-500"></i>
                                <i *ngIf="!likedStories.includes(story.id)"
                                    class="far fa-heart text-gray-400"></i>
                            </button>
                        </div>

                        <h3
                            class="font-bold text-sm lg:text-base mt-2 truncate">{{
                            story.story_title }}</h3>
                        <p class="text-xs lg:text-sm text-wattpad-light">By {{
                            story.author_name }}</p>
                        <div
                            class="flex items-center mt-1 text-xs lg:text-sm text-wattpad-light">
                            <i class="fas fa-star text-yellow-400 mr-1"></i>
                            <span>{{ story.average_rating || 0 }}</span>
                            <span class="mx-1">•</span>
                            <span>{{ formatCount(story.views) }} {{t('READS')}}
                            </span>
                        </div>
                    </div>
                </div>
            </ng-container>
        </section>

        <!-- Categories -->
        <section class="mb-8 lg:mb-12">
            <div class="flex justify-between items-center mb-4 lg:mb-6">
                <h2 class="text-xl lg:text-2xl font-bold">{{ t('CATEGORIES')
                    }}</h2>
                <div class="text-center mt-4"
                    *ngIf="categoryColumns.length > 12">
                    <button (click)="toggleCategories()"
                        class="text-wattpad-primary text-sm lg:text-base font-medium hover:underline">
                        {{ showAllCategories ? 'See Less' : 'See All' }}
                    </button>
                </div>
            </div>

            <div class="grid grid-cols-3 gap-3 lg:grid-cols-6 lg:gap-4">
                <a *ngFor="let category of visibleCategories"
                    [routerLink]="['/category', category.id, category.categoryName.toLowerCase().replace(' ', '-')]"
                    class="bg-white dark:bg-gray-800 rounded-lg p-4 text-center hover:shadow-md transition-all hover:-translate-y-1">
                    <div class="text-wattpad-primary text-2xl mb-2">
                        <i class="fas {{category.icon}}"></i>
                    </div>
                    <span
                        class="font-medium text-sm lg:text-base">{{category.categoryName}}</span>
                </a>
            </div>
        </section>

        <!-- Top Writers -->
        <section class="mb-8 lg:mb-12" *ngIf="topAuthors.length > 0">
            <div class="flex justify-between items-center mb-4 lg:mb-6">
                <h2
                    class="text-xl lg:text-2xl font-bold">{{t('TOP_WRITERS')}}</h2>
            </div>

            <div
                class="carousel hide-scrollbar flex overflow-x-auto space-x-4 pb-4 lg:space-x-6 lg:pb-6">
                <!-- Writer Card -->
                <div class="carousel-item flex-shrink-0 pointer"
                    *ngFor="let author of topAuthors.slice(0, 7)"
                    (click)="viewProfile(author.user_id)">
                    <div
                        class="bg-white dark:bg-gray-800 rounded-lg p-4 text-center w-32 lg:w-40 shadow hover:shadow-lg transition-all writer-card">
                        <div
                            class="bg-gray-200 dark:bg-gray-700 h-20 w-20 overflow-auto lg:h-24 lg:w-24 mx-auto rounded-full mb-3 flex items-center justify-center">
                            <img
                                [src]="author.profileImg || 'default-profile.png'"
                                alt="Author Image"
                                class="w-full h-full object-cover rounded-full">
                        </div>
                        <h3 class="font-bold text-sm lg:text-base truncate">{{
                            author.author_name }}</h3>
                        <p class="text-xs lg:text-sm text-wattpad-light">{{
                            author.story_count }} {{t('STORIES')}}</p>
                        <button
                            class="mt-2 text-xs lg:text-sm px-3 py-1 rounded-full transition-colors"
                            [ngClass]="{
                            'bg-wattpad-primary text-white': !isFollowingMap[author.user_id],
                            'bg-white text-wattpad-primary border border-wattpad-primary': isFollowingMap[author.user_id]
                        }" (click)="toggleFollow(author.user_id)">
                            {{ isFollowingMap[author.user_id] ? 'Unfollow' :
                            'Follow' }}
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- Continue Reading -->
        <section class="mb-8 lg:mb-12" *ngIf="userProgress.length > 0">
            <div class="flex justify-between items-center mb-4 lg:mb-6">
                <h2
                    class="text-xl lg:text-2xl font-bold">{{t('CONTINUE_READING')}}</h2>
            </div>

            <div>
                <div
                    (click)="resumeReading(userProgress[0].lastReadPartId, userProgress[0].title)"
                    class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow pointer">
                    <div class="flex items-center space-x-3 lg:space-x-4">
                        <div
                            class="bg-gray-200 w-16 h-16 lg:w-20 lg:h-20 rounded-lg flex-shrink-0 flex  items-center justify-center overflow-h">
                            <img *ngIf="userProgress[0].image"
                                [src]="userProgress[0].image" alt="Story Cover"
                                class="w-full h-full object-cover" />
                        </div>
                        <div class="flex-1 min-w-0">
                            <h3
                                class="font-bold text-sm lg:text-base truncate">{{
                                userProgress[0].title }}</h3>
                            <p
                                class="text-xs lg:text-sm text-wattpad-light truncate">
                                Read: {{ userProgress[0].part }} of {{
                                userProgress[0].total }} - {{
                                userProgress[0].title }}
                            </p>
                            <div
                                class="w-full bg-gray-200 dark:bg-gray-700 h-1.5 rounded-full mt-2">
                                <div
                                    class="bg-wattpad-primary h-1.5 rounded-full"
                                    [style.width]="userProgress[0].percent + '%'">
                                </div>
                            </div>
                        </div>
                        <button
                            class="text-wattpad-primary hover:text-[#E5274B] transition-colors pointer"
                            (click)="resumeReading(userProgress[0].lastReadPartId, userProgress[0].title); $event.stopPropagation()">
                            <i class="fas fa-play text-lg lg:text-xl"></i>
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- New Releases -->
        <section class="mb-8 lg:mb-12">
            <div class="flex justify-between items-center mb-4 lg:mb-6">
                <h2
                    class="text-xl lg:text-2xl font-bold">{{t('NEW_RELEASES')}}</h2>
                <a href="allstories"
                    class="text-wattpad-primary text-sm lg:text-base font-medium hover:underline">{{t('SEE_ALL')}}</a>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-6">
                <div
                    class="pointer bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm hover:shadow-md transition-all"
                    *ngFor="let story of latestStories"
                    (click)="goToSeries(story.id, story.story_title)">
                    <div class="flex space-x-3 lg: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">
                            <img *ngIf="story.story_image"
                                [src]="storyImgPath + '/' + story.story_image"
                                alt="Cover"
                                class="w-full h-full object-cover">
                        </div>
                        <div>
                            <h3 class="font-bold text-sm lg:text-base">{{
                                story.story_title }}</h3>
                            <p
                                class="text-xs lg:text-sm text-wattpad-light mb-2">{{t('BY')}}
                                {{ story.author_name }}</p>
                            <div
                                class="flex items-center text-xs lg:text-sm text-wattpad-light mb-2">
                                <span>{{ formatCount(story.views) }}
                                    {{t('READS')}}</span>
                            </div>
                            <p class="text-xs lg:text-sm line-clamp-2">{{
                                story.description || 'No description available'
                                }}
                            </p>
                            <button
                                class="mt-3 text-xs lg:text-sm bg-wattpad-primary text-white px-3 py-1 rounded-full hover:bg-[#E5274B] transition-colors">
                                {{t('READ_NOW')}}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
    </div>
    <!-- Hero Carousel - Mouse drag support ke saath -->
<section class="mt-4 mb-8 lg:mb-12 relative herobanner" *ngIf="allLatestStories.length > 0">
    
    <!-- Left Arrow -->
    <button
        *ngIf="featuredStories.length > 0"
        (click)="scrollLeft()"
        class="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white/80 text-wattpad-primary p-2 rounded-full shadow hover:bg-white transition">
        <i class="fas fa-chevron-left"></i>
    </button>

    <!-- Carousel container with mouse events -->
    <div 
        #carousel 
        class="carousel hide-scrollbar flex overflow-x-auto space-x-4 pb-4 lg:space-x-6 lg:pb-6 scroll-smooth relative cursor-grab active:cursor-grabbing"
        (mousedown)="onMouseDown($event)"
        (mousemove)="onMouseMove($event)"
        (mouseup)="onMouseUp()"
        (mouseleave)="onMouseUp()"
        (scroll)="onScroll()">
        
        <!-- Dynamic carousel items -->
        <div
            class="carousel-item w-full flex-shrink-0 lg:w-2/3"
            *ngFor="let story of featuredStories; let i = index">
            <div class="relative rounded-xl overflow-hidden h-48 lg:h-80">
                <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent z-10"></div>
                <div class="bg-black h-full w-full flex items-center justify-center">
                    <img
                        [src]="story.featured_image ? (storyImgPath + '/' + story.featured_image) : (storyImgPath + '/' + story.story_image)"
                        [alt]="story.story_title"
                        class="object-cover h-full" />
                </div>
                <div
                    class="absolute bottom-0 left-0 p-6 z-20 text-white cursor-pointer"
                    (click)="goToSeries(story.id, story.story_title)">
                    <span
                        class="text-sm font-medium bg-wattpad-primary px-2 py-1 rounded">TRENDING</span>
                    <h2 class="text-2xl lg:text-4xl font-bold mt-2">
                        {{ story.story_title }}
                    </h2>
                    <p class="text-sm lg:text-base mt-1">
                        By {{ story.author_name }} • {{ formatCount(story.views) }} {{ t('READS') }} • Updated recently
                    </p>
                    <div class="story-progress w-full mt-3 rounded">
                        <div
                            class="story-progress-bar rounded"
                            [style.width]="getProgress(story.id) + '%'">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Right Arrow -->
    <button
        *ngIf="featuredStories.length > 0"
        (click)="scrollRight()"
        class="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white/80 text-wattpad-primary p-2 rounded-full shadow hover:bg-white transition">
        <i class="fas fa-chevron-right"></i>
    </button>
</section>
</main>