import { CommonModule } from "@angular/common";
import { HttpClient, HttpClientModule } from "@angular/common/http";
import { Component, inject } from "@angular/core";
import { FormBuilder, ReactiveFormsModule, Validators } from "@angular/forms";

@Component({
  selector: "app-affiliate-lead-form",
  standalone: true,
  imports: [CommonModule, HttpClientModule, ReactiveFormsModule],
  template: `
    <form class="dp-affiliate-form" [formGroup]="form" (ngSubmit)="submitLead()">
      <input placeholder="Name" formControlName="name">
      <input placeholder="Email" type="email" formControlName="email">
      <input placeholder="Phone" formControlName="phone">

      <select formControlName="caseTypeId">
        <option value="">Select case type</option>
        <option *ngFor="let item of caseTypes" [value]="item.id">{{ item.name }}</option>
      </select>

      <textarea placeholder="Message" formControlName="message"></textarea>
      <button type="submit">Submit Lead</button>
      <p>{{ status }}</p>
    </form>
  `
})
export class AffiliateLeadFormComponent {
  private readonly http = inject(HttpClient);
  private readonly builder = inject(FormBuilder);

  readonly apiBaseUrl = "YOUR_API_BASE_URL";
  readonly apiKey = "YOUR_API_KEY";
  readonly form = this.builder.group({
    name: ["", Validators.required],
    email: ["", [Validators.required, Validators.email]],
    phone: ["", Validators.required],
    caseTypeId: ["", Validators.required],
    message: ["", Validators.required]
  });

  caseTypes: Array<{ id: number; name: string }> = [];
  status = "";

  constructor() {
    this.http.get<Array<{ id: number; name: string }>>(`${this.apiBaseUrl}/api/leads/casetypes`)
      .subscribe((data) => this.caseTypes = data);
  }

  submitLead(): void {
    this.status = "Submitting...";

    this.http.post(`${this.apiBaseUrl}/api/leads`, {
      ...this.form.getRawValue(),
      caseTypeId: Number(this.form.getRawValue().caseTypeId),
      sourceType: 2,
      sourceUrl: window.location.href
    }, {
      headers: { "X-Api-Key": this.apiKey }
    }).subscribe({
      next: () => this.status = "Lead submitted successfully.",
      error: () => this.status = "Submission failed."
    });
  }
}