import { Component, OnInit, OnDestroy, signal, computed, Inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Router, RouterModule } 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';

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 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();

    // 添加消息监听器，处理来自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接口格式
      const projects: Project[] = projectObjects.map((obj: FmodeObject) => {
        const contact = obj.get('contact');
        const assignee = obj.get('assignee');
        const mappedStage = this.mapStage(obj.get('currentStage'));
        
        return {
          id: obj.id,
          name: obj.get('title') || '未命名项目',
          customerName: contact?.get('name') || '未知客户',
          customerId: contact?.id || '',
          status: this.mapStatus(obj.get('status')),
          currentStage: mappedStage,
          stage: mappedStage, // stage和currentStage保持一致
          assigneeId: assignee?.id || '',
          assigneeName: assignee?.get('name') || '未分配',
          deadline: obj.get('deadline') || new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
          createdAt: obj.get('createdAt') || new Date(),
          updatedAt: obj.get('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> = {
        '需求沟通': 20,
        '建模': 40,
        '软装': 60,
        '渲染': 80,
        '后期': 85,
        '尾款结算': 90,
        '投诉处理': 100,
        订单分配: 0,
        方案确认: 0,
        
        客户评价: 0
    };
    
    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为"订单分配"
    return !p.assigneeId || p.assigneeId.trim() === '' || p.currentStage === '订单分配';
  }

  private isRequirementsConfirmation(p: Project): boolean {
    // 确认需求阶段：需求沟通、方案确认等
    const requirementStages: ProjectStage[] = ['需求沟通', '方案确认'];
    return !this.isAftercare(p) && !this.isOrderAssignment(p) && requirementStages.includes(p.currentStage);
  }

  private isDeliveryExecution(p: Project): boolean {
    // 交付执行阶段：建模、软装、渲染、后期、尾款结算等
    const deliveryStages: ProjectStage[] = ['建模', '软装', '渲染', '后期', '尾款结算'];
    return !this.isAftercare(p) && !this.isOrderAssignment(p) && deliveryStages.includes(p.currentStage);
  }

  private isAftercare(p: Project): boolean {
    // 售后阶段：投诉处理、客户评价、已完成等
    const aftercareStages: ProjectStage[] = ['投诉处理', '客户评价'];
    return p.status === '已完成' || aftercareStages.includes(p.currentStage);
  }

  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'; // 默认为确认需求阶段
  }

  // 详情跳转到设计师项目详情页面，传递客服角色标识和当前阶段信息
  navigateToProject(project: ProjectListItem, columnId: 'order' | 'requirements' | 'delivery' | 'aftercare') {
    // 根据columnId映射到对应的阶段
    const stageMapping = {
      'order': '订单分配',
      'requirements': project.currentStage || '需求沟通', // 使用项目实际阶段或默认阶段
      'delivery': project.currentStage || '建模', // 使用项目实际阶段或默认阶段
      'aftercare': '客户评价'
    };
    
    this.router.navigate(['/designer/project-detail', project.id], { 
      queryParams: { 
        role: 'customer-service',
        activeTab: 'progress',
        currentStage: stageMapping[columnId]
      } 
    });
  }

  // 新增：直接进入沟通管理（消息）标签
  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)
        }
      });
    });
  }
}