// steps/interview-step.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router } from '@angular/router';
import { Interviewer } from '../../interviewer';

interface InterviewQuestion {
  id: number;
  text: string;
  type: 'technical' | 'behavioral' | 'situational';
  timeLimit: number;
}

@Component({
  selector: 'app-interview-step',
  standalone: true,
  imports: [CommonModule,Interviewer],
  template: `
    <div class="interview-container">
      <div class="interview-header">
        <div class="timer" [class.warning]="remainingTime <= 10">
          {{ remainingTime }}s
        </div>
        <div class="question-counter">
          问题 {{ currentQuestion + 1 }}/{{ questions.length }}
        </div>
      </div>
      
      <div class="interview-main">
        <div class="ai-interviewer">
          <div class="avatar-container">
            <div class="avatar" [style.background-image]="'url(assets/ai-avatar.png)'"></div>
            <div class="status-indicator"></div>
          </div>
          <div class="speech-bubble">
            <p>{{ displayedQuestion }}</p>
            <div class="typing-indicator" *ngIf="isTyping">
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        </div>
        
        <div class="user-section">
          <div class="video-preview">
            <div class="video-placeholder"></div>
            <div class="audio-visualizer">
              <div *ngFor="let bar of audioBars" class="bar" [style.height.%]="bar"></div>
            </div>
          </div>
          
          <div class="controls">
            <button class="control-button" (click)="togglePause()">
              <svg viewBox="0 0 24 24">
                <path fill="currentColor" [attr.d]="isPaused ? 'M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z' : 'M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z'" />
              </svg>
              {{ isPaused ? '继续' : '暂停' }}
            </button>
            <button class="control-button emergency" (click)="showEmergencyModal = true">
              <svg viewBox="0 0 24 24">
                <path fill="currentColor" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" />
              </svg>
              紧急求助
            </button>
          </div>
        </div>
      </div>
      
      <div class="transcript-container">
        <h3>对话记录</h3>
        <div class="transcript">
          <div *ngFor="let item of transcript" class="transcript-item" [class.ai]="item.speaker === 'ai'">
            <div class="speaker">{{ item.speaker === 'ai' ? 'AI面试官' : '您' }}</div>
            <div class="content">{{ item.text }}</div>
            <div class="time">{{ item.time }}</div>
          </div>
        </div>
      </div>
      
      <div class="emergency-modal" *ngIf="showEmergencyModal">
        <div class="modal-content">
          <h3>紧急求助</h3>
          <p>如果需要暂停或终止面试，请联系HR：</p>
          <div class="contact-info">
  <p><strong>电话：</strong> {{ contactInfo.phone }}</p>
  <p><strong>邮箱：</strong> {{ contactInfo.email }}</p>
</div>
          <div class="modal-actions">
            <button class="sci-fi-button secondary" (click)="showEmergencyModal = false">
              取消
            </button>
            <button class="sci-fi-button danger" (click)="endInterview()">
              终止面试
            </button>
          </div>
        </div>
      </div>
    </div>
  `,
  styleUrls: ['./interview-step.scss']
})
export class InterviewStep implements OnInit, OnDestroy {
  questions: InterviewQuestion[] = [
    { id: 1, text: '请简单介绍一下您自己', type: 'behavioral', timeLimit: 60 },
    { id: 2, text: '您在前端开发中遇到的最大挑战是什么？如何解决的？', type: 'technical', timeLimit: 90 },
    { id: 3, text: '如果产品经理要求在一个不可能的时间期限内完成功能，您会如何处理？', type: 'situational', timeLimit: 75 },
    { id: 4, text: '请解释一下Angular的变更检测机制', type: 'technical', timeLimit: 90 },
    { id: 5, text: '您如何看待团队合作中的冲突？请举例说明', type: 'behavioral', timeLimit: 60 }
  ];
  
  currentQuestion = 0;
  displayedQuestion = '';
  isTyping = false;
  remainingTime = 0;
  timer: any;
  isPaused = false;
  showEmergencyModal = false;
  contactInfo = {
  phone: '400-123-4567',
  email: 'hr@airecruit.com'
};
  transcript: { speaker: 'ai' | 'user'; text: string; time: string }[] = [];
  audioBars: number[] = Array(10).fill(0);
  audioInterval: any;
  
  constructor(private router: Router,public interviewer: Interviewer) {}
  
  ngOnInit() {
    this.startInterview();
    this.simulateAudio();
  }
  
  ngOnDestroy() {
    clearInterval(this.timer);
    clearInterval(this.audioInterval);
  }
  
  startInterview() {
    this.typeQuestion(this.questions[this.currentQuestion].text);
    this.startTimer(this.questions[this.currentQuestion].timeLimit);
  }
  
  typeQuestion(question: string) {
    this.isTyping = true;
    this.displayedQuestion = '';
    let i = 0;
    
    const typing = setInterval(() => {
      if (i < question.length) {
        this.displayedQuestion += question.charAt(i);
        i++;
      } else {
        clearInterval(typing);
        this.isTyping = false;
        this.addToTranscript('ai', question);
      }
    }, 30);
  }
  
  startTimer(seconds: number) {
    this.remainingTime = seconds;
    
    this.timer = setInterval(() => {
      if (!this.isPaused) {
        this.remainingTime--;
        
        if (this.remainingTime <= 0) {
          clearInterval(this.timer);
          this.nextQuestion();
        }
      }
    }, 1000);
  }
  
  nextQuestion() {
    if (this.currentQuestion < this.questions.length - 1) {
      this.currentQuestion++;
      this.typeQuestion(this.questions[this.currentQuestion].text);
      this.startTimer(this.questions[this.currentQuestion].timeLimit);
    } else {
      this.endInterview();
    }
  }
  
  togglePause() {
    this.isPaused = !this.isPaused;
  }
  
  addToTranscript(speaker: 'ai' | 'user', text: string) {
    const now = new Date();
    const timeString = now.getHours().toString().padStart(2, '0') + ':' + 
                      now.getMinutes().toString().padStart(2, '0');
    
    this.transcript.push({
      speaker,
      text,
      time: timeString
    });
    
    // 自动滚动到底部
    setTimeout(() => {
      const transcriptEl = document.querySelector('.transcript');
      if (transcriptEl) {
        transcriptEl.scrollTop = transcriptEl.scrollHeight;
      }
    }, 100);
  }
  
  simulateAudio() {
    this.audioInterval = setInterval(() => {
      this.audioBars = this.audioBars.map(() => Math.min(100, Math.random() * 100));
    }, 200);
  }
  
  endInterview() {
    clearInterval(this.timer);
    clearInterval(this.audioInterval);
    
    this.router.navigate(['/intervieweeauth/home/interviewer/result']);
    this.interviewer.currentStep=3;
    
  }
  
}