import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";


@Component({
  selector: 'app-operation-result-dialog',
  template: `
    <h2 mat-dialog-title>Resultado de la operación</h2>
    <mat-dialog-content>
      <div class="error-box" *ngIf="data.errors.length > 0">
        <h3>Errores</h3>
        <ul>
          <li *ngFor="let error of data.errors">
            {{ error.client }} ❌ - {{ error.error }}
          </li>
        </ul>
      </div>
      <div class="success-box" *ngIf="data.success.length > 0">
        <h3>Éxitos</h3>
        <ul>
          <li *ngFor="let success of data.success">{{ success.client }} ✅</li>
        </ul>
      </div>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
      <button mat-button color="primary" (click)="close()">Cerrar</button>
    </mat-dialog-actions>
  `,
  styles: [`
    mat-dialog-content { max-height: 400px; overflow-y: auto; }
    h3 { margin-bottom: 5px; }

    .success-box {
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
      padding: 10px;
      border-radius: 5px;
      margin-bottom: 10px;
    }

    .error-box {
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
      padding: 10px;
      border-radius: 5px;
      margin-bottom: 10px;
    }
  `]
})
export class OperationResultDialogComponent {
  constructor(
    public dialogRef: MatDialogRef<OperationResultDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { success: any[], errors: any[] }
  ) {}

  close() {
    this.dialogRef.close();
  }
}
