flare-ui/src/app/dialogs/intent-edit-dialog/intent-edit-dialog.component.ts

import { Component, Inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, FormGroup, FormArray, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';  // FormsModule EKLE
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatChipsModule } from '@angular/material/chips';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatListModule } from '@angular/material/list';
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';

@Component({
  selector: 'app-intent-edit-dialog',
  standalone: true,
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormsModule,  // BU SATIRI EKLE
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatCheckboxModule,
    MatButtonModule,
    MatIconModule,
    MatChipsModule,
    MatTableModule,
    MatTabsModule,
    MatExpansionModule,
    MatListModule,
    MatSnackBarModule
  ],
  templateUrl: './intent-edit-dialog.component.html',
  styleUrls: ['./intent-edit-dialog.component.scss']
})
export default class IntentEditDialogComponent implements OnInit {
  form!: FormGroup;
  availableAPIs: any[] = [];
  parameterTypes = ['str', 'int', 'float', 'bool', 'date'];
  
  newExample = '';

  constructor(
    private fb: FormBuilder,
    private snackBar: MatSnackBar,
    public dialogRef: MatDialogRef<IntentEditDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    this.availableAPIs = data.apis || [];
  }

  ngOnInit() {
    this.initializeForm();
    if (this.data.intent) {
      this.populateForm(this.data.intent);
    }
  }

  initializeForm() {
    this.form = this.fb.group({
      name: ['', [Validators.required, Validators.pattern(/^[a-zA-Z0-9-]+$/)]],
      caption: [''],
      locale: ['tr-TR'],
      detection_prompt: ['', Validators.required],
      examples: this.fb.array([]),
      parameters: this.fb.array([]),
      action: ['', Validators.required],
      fallback_timeout_prompt: [''],
      fallback_error_prompt: ['']
    });
  }

  populateForm(intent: any) {
    this.form.patchValue({
      name: intent.name,
      caption: intent.caption,
      locale: intent.locale,
      detection_prompt: intent.detection_prompt,
      action: intent.action,
      fallback_timeout_prompt: intent.fallback_timeout_prompt,
      fallback_error_prompt: intent.fallback_error_prompt
    });

    // Populate examples
    if (intent.examples) {
      const examplesArray = this.form.get('examples') as FormArray;
      intent.examples.forEach((example: string) => {
        examplesArray.push(this.fb.control(example));
      });
    }

    // Populate parameters
    if (intent.parameters) {
      const parametersArray = this.form.get('parameters') as FormArray;
      intent.parameters.forEach((param: any) => {
        parametersArray.push(this.createParameterFormGroup(param));
      });
    }
  }

  createParameterFormGroup(param: any = {}): FormGroup {
    return this.fb.group({
      name: [param.name || '', [Validators.required, Validators.pattern(/^[a-zA-Z0-9_]+$/)]],
      caption: [param.caption || ''],
      type: [param.type || 'str', Validators.required],
      required: [param.required !== false],
      variable_name: [param.variable_name || '', Validators.required],
      extraction_prompt: [param.extraction_prompt || ''],
      validation_regex: [param.validation_regex || ''],
      invalid_prompt: [param.invalid_prompt || ''],
      type_error_prompt: [param.type_error_prompt || '']
    });
  }

  get examples() {
    return this.form.get('examples') as FormArray;
  }

  get parameters() {
    return this.form.get('parameters') as FormArray;
  }

  addExample() {
    if (this.newExample.trim()) {
      this.examples.push(this.fb.control(this.newExample.trim()));
      this.newExample = '';
    }
  }

  removeExample(index: number) {
    this.examples.removeAt(index);
  }

  addParameter() {
    this.parameters.push(this.createParameterFormGroup());
  }

  removeParameter(index: number) {
    this.parameters.removeAt(index);
  }

  moveParameter(index: number, direction: 'up' | 'down') {
    const newIndex = direction === 'up' ? index - 1 : index + 1;
    if (newIndex >= 0 && newIndex < this.parameters.length) {
      const param = this.parameters.at(index);
      this.parameters.removeAt(index);
      this.parameters.insert(newIndex, param);
    }
  }

  async testRegex(index: number) {
    const param = this.parameters.at(index);
    const regex = param.get('validation_regex')?.value;
    
    if (!regex) {
      this.snackBar.open('No regex pattern to test', 'Close', { duration: 2000 });
      return;
    }

    const testValue = prompt('Enter a test value:');
    if (testValue !== null) {
      try {
        const pattern = new RegExp(regex);
        const matches = pattern.test(testValue);
        
        this.snackBar.open(
          matches ? '✓ Pattern matches!' : '✗ Pattern does not match',
          'Close',
          { duration: 3000 }
        );
      } catch (error) {
        this.snackBar.open('Invalid regex pattern', 'Close', { 
          duration: 3000,
          panelClass: 'error-snackbar'
        });
      }
    }
  }

  save() {
    if (this.form.invalid) {
      this.snackBar.open('Please fix all validation errors', 'Close', { duration: 3000 });
      return;
    }

    const formValue = this.form.value;
    this.dialogRef.close(formValue);
  }

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