import {
  Component,
  AfterViewInit,
  OnDestroy,
  ViewChild,
  ElementRef,
  ChangeDetectorRef,
  CUSTOM_ELEMENTS_SCHEMA,
  EventEmitter,
  Output,
  inject
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MetricsTrackerService } from '../../../../services/metrics-tracker.service';
import '../../../../../assets/scripts/model-viewer';


@Component({
  selector: 'app-text-legibility-assessment',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './text-legibility-assessment.component.html',
  styleUrls: ['./text-legibility-assessment.component.css'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class TextLegibilityAssessmentComponent implements AfterViewInit, OnDestroy {
  @ViewChild('modelViewer') modelViewerRef!: ElementRef<any>;
  @Output() testComplete = new EventEmitter<void>();
  @Output() redoTest = new EventEmitter<number>();


  private metricsService = inject(MetricsTrackerService);


  minSize = 2;
  maxSize = 64;
  currentSize = 16;


  minSizeResult: number | null = null;
  maxSizeResult: number | null = null;
  comfortableSizeResult: number | null = null;


  phase: 'min' | 'confirmedMin' | 'max' | 'confirmedMax' | 'comfortable' | 'confirmedComfort' = 'min';


  private offsetApplied = false;


  constructor(private cdr: ChangeDetectorRef) {
    this.logInteraction = this.logInteraction.bind(this);
  }


  ngAfterViewInit() {
    const mv = this.modelViewerRef.nativeElement;
    mv.addEventListener('ar-status', (event: any) => {
      if (event.detail.status === 'session-started') {
        console.log('AR session started. Delaying startTracking call to ensure session is ready.');
        this.metricsService.startTracking(mv, "text-legibility");
      }
    });
  }


  public logInteraction(event: Event) {
    this.metricsService.logInteraction(event);
  }


  decrease() {
    if (this.currentSize > this.minSize) this.currentSize--;
  }


  increase() {
    if (this.currentSize < this.maxSize) this.currentSize++;
  }


  nextPhase() {
    switch (this.phase) {
      case 'min':
        this.minSizeResult = this.currentSize;
        this.phase = 'confirmedMin';
        break;
      case 'confirmedMin':
        this.currentSize = this.maxSize;
        this.phase = 'max';
        break;
      case 'max':
        this.maxSizeResult = this.currentSize;
        this.phase = 'confirmedMax';
        break;
      case 'confirmedMax':
        this.currentSize = Math.floor((this.minSizeResult! + this.maxSizeResult!) / 2);
        this.phase = 'comfortable';
        break;
      case 'comfortable':
        this.comfortableSizeResult = this.currentSize;
        this.phase = 'confirmedComfort';
        break;
      case 'confirmedComfort':
        this.finishAssessment();
        break;
    }
  }
  resetToMid() {
    this.currentSize = Math.floor((this.minSize + this.maxSize) / 2);
    this.phase = 'min';
    this.minSizeResult = null;
    this.maxSizeResult = null;
    this.comfortableSizeResult = null;
  }


  retry() {
    this.redoTest.emit(1);
  }


  finishAssessment() {
    const finalResults = {
      minReadableSize: this.minSizeResult,
      maxReadableSize: this.maxSizeResult,
      comfortableReadableSize: this.comfortableSizeResult
    };


    this.metricsService.logInteraction(new CustomEvent('test-results', {
      detail: {
        testName: 'TextLegibility',
        results: finalResults
      }
    }));


    console.log(finalResults);


    this.testComplete.emit();
  }


  ngOnDestroy() {


    this.metricsService.stopTracking();
  }



}