import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatDividerModule } from '@angular/material/divider';
import { MatChipsModule } from '@angular/material/chips';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { Subject, takeUntil } from 'rxjs';

import { UpdateChangelogService } from '../../services/mobile/update-changelog.service';
import { UpdateChangelog, ChangelogItem } from '../../interfaces/update-changelog.interface';

@Component({
  selector: 'app-update-splash',
  standalone: true,
  imports: [
    CommonModule,
    MatCardModule,
    MatButtonModule,
    MatIconModule,
    MatDividerModule,
    MatChipsModule
  ],
  templateUrl: './update-splash.component.html',
  styleUrls: ['./update-splash.component.scss'],
  animations: [
    trigger('fadeInOut', [
      state('in', style({ opacity: 1, transform: 'scale(1)' })),
      transition(':enter', [
        style({ opacity: 0, transform: 'scale(0.9)' }),
        animate('300ms ease-out')
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({ opacity: 0, transform: 'scale(0.9)' }))
      ])
    ]),
    trigger('slideUp', [
      transition(':enter', [
        style({ transform: 'translateY(20px)', opacity: 0 }),
        animate('400ms ease-out', style({ transform: 'translateY(0)', opacity: 1 }))
      ])
    ])
  ]
})
export class UpdateSplashComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();
  
  showSplash = false;
  currentChangelog: UpdateChangelog | null = null;

  constructor(
    private updateChangelogService: UpdateChangelogService
  ) {}

  ngOnInit(): void {
    // Escutar mudanças no splash
    this.updateChangelogService.showSplash$
      .pipe(takeUntil(this.destroy$))
      .subscribe(show => {
        this.showSplash = show;
      });

    // Escutar mudanças no changelog atual
    this.updateChangelogService.currentChangelog$
      .pipe(takeUntil(this.destroy$))
      .subscribe(changelog => {
        this.currentChangelog = changelog;
      });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

  /**
   * Fecha o splash screen
   */
  closeSplash(): void {
    this.updateChangelogService.closeSplash();
  }

  /**
   * Retorna ícone baseado no tipo de mudança
   */
  getChangelogIcon(item: ChangelogItem): string {
    if (item.icon) {
      return item.icon;
    }

    const iconMap: Record<string, string> = {
      'feature': 'new_releases',
      'improvement': 'trending_up',
      'bugfix': 'bug_report',
      'breaking': 'warning'
    };

    return iconMap[item.type] || 'info';
  }

  /**
   * Retorna cor baseada no tipo de mudança
   */
  getChangelogColor(type: string): string {
    const colorMap: Record<string, string> = {
      'feature': 'primary',
      'improvement': 'accent',
      'bugfix': 'warn',
      'breaking': 'warn'
    };

    return colorMap[type] || 'primary';
  }

  /**
   * Retorna label baseado no tipo de mudança
   */
  getChangelogLabel(type: string): string {
    const labelMap: Record<string, string> = {
      'feature': 'Novo',
      'improvement': 'Melhoria',
      'bugfix': 'Correção',
      'breaking': 'Importante'
    };

    return labelMap[type] || type;
  }

  /**
   * Formata data de release
   */
  formatReleaseDate(date: Date): string {
    return new Intl.DateTimeFormat('pt-BR', {
      day: '2-digit',
      month: 'long',
      year: 'numeric'
    }).format(date);
  }

  /**
   * Debug: Simula splash para testes
   */
  debugShowSplash(): void {
    this.updateChangelogService.showCurrentVersionSplash();
  }
} 