import { Component, Inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { GenericModalData, ModalField } from '../../interfaces/generic-modal.interface';

@Component({
  selector: 'app-generic-details-modal',
  standalone: true,
  imports: [
    CommonModule,
    MatDialogModule
  ],
  template: `
    <div class="modal-overlay" (click)="onOverlayClick($event)">
      <div class="modal-container" (click)="$event.stopPropagation()">
        <!-- Header -->
        <div class="modal-header">
          <div class="header-icon">
            <div class="info-icon">
              <i class="material-icons">description</i>
            </div>
          </div>
          <h2 class="modal-title">{{ data.title }}</h2>
          <p class="modal-subtitle">{{ data.subtitle }}</p>
          <button class="close-button" (click)="closeModal()">
            <i class="material-icons">close</i>
          </button>
        </div>

        <!-- Content -->
        <div class="modal-content">
          <div class="field-group" *ngFor="let field of data.fields">
            
            <!-- Campo de status -->
            <div *ngIf="field.type === 'status'" class="info-field">
              <label class="field-label">{{ field.label }}</label>
              <div class="field-content">
                <div class="status-badge" [class]="'status-' + getFieldValue(field.key)">
                  <i class="material-icons status-icon">{{ getStatusIcon(getFieldValue(field.key)) }}</i>
                  <span class="status-text">{{ getStatusLabel(getFieldValue(field.key)) }}</span>
                </div>
              </div>
            </div>

            <!-- Campo de descrição -->
            <div *ngIf="field.type === 'description'" class="info-field">
              <label class="field-label">{{ field.label }}</label>
              <div class="field-content">
                <div class="field-value">
                  {{ getFieldValue(field.key) }}
                </div>
              </div>
            </div>

            <!-- Campo de data -->
            <div *ngIf="field.type === 'date'" class="info-field">
              <label class="field-label">{{ field.label }}</label>
              <div class="field-content">
                <div class="field-value">
                  {{ formatDate(getFieldValue(field.key)) }}
                </div>
              </div>
            </div>

            <!-- Campo de texto simples -->
            <div *ngIf="field.type === 'text'" class="info-field">
              <label class="field-label">{{ field.label }}</label>
              <div class="field-content">
                <div class="field-value">
                  {{ getFieldValue(field.key) }}
                </div>
              </div>
            </div>

            <!-- Campo de badge -->
            <div *ngIf="field.type === 'badge'" class="info-field">
              <label class="field-label">{{ field.label }}</label>
              <div class="field-content">
                <div class="field-value">
                  {{ getFieldValue(field.key) }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Actions -->
        <div class="modal-actions">
          <button 
            class="btn-close"
            (click)="closeModal()">
            Fechar
          </button>
        </div>
      </div>
    </div>
  `,
  styleUrl: './generic-details-modal.component.scss'
})
export class GenericDetailsModalComponent {
  
  constructor(
    public dialogRef: MatDialogRef<GenericDetailsModalComponent>,
    @Inject(MAT_DIALOG_DATA) public data: GenericModalData
  ) {}

  getFieldValue(key: string): any {
    return this.data.data[key] || '-';
  }

  formatDate(dateValue: any): string {
    if (!dateValue) return '-';
    
    try {
      const date = new Date(dateValue);
      return date.toLocaleDateString('pt-BR', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      });
    } catch {
      return dateValue;
    }
  }

  getStatusIcon(status: string): string {
    const icons = {
      'connected': 'check_circle',
      'error': 'close',
      'disconnected': 'warning',
      'active': 'check_circle',
      'inactive': 'pause_circle'
    };
    return icons[status as keyof typeof icons] || 'warning';
  }

  getStatusLabel(status: string): string {
    const labels = {
      'connected': 'Conectado',
      'error': 'Erro',
      'disconnected': 'Não conectado',
      'active': 'Ativo',
      'inactive': 'Inativo'
    };
    return labels[status as keyof typeof labels] || status;
  }

  closeModal(): void {
    this.dialogRef.close();
  }

  onOverlayClick(event: Event): void {
    this.closeModal();
  }
} 