import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';

export interface FormSection {
  title: string;
  icon?: string;
  columns?: 'auto' | '1' | '2' | '3' | '4';
  fields?: string[]; // Noms des champs à inclure dans cette section
  actions?: FormSectionAction[];
}

export interface FormSectionAction {
  label: string;
  icon?: string;
  action: string;
}

export interface EntityBadge {
  label: string;
  icon?: string;
  type?: 'default' | 'success' | 'warning' | 'danger' | 'info';
}

@Component({
  selector: 'app-harmonized-create-view',
  templateUrl: './harmonized-create-view.component.html',
  styleUrls: ['./harmonized-create-view.component.scss']
})
export class HarmonizedCreateViewComponent implements OnInit {

  // Inputs pour la personnalisation
  @Input() form!: FormGroup;
  @Input() formData: any[] = [];
  @Input() formSections?: FormSection[];
  @Input() formTitle?: string;

  // Entity Header customization
  @Input() showEntityHeader: boolean = true;
  @Input() entityTitle?: string;
  @Input() entitySubtitle?: string;
  @Input() entityBadges?: EntityBadge[];

  // Actions customization
  @Input() saveLabel?: string;
  @Input() saveAndContinueLabel?: string;
  @Input() cancelLabel?: string;
  @Input() showSaveAndContinue: boolean = true;
  @Input() canSave: boolean = true;

  // Outputs pour les événements
  @Output() save = new EventEmitter<any>();
  @Output() saveAndContinue = new EventEmitter<any>();
  @Output() cancel = new EventEmitter<void>();
  @Output() sectionAction = new EventEmitter<{action: string, section: FormSection}>();

  constructor() { }

  ngOnInit(): void {
    // Initialisation si nécessaire
    if (!this.entityBadges) {
      this.entityBadges = [
        { label: 'Nouveau', icon: 'add' },
        { label: 'Brouillon', icon: 'draft' },
        { label: 'Formulaire validé', icon: 'check_circle', type: 'success' }
      ];
    }
  }

  /**
   * Récupère les champs pour une section donnée
   */
  getSectionFields(section: FormSection): any[] {
    if (!section.fields || section.fields.length === 0) {
      return this.formData;
    }

    return this.formData.filter(field =>
      section.fields!.includes(field.controlName)
    );
  }

  /**
   * Gestionnaire pour l'action Enregistrer
   */
  onSave(): void {
    if (this.form.valid) {
      this.save.emit(this.form.value);
    } else {
      // Marquer tous les champs comme touchés pour afficher les erreurs
      this.markFormGroupTouched();
    }
  }

  /**
   * Gestionnaire pour l'action Enregistrer & Continuer
   */
  onSaveAndContinue(): void {
    if (this.form.valid) {
      this.saveAndContinue.emit(this.form.value);
    } else {
      this.markFormGroupTouched();
    }
  }

  /**
   * Gestionnaire pour l'action Annuler
   */
  onCancel(): void {
    this.cancel.emit();
  }

  /**
   * Gestionnaire pour les actions de section
   */
  onSectionAction(action: FormSectionAction, section: FormSection): void {
    this.sectionAction.emit({ action: action.action, section });
  }

  /**
   * Marque tous les champs du formulaire comme touchés
   */
  private markFormGroupTouched(): void {
    Object.keys(this.form.controls).forEach(key => {
      const control = this.form.get(key);
      if (control) {
        control.markAsTouched();
      }
    });
  }

  /**
   * Détermine si le formulaire peut être sauvegardé
   */
  get canSaveForm(): boolean {
    return this.canSave && this.form.valid;
  }

  /**
   * Retourne la classe CSS pour une badge selon son type
   */
  getBadgeClass(badge: EntityBadge): string {
    const baseClass = 'entity-badge';
    if (badge.type) {
      return `${baseClass} ${baseClass}--${badge.type}`;
    }
    return baseClass;
  }
}