import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatTooltipModule } from '@angular/material/tooltip';
import { ProjectTabComponent } from '../../components/project-tab.component';
import { SessionService } from '../../services/session.service';
import { IndependentEventService } from '../../services/independent-event.service';
import { Session } from '../../models/session.model';

@Component({
  selector: 'app-project-page',
  standalone: true,
  imports: [
    CommonModule,
    MatProgressSpinnerModule,
    MatIconModule,
    MatButtonModule,
    MatTooltipModule,
    ProjectTabComponent
  ],
  templateUrl: './project-page.component.html',
  styleUrl: './project-page.component.scss',
  providers: [IndependentEventService] // 组件级独立事件服务
})
export class ProjectPageComponent implements OnInit, OnDestroy {
  projectId: string | null = null;
  project: Session | null = null;
  instanceId: string = '';
  isLoading = true;
  error: string | null = null;
  
  // 公开独立事件服务供模板使用
  get independentEventService(): IndependentEventService {
    return this._independentEventService;
  }

  private routeSub?: Subscription;
  private sessionsSub?: Subscription;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private sessionService: SessionService,
    private _independentEventService: IndependentEventService
  ) {}

  ngOnInit() {
    console.log('🔍 [ProjectPageComponent] 初始化');
    this.routeSub = this.route.paramMap.subscribe(params => {
      const id = params.get('projectId');
      console.log('🔍 [ProjectPageComponent] 路由参数变化，新ID:', id, '旧ID:', this.projectId);
      if (id && id !== this.projectId) {
        this.projectId = id;
        this.loadProject(id);
      } else if (id === this.projectId) {
        console.log('🔍 [ProjectPageComponent] 项目ID未变化，跳过重新加载');
      } else {
        console.log('🔍 [ProjectPageComponent] 无项目ID或ID为空');
      }
    });
  }

  loadProject(projectId: string) {
    console.log('🔍 [ProjectPageComponent] 加载项目:', projectId);
    
    // 取消之前的订阅
    if (this.sessionsSub) {
      this.sessionsSub.unsubscribe();
      this.sessionsSub = undefined;
    }
    
    // 重置状态
    this.isLoading = true;
    this.error = null;
    this.project = null;
    // 使用项目ID+时间戳确保实例ID唯一，避免组件复用问题
    this.instanceId = `project-${projectId}-${Date.now()}`;
    
    // 订阅会话列表变化，查找对应项目
    this.sessionsSub = this.sessionService.sessions$.subscribe(sessions => {
      const session = sessions.find(s => s.project_id === projectId || s.id === projectId);
      if (session) {
        console.log('🔍 [ProjectPageComponent] 找到项目会话:', session.title);
        this.project = session;
        this.isLoading = false;
        
        // 建立独立SSE连接（使用会话ID）
        console.log('🔍 [ProjectPageComponent] 建立独立SSE连接，会话ID:', session.id);
        this._independentEventService.connect(session.id);
      } else {
        console.log('🔍 [ProjectPageComponent] 未找到项目，重新加载会话列表');
        // 如果没有找到，尝试加载会话
        this.sessionService.loadSessions();
      }
    });

    // 初始加载会话
    this.sessionService.loadSessions();
  }

  goBack() {
    this.router.navigate(['/home']);
  }

  ngOnDestroy() {
    if (this.routeSub) {
      this.routeSub.unsubscribe();
    }
    if (this.sessionsSub) {
      this.sessionsSub.unsubscribe();
    }
    
    // 断开独立SSE连接
    console.log('🔍 [ProjectPageComponent] 组件销毁，断开独立SSE连接');
    this._independentEventService.disconnect();
  }
}