import { Component, inject, signal } from '@angular/core';
import { Router } from "@angular/router";
import { ReactiveFormsModule, FormControl } from "@angular/forms";
import { addIcons } from "ionicons";
import { IonIcon, IonInput, IonItem, IonModal } from "@ionic/angular/standalone";
import { closeOutline, addOutline } from "ionicons/icons";
import { discussionsService } from "../../../core/chat/discussion.service";
import {CommonModule} from "@angular/common";

@Component({
  selector: 'app-menu-nav',
  imports: [IonModal, IonItem, IonInput, IonIcon, ReactiveFormsModule, CommonModule],
  templateUrl: './menu-nav.component.html',
  styleUrl: './menu-nav.component.css'
})
export class MenuNav {

  private router = inject(Router);
  private discussionService = inject(discussionsService);

  isModalOpen = signal(false);
  isLoading = signal(false);
  errorMsg = signal<string | null>(null);
  isGroup = signal(false);

  // Mode privé
  username = new FormControl('');

  // Mode groupe
  groupName = new FormControl('');
  groupMembers: FormControl[] = [new FormControl('')];

  constructor() {
    addIcons({ closeOutline, addOutline });
  }

  openNav() { this.isModalOpen.set(true); }

  closeNav() {
    this.isModalOpen.set(false);
    this.username.reset();
    this.groupName.reset();
    this.groupMembers = [new FormControl('')];
    this.errorMsg.set(null);
    this.isGroup.set(false);
  }

  toggleMode() {
    this.isGroup.update(v => !v);
    this.errorMsg.set(null);
  }

  addMember() {
    if (this.groupMembers.length < 10) {
      this.groupMembers.push(new FormControl(''));
    }
  }

  removeMember(index: number) {
    this.groupMembers.splice(index, 1);
  }

  startConversation() {
    const name = this.username.value?.trim();
    if (!name || this.isLoading()) return;

    this.isLoading.set(true);
    this.errorMsg.set(null);

    this.discussionService.createPrivateDiscussion(name).subscribe({
      next: (discussion) => {
        this.isLoading.set(false);
        this.closeNav();
        this.router.navigate(['/main/messages', discussion.id]);
      },
      error: (err) => {
        this.isLoading.set(false);
        this.errorMsg.set(
            err.status === 404 ? 'Utilisateur introuvable.' : 'Une erreur est survenue.'
        );
      }
    });
  }

  startGroupConversation() {
    const name = this.groupName.value?.trim();
    const usernames = this.groupMembers
        .map(c => c.value?.trim())
        .filter(v => !!v);

    if (!name || usernames.length === 0 || this.isLoading()) return;

    this.isLoading.set(true);
    this.errorMsg.set(null);

    this.discussionService.createGroupDiscussion(name, usernames).subscribe({
      next: (discussion) => {
        this.isLoading.set(false);
        this.closeNav();
        this.router.navigate(['/main/messages', discussion.id]);
      },
      error: (err) => {
        this.isLoading.set(false);
        this.errorMsg.set(
            err.status === 404 ? 'Un ou plusieurs utilisateurs introuvables.' : 'Une erreur est survenue.'
        );
      }
    });
  }
}