import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { TranslatePipe } from '../../../i18n/translate.pipe';
import { LangRoutePipe } from '../../../pipes/lang-route.pipe';
import { ProjectEditorSectionId, BuilderSectionStatus } from '../models/project-editor.model';
import { ProjectEditorFacade } from '../facade/project-editor.facade';
import { BUILDER_GROUPS, BuilderGroup } from '../builder/builder-groups.model';
import { IconComponent } from '../../../shared/ui/icon/icon.component';
import { AppIconName } from '../../../shared/ui/icon/icon-registry';

const STATUS_ICON: Record<BuilderSectionStatus, AppIconName> = {
  complete: 'checkCircle',
  'in-progress': 'circle',
  'not-started': 'circle',
  unknown: 'help',
};

const STATUS_LABEL_KEY: Record<BuilderSectionStatus, string> = {
  complete: 'builder.statusComplete',
  'in-progress': 'builder.statusInProgress',
  'not-started': 'builder.statusNotStarted',
  unknown: 'builder.statusUnknown',
};

interface NavSectionItem {
  id: ProjectEditorSectionId;
  labelKey: string;
  status: BuilderSectionStatus;
  statusIcon: AppIconName;
  statusLabelKey: string;
  modified: boolean;
  issueCount: number;
}

interface NavGroupItem {
  group: BuilderGroup;
  status: BuilderSectionStatus;
  statusIcon: AppIconName;
  statusLabelKey: string;
  sections: NavSectionItem[];
}

const SECTION_LABEL_KEYS: Record<ProjectEditorSectionId, string> = {
  general: 'builder.general',
  branding: 'builder.branding',
  theme: 'builder.theme',
  header: 'builder.header',
  footer: 'builder.footer',
  homepage: 'builder.homepage',
  widgets: 'builder.widgets',
  'static-pages': 'builder.staticPages',
  features: 'builder.marketplaceFeatures',
  languages: 'builder.languagesTab',
  navigation: 'builder.navigationTab',
  preview: 'builder.preview',
};

@Component({
  selector: 'app-project-editor-nav',
  standalone: true,
  imports: [TranslatePipe, RouterLink, RouterLinkActive, LangRoutePipe, IconComponent],
  templateUrl: './project-editor-nav.component.html',
  styleUrls: ['./project-editor-nav.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProjectEditorNavComponent {
  private readonly facade = inject(ProjectEditorFacade);

  readonly linkClicked = output<void>();

  private readonly issuesBySection = this.facade.issuesBySection;
  private readonly modifiedSections = this.facade.modifiedSections;
  private readonly sectionStatus = this.facade.sectionStatus;
  private readonly groupStatus = this.facade.groupStatus;

  readonly groups = computed<NavGroupItem[]>(() =>
    BUILDER_GROUPS.map(group => ({
      group,
      status: this.groupStatus().get(group.id) ?? 'unknown',
      statusIcon: STATUS_ICON[this.groupStatus().get(group.id) ?? 'unknown'],
      statusLabelKey: STATUS_LABEL_KEY[this.groupStatus().get(group.id) ?? 'unknown'],
      sections: group.sections.map(id => {
        const status = this.sectionStatus().get(id) ?? 'unknown';
        return {
          id,
          labelKey: SECTION_LABEL_KEYS[id],
          status,
          statusIcon: STATUS_ICON[status],
          statusLabelKey: STATUS_LABEL_KEY[status],
          modified: this.modifiedSections().has(id),
          issueCount: this.issuesBySection().get(id) ?? 0,
        };
      }),
    })),
  );

  onLinkClick(): void {
    this.linkClicked.emit();
  }
}
