import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';

// 定义SOP接口
interface SOP {
  id: string;
  title: string;
  stage: 'modeling' | 'rendering' | 'postProduction' | 'delivery';
  requirements: string[];
  timeline: { day: string; task: string }[];
  qualityMetrics: {
    metric: string;
    standard: string;
    premium: string;
    vip: string;
  }[];
}

// 定义视频教程接口
interface VideoTutorial {
  id: string;
  title: string;
  description: string;
  thumbnail: string;
  duration: string;
  stage: 'modeling' | 'rendering' | 'postProduction' | 'all';
  views: number;
  uploadDate: Date;
  videoUrl: string;
}

// 定义考核任务接口
interface Assessment {
  id: string;
  title: string;
  description: string;
  stage: 'modeling' | 'rendering' | 'postProduction';
  difficulty: 'easy' | 'medium' | 'hard';
  expectedDuration: number;
  assigneeId?: string;
  assigneeName?: string;
  deadline?: Date;
  status?: 'not_started' | 'in_progress' | 'submitted' | 'graded';
  submissionUrl?: string;
  score?: number;
  result?: 'pass' | 'fail';
  completionDate?: Date;
  comments?: string;
}

@Component({
  selector: 'app-knowledge-base',
  templateUrl: './knowledge-base.html',
  styleUrl: './knowledge-base.scss',
  standalone: true,
  imports: [CommonModule, FormsModule]
})

export class KnowledgeBaseComponent implements OnInit {
  // SOP相关
  sops: SOP[] = [];
  activeSOPTab = 'overview';
  
  // 视频教程相关
  videoTutorials: VideoTutorial[] = [];
  searchQuery = '';
  filterStage = 'all';
  filteredTutorials: VideoTutorial[] = [];
  currentPage = 1;
  itemsPerPage = 6;
  totalPages = 1;
  
  // 考核相关
  pendingAssessments: Assessment[] = [];
  ongoingAssessments: Assessment[] = [];
  completedAssessments: Assessment[] = [];
  activeAssessmentTab = 'pending';
  
  // 培训效果相关
  averageLearningHours = 8.5;
  learningHoursChange = 12;
  passRate = 85;
  passRateChange = 5;
  revisionRateReduction = 20;
  satisfactionImprovement = 15;

  constructor(private router: Router) {}

  ngOnInit(): void {
    this.initializeMockData();
    this.filterTutorials();
  }

  // 初始化模拟数据
  initializeMockData(): void {
    // 初始化SOP数据
    this.sops = [
      {
        id: 'sop-001',
        title: '建模阶段SOP',
        stage: 'modeling',
        requirements: [
          '提交完整的3D模型文件（.max/.blend/.skp等格式）',
          '提供户型匹配度检查报告，误差≤2%',
          '材质贴图完整且正确命名',
          '灯光方案初步设置',
          '模型优化报告（面数、材质数量等）'
        ],
        timeline: [
          { day: 'Day 1', task: '完成基础建模和户型匹配' },
          { day: 'Day 2', task: '完成细节建模和材质贴图' },
          { day: 'Day 3', task: '完成灯光设置和模型优化' }
        ],
        qualityMetrics: [
          { metric: '模型精度', standard: '≥95%', premium: '≥98%', vip: '≥99%' },
          { metric: '户型匹配度', standard: '≥98%', premium: '≥99%', vip: '100%' },
          { metric: '材质还原度', standard: '≥90%', premium: '≥95%', vip: '≥98%' },
          { metric: '面数控制', standard: '≤100万', premium: '≤150万', vip: '≤200万' }
        ]
      },
      {
        id: 'sop-002',
        title: '渲染阶段SOP',
        stage: 'rendering',
        requirements: [
          '提交高清渲染图（PSD+JPG格式）',
          '提供多角度渲染预览（至少3个角度）',
          '保留渲染参数文件',
          '渲染设置说明文档'
        ],
        timeline: [
          { day: 'Day 1-2', task: '完成测试渲染和参数调整' },
          { day: 'Day 3-4', task: '完成大图渲染' },
          { day: 'Day 5', task: '完成渲染图检查和整理' }
        ],
        qualityMetrics: [
          { metric: '像素要求', standard: '≥800px', premium: '≥1200px', vip: '≥1600px' },
          { metric: '渲染真实度', standard: '≥90%', premium: '≥95%', vip: '≥98%' },
          { metric: '光影效果', standard: '自然', premium: '层次丰富', vip: '专业级' }
        ]
      }
    ];
    
    // 初始化视频教程数据
    this.videoTutorials = [
      {
        id: 'tut-001',
        title: '宋式雕花建模技巧详解',
        description: '详细讲解宋式风格雕花的建模方法和技巧',
        thumbnail: '{ width: 300, height: 200, bgColor: \'#E6E6E6\', textColor: \'#555555\', text: \'IMG\' }',
        duration: '18:25',
        stage: 'modeling',
        views: 156,
        uploadDate: new Date(2023, 8, 15),
        videoUrl: '#'
      },
      {
        id: 'tut-002',
        title: '渲染真实度优化方法',
        description: '提升渲染图真实度的实用技巧和参数设置',
        thumbnail: '{ width: 300, height: 200, bgColor: \'#DCDCDC\', textColor: \'#555555\', text: \'IMG\' }',
        duration: '22:40',
        stage: 'rendering',
        views: 213,
        uploadDate: new Date(2023, 8, 10),
        videoUrl: '#'
      },
      {
        id: 'tut-003',
        title: '现代风格客厅建模教程',
        description: '从零开始学习现代风格客厅的建模流程',
        thumbnail: '{ width: 300, height: 200, bgColor: \'#F0F0F0\', textColor: \'#555555\', text: \'IMG\' }',
        duration: '35:15',
        stage: 'modeling',
        views: 189,
        uploadDate: new Date(2023, 8, 5),
        videoUrl: '#'
      },
      {
        id: 'tut-004',
        title: '后期光影调整技巧',
        description: '如何通过后期处理提升图片的光影效果',
        thumbnail: '{ width: 300, height: 200, bgColor: \'#E6E6E6\', textColor: \'#555555\', text: \'IMG\' }',
        duration: '15:30',
        stage: 'postProduction',
        views: 142,
        uploadDate: new Date(2023, 7, 28),
        videoUrl: '#'
      },
      {
        id: 'tut-005',
        title: '材质贴图高级设置',
        description: '深入了解材质贴图的高级参数设置和调整方法',
        thumbnail: '{ width: 300, height: 200, bgColor: \'#DCDCDC\', textColor: \'#555555\', text: \'IMG\' }',
        duration: '28:10',
        stage: 'modeling',
        views: 167,
        uploadDate: new Date(2023, 7, 20),
        videoUrl: '#'
      },
      {
        id: 'tut-006',
        title: '灯光设置实战指南',
        description: '室内设计中灯光设置的实战技巧和案例分析',
        thumbnail: '{ width: 300, height: 200, bgColor: \'#F0F0F0\', textColor: \'#555555\', text: \'IMG\' }',
        duration: '31:45',
        stage: 'rendering',
        views: 198,
        uploadDate: new Date(2023, 7, 15),
        videoUrl: '#'
      }
    ];
    
    // 初始化考核任务数据
    this.pendingAssessments = [
      {
        id: 'ass-001',
        title: '完成100㎡现代风格客厅建模',
        description: '根据提供的户型图，完成100㎡现代风格客厅的3D建模，要求符合SOP标准',
        stage: 'modeling',
        difficulty: 'medium',
        expectedDuration: 8
      },
      {
        id: 'ass-002',
        title: '中式风格卧室渲染练习',
        description: '使用提供的3D模型，完成中式风格卧室的渲染，重点关注光影效果和材质表现',
        stage: 'rendering',
        difficulty: 'medium',
        expectedDuration: 6
      }
    ];
    
    this.ongoingAssessments = [
      {
        id: 'ass-003',
        title: '北欧风格厨房后期处理',
        description: '对提供的渲染图进行后期处理，提升图片质量和视觉效果',
        stage: 'postProduction',
        difficulty: 'easy',
        expectedDuration: 4,
        assigneeId: 'd3',
        assigneeName: '王五',
        deadline: new Date(2023, 9, 25),
        status: 'in_progress'
      },
      {
        id: 'ass-004',
        title: '别墅客厅综合练习',
        description: '完成别墅客厅的建模、渲染和后期处理全流程',
        stage: 'modeling',
        difficulty: 'hard',
        expectedDuration: 12,
        assigneeId: 'd4',
        assigneeName: '赵六',
        deadline: new Date(2023, 9, 30),
        status: 'submitted',
        submissionUrl: '#'
      }
    ];
    
    this.completedAssessments = [
      {
        id: 'ass-005',
        title: '小户型卧室建模考核',
        description: '完成小户型卧室的3D建模，重点考察户型匹配度和模型精度',
        stage: 'modeling',
        difficulty: 'easy',
        expectedDuration: 4,
        assigneeId: 'd1',
        assigneeName: '张三',
        deadline: new Date(2023, 9, 10),
        status: 'graded',
        submissionUrl: '#',
        score: 95,
        result: 'pass',
        completionDate: new Date(2023, 9, 8),
        comments: '模型精度高，户型匹配度好，细节处理到位'
      },
      {
        id: 'ass-006',
        title: '餐厅渲染技巧考核',
        description: '完成餐厅场景的渲染，考察渲染参数设置和光影效果表现',
        stage: 'rendering',
        difficulty: 'medium',
        expectedDuration: 6,
        assigneeId: 'd2',
        assigneeName: '李四',
        deadline: new Date(2023, 9, 15),
        status: 'graded',
        submissionUrl: '#',
        score: 88,
        result: 'pass',
        completionDate: new Date(2023, 9, 14),
        comments: '渲染效果良好，光影层次丰富，但材质细节可进一步提升'
      }
    ];
  }

  // SOP相关方法
  addNewSOP(): void {
    // 实现添加新SOP的逻辑
    console.log('添加新SOP');
  }
  
  editSOP(stage: string): void {
    // 实现编辑SOP的逻辑
    console.log('编辑SOP:', stage);
  }
  
  exportSOP(stage: string): void {
    // 实现导出SOP的逻辑
    console.log('导出SOP:', stage);
  }
  
  exportFullSOP(): void {
    // 实现导出完整SOP的逻辑
    console.log('导出完整SOP');
  }
  
  getTutorialsByStage(stage: string): VideoTutorial[] {
    return this.videoTutorials.filter(tutorial => tutorial.stage === stage);
  }

  // 视频教程相关方法
  filterTutorials(): void {
    let filtered = this.videoTutorials;
    
    // 按搜索关键词过滤
    if (this.searchQuery) {
      const query = this.searchQuery.toLowerCase();
      filtered = filtered.filter(tutorial => 
        tutorial.title.toLowerCase().includes(query) || 
        tutorial.description.toLowerCase().includes(query)
      );
    }
    
    // 按阶段过滤
    if (this.filterStage !== 'all') {
      filtered = filtered.filter(tutorial => tutorial.stage === this.filterStage);
    }
    
    // 分页
    this.totalPages = Math.ceil(filtered.length / this.itemsPerPage);
    const startIndex = (this.currentPage - 1) * this.itemsPerPage;
    this.filteredTutorials = filtered.slice(startIndex, startIndex + this.itemsPerPage);
  }
  
  nextPage(): void {
    if (this.currentPage < this.totalPages) {
      this.currentPage++;
      this.filterTutorials();
    }
  }
  
  previousPage(): void {
    if (this.currentPage > 1) {
      this.currentPage--;
      this.filterTutorials();
    }
  }
  
  playTutorial(tutorialId: string): void {
    // 实现播放视频教程的逻辑
    console.log('播放教程:', tutorialId);
  }
  
  getStageLabel(stage: string): string {
    const labels: { [key: string]: string } = {
      modeling: '建模阶段',
      rendering: '渲染阶段',
      postProduction: '后期阶段',
      all: '全阶段'
    };
    return labels[stage] || stage;
  }

  // 考核相关方法
  createAssessment(): void {
    // 实现创建考核任务的逻辑
    console.log('创建考核任务');
  }
  
  assignAssessment(assessmentId: string): void {
    // 实现分配考核任务的逻辑
    console.log('分配考核任务:', assessmentId);
  }
  
  previewAssessment(assessmentId: string): void {
    // 实现预览考核任务的逻辑
    console.log('预览考核任务:', assessmentId);
  }
  
  viewSubmission(assessmentId: string): void {
    // 实现查看考核提交的逻辑
    console.log('查看考核提交:', assessmentId);
  }
  
  extendDeadline(assessmentId: string): void {
    // 实现延长考核截止日期的逻辑
    console.log('延长考核截止日期:', assessmentId);
  }
  
  viewAssessmentReport(assessmentId: string): void {
    // 实现查看考核报告的逻辑
    console.log('查看考核报告:', assessmentId);
  }
  
  syncToCapability(assessmentId: string): void {
    // 实现同步至能力看板的逻辑
    console.log('同步至能力看板:', assessmentId);
  }
  
  getDifficultyLabel(difficulty: string): string {
    const labels: { [key: string]: string } = {
      easy: '简单',
      medium: '中等',
      hard: '困难'
    };
    return labels[difficulty] || difficulty;
  }
  
  getStatusLabel(status?: string): string {
    if (!status) return '未知';
    const labels: { [key: string]: string } = {
      not_started: '未开始',
      in_progress: '进行中',
      submitted: '已提交',
      graded: '已评分'
    };
    return labels[status] || status;
  }

  // 培训效果相关方法
  generateEffectReport(): void {
    // 实现生成培训效果报告的逻辑
    console.log('生成培训效果报告');
  }
}