import { Component, EventEmitter, inject, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { firstValueFrom } from 'rxjs';

import { TeamMember } from '../interfaces/team-member';
import { TeamMemberService } from '../services/team-member.service';

@Component({
  selector: 'app-admin-team-form',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './admin-team-form.component.html',
  styleUrl: './admin-team-form.component.scss',
})
export class AdminTeamFormComponent implements OnChanges {
  private teamMemberService = inject(TeamMemberService);

  @Input() editItem: TeamMember | null = null;
  @Output() saved = new EventEmitter<void>();
  @Output() closed = new EventEmitter<void>();

  id: number | null = null;
  name = '';
  title = '';
  bio = '';
  photo_url = '';
  display_order = 0;
  active = true;

  loading = false;
  error = '';
  submitted = false;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['editItem'] && this.editItem) {
      this.edit(this.editItem);
    }
  }

  edit(member: TeamMember): void {
    this.id = member.id;
    this.name = member.name;
    this.title = member.title;
    this.bio = member.bio ?? '';
    this.photo_url = member.photo_url ?? '';
    this.display_order = member.display_order;
    this.active = member.active;
  }

  formatError(err: any): string {
    if (err?.error?.detail) return err.error.detail;
    if (err?.error?.message) return err.error.message;
    if (err?.message) return err.message;
    return 'Failed to save. Please try again.';
  }

  reset(): void {
    this.id = null;
    this.name = '';
    this.title = '';
    this.bio = '';
    this.photo_url = '';
    this.display_order = 0;
    this.active = true;
    this.error = '';
    this.submitted = false;
  }

  onClose(): void {
    this.closed.emit();
    this.reset();
  }

  async onSubmit(): Promise<void> {
    this.submitted = true;
    if (!this.name || !this.title) {
      this.error = 'Please fill in all required fields.';
      return;
    }

    this.loading = true;
    this.error = '';

    const payload = {
      name: this.name,
      title: this.title,
      bio: this.bio || null,
      photo_url: this.photo_url || null,
      display_order: this.display_order,
      active: this.active,
    };

    try {
      if (this.id) {
        await firstValueFrom(this.teamMemberService.updateTeamMember(this.id, payload));
      } else {
        await firstValueFrom(this.teamMemberService.createTeamMember(payload));
      }
      this.saved.emit();
      this.reset();
    } catch (err: any) {
      this.error = this.formatError(err);
    } finally {
      this.loading = false;
    }
  }
}