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

@Component({
  selector: 'app-create-site-dialog',
  standalone: true,
  imports: [NgIf, MatDialogModule, MatFormFieldModule, MatInputModule, MatButtonModule, ReactiveFormsModule],
  template: `
    <h2 mat-dialog-title>Create New Site</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>Site Name</mat-label>
          <input matInput formControlName="name" placeholder="My Awesome Site" />
          <mat-error>Name is required</mat-error>
        </mat-form-field>

        <mat-form-field appearance="outline" class="w-full">
          <mat-label>Description (optional)</mat-label>
          <textarea matInput formControlName="description" rows="3" placeholder="What's your site about?"></textarea>
        </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 CreateSiteDialog {
  private fb = inject(FormBuilder);
  private dialogRef = inject(MatDialogRef<CreateSiteDialog>);
  private siteService = inject(SiteService);

  form = this.fb.group({
    name: ['', Validators.required],
    description: [''],
  });
  loading = false;

  onCreate(): void {
    if (this.form.invalid) return;
    this.loading = true;
    this.siteService.create(this.form.value as any).subscribe({
      next: (site) => {
        this.dialogRef.close(site);
      },
      error: () => {
        this.loading = false;
      },
    });
  }
}