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';
import { MatDividerModule } from '@angular/material/divider';

interface DialogData {
  title: string;
  imported: number;
  failed: number;
  errors: string[];
}

@Component({
  selector: 'app-import-results-dialog',
  standalone: true,
  imports: [
    CommonModule,
    MatDialogModule,
    MatButtonModule,
    MatIconModule,
    MatDividerModule
  ],
  template: `
    <h2 mat-dialog-title>{{ data.title }}</h2>
    
    <mat-dialog-content>
      <div class="summary">
        <div class="stat success" *ngIf="data.imported > 0">
          <mat-icon>check_circle</mat-icon>
          <span>{{ data.imported }} successfully imported</span>
        </div>
        
        <div class="stat error" *ngIf="data.failed > 0">
          <mat-icon>error</mat-icon>
          <span>{{ data.failed }} failed to import</span>
        </div>
      </div>
      
      <mat-divider *ngIf="data.errors.length > 0"></mat-divider>
      
      <div class="errors" *ngIf="data.errors.length > 0">
        <h3>Import Errors:</h3>
        <ul>
          <li *ngFor="let error of data.errors" class="error-item">
            {{ error }}
          </li>
        </ul>
      </div>
    </mat-dialog-content>
    
    <mat-dialog-actions align="end">
      <button mat-raised-button color="primary" (click)="close()">OK</button>
    </mat-dialog-actions>
  `,
  styles: [`
    .summary {
      display: flex;
      gap: 24px;
      margin-bottom: 16px;
      
      .stat {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        
        &.success {
          color: #4caf50;
        }
        
        &.error {
          color: #f44336;
        }
        
        mat-icon {
          font-size: 24px;
          width: 24px;
          height: 24px;
        }
      }
    }
    
    .errors {
      margin-top: 16px;
      
      h3 {
        margin-bottom: 12px;
        color: #f44336;
      }
      
      ul {
        margin: 0;
        padding-left: 20px;
        max-height: 300px;
        overflow-y: auto;
      }
      
      .error-item {
        margin-bottom: 8px;
        color: #666;
      }
    }
  `]
})
export default class ImportResultsDialogComponent {
  constructor(
    public dialogRef: MatDialogRef<ImportResultsDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData
  ) {}

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