syscom-master-admin-ui/src/app/shared/components/error-alert/error-alert.ts

import { ChangeDetectionStrategy, Component, computed, inject, input, output, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NotificationService } from '../../../core/services/common/notification.service';

@Component({
  selector: 'app-error-alert',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './error-alert.html',
  styleUrl: './error-alert.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ErrorAlertComponent {
  private readonly notification = inject(NotificationService);

  readonly message = input<string | null>(null);
  readonly title = input<string>('Operation Failed');
  readonly details = input<string | string[] | null>(null);
  readonly dismissible = input<boolean>(true);

  readonly dismissed = output<void>();

  readonly showDetails = signal(false);
  readonly copied = signal(false);

  readonly detailsArray = computed<string[]>(() => {
    const rawDetails = this.details();
    if (!rawDetails) return [];
    if (Array.isArray(rawDetails)) return rawDetails.filter(Boolean);
    return [rawDetails];
  });

  toggleDetails(): void {
    this.showDetails.update(v => !v);
  }

  copyErrorText(): void {
    const titleText = this.title();
    const mainMsg = this.message() || '';
    const detailText = this.detailsArray().join('\n');

    const fullErrorString = `[${titleText}]\n${mainMsg}${detailText ? '\n\nDetails:\n' + detailText : ''}`;

    navigator.clipboard.writeText(fullErrorString).then(() => {
      this.copied.set(true);
      this.notification.success('Error message copied to clipboard.');
      setTimeout(() => this.copied.set(false), 2500);
    }).catch(() => {
      this.notification.error('Failed to copy error to clipboard.');
    });
  }

  dismiss(): void {
    this.dismissed.emit();
  }
}