import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { LucideAngularModule, FileText } from 'lucide-angular';
import { LoreService } from '../../services/lore.service';
import { TemplateService } from '../../services/template.service';
import { PageService } from '../../services/page.service';
import { LayoutService } from '../../services/layout.service';
import { PageTitleService } from '../../services/page-title.service';
import { LoreNode } from '../../services/lore.model';
import { Template } from '../../services/template.model';
import { loadLoreSidebarData, buildLoreSidebarConfig } from '../lore-sidebar.helper';

/**
 * Écran de création d'une Page.
 *
 * Deux entrées possibles :
 *  - /lore/:loreId/pages/create                     → noeud choisi depuis le template
 *  - /lore/:loreId/nodes/:nodeId/pages/create       → noeud pré-rempli depuis l'URL
 *
 * Le MVP est volontairement simple (maquette "création de page") : titre +
 * choix de template (grille) + noeud de destination. L'édition détaillée des
 * champs dynamiques du template se fait APRÈS création, via l'écran page-edit.
 */
@Component({
  selector: 'app-page-create',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, RouterModule, LucideAngularModule],
  templateUrl: './page-create.component.html',
  styleUrls: ['./page-create.component.scss']
})
export class PageCreateComponent implements OnInit, OnDestroy {
  readonly FileText = FileText;

  form: FormGroup;
  loreId = '';
  /** Pré-rempli si la route contient :nodeId. */
  preselectedNodeId: string | null = null;
  nodes: LoreNode[] = [];
  templates: Template[] = [];
  /** Template actuellement sélectionné dans la grille. */
  selectedTemplateId: string | null = null;

  constructor(
    private fb: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
    private loreService: LoreService,
    private templateService: TemplateService,
    private pageService: PageService,
    private layoutService: LayoutService,
    private pageTitleService: PageTitleService
  ) {
    this.form = this.fb.group({
      title:  ['', Validators.required],
      nodeId: ['', Validators.required]
    });
  }

  ngOnInit(): void {
    this.pageTitleService.set('Nouvelle page');
    this.loreId = this.route.snapshot.paramMap.get('loreId')!;
    this.preselectedNodeId = this.route.snapshot.paramMap.get('nodeId');

    loadLoreSidebarData(this.loreId, this.loreService, this.templateService, this.pageService)
      .subscribe(data => {
        this.nodes = data.nodes;
        this.templates = data.templates;
        this.layoutService.show(buildLoreSidebarConfig(data));

        // Si nodeId fourni par l'URL, on verrouille la valeur du formulaire.
        if (this.preselectedNodeId) {
          this.form.patchValue({ nodeId: this.preselectedNodeId });
        }
      });
  }

  selectTemplate(template: Template): void {
    this.selectedTemplateId = template.id!;
    // Si pas de noeud pré-choisi par l'URL, on pré-remplit avec le defaultNodeId du template.
    if (!this.preselectedNodeId && template.defaultNodeId) {
      this.form.patchValue({ nodeId: template.defaultNodeId });
    }
  }

  get canSubmit(): boolean {
    return this.form.valid && !!this.selectedTemplateId;
  }

  submit(): void {
    if (!this.canSubmit) return;
    const raw = this.form.value;
    this.pageService.create({
      loreId: this.loreId,
      nodeId: raw.nodeId,
      templateId: this.selectedTemplateId!,
      title: raw.title
    }).subscribe({
      next: created => this.router.navigate(['/lore', this.loreId, 'pages', created.id]),
      error: () => console.error('Erreur lors de la création de la page')
    });
  }

  cancel(): void {
    this.router.navigate(['/lore', this.loreId]);
  }

  ngOnDestroy(): void {
    this.layoutService.hide();
  }
}