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

interface SkillRating {
  name: string;
  score: number;
  description: string;
}

interface ImprovementSuggestion {
  area: string;
  suggestions: string[];
}

@Component({
  selector: 'app-result-step',
  standalone: true,
  imports: [CommonModule,Interviewer],
  template: `
    <div class="result-container">
      <div class="result-header">
        <h2>AI面试结果分析</h2>
        <p>基于您的表现生成的详细评估报告</p>
      </div>
      
      <div class="result-summary">
        <div class="overall-score">
          <div class="score-circle">
            <div class="score-value">{{ overallScore }}</div>
            <div class="score-label">综合得分</div>
          </div>
          <div class="match-score">
            <div class="match-value">{{ jobMatch }}%</div>
            <div class="match-label">岗位匹配度</div>
          </div>
        </div>
        
        <div class="summary-text">
          <p>{{ summaryText }}</p>
        </div>
      </div>
      
      <div class="skill-radar">
        <h3>能力雷达图</h3>
        <div class="radar-container">
          <svg viewBox="0 0 200 200" class="radar-chart">
            <polygon [attr.points]="getRadarPoints()" class="skill-area"/>
            
            <!-- 雷达图网格 -->
            <g *ngFor="let level of [1, 2, 3, 4, 5]">
              <circle cx="100" cy="100" [attr.r]="level * 20" class="grid-circle"/>
            </g>
            
            <!-- 雷达图轴线 -->
            <line x1="100" y1="0" x2="100" y2="200" class="axis-line"/>
            <line x1="0" y1="100" x2="200" y2="100" class="axis-line"/>
            <line x1="25" y1="25" x2="175" y2="175" class="axis-line"/>
            <line x1="175" y1="25" x2="25" y2="175" class="axis-line"/>
            
            <!-- 技能标签 -->
            <g *ngFor="let skill of skills; let i = index">
              <text [attr.x]="getLabelX(i)" [attr.y]="getLabelY(i)" class="skill-label">
                {{ skill.name }}
              </text>
            </g>
          </svg>
        </div>
      </div>
      
      <div class="detailed-feedback">
        <h3>详细评估</h3>
        
        <div class="skill-ratings">
          <div *ngFor="let skill of skills" class="skill-rating">
            <div class="skill-info">
              <h4>{{ skill.name }}</h4>
              <div class="rating-bar">
                <div class="rating-fill" [style.width.%]="skill.score * 10"></div>
                <div class="rating-value">{{ skill.score }}/10</div>
              </div>
            </div>
            <p class="skill-description">{{ skill.description }}</p>
          </div>
        </div>
      </div>
      
      <div class="improvement-suggestions">
        <h3>改进建议</h3>
        
        <div *ngFor="let item of improvements" class="improvement-item">
          <h4>{{ item.area }}</h4>
          <ul>
            <li *ngFor="let suggestion of item.suggestions">{{ suggestion }}</li>
          </ul>
        </div>
      </div>
      
      <div class="result-actions">
        <button class="sci-fi-button primary" (click)="downloadReport()">
          下载完整报告
        </button>
        <button class="sci-fi-button secondary" (click)="returnToHome()">
          返回首页
        </button>
      </div>
    </div>
  `,
  styleUrls: ['./result-step.scss']
})
export class ResultStep {
  overallScore = 7.8;
  jobMatch = 82;
  
  summaryText = '您在技术能力方面表现优异，特别是在Angular框架的理解和应用上。沟通表达清晰，但在解决复杂问题的系统性思维方面还有提升空间。整体与目标岗位有较高匹配度。';
  
  skills: SkillRating[] = [
    { name: '技术能力', score: 8.5, description: '对Angular框架有深入理解，能够熟练运用RxJS进行状态管理，熟悉组件化开发模式。' },
    { name: '问题解决', score: 7.0, description: '能够分析并解决一般性问题，但在复杂系统问题上的解决策略有待加强。' },
    { name: '沟通表达', score: 8.0, description: '表达清晰有条理，能够有效传达技术概念，偶尔会有技术术语使用不当的情况。' },
    { name: '团队协作', score: 7.5, description: '表现出良好的团队合作意识，能够理解并接受他人意见，主动沟通方面可以更积极。' },
    { name: '学习能力', score: 8.5, description: '展示出快速学习新技术的能力，能够通过文档和示例快速掌握新工具。' }
  ];
  
  improvements: ImprovementSuggestion[] = [
    {
      area: '技术深度',
      suggestions: [
        '深入研究Angular变更检测机制，理解Zone.js的工作原理',
        '学习高级RxJS操作符和模式，如自定义操作符、多播等',
        '了解Angular性能优化策略，如懒加载、变更检测策略等'
      ]
    },
    {
      area: '问题解决',
      suggestions: [
        '练习系统性思考，尝试从多个角度分析问题',
        '学习常见的设计模式和架构模式',
        '在解决问题前先明确问题和约束条件'
      ]
    },
    {
      area: '沟通表达',
      suggestions: [
        '注意面向不同听众调整技术讲解的深度',
        '练习使用更简洁的语言表达复杂概念',
        '在回答前先组织语言结构'
      ]
    }
  ];
  
  constructor(private router: Router) {}
  
  getRadarPoints(): string {
    return this.skills.map((skill, i) => {
      const angle = (Math.PI * 2 * i) / this.skills.length - Math.PI / 2;
      const radius = skill.score * 20;
      const x = 100 + radius * Math.cos(angle);
      const y = 100 + radius * Math.sin(angle);
      return `${x},${y}`;
    }).join(' ');
  }
  
  getLabelX(index: number): number {
    const angle = (Math.PI * 2 * index) / this.skills.length - Math.PI / 2;
    const radius = 110;
    return 100 + radius * Math.cos(angle);
  }
  
  getLabelY(index: number): number {
    const angle = (Math.PI * 2 * index) / this.skills.length - Math.PI / 2;
    const radius = 110;
    return 100 + radius * Math.sin(angle);
  }
  
  downloadReport() {
  // 实际实现下载功能
  const content = "这里是报告内容"; // 替换为实际报告内容
  const blob = new Blob([content], { type: 'application/pdf' });
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = '面试报告.pdf';
  a.click();
  window.URL.revokeObjectURL(url);
}
  
  returnToHome() {
    this.router.navigate(['/']);
  }
}