import { Component, Inject, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { NgIf } from '@angular/common';
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { PageService } from '../../core/services/page.service';

@Component({
  selector: 'app-create-page-dialog',
  standalone: true,
  imports: [NgIf, MatDialogModule, MatFormFieldModule, MatInputModule, MatButtonModule, ReactiveFormsModule],
  template: `
    <h2 mat-dialog-title>Add Page</h2>
    <mat-dialog-content>
      <form [formGroup]="form" class="flex flex-col gap-4 pt-2">
        <mat-form-field appearance="outline" class="w-full">
          <mat-label>Page Title</mat-label>
          <input matInput formControlName="title" placeholder="About" />
          <mat-error>Title is required</mat-error>
        </mat-form-field>

        <mat-form-field appearance="outline" class="w-full">
          <mat-label>Slug</mat-label>
          <input matInput formControlName="slug" placeholder="about" />
          <mat-error *ngIf="form.get('slug')?.hasError('required')">Slug is required</mat-error>
          <mat-error *ngIf="form.get('slug')?.hasError('pattern')">Lowercase letters, numbers, and hyphens only</mat-error>
        </mat-form-field>
      </form>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
      <button mat-button mat-dialog-close>Cancel</button>
      <button mat-flat-button color="primary" [disabled]="form.invalid || loading" (click)="onCreate()">
        {{ loading ? 'Creating...' : 'Create' }}
      </button>
    </mat-dialog-actions>
  `,
})
export class CreatePageDialog {
  private fb = inject(FormBuilder);
  private dialogRef = inject(MatDialogRef<CreatePageDialog>);
  private pageService = inject(PageService);

  constructor() {
    const data: { siteId: string } = inject(MAT_DIALOG_DATA);
    this.siteId = data.siteId;
  }

  siteId: string;

  form = this.fb.group({
    title: ['', Validators.required],
    slug: ['', [Validators.pattern(/^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/)]],
  });
  loading = false;

  onCreate(): void {
    if (this.form.invalid) return;
    this.loading = true;
    this.pageService.create(this.siteId, {
      title: this.form.value.title || '',
      slug: this.form.value.slug || '',
      orderIndex: 0,
    }).subscribe({
      next: (page) => {
        this.dialogRef.close(page);
      },
      error: () => {
        this.loading = false;
      },
    });
  }
}