<app-header></app-header>

<main class="container mx-auto px-0 lg:px-6 pb-20">
  <!-- Loading Overlay -->
  <div *ngIf="loading" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white p-6 rounded-lg shadow-lg">Loading...</div>
  </div>

  <!-- Success Message -->
  <div *ngIf="successMessage" class="fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded shadow z-50">
    {{ successMessage }}
  </div>

  <!-- Error Message -->
  <div *ngIf="errorMessage" class="fixed top-4 right-4 bg-red-500 text-white px-4 py-2 rounded shadow z-50">
    {{ errorMessage }}
  </div>

  <!-- Cover Image -->
  <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) || 'U' }}</span>
        </ng-template>
        <button class="avatar-edit-btn hover:bg-black/60 transition-colors">
          <i class="fas fa-camera text-xs"></i>
        </button>
      </div>
    </div>
  </div>

  <input type="file" #profileInput accept="image/*" (change)="onProfileSelected($event)" hidden>
  <input type="file" #coverInput accept="image/*" (change)="onCoverSelected($event)" hidden>

  <!-- Profile Form -->
  <div class="px-4 lg:px-8 mt-20">
    <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
      
      <!-- Basic Info -->
      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm mb-6">
        <h2 class="text-xl font-bold mb-6">{{t('BASIC_INFORMATION')}}</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <!-- Name -->
          <div>
            <label class="block text-sm font-medium mb-1">{{t('FULL_NAME')}}</label>
            <input type="text" formControlName="name" 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 *ngIf="profileForm.get('name')?.touched && profileForm.get('name')?.invalid" class="text-red-500 text-sm mt-1">
              {{t('FULL_NAME_REQUIRED')}}
            </div>
          </div>

          <!-- Language -->
          <div>
            <label class="block text-sm font-medium mb-1">{{t('LANGUAGE')}}</label>
            <select formControlName="language" 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 value="English">{{t('ENGLISH')}}</option>
              <option value="Hindi">{{t('HINDI')}}</option>
              <option value="Marathi">{{t('MARATHI')}}</option>
              <option value="Bengali">{{t('BENGALI')}}</option>
              <option value="Tamil">{{t('TAMIL')}}</option>
              <option value="Telugu">{{t('TELUGU')}}</option>
            </select>
          </div>
        </div>

        <!-- About -->
        <div class="mt-6">
          <label class="block text-sm font-medium mb-1">{{t('ABOUT_ME')}}</label>
          <textarea rows="4" formControlName="about" 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>
      </div>

      <!-- Private Info -->
      <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm mb-6">
        <h2 class="text-xl font-bold mb-6">{{t('PRIVATE_INFORMATION')}}</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <!-- Email -->
          <div>
            <label class="block text-sm font-medium mb-1">{{t('EMAIL_ADDRESS')}}</label>
            <input type="email" formControlName="email" 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 *ngIf="profileForm.get('email')?.touched && profileForm.get('email')?.invalid" class="text-red-500 text-sm mt-1">
              {{t('ENTER_VALID_EMAIL')}}
            </div>
          </div>

          <!-- Mobile -->
          <div>
            <label class="block text-sm font-medium mb-1">{{t('MOBILE_NUMBER')}}</label>
            <div class="relative">
              <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">+91</span>
              <input
                type="tel"
                formControlName="mobile"
                maxlength="10"
                readonly
                class="w-full px-10 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 bg-gray-100 dark:bg-gray-600" 
              />
            </div>
            <div class="text-gray-500 text-sm mt-1">
              Mobile number cannot be changed
            </div>
          </div>
        </div>
      </div>

      <!-- Submit -->
      <div class="flex justify-end">
        <button 
          type="submit" 
          [disabled]="profileForm.invalid || loading"
          class="px-6 py-2 rounded-full font-medium bg-wattpad-primary text-white hover:bg-[#E5274B] transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
          {{ loading ? t('UPDATING') : t('UPDATE_PROFILE') }}
        </button>
      </div>
    </form>
  </div>
</main>