<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>
                    <div class="pointer border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg h-64 flex flex-col items-center justify-center p-4 drag" (drop)="onFileDropped($event)"
                    (dragover)="onDragOver($event)">
                        <i class="fas fa-cloud-upload-alt text-4xl text-wattpad-light mb-3"></i>
                        <p class="text-center text-wattpad-light mb-3">{{t('UPLOAD_STORY_COVER')}}</p>
                        <div class="selectfile">
                            <input type="file" class="pointer" (change)="onFileSelected($event)" accept=".jpg,.jpeg,.png,image/jpeg,image/png">
                        </div>
                        <!-- <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">{{t('JPEG_PNG_RECOMMENDED')}}</p>
                    </div>
                    <div class="mt-4 text-center">
                    <a href="javascript:void(0)" 
                       class="text-wattpad-primary hover:text-[#E5274B] font-medium text-sm flex items-center justify-center gap-2"
                       (click)="openCreateCoverPopup()">
                        <i class="fas fa-magic"></i>
                        {{t('CREATE_COVER')}}
                    </a>
                </div>
                    <div class="mt-3" *ngIf="imagePreview">
                    <img [src]="imagePreview" class="img-fluid border" style="width: 256px; height: 400px;">
                </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">
        <div *ngIf="message" class="mb-4 p-3 rounded-lg" 
       [ngClass]="{
         'bg-green-100 text-green-800': message.includes('successfully'),
         'bg-red-100 text-red-800': message.includes('wrong')
       }">
    {{ message }}
  </div>
        <article class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm mb-6">
            
            <h1 class="text-2xl lg:text-3xl font-bold mb-4">{{storyId ? t('UPDATE_STORY') : t('CREATE_NEW_STORY')}} </h1>
            
             <form [formGroup]="storyForm" (ngSubmit)="onSubmit()">
                
                    <div class="space-y-4">
                        <!-- Title -->
                        <div>
                            <label class="block text-sm font-medium mb-1">{{t('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" formControlName="story_title">
                            <div *ngIf="storyForm.get('story_title')?.invalid && storyForm.get('story_title')?.touched"
       class="text-red-500 text-sm mt-1">
    * Please enter the story title
  </div>
                        </div>
                        
                        <!-- Description -->
                        <div>
                            <label class="block text-sm font-medium mb-1">{{t('DESCRIPTION')}} <span class="text-xs text-wattpad-light mt-2"> Write your story short description</span></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" formControlName="story_description"></textarea>
                            
                            <div *ngIf="storyForm.get('story_title')?.invalid && storyForm.get('story_title')?.touched"
       class="text-red-500 text-sm mt-1">
    * Please enter short description
  </div>
                        </div>
                        
                        <!-- Category -->
                        <div>
                            <label class="block text-sm font-medium mb-1">{{t('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"
        formControlName="category">
  <option value="">Select a category</option>
  <option *ngFor="let cat of categories" [value]="cat.id">
    {{ cat.categoryName }}
  </option>
</select>
                        </div>
                        
                        <!-- Tags -->
                        <div>
                            <label class="block text-sm font-medium mb-1">{{t('TAGS_UP_TO_5')}}</label>
                            <div class="flex flex-wrap gap-2 mb-2">
                                <input type="hidden" formControlName="tags">
                        <div class="tags-container mt-2">
                            <span class="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded-full text-xs" *ngFor="let tag of tagsList; let i = index">
                                {{ tag }}
                                <button type="button" class="btn-close btn-close-white ms-2" style="font-size: 0.6rem;"
                                    (click)="removeTag(i)" aria-label="Remove">X</button>
                            </span>
                        </div>
                                
                            </div>
                            <input type="text" placeholder="Add tags..." formControlName="tagsInput" 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" (keyup)="onTagsKeyUp($event)">
                        </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" formControlName="audiences">
                                <option value="All Audiences">{{t('ALL_AUDIENCES')}}</option>
                                <option value="Teen">{{t('TEEN')}}</option>
                                <option value="Young Adult">{{t('YOUNG_ADULT')}}</option>
                                <option value="Adult">{{t('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" formControlName="language">
                                <option value="English">{{t('ENGLISH')}}</option>
                                <option value="Marathi">{{t('MARATHI')}}</option>
                                <option value="Hindi">{{t('HINDI')}}</option>
                                <option value="Tamil">{{t('TAMIL')}}</option>
                                <option value="Telgu">{{t('TELUGU')}}</option>
                            </select>
                        </div>
                        
                        <!-- Copyright -->
                        <div>
                            <label class="block text-sm font-medium mb-1">{{t('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" id="" aria-label="Copyright options" formControlName="copyright">
                                
                                <option value="1" selected>All Rights Reserved</option>
                                <option value="2">Public Domain</option>
                                <option value="3">Creative Commons (CC) Attribution</option>
                                <option value="4">(CC) Attrib. NonCommercial</option>
                                <option value="5">(CC) Attrib. NonComm. NoDerivs</option>
                                <option value="6">(CC) Attrib. NonComm. ShareAlike</option>
                                <option value="7">(CC) Attribution-ShareAlike</option>
                                <option value="8">(CC) Attribution-NoDerivs</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
  type="submit"
  class="px-6 py-2 rounded-full font-medium bg-wattpad-primary text-white hover:bg-[#E5274B] transition-colors">
  {{ storyId ? 'Update' : 'Continue' }}
</button>
                    </div>
                </form>
            
            <!-- Next Part CTA -->
            
        </article>

        <!-- Comments 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>
<div *ngIf="showCreateCoverPopup" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <div class="p-6">
            <!-- Header -->
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold">{{t('CREATE_STORY_COVER')}}</h3>
                <button (click)="closeCreateCoverPopup()" 
                        class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>

            <!-- Content -->
            <div class="space-y-4">
                <p class="text-sm text-gray-600 dark:text-gray-300">
                    {{t('COPY_THE_PROMPT_BELOW')}}
                </p>

                <!-- Prompt Textarea -->
                <div>
                    <label class="block text-sm font-medium mb-2">{{t('AI_COVER_PROMPT')}}</label>
                    <textarea 
                        #promptTextarea
                        class="w-full h-40 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 text-sm font-mono"
                        readonly>{{getCoverPrompt()}}</textarea>
                </div>

                <!-- Copy Button -->
                <div class="flex justify-between items-center">
                    <button 
                        (click)="copyPromptToClipboard()"
                        class="px-4 py-2 bg-wattpad-primary text-white rounded-lg hover:bg-[#E5274B] transition-colors flex items-center gap-2">
                        <i class="fas fa-copy"></i>
                        {{t('COPY_PROMPT')}}
                    </button>

                    <a 
                        href="https://sora.chatgpt.com" 
                        target="_blank"
                        class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center gap-2">
                        <i class="fas fa-external-link-alt"></i>
                        {{t('GO_TO_SORA')}}
                    </a>
                </div>

                <!-- Instructions -->
                <div class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
                    <h4 class="font-medium text-blue-800 dark:text-blue-300 mb-2">{{t('INSTRUCTIONS')}}:</h4>
                    <ul class="text-sm text-blue-700 dark:text-blue-400 space-y-1">
                        <li>1. {{t('COPY_THE_PROMPT_ABOVE')}}</li>
                        <li>2. {{t('GO_TO_SORA_WEBSITE')}}</li>
                        <li>3. {{t('PASTE_THE_PROMPT')}}</li>
                        <li>4. {{t('GENERATE_AND_DOWNLOAD')}}</li>
                        <li>5. {{t('UPLOAD_COVER_ABOVE')}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>