import { Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import { IssuesStore } from '../issues/issues.store';
import { MilestoneEntity, MilestonesStore } from './milestones.store';

@Component({
  selector: 'app-milestones',
  imports: [FormsModule],
  templateUrl: './milestones.html',
  styleUrl: './milestones.css',
})
export class Milestones {
  private readonly router = inject(Router);
  private readonly milestonesStore = inject(MilestonesStore);
  private readonly issuesStore = inject(IssuesStore);

  constructor() {
    this.milestonesStore.load();
    this.issuesStore.load();
  }

  protected readonly milestones = this.milestonesStore.milestones;
  protected searchQuery = '';

  protected get filteredMilestones(): MilestoneEntity[] {
    const q = this.searchQuery.trim().toLowerCase();
    if (!q) return this.milestones();
    return this.milestones().filter((m) => m.name.toLowerCase().includes(q));
  }

  protected getProgress(milestone: MilestoneEntity): number {
    if (milestone.issueIds.length === 0) return 0;
    const linked = this.issuesStore.issues().filter((i) => milestone.issueIds.includes(i.id));
    if (linked.length === 0) return 0;
    return Math.round((linked.filter((i) => i.status === 'done').length / linked.length) * 100);
  }

  protected formatDate(iso: string): string {
    if (!iso) return '—';
    return new Date(iso).toLocaleDateString('fr-FR', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
    });
  }

  protected createMilestone(): void {
    this.router.navigate(['/milestones/new']);
  }

  protected openMilestone(id: number): void {
    this.router.navigate(['/milestones', id]);
  }
}