import { Component, EventEmitter, Input, OnChanges, Output, inject } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { PublicEventType } from '@calendar/core';

@Component({
  selector: 'calendar-booking-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="submit()" class="booking-form">
      <div class="cal-field">
        <label for="guestName">Full name</label>
        <input id="guestName" formControlName="guestName" placeholder="Jane Doe" />
      </div>
      <div class="cal-field">
        <label for="guestEmail">Email address</label>
        <input id="guestEmail" type="email" formControlName="guestEmail" placeholder="jane@example.com" />
      </div>
      @for (q of eventType?.customQuestions ?? []; track q.id) {
        <div class="cal-field">
          <label [for]="'q_' + q.id">{{ q.label }}{{ q.required ? ' *' : '' }}</label>
          <input [id]="'q_' + q.id" [formControlName]="'q_' + q.id" />
        </div>
      }
      <button
        type="submit"
        class="cal-btn cal-btn-primary submit"
        [disabled]="form.invalid || submitting || submitDisabled"
      >
        {{ submitting ? 'Scheduling…' : 'Schedule event' }}
      </button>
    </form>
  `,
  styles: [
    `
      .booking-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      .submit {
        width: 100%;
        margin-top: 0.5rem;
      }
    `,
  ],
})
export class BookingFormComponent implements OnChanges {
  private fb = inject(FormBuilder);

  @Input() eventType: PublicEventType | null = null;
  @Input() submitting = false;
  @Input() submitDisabled = false;
  @Output() submitForm = new EventEmitter<{
    guestName: string;
    guestEmail: string;
    customAnswers: Record<string, string>;
  }>();

  form = this.fb.nonNullable.group({
    guestName: ['', Validators.required],
    guestEmail: ['', [Validators.required, Validators.email]],
  });

  ngOnChanges(): void {
    const questions = this.eventType?.customQuestions ?? [];
    questions.forEach((q) => {
      const key = `q_${q.id}`;
      if (!this.form.contains(key)) {
        (this.form as FormGroup).addControl(
          key,
          this.fb.nonNullable.control('', q.required ? Validators.required : []),
        );
      }
    });
  }

  submit(): void {
    if (this.form.invalid) return;
    const raw = this.form.getRawValue();
    const customAnswers: Record<string, string> = {};
    (this.eventType?.customQuestions ?? []).forEach((q) => {
      const val = raw[`q_${q.id}` as keyof typeof raw];
      if (val) customAnswers[q.id] = String(val);
    });
    this.submitForm.emit({
      guestName: raw.guestName,
      guestEmail: raw.guestEmail,
      customAnswers,
    });
  }
}