import { Component, Inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

export interface ErrorModalData {
  title?: string;
  messages: string[];
  actions?: string[];
  showRetryButton?: boolean;
  showCancelButton?: boolean;
  errorCode?: number;
  technicalError?: any;
}

@Component({
  selector: 'app-error-modal',
  standalone: true,
  imports: [
    CommonModule,
    MatDialogModule,
    MatButtonModule,
    MatIconModule
  ],
  template: `
    <div class="error-modal">
      <!-- Header do Modal -->
      <div class="modal-header">
        <div class="error-icon-container">
          <mat-icon class="error-icon">{{ getErrorIcon() }}</mat-icon>
        </div>
        <h2 mat-dialog-title class="modal-title">{{ data.title || 'Erro de Validação' }}</h2>
        <button
          mat-icon-button
          class="close-button"
          (click)="close()"
          aria-label="Fechar modal"
        >
          <mat-icon>close</mat-icon>
        </button>
      </div>

      <!-- Conteúdo do Modal -->
      <mat-dialog-content class="modal-content">
        
        <!-- Descrição Principal -->
        <div class="error-description">
          <p>{{ getMainDescription() }}</p>
        </div>

        <!-- Lista de Erros -->
        <div class="error-list" *ngIf="data.messages.length > 0">
          <h3 class="list-title">{{ getListTitle() }}</h3>
          <ul class="messages-list">
            <li 
              *ngFor="let message of data.messages; trackBy: trackMessage" 
              class="message-item"
            >
              <mat-icon class="item-icon">error_outline</mat-icon>
              <span class="message-text">{{ message }}</span>
            </li>
          </ul>
        </div>

        <!-- Informações Técnicas (Colapsável) -->
        <div class="technical-info" *ngIf="data.technicalError && showTechnicalDetails">
          <button 
            class="technical-toggle"
            (click)="showTechnicalDetails = !showTechnicalDetails"
            type="button"
          >
            <mat-icon>{{ showTechnicalDetails ? 'expand_less' : 'expand_more' }}</mat-icon>
            Detalhes Técnicos
          </button>
          
          <div class="technical-content" *ngIf="showTechnicalDetails">
            <pre class="technical-text">{{ formatTechnicalError() }}</pre>
          </div>
        </div>

      </mat-dialog-content>

      <!-- Ações do Modal -->
      <mat-dialog-actions class="modal-actions" align="end">
        
        <!-- Botão Cancelar -->
        <button
          *ngIf="data.showCancelButton !== false"
          mat-button
          class="cancel-button"
          (click)="close()"
        >
          {{ getCancelButtonText() }}
        </button>

        <!-- Botão Tentar Novamente -->
        <!-- <button
          *ngIf="data.showRetryButton"
          mat-button
          class="retry-button"
          (click)="retry()"
        >
          <mat-icon>refresh</mat-icon>
          Tentar Novamente
        </button> -->

        <!-- Botão Corrigir/Entendi -->
        <button
          mat-raised-button
          class="primary-button"
          (click)="understand()"
          color="primary"
        >
          <mat-icon>{{ getPrimaryButtonIcon() }}</mat-icon>
          {{ getPrimaryButtonText() }}
        </button>

      </mat-dialog-actions>
    </div>
  `,
  styleUrls: ['./error-modal.component.scss']
})
export class ErrorModalComponent {
  showTechnicalDetails = false;

  constructor(
    public dialogRef: MatDialogRef<ErrorModalComponent>,
    @Inject(MAT_DIALOG_DATA) public data: ErrorModalData
  ) {
    console.log('🚨 [ErrorModal] Exibindo modal de erro:', data);
  }

  /**
   * 🎯 Ícone principal baseado no tipo de erro
   */
  getErrorIcon(): string {
    if (!this.data?.errorCode) return 'info';
    
    if (this.data.errorCode === 400 || this.data.errorCode === 422) {
      return 'warning'; // Erro de validação
    } else if (this.data.errorCode === 401 || this.data.errorCode === 403) {
      return 'lock'; // Erro de autenticação
    } else if (this.data.errorCode >= 500) {
      return 'error'; // Erro do servidor
    } else {
      return 'info'; // Erro genérico
    }
  }

  /**
   * 🎯 Descrição principal baseada no tipo de erro
   */
  getMainDescription(): string {
    if (!this.data?.errorCode) {
      return 'Ocorreu um erro inesperado. Verifique as informações abaixo:';
    }
    
    if (this.data.errorCode === 400 || this.data.errorCode === 422) {
      return 'Os dados informados não atendem aos requisitos. Por favor, verifique os campos abaixo:';
    } else if (this.data.errorCode === 401) {
      return 'Sua sessão expirou. Faça login novamente para continuar.';
    } else if (this.data.errorCode === 403) {
      return 'Você não tem permissão para realizar esta ação.';
    } else if (this.data.errorCode >= 500) {
      return 'Ocorreu um erro interno no servidor. Tente novamente em alguns instantes.';
    } else {
      return 'Ocorreu um erro inesperado. Verifique as informações abaixo:';
    }
  }

  /**
   * 🎯 Título da lista de erros
   */
  getListTitle(): string {
    const messageCount = this.data?.messages?.length || 0;
    if (messageCount === 1) {
      return 'Erro encontrado:';
    } else {
      return `${messageCount} erros encontrados:`;
    }
  }

  /**
   * 🎯 Texto do botão cancelar
   */
  getCancelButtonText(): string {
    if (this.data?.errorCode === 401) {
      return 'Cancelar';
    } else {
      return 'Cancelar';
    }
  }

  /**
   * 🎯 Texto do botão principal
   */
  getPrimaryButtonText(): string {
    if (!this.data?.errorCode) return 'Entendi';
    
    if (this.data.errorCode === 400 || this.data.errorCode === 422) {
      return 'Corrigir Dados';
    } else if (this.data.errorCode === 401) {
      return 'Fazer Login';
    } else if (this.data.errorCode >= 500) {
      return 'Tentar Novamente';
    } else {
      return 'Entendi';
    }
  }

  /**
   * 🎯 Ícone do botão principal
   */
  getPrimaryButtonIcon(): string {
    if (!this.data?.errorCode) return 'check';
    
    if (this.data.errorCode === 400 || this.data.errorCode === 422) {
      return 'edit';
    } else if (this.data.errorCode === 401) {
      return 'login';
    } else if (this.data.errorCode >= 500) {
      return 'refresh';
    } else {
      return 'check';
    }
  }

  /**
   * 🎯 Formatar erro técnico para exibição
   */
  formatTechnicalError(): string {
    if (!this.data.technicalError) return '';
    
    try {
      return JSON.stringify(this.data.technicalError, null, 2);
    } catch (e) {
      return String(this.data.technicalError);
    }
  }

  /**
   * 🎯 TrackBy function para lista de mensagens
   */
  trackMessage(index: number, message: string): string {
    return message;
  }

  /**
   * 🎯 Ações do Modal
   */
  close(): void {
    console.log('❌ [ErrorModal] Modal fechado pelo usuário');
    this.dialogRef.close('close');
  }

  retry(): void {
    console.log('🔄 [ErrorModal] Usuário solicitou retry');
    this.dialogRef.close('retry');
  }

  understand(): void {
    console.log('✅ [ErrorModal] Usuário entendeu o erro');
    this.dialogRef.close('understand');
  }
} 