yss-project/src/app/pages/customer-service/project-list/project-list.ts

import { Component, OnInit, OnDestroy, signal, computed, Inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Router, RouterModule, ActivatedRoute } from '@angular/router';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { ProjectService } from '../../../services/project.service';
import { ConsultationOrderDialogComponent } from '../consultation-order/consultation-order-dialog.component';
import { Project, ProjectStatus, ProjectStage } from '../../../models/project.model';
import { FmodeParse, FmodeObject } from 'fmode-ng/parse';
import { ProfileService } from '../../../services/profile.service';
import { normalizeStage, getProjectStatusByStage } from '../../../utils/project-stage-mapper';

const Parse = FmodeParse.with('nova');

// 定义项目列表项接口，包含计算后的属性
interface ProjectListItem extends Project {
  progress: number;
  daysUntilDeadline: number;
  isUrgent: boolean;
  tagDisplayText: string;
}

@Component({
  selector: 'app-project-list',
  standalone: true,
  imports: [CommonModule, FormsModule, RouterModule, MatDialogModule],
  templateUrl: './project-list.html',
  styleUrls: ['./project-list.scss', '../customer-service-styles.scss']
})
export class ProjectList implements OnInit, OnDestroy {
  // 项目列表数据
  projects = signal<ProjectListItem[]>([]);
  
  // 原始项目数据（用于筛选）
  allProjects = signal<Project[]>([]);

  // 视图模式：卡片 / 列表 / 监控大盘（默认卡片）
  viewMode = signal<'card' | 'list' | 'dashboard'>('card');

  // 看板列配置 - 按照订单分配、确认需求、交付执行、售后四个阶段
  columns = [
    { id: 'order', name: '订单分配' },
    { id: 'requirements', name: '确认需求' },
    { id: 'delivery', name: '交付执行' },
    { id: 'aftercare', name: '售后' }
  ] as const;

  // 基础项目集合（服务端返回 + 本地生成），用于二次处理
  private baseProjects: Project[] = [];

  // 消息监听器
  private messageListener?: (event: MessageEvent) => void;

  // 添加toggleSidebar方法
  toggleSidebar(): void {
    // 侧边栏切换逻辑
    console.log('Toggle sidebar');
  }
  
  // 筛选和排序状态
  searchTerm = signal('');
  statusFilter = signal<string>('all');
  stageFilter = signal<string>('all');
  sortBy = signal<string>('deadline');
  
  // 当前页码
  currentPage = signal(1);
  
  // 每页显示数量
  pageSize = 8;
  
  // 分页后的项目列表（列表模式下可用）
  paginatedProjects = computed(() => {
    const filteredProjects = this.projects();
    const startIndex = (this.currentPage() - 1) * this.pageSize;
    return filteredProjects.slice(startIndex, startIndex + this.pageSize);
  });
  
  // 总页数
  totalPages = computed(() => {
    return Math.ceil(this.projects().length / this.pageSize);
  });
  
  // 筛选和排序选项
  statusOptions = [
    { value: 'all', label: '全部' },
    { value: 'order', label: '订单分配' },
    { value: 'requirements', label: '确认需求' },
    { value: 'delivery', label: '交付执行' },
    { value: 'aftercare', label: '售后' }
  ];
  
  stageOptions = [
    { value: 'all', label: '全部阶段' },
    { value: '需求沟通', label: '需求沟通' },
    { value: '建模', label: '建模' },
    { value: '软装', label: '软装' },
    { value: '渲染', label: '渲染' },
    { value: '尾款结算', label: '尾款结算' },
    { value: '投诉处理', label: '投诉处理' }
  ];
  
  sortOptions = [
    { value: 'deadline', label: '截止日期' },
    { value: 'createdAt', label: '创建时间' },
    { value: 'name', label: '项目名称' }
  ];
  
  // Parse相关
  company: FmodeObject | null = null;
  currentProfile: FmodeObject | null = null;
  isLoading = signal(false);
  loadError = signal<string | null>(null);

  constructor(
    private projectService: ProjectService, 
    private router: Router,
    private route: ActivatedRoute,
    private dialog: MatDialog,
    private profileService: ProfileService
  ) {}
  
  async ngOnInit(): Promise<void> {
    // 读取上次的视图记忆
    const saved = localStorage.getItem('cs.viewMode');
    if (saved === 'card' || saved === 'list' || saved === 'dashboard') {
      this.viewMode.set(saved as 'card' | 'list' | 'dashboard');
    }
    
    // 初始化用户和公司信息
    await this.initializeUserAndCompany();
    
    // 加载真实项目数据
    await this.loadProjects();

    // 处理来自dashboard的查询参数
    this.route.queryParams.subscribe(params => {
      const filter = params['filter'];
      if (filter === 'all') {
        // 显示所有项目 - 重置筛选
        this.statusFilter.set('all');
        console.log('✅ 显示所有项目');
      } else if (filter === 'pending') {
        // 筛选待分配项目 - 使用'order'列ID
        this.statusFilter.set('order');
        console.log('✅ 筛选待分配项目（订单分配阶段）');
      }
    });

    // 添加消息监听器，处理来自iframe的导航请求
    this.messageListener = (event: MessageEvent) => {
      // 验证消息来源（可以根据需要添加更严格的验证）
      if (event.data && event.data.type === 'navigate' && event.data.route) {
        this.router.navigate([event.data.route]);
      }
    };
    window.addEventListener('message', this.messageListener);
  }

  ngOnDestroy(): void {
    // 清理消息监听器
    if (this.messageListener) {
      window.removeEventListener('message', this.messageListener);
    }
  }

  // 视图切换
  toggleView(mode: 'card' | 'list' | 'dashboard') {
    if (this.viewMode() !== mode) {
      this.viewMode.set(mode);
      localStorage.setItem('cs.viewMode', mode);
    }
  }

  // 初始化用户和公司信息
  private async initializeUserAndCompany(): Promise<void> {
    try {
      // 方法1: 从localStorage获取公司ID（参考team-leader的实现）
      const companyId = localStorage.getItem('company');
      if (companyId) {
        // 创建公司指针对象
        const CompanyClass = Parse.Object.extend('Company');
        this.company = new CompanyClass();
        this.company.id = companyId;
        console.log('✅ 从localStorage加载公司ID:', companyId);
      } else {
        // 方法2: 从Profile获取公司信息
        this.currentProfile = await this.profileService.getCurrentProfile();
        if (!this.currentProfile) {
          throw new Error('无法获取用户信息');
        }

        // 获取公司信息
        this.company = this.currentProfile.get('company');
        if (!this.company) {
          throw new Error('无法获取公司信息');
        }
        console.log('✅ 从Profile加载公司信息:', this.company.get('name'));
      }
    } catch (error) {
      console.error('❌ 初始化用户和公司信息失败:', error);
      this.loadError.set('加载用户信息失败，请刷新页面重试');
    }
  }

  // 获取公司指针
  private getCompanyPointer() {
    if (!this.company) {
      throw new Error('公司信息未初始化');
    }
    return {
      __type: 'Pointer',
      className: 'Company',
      objectId: this.company.id
    };
  }

  // 加载项目列表（从Parse Server）
  async loadProjects(): Promise<void> {
    if (!this.company) {
      console.warn('公司信息未加载，跳过项目加载');
      return;
    }

    this.isLoading.set(true);
    this.loadError.set(null);

    try {
      const ProjectQuery = new Parse.Query('Project');
      ProjectQuery.equalTo('company', this.getCompanyPointer());
      // 不强制要求isDeleted字段，兼容没有该字段的数据
      ProjectQuery.notEqualTo('isDeleted', true);
      ProjectQuery.include('contact', 'assignee', 'owner');
      ProjectQuery.descending('updatedAt');
      ProjectQuery.limit(500); // 获取最多500个项目

      const projectObjects = await ProjectQuery.find();
      console.log(`✅ 从Parse Server加载了 ${projectObjects.length} 个项目`);
      
      // 如果没有数据，打印调试信息
      if (projectObjects.length === 0) {
        console.warn('⚠️ 未找到项目数据，请检查：');
        console.warn('1. Parse Server中是否有Project数据');
        console.warn('2. 当前公司ID:', this.company.id);
        console.warn('3. 数据是否正确关联到当前公司');
      }

      // 转换为Project接口格式（并从Product表同步最新阶段）
      const projects: Project[] = await Promise.all(projectObjects.map(async (obj: FmodeObject) => {
        const contact = obj.get('contact');
        const assignee = obj.get('assignee');
        
        // 🔄 从Product表读取最新阶段（与组长端保持一致）
        let rawStage = obj.get('currentStage') || obj.get('stage') || '订单分配';
        try {
          const ProductQuery = new Parse.Query('Product');
          ProductQuery.equalTo('project', { __type: 'Pointer', className: 'Project', objectId: obj.id });
          ProductQuery.notEqualTo('isDeleted', true);
          ProductQuery.descending('updatedAt');
          ProductQuery.limit(1);
          
          const latestProduct = await ProductQuery.first();
          if (latestProduct) {
            const productStage = latestProduct.get('stage');
            if (productStage) {
              rawStage = productStage;
              console.log(`📦 项目 ${obj.get('title')} 从Product同步阶段: ${productStage}`);
            }
          }
        } catch (error) {
          console.warn(`⚠️ 查询项目 ${obj.id} 的Product失败:`, error);
        }
        
        // 🔄 规范化阶段名称（统一为四大核心阶段）
        const normalizedStage = normalizeStage(rawStage);
        
        // 🔄 根据阶段自动判断状态（与组长端、管理端保持一致）
        const projectStatus = obj.get('status');
        const autoStatus = getProjectStatusByStage(rawStage, projectStatus);
        
        console.log(`📊 客服项目 "${obj.get('title')}": 原始阶段=${rawStage}, 规范化阶段=${normalizedStage}, 原状态=${projectStatus}, 自动状态=${autoStatus}`);
        
        // 确保updatedAt是Date对象
        const updatedAt = obj.get('updatedAt');
        const createdAt = obj.get('createdAt');
        
        return {
          id: obj.id,
          name: obj.get('title') || '未命名项目',
          customerName: contact?.get('name') || '未知客户',
          customerId: contact?.id || '',
          status: autoStatus as ProjectStatus, // 使用根据阶段自动判断的状态
          currentStage: normalizedStage as ProjectStage,
          stage: normalizedStage as ProjectStage, // stage和currentStage保持一致
          assigneeId: assignee?.id || '',
          assigneeName: assignee?.get('name') || '未分配',
          deadline: obj.get('deadline') || new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
          createdAt: createdAt instanceof Date ? createdAt : (createdAt ? new Date(createdAt) : new Date()),
          updatedAt: updatedAt instanceof Date ? updatedAt : (updatedAt ? new Date(updatedAt) : new Date()),
          description: obj.get('description') || '',
          priority: obj.get('priority') || 'medium',
          customerTags: [],
          highPriorityNeeds: [],
          skillsRequired: [],
          contact: contact
        };
      }));

      this.allProjects.set(projects);
      this.baseProjects = projects;
      this.processProjects(projects);
      
      console.log('项目数据处理完成');
    } catch (error) {
      console.error('加载项目列表失败:', error);
      this.loadError.set('加载项目列表失败，请刷新页面重试');
      this.projects.set([]);
    } finally {
      this.isLoading.set(false);
    }
  }

  // 映射Parse Server状态到前端状态
  private mapStatus(parseStatus: string): ProjectStatus {
    const statusMap: Record<string, ProjectStatus> = {
      '进行中': '进行中',
      '已完成': '已完成',
      '已暂停': '已暂停',
      '已延期': '已延期'
    };
    return statusMap[parseStatus] || '进行中';
  }

  // 映射Parse Server阶段到前端阶段
  private mapStage(parseStage: string): ProjectStage {
    // 直接返回Parse Server的阶段，不做转换
    // Parse Server的currentStage字段包含：订单分配、需求沟通、建模、软装、渲染、后期、尾款结算、投诉处理等
    if (!parseStage) {
      return '需求沟通'; // 默认阶段
    }
    return parseStage as ProjectStage;
  }
  
  // 处理项目数据，添加计算属性
  processProjects(projects: Project[]): void {
    const processedProjects = projects.map(project => {
      // 计算项目进度（模拟）
      const progress = this.calculateProjectProgress(project);
      
      // 计算距离截止日期的天数
      const daysUntilDeadline = this.calculateDaysUntilDeadline(project.deadline);
      
      // 判断是否紧急（截止日期前3天或已逾期）
      const isUrgent = daysUntilDeadline <= 3 && project.status === '进行中';
      
      // 生成标签显示文本
      const tagDisplayText = this.generateTagDisplayText(project);
      
      return {
        ...project,
        progress,
        daysUntilDeadline,
        isUrgent,
        tagDisplayText
      };
    });
    
    this.projects.set(this.applyFiltersAndSorting(processedProjects));
  }
  
  // 应用筛选和排序
  applyFiltersAndSorting(projects: ProjectListItem[]): ProjectListItem[] {
    let filteredProjects = [...projects];
    
    // 搜索筛选
    if (this.searchTerm().trim()) {
      const searchLower = this.searchTerm().toLowerCase().trim();
      filteredProjects = filteredProjects.filter(project => 
        project.name.toLowerCase().includes(searchLower) ||
        project.customerName.toLowerCase().includes(searchLower)
      );
    }
    
    // 状态筛选（按看板列映射）
    if (this.statusFilter() !== 'all') {
      const col = this.statusFilter() as 'order' | 'requirements' | 'delivery' | 'aftercare';
      filteredProjects = filteredProjects.filter(project => 
        this.getColumnIdForProject(project) === col
      );
    }
    
    // 阶段筛选
    if (this.stageFilter() !== 'all') {
      filteredProjects = filteredProjects.filter(project => 
        project.currentStage === this.stageFilter()
      );
    }
    
    // 排序
    filteredProjects.sort((a, b) => {
      switch (this.sortBy()) {
        case 'deadline':
          return new Date(a.deadline).getTime() - new Date(b.deadline).getTime();
        case 'createdAt':
          return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
        case 'name':
          return a.name.localeCompare(b.name);
        default:
          return 0;
      }
    });
    
    return filteredProjects;
  }
  
  // 生成标签显示文本
  generateTagDisplayText(project: Project): string {
    if (!project.customerTags || project.customerTags.length === 0) {
      return '普通项目';
    }
    
    const tag = project.customerTags[0];
    return `${tag.preference}${tag.needType}`;
  }
  
  // 计算项目进度（模拟）
  calculateProjectProgress(project: Project): number {
    if (project.status === '已完成') return 100;
    if (project.status === '已暂停' || project.status === '已延期') return 0;
    
    // 基于当前阶段计算进度（包含四大核心阶段和细分阶段）
    const stageProgress: Record<ProjectStage, number> = {
        // 四大核心阶段
        '订单分配': 0,
        '确认需求': 25,
        '交付执行': 60,
        '售后归档': 95,
        // 细分阶段（向后兼容）
        '需求沟通': 20,
        '方案确认': 30,
        '建模': 40,
        '软装': 50,
        '渲染': 70,
        '后期': 85,
        '尾款结算': 90,
        '客户评价': 100,
        '投诉处理': 100
    };
    
    return stageProgress[project.currentStage] || 0;
  }
  
  // 计算距离截止日期的天数
  calculateDaysUntilDeadline(deadline: Date): number {
    const now = new Date();
    const deadlineDate = new Date(deadline);
    const diffTime = deadlineDate.getTime() - now.getTime();
    return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  }
  
  // 列表/筛选交互（保留已有实现）
  onSearch(): void {
    // 搜索后重算
    this.processProjects(this.baseProjects);
  }

  onStatusChange(event: Event): void {
    const value = (event.target as HTMLSelectElement).value;
    this.statusFilter.set(value);
    this.processProjects(this.baseProjects);
  }

  onStageChange(event: Event): void {
    const value = (event.target as HTMLSelectElement).value;
    this.stageFilter.set(value);
    this.processProjects(this.baseProjects);
  }

  onSortChange(event: Event): void {
    const value = (event.target as HTMLSelectElement).value;
    this.sortBy.set(value);
    this.processProjects(this.baseProjects);
  }

  goToPage(page: number): void {
    if (page >= 1 && page <= this.totalPages()) {
      this.currentPage.set(page);
    }
  }

  prevPage(): void {
    if (this.currentPage() > 1) {
      this.currentPage.update(v => v - 1);
    }
  }

  nextPage(): void {
    if (this.currentPage() < this.totalPages()) {
      this.currentPage.update(v => v + 1);
    }
  }

  pageNumbers = computed(() => {
    const total = this.totalPages();
    const pages: number[] = [];
    const maxToShow = Math.min(total, 5);
    for (let i = 1; i <= maxToShow; i++) pages.push(i);
    return pages;
  });

  getAbsValue(value: number): number {
    return Math.abs(value);
  }

  formatDate(date: Date): string {
    const d = new Date(date);
    const y = d.getFullYear();
    const m = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    return `${y}-${m}-${day}`;
  }

  getStatusClass(status: string): string {
    switch (status) {
      case '进行中': return 'status-in-progress';
      case '已完成': return 'status-completed';
      case '已暂停': return 'status-paused';
      case '已延期': return 'status-overdue';
      default: return '';
    }
  }

  getStageClass(stage: string): string {
    switch (stage) {
      case '需求沟通': return 'stage-communication';
      case '建模': return 'stage-modeling';
      case '软装': return 'stage-decoration';
      case '渲染': return 'stage-rendering';
      case '投诉处理': return 'stage-completed';
      case '订单分配': return 'stage-active';
      case '方案确认': return 'stage-active';
      case '尾款结算': return 'stage-completed';
      case '客户评价': return 'stage-completed';
      default: return '';
    }
  }

  // 看板分组逻辑 - 按照订单分配、确认需求、交付执行、售后四个阶段
  // 🔄 使用规范化后的四大核心阶段名称进行匹配
  private isOrderAssignment(p: Project): boolean {
    // 订单分配阶段：currentStage为"订单分配"
    const stage = p.currentStage as string;
    return stage === '订单分配';
  }

  private isRequirementsConfirmation(p: Project): boolean {
    // 确认需求阶段：currentStage为"确认需求"
    // 注意：阶段已经通过normalizeStage规范化为四大核心阶段
    const stage = p.currentStage as string;
    return stage === '确认需求';
  }

  private isDeliveryExecution(p: Project): boolean {
    // 交付执行阶段：currentStage为"交付执行"
    const stage = p.currentStage as string;
    return stage === '交付执行';
  }

  private isAftercare(p: Project): boolean {
    // 售后归档阶段：currentStage为"售后归档" 或 状态为"已完成"
    const stage = p.currentStage as string;
    return stage === '售后归档' || p.status === '已完成';
  }

  getProjectsByColumn(columnId: 'order' | 'requirements' | 'delivery' | 'aftercare'): ProjectListItem[] {
    const list = this.projects();
    switch (columnId) {
      case 'order':
        return list.filter(p => this.isOrderAssignment(p));
      case 'requirements':
        return list.filter(p => this.isRequirementsConfirmation(p));
      case 'delivery':
        return list.filter(p => this.isDeliveryExecution(p));
      case 'aftercare':
        return list.filter(p => this.isAftercare(p));
    }
  }

  // 新增：根据项目状态与阶段推断所在看板列
  getColumnIdForProject(project: ProjectListItem): 'order' | 'requirements' | 'delivery' | 'aftercare' {
    if (this.isOrderAssignment(project)) return 'order';
    if (this.isRequirementsConfirmation(project)) return 'requirements';
    if (this.isDeliveryExecution(project)) return 'delivery';
    if (this.isAftercare(project)) return 'aftercare';
    return 'requirements'; // 默认为确认需求阶段
  }

  // 详情跳转到wxwork项目详情页面（与组长、管理员保持一致）
  navigateToProject(project: ProjectListItem, columnId: 'order' | 'requirements' | 'delivery' | 'aftercare') {
    // 获取公司ID
    const cid = localStorage.getItem('company') || '';
    if (!cid) {
      console.error('未找到公司ID，无法跳转到项目详情页');
      return;
    }
    
    // 根据columnId映射到wxwork路由的阶段路径
    // wxwork路由支持的阶段：order, requirements, delivery, aftercare, issues
    const stagePathMapping = {
      'order': 'order',           // 订单分配
      'requirements': 'requirements', // 确认需求
      'delivery': 'delivery',     // 交付执行
      'aftercare': 'aftercare'    // 售后归档
    };
    
    const stagePath = stagePathMapping[columnId];
    
    // 跳转到wxwork路由的项目详情页（纯净页面，无管理端侧边栏）
    // 路由格式：/wxwork/:cid/project/:projectId/:stage
    this.router.navigate(['/wxwork', cid, 'project', project.id, stagePath]);
  }

  // 新增：直接进入沟通管理（消息）标签
  navigateToMessages(project: ProjectListItem) {
    this.router.navigate(['/customer-service/messages'], { queryParams: { projectId: project.id } });
  }

  // 导航到创建订单页面
  navigateToCreateOrder() {
    // 打开咨询订单弹窗
    const dialogRef = this.dialog.open(ConsultationOrderDialogComponent, {
      width: '900px',
      maxWidth: '95vw',
      maxHeight: '90vh',
      panelClass: 'consultation-order-dialog'
    });

    // 监听订单分配成功事件
    dialogRef.componentInstance.orderCreated.subscribe((orderData: any) => {
      // 关闭弹窗
      dialogRef.close();
      
      // 准备同步数据
      const syncData = {
        customerInfo: orderData.customerInfo,
        requirementInfo: orderData.requirementInfo,
        preferenceTags: orderData.preferenceTags,
        assignedDesigner: orderData.assignedDesigner
      };
      
      // 跳转到新创建的项目详情页面，传递同步数据
      this.router.navigate([
        '/designer/project-detail', 
        orderData.orderId
      ], {
        queryParams: { 
          role: 'customer-service', 
          activeTab: 'overview',
          syncData: JSON.stringify(syncData)
        }
      });
    });
  }
}