import {
  AfterViewInit,
  Component,
  OnDestroy,
  OnInit,
  PLATFORM_ID,
  inject
} from '@angular/core';
import { isPlatformBrowser, NgOptimizedImage } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { RouterLink } from '@angular/router';
import { AdSlotComponent } from '../../components/ad-slot/ad-slot.component';
import { ScrollAnimationService } from '../../services/scroll-animation.service';
import { SeoService } from '../../services/seo.service';

interface GalleryItem {
  src: string;
  titleKey: string;
  descriptionKey: string;
}

@Component({
  selector: 'app-gallery',
  standalone: true,
  imports: [
    NgOptimizedImage,
    TranslateModule,
    RouterLink,
    AdSlotComponent
  ],
  templateUrl: './gallery.component.html'
})
export class GalleryComponent implements OnInit, AfterViewInit, OnDestroy {
  readonly galleryItems: GalleryItem[] = [
    {
      src: '/images/screenshots/screenshot_main.png',
      titleKey: 'pages.gallery.items.mainChatView.title',
      descriptionKey: 'pages.gallery.items.mainChatView.description'
    },
    {
      src: '/images/screenshots/screenshare_gaming.png',
      titleKey: 'pages.gallery.items.gamingScreenShare.title',
      descriptionKey: 'pages.gallery.items.gamingScreenShare.description'
    },
    {
      src: '/images/screenshots/serverViewScreen.png',
      titleKey: 'pages.gallery.items.serverOverview.title',
      descriptionKey: 'pages.gallery.items.serverOverview.description'
    },
    {
      src: '/images/screenshots/music.png',
      titleKey: 'pages.gallery.items.musicAndVoice.title',
      descriptionKey: 'pages.gallery.items.musicAndVoice.description'
    },
    {
      src: '/images/screenshots/videos.png',
      titleKey: 'pages.gallery.items.videoSharing.title',
      descriptionKey: 'pages.gallery.items.videoSharing.description'
    },
    {
      src: '/images/screenshots/filedownload.png',
      titleKey: 'pages.gallery.items.fileTransfers.title',
      descriptionKey: 'pages.gallery.items.fileTransfers.description'
    },
    {
      src: '/images/screenshots/gif.png',
      titleKey: 'pages.gallery.items.richMediaChat.title',
      descriptionKey: 'pages.gallery.items.richMediaChat.description'
    }
  ];

  private readonly seoService = inject(SeoService);
  private readonly scrollAnimation = inject(ScrollAnimationService);
  private readonly platformId = inject(PLATFORM_ID);

  ngOnInit(): void {
    this.seoService.updateFromTranslations('pages.gallery.seo', {
      url: 'https://toju.app/gallery'
    });
  }

  ngAfterViewInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      setTimeout(() => this.scrollAnimation.init(), 100);
    }
  }

  ngOnDestroy(): void {
    this.scrollAnimation.destroy();
  }
}
