import { Component, Renderer2, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { SignInComponent } from './sign-in/sign-in.component';
import { SignUpComponent } from './sign-up/sign-up.component';

@Component({
  selector: 'app-homepage',
  standalone: true,
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css'],
  imports: [CommonModule, RouterModule, SignInComponent, SignUpComponent]
})
export class HomepageComponent implements OnInit, OnDestroy {
  // Keep your existing auth modal flags (reverted)
  showSignIn = false;
  showSignUp = false;
  showTourOverlay = false;

  // Track selected nav for persistent highlight
  selectedNav: string = '';
  selectedLanguage = 'en-US';

  // (Optional legacy flags kept intact if used elsewhere)
  selectedInfo: string | null = null;
  showDetails = false;

  // New: "Know more" dialog flag
  showInfoDialog = false;

  welcomeText = `Py-Detect is an intelligent lie detection platform designed to analyze human responses and uncover hidden truths. During each session, we also record and analyze body language using video to provide deeper behavioral insights. Whether you're evaluating a suspect, interviewing a student, or conducting sensitive assessments, Py-Detect uses advanced algorithms to ask targeted questions and deliver a truthfulness score—a percentage-based estimate of how likely the person is being honest.`;

  private authCloseListener = () => { this.closeModal(); };

  constructor(private router: Router, private renderer: Renderer2) { }

  ngOnInit() {
    this.renderer.addClass(document.body, 'homepage-bg');
    // Apply saved language (if any)
    const savedLang = localStorage.getItem('pydetect_lang');
    if (savedLang) {
      this.selectedLanguage = savedLang;
      document.documentElement.lang = savedLang;
    }
    // Listen for global auth-close events emitted by sign-in/sign-up components
    window.addEventListener('auth-close', this.authCloseListener as EventListener);
  }

  ngOnDestroy() {
    this.renderer.removeClass(document.body, 'homepage-bg');
    window.removeEventListener('auth-close', this.authCloseListener as EventListener);
  }

  // === Auth modal open/close (same as your last version in the template) ===
  openSignIn() { this.showSignIn = true; this.showSignUp = false; document.body.classList.add('modal-open'); }
  openSignUp() { this.showSignUp = true; this.showSignIn = false; document.body.classList.add('modal-open'); }
  closeModal() { this.showSignIn = this.showSignUp = false; document.body.classList.remove('modal-open'); }

  // If your <app-sign-in> emits signInSuccess, keep the same handler
  handleSignInSuccess() {
    this.closeModal();
    // keep your existing navigation if any; otherwise, do nothing
    // this.router.navigate(['/infopage']);
  }

  // === Info dialog controls ===
  openInfoDialog() { this.showInfoDialog = true; }
  closeInfoDialog() { this.showInfoDialog = false; }

  // (Optional) preserved helper
  toggleInfo(info: string) {
    this.selectedInfo = (this.selectedInfo === info) ? null : info;
  }

  // Easing function for nicer long scrolls
  private easeInOutCubic(t: number): number {
    return t <0.5 ?4 * t * t * t :1 - Math.pow(-2 * t +2,3) /2;
  }

  // Core smooth scroller with adjustable duration (very slow by default ~1800ms)
  private smoothScrollTo(targetY: number, duration =1800): void {
    const startY = window.scrollY || window.pageYOffset;
    const distance = targetY - startY;
    const startTime = performance.now();
    const step = (now: number) => {
      const elapsed = now - startTime;
      const progress = Math.min(elapsed / duration,1);
      const eased = this.easeInOutCubic(progress);
      window.scrollTo(0, startY + distance * eased);
      if (progress <1) requestAnimationFrame(step);
    };
    requestAnimationFrame(step);
  }

  private getYForElement(el: HTMLElement, headerOffset =80): number {
    const rect = el.getBoundingClientRect();
    const scrollTop = window.scrollY || window.pageYOffset;
    return rect.top + scrollTop - headerOffset;
  }

  // Home: always scroll page to top (slow & smooth); if not on '/', navigate then scroll
  public navigateHome(): void {
    this.selectedNav = 'home';
    const performScroll = () => this.smoothScrollTo(0,1800);
    if (this.router.url === '/' || this.router.url === '') {
      performScroll();
    } else {
      this.router.navigate(['/']).then(() => setTimeout(performScroll,0));
    }
  }

  // Smooth scroll helpers for section links (slow & smooth)
  public scrollToFeatures(event: Event): void {
    event.preventDefault();
    this.selectedNav = 'features';
    const el = document.getElementById('features');
    if (el) {
      const y = this.getYForElement(el,80);
      this.smoothScrollTo(y,1800);
    }
  }
  public scrollToMission(event: Event): void {
    event.preventDefault();
    this.selectedNav = 'mission';
    const el = document.getElementById('mission');
    if (el) {
      const y = this.getYForElement(el,80);
      this.smoothScrollTo(y,1800);
    }
  }
  public scrollToHowToUse(event: Event): void {
    event.preventDefault();
    this.selectedNav = 'how-to-use';
    const el = document.getElementById('how-to-use');
    if (el) {
      const y = this.getYForElement(el,80);
      this.smoothScrollTo(y,1800);
    }
  }

  // New: dedicated smooth scroll for How It Works from About link
  public scrollToHowItWorks(event: Event): void {
    event.preventDefault();
    this.selectedNav = 'how-it-works';
    const el = document.getElementById('how-it-works');
    if (el) {
      const y = this.getYForElement(el,80); // account for fixed header height
      this.smoothScrollTo(y,1800); // slow smooth scroll
    }
  }

  // Manual marker for items that don't use dedicated handlers
  public markSelected(key: string): void {
    this.selectedNav = key;
  }

  // Language change with persistence
  public onLanguageChange(lang: string): void {
    this.selectedLanguage = lang || 'en';
    localStorage.setItem('pydetect_lang', this.selectedLanguage);
    document.documentElement.lang = this.selectedLanguage;
  }

  // New helper to scroll to an arbitrary section id and mark nav selection
  public scrollToSection(ev: Event, id: string) {
    ev.preventDefault();
    this.markSelected(id);
    const el = document.getElementById(id);
    if (el) {
      // Use offset-aware smooth scroll so header doesn't hide title
      const y = this.getYForElement(el,80);
      this.smoothScrollTo(y,1800);
    }
  }
}