import { Component, OnInit, signal, DestroyRef, inject } from '@angular/core';
import { Router } from '@angular/router';
import { CommonModule } from '@angular/common';
import { MatCardModule } from '@angular/material/card';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ApiService } from '../../services';
import { Project } from '../../models';
import { LanguageService } from '../../services/language.service';
import { TranslatePipe } from '../../pipes/translate.pipe';

@Component({
  selector: 'app-projects-dashboard',
  standalone: true,
  imports: [CommonModule, MatCardModule, MatProgressSpinnerModule, TranslatePipe],
  templateUrl: './projects-dashboard.component.html',
  styleUrls: ['./projects-dashboard.component.scss']
})
export class ProjectsDashboardComponent implements OnInit {
  projects = signal<Project[]>([]);
  loading = signal(true);
  error = signal<string | null>(null);
  currentProjectId = signal<string | null>(null);

  private destroyRef = inject(DestroyRef);

  constructor(
    private apiService: ApiService,
    private router: Router,
    public lang: LanguageService
  ) {}

  ngOnInit() {
    this.loadProjects();
    
    // Check if we're currently viewing a project
    const urlSegments = this.router.url.split('/');
    if (urlSegments[1] === 'project' && urlSegments[2]) {
      this.currentProjectId.set(urlSegments[2]);
    }
    
    // Listen to route changes
    this.router.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
      const segments = this.router.url.split('/');
      if (segments[1] === 'project' && segments[2]) {
        this.currentProjectId.set(segments[2]);
      } else {
        this.currentProjectId.set(null);
      }
    });
  }

  loadProjects() {
    this.loading.set(true);
    this.apiService.getProjects().subscribe({
      next: (projects) => {
        this.projects.set(projects);
        this.loading.set(false);
      },
      error: (err) => {
        this.error.set('Failed to load projects');
        this.loading.set(false);
        console.error(err);
      }
    });
  }

  openProject(projectId: string) {
    this.router.navigate(['/project', projectId]);
  }
}