// interviewer.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
@Component({
  selector: 'app-interviewer',
  standalone: true,
  imports: [CommonModule, RouterModule],
  template: `
    <div class="sci-fi-container">
      <header class="sci-fi-header">
        <div class="logo">
          <svg class="logo-icon" viewBox="0 0 24 24">
            <path fill="currentColor" d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M7.5,13A2.5,2.5 0 0,0 5,15.5A2.5,2.5 0 0,0 7.5,18A2.5,2.5 0 0,0 10,15.5A2.5,2.5 0 0,0 7.5,13M16.5,13A2.5,2.5 0 0,0 14,15.5A2.5,2.5 0 0,0 16.5,18A2.5,2.5 0 0,0 19,15.5A2.5,2.5 0 0,0 16.5,13Z" />
          </svg>
          <span>AI RECRUIT</span>
        </div>
        <div class="progress-tracker">
          <div *ngFor="let step of steps" 
               [class.active]="currentStep === step.id"
               [class.completed]="step.id < currentStep"
               class="step">
            <div class="step-circle">{{ step.id }}</div>
            <div class="step-label">{{ step.label }}</div>
          </div>
        </div>
      </header>
      
      <main class="sci-fi-content">
        <router-outlet></router-outlet>
      </main>
      
      <footer class="sci-fi-footer">
        <div class="neon-line"></div>
        <p>© 2023 AI Recruit System | Neural Network Powered</p>
      </footer>
    </div>
  `,
  styleUrls: ['./interviewer.scss']
})
export class Interviewer {
  currentStep = 1;
  
  steps = [
    { id: 1, label: '面试准备' },
    { id: 2, label: '面试进行' },
    { id: 3, label: '结果反馈' }
  ];
}
