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 { Event } from '../interfaces/event';
import { EventService } from '../services/event.service';

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

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

  id: number | null = null;
  date = '';
  title = '';
  description = '';
  location = '';
  icon = '🎵';
  rsvp_url = '';
  active = true;

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

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

  edit(event: Event): void {
    this.id = event.id;
    this.date = event.date;
    this.title = event.title;
    this.description = event.description;
    this.location = event.location;
    this.icon = event.icon;
    this.rsvp_url = event.rsvp_url ?? '';
    this.active = event.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.date = '';
    this.title = '';
    this.description = '';
    this.location = '';
    this.icon = '🎵';
    this.rsvp_url = '';
    this.active = true;
    this.error = '';
    this.submitted = false;
  }

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

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

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

    const payload = {
      date: this.date,
      title: this.title,
      description: this.description,
      location: this.location,
      icon: this.icon,
      rsvp_url: this.rsvp_url || null,
      active: this.active,
    };

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