import { Component, effect, inject } from '@angular/core';
import { DecimalPipe } from '@angular/common';
import { Router, RouterLink } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import {
  GUIDE_SECTIONS,
  HANDOVER_CHECKLIST,
  ROLE_GUIDE,
} from '../../../../core/help/guide-content';
import { HelpAccessService } from '../../../../core/help/help-access';
import { TeamStore } from '../../../../core/team/team-store';

@Component({
  selector: 'app-guide',
  imports: [DecimalPipe, RouterLink, MatButtonModule, MatCardModule, MatIconModule],
  templateUrl: './guide.html',
  styleUrl: './guide.scss',
})
export class Guide {
  private readonly helpAccess = inject(HelpAccessService);
  private readonly router = inject(Router);
  private readonly teamStore = inject(TeamStore);

  protected readonly sections = GUIDE_SECTIONS;
  protected readonly handoverChecklist = HANDOVER_CHECKLIST;
  protected readonly roleGuide = ROLE_GUIDE;
  protected readonly canOpenGuide = this.helpAccess.canOpenGuide;

  constructor() {
    effect(() => {
      const team = this.teamStore.team();
      if (!this.teamStore.loading() && team && !this.helpAccess.canOpenGuide()) {
        void this.router.navigateByUrl(`/team/${team.id}/more`);
      }
    });
  }
}
