import { Component, Input, Output, EventEmitter } 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 { MatChipsModule } from '@angular/material/chips';
import { GenericCard, CardAction } from '../../../domain/integration/interfaces/integration.interface';

@Component({
  selector: 'app-generic-card',
  standalone: true,
  imports: [
    CommonModule,
    MatCardModule,
    MatButtonModule,
    MatIconModule,
    MatChipsModule
  ],
  template: `
    <mat-card class="generic-card" [class]="'status-' + card.status">
      <!-- Status badge no canto superior direito -->
      <div class="status-badge">
        <span 
          [class]="'status-chip status-' + card.status">
          <i [class]="getStatusIcon(card.status)"></i>
          {{ card.statusLabel }}
        </span>
      </div>

      <mat-card-header>
        <div class="card-icon" *ngIf="card.iconClass">
          <i [class]="card.iconClass"></i>
        </div>
        <div class="card-header-content">
          <mat-card-title>{{ card.title }}</mat-card-title>
        </div>
      </mat-card-header>

      <mat-card-content>
        <div class="card-description">
          <p class="description-text">{{ card.description }}</p>
        </div>
      </mat-card-content>

      <mat-card-actions class="card-actions">
        <button 
          *ngFor="let action of card.actions"
          mat-button
          [class]="'action-btn action-' + action.type"
          (click)="onActionClick(action.action, card)">
          <mat-icon *ngIf="action.icon">{{ action.icon }}</mat-icon>
          {{ action.label }}
        </button>
      </mat-card-actions>
    </mat-card>
  `,
  styleUrl: './generic-card.component.scss'
})
export class GenericCardComponent {
  @Input() card!: GenericCard;
  @Output() actionClick = new EventEmitter<{ action: string; card: GenericCard }>();

  getStatusIcon(status: string): string {
    const icons = {
      'connected': 'fas fa-check-circle',
      'error': 'fas fa-exclamation-circle', 
      'disconnected': 'fas fa-circle',
      'active': 'fas fa-check-circle',
      'inactive': 'fas fa-circle'
    };
    return icons[status as keyof typeof icons] || 'fas fa-circle';
  }

  onActionClick(action: string, card: GenericCard): void {
    this.actionClick.emit({ action, card });
  }
} 