import { Component, ViewChild, ElementRef, OnDestroy, inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { RouterOutlet, RouterLink, RouterLinkActive, Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import { FormsModule } from '@angular/forms';
import { ApiService } from './core/api.service';
import { AuthService } from './core/auth.service';
import { LoginComponent } from './pages/login/login';
import { ChatContextService } from './core/chat-context.service';
import { marked } from 'marked';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive, FormsModule, LoginComponent],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App implements OnDestroy, OnInit {
  auth = inject(AuthService);

  showBillingModal = false;
  activeModalTab: 'billing' | 'profile' = 'billing';
  credits = 12800;

  // --- Upload State ---
  pendingUploadFile: File | null = null;

  // Profile Form States
  profileRealName = '';
  profileCompany = '';
  profileRole = 'doctor';
  profileVoiceUrl = '';
  
  // Profile Voice Recording
  isProfileRecording = false;
  profileMediaRecorder: MediaRecorder | null = null;
  profileAudioChunks: Blob[] = [];
  profileVoiceUploading = false;
  recordProgress = 0;
  private recordInterval: any;
  
  // UI states for success
  profileSaveSuccess = false;
  isFullscreen = false;

  // Recording & Upload Modal State
  showActionSheet = false;
  isRecording = false;
  isRecordingPaused = false;
  isProcessing = false;
  uploadComplete = false;

  recordDuration = 0;
  recordingTimer: any;

  // Triplet Information
  recClient = '';
  recDoctor = '';
  recAssistant = '';

  // Relay Bar Agents
  private sanitizer = inject(DomSanitizer);
  private router = inject(Router);
  private api = inject(ApiService);
  public chatCtx = inject(ChatContextService);

  private sseSubscription: any;

  isContextPage = false;
  isContextGenerating = false;
  chatPlaceholder = '向深维追问...';
  showChatSheet = false;
  chatInput = '';
  chatMessages: { role: string, rawContent?: string, htmlContent?: string, isStreaming?: boolean }[] = [];

  agents = [
    { id: 'asr', name: 'Qwen转写', status: 'pending', iconHtml: this.sanitizer.bypassSecurityTrustHtml(`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg>`) },
    { id: 'extract', name: '意图标注', status: 'pending', iconHtml: this.sanitizer.bypassSecurityTrustHtml(`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path></svg>`) },
    { id: 'expert', name: '专家团分析', status: 'pending', iconHtml: this.sanitizer.bypassSecurityTrustHtml(`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>`) },
    { id: 'assemble', name: 'X光片生成', status: 'pending', iconHtml: this.sanitizer.bypassSecurityTrustHtml(`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg>`) }
  ];

  @ViewChild('fileInput') fileInput!: ElementRef;

  private pressTimer: any;
  private hasFiredLongPress = false;

  constructor() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: any) => {
      let url = event.urlAfterRedirects;
      try { url = decodeURIComponent(url); } catch (e) {}

      this.isContextPage = url.includes('/report/') || url.includes('/client/');
      this.isContextGenerating = url.includes('recording');
      
      this.chatPlaceholder = url.includes('/report/') ? '基于本场面诊向深维追问...' : '基于档案向深维军师追问...';
    });

    // Listen for cross-browser fullscreen events
    document.addEventListener('fullscreenchange', () => {
      this.isFullscreen = !!document.fullscreenElement;
    });
    document.addEventListener('webkitfullscreenchange', () => {
      this.isFullscreen = !!(document as any).webkitFullscreenElement;
    });
  }

  ngOnInit() {
    this.checkAuthAndLoadProfile();
    this.setupSSESubscription();
  }

  setupSSESubscription() {
    this.sseSubscription = this.api.listenToEvents().subscribe(event => {
      const { type, payload } = event;
      if (!payload || !payload.chatId) return;

      // Only handle events for the current active chat context
      if (this.chatCtx.chatId() !== payload.chatId) return;

      switch (type) {
        case 'agent:chunk':
          const currentStreamingMsg = this.chatMessages.find(m => m.isStreaming && m.role === 'agent');
          if (currentStreamingMsg) {
            currentStreamingMsg.rawContent = (currentStreamingMsg.rawContent || '') + payload.text;
            const displayStr = this.sanitizeStreamingContent(currentStreamingMsg.rawContent);
            currentStreamingMsg.htmlContent = marked.parse(displayStr) as string;
          }
          break;
        case 'agent:thinking':
          // Optionally show thinking state in UI (e.g. pill inside the message)
          // For now, we can log it or show a temporary notification if needed
          console.log('Agent Thinking:', payload.step, payload.message);
          break;
        case 'agent:done':
          const activeStreamingMsg = this.chatMessages.find(m => m.isStreaming && m.role === 'agent');
          if (activeStreamingMsg) {
            activeStreamingMsg.isStreaming = false;
            if (payload.fullAnswer) {
              activeStreamingMsg.rawContent = payload.fullAnswer;
              const finalStr = this.sanitizeStreamingContent(activeStreamingMsg.rawContent || '');
              activeStreamingMsg.htmlContent = marked.parse(finalStr) as string;
            } else {
              const finalFallbackStr = this.sanitizeStreamingContent(activeStreamingMsg.rawContent || '');
              activeStreamingMsg.htmlContent = marked.parse(finalFallbackStr) as string;
            }
          }
          break;
        case 'agent:error':
          const failedMsg = this.chatMessages.find(m => m.isStreaming && m.role === 'agent');
          if (failedMsg) {
            failedMsg.isStreaming = false;
            failedMsg.htmlContent = `[系统异常] ${payload.message}`;
            failedMsg.rawContent = failedMsg.htmlContent;
          }
          break;
      }
    });
  }

  // --- Profile Methods ---
  async checkAuthAndLoadProfile() {
    if (this.auth.isAuthenticated()) {
      try {
        const p = await this.api.getProfile();
        if (p) {
          this.profileRealName = p.realName || '';
          this.profileCompany = p.company || '';
          this.profileRole = p.role || 'doctor';
          this.profileVoiceUrl = p.voiceUrl || '';
        }
      } catch (e) {
        console.error('Failed to load profile', e);
      }
    }
  }

  async saveProfile() {
    try {
      await this.api.saveProfile(this.profileCompany, this.profileRole, this.profileVoiceUrl, this.profileRealName);
      this.profileSaveSuccess = true;
      setTimeout(() => this.profileSaveSuccess = false, 2000);
    } catch (e) {
      alert('保存失败，请稍后重试');
    }
  }

  async toggleProfileVoiceRecord() {
    if (this.isProfileRecording) {
      this.stopProfileRecord();
    } else {
      await this.startProfileRecord();
    }
  }

  async startProfileRecord() {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      this.profileMediaRecorder = new MediaRecorder(stream);
      this.profileAudioChunks = [];
      this.isProfileRecording = true;
      this.recordProgress = 0;

      this.recordInterval = setInterval(() => {
        if (this.recordProgress < 100) {
          this.recordProgress += 1; // 1% per 100ms
        } else {
          // You could automatically stop at 100%, but let's let the user manually stop or auto-stop
          // this.stopProfileRecord(); 
        }
      }, 100);

      this.profileMediaRecorder.ondataavailable = (e: any) => {
        if (e.data.size > 0) this.profileAudioChunks.push(e.data);
      };

      this.profileMediaRecorder.onstop = async () => {
        this.isProfileRecording = false;
        if (this.recordInterval) clearInterval(this.recordInterval);
        
        const blob = new Blob(this.profileAudioChunks, { type: 'audio/webm' });
        this.profileVoiceUploading = true;
        try {
          const file = new File([blob], `voice_print_${Date.now()}.webm`, { type: 'audio/webm' });
          const { putUrl, ossKey } = await this.api.getUploadToken(file.name);
          await this.api.uploadToOSS(putUrl, file);
          
          const urlPattern = putUrl.split('?')[0];
          this.profileVoiceUrl = urlPattern;
          await this.saveProfile();
        } catch (err) {
          console.error("Voice upload failed", err);
          alert("声纹上传失败");
        } finally {
          this.profileVoiceUploading = false;
        }
      };

      this.profileMediaRecorder.start();
    } catch (err) {
      alert("无法访问麦克风, 请授予权限");
    }
  }

  stopProfileRecord() {
    if (this.profileMediaRecorder && this.profileMediaRecorder.state === 'recording') {
      this.profileMediaRecorder.stop();
      this.profileMediaRecorder.stream.getTracks().forEach((t: any) => t.stop());
    }
    if (this.recordInterval) clearInterval(this.recordInterval);
  }
  
  getRecordColor() {
    // Red: 239, 68, 68 -> Green: 34, 197, 94
    const r = Math.round(239 - ((239 - 34) * (this.recordProgress / 100)));
    const g = Math.round(68 + ((197 - 68) * (this.recordProgress / 100)));
    const b = Math.round(68 + ((94 - 68) * (this.recordProgress / 100)));
    return `rgb(${r}, ${g}, ${b})`;
  }

  deleteProfileVoice() {
    this.profileVoiceUrl = '';
    this.saveProfile();
  }

  openProfileModal() {
    this.showBillingModal = true;
    this.activeModalTab = 'profile';
    this.checkAuthAndLoadProfile();
  }

  openBillingModal() {
    this.showBillingModal = true;
    this.activeModalTab = 'billing';
  }

  ngOnDestroy() {
    if (this.sseSubscription) {
      this.sseSubscription.unsubscribe();
    }
    if (this.recordingTimer) clearInterval(this.recordingTimer);
    if (this.pressTimer) clearTimeout(this.pressTimer);
  }

  toggleFullscreen() {
    if (!this.isFullscreen) {
      const docElm = document.documentElement as any;
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
      } else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
      }
    } else {
      const doc = document as any;
      if (doc.exitFullscreen) {
        doc.exitFullscreen();
      } else if (doc.webkitCancelFullScreen) {
        doc.webkitCancelFullScreen();
      }
    }
  }

  formatCredits(val: number): string {
    return val.toLocaleString();
  }

  formatDuration(seconds: number): string {
    const m = Math.floor(seconds / 60);
    const s = seconds % 60;
    return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
  }

  // --- Long Press Logic ---

  onPressStart(event: Event) {
    if (event.type === 'mousedown' && (event as MouseEvent).button !== 0) return;
    this.hasFiredLongPress = false;
    
    // 如果已经在录音中，禁用长按
    if (this.isRecording) {
      return; 
    }

    this.pressTimer = setTimeout(() => {
      this.hasFiredLongPress = true;
      this.pressTimer = null;
      // Inbox SPEC: 长按直接唤起文件选择器，无客户绑定
      this.triggerUploadFile();
    }, 600);
  }

  onPressEnd(event: Event) {
    if (event.cancelable && event.type === 'touchend') {
      event.preventDefault();
    }
    
    if (this.isRecording) {
      this.showActionSheet = !this.showActionSheet;
      return;
    }

    if (this.pressTimer) {
      clearTimeout(this.pressTimer);
      this.pressTimer = null;
      if (!this.hasFiredLongPress) {
        this.startRecording();
      }
    }
  }

  // --- Actions ---
  startRecording() {
    this.showActionSheet = true;
    this.isRecording = true;
    this.isRecordingPaused = false;
    this.isProcessing = false;
    this.uploadComplete = false;
    this.recordDuration = 0;
    this.recordingTimer = setInterval(() => { 
      if (!this.isRecordingPaused) {
        this.recordDuration++; 
      }
    }, 1000);
  }

  stopAndProcess() {
    this.isRecording = false;
    this.isRecordingPaused = false;
    if (this.recordingTimer) clearInterval(this.recordingTimer);
    
    // The native audio blob hasn't been bridged yet (Tauri V4 audio pipeline pending)
    // For now, close the sheet. (Users can long-press to test the real file upload pipeline).
    this.showActionSheet = false;
    alert('Tauri 原生录音桥接尚未完成。如需体验真实推理管线，请长按录音键使用本地录音文件上传。');
  }

  togglePauseResume() {
    this.isRecordingPaused = !this.isRecordingPaused;
  }

  triggerUploadFile() {
    if (this.fileInput) {
      this.fileInput.nativeElement.click();
    }
  }

  async handleFileUpload(event: Event) {
    const target = event.target as HTMLInputElement;
    if (target.files && target.files.length > 0) {
      this.pendingUploadFile = target.files[0];
      target.value = '';
      
      this.isRecording = false;
      this.showActionSheet = true;
      await this.runRealPipeline(this.pendingUploadFile!);
    }
  }

  // --- Real End-to-End Pipeline ---
  async runRealPipeline(file: File) {
    this.isProcessing = true;
    this.agents.forEach(a => a.status = 'pending');

    try {
      this.agents[0].status = 'processing';
      const { putUrl, ossKey } = await this.api.getUploadToken(file.name);
      await this.api.uploadToOSS(putUrl, file);

      // Inbox SPEC: contextId 不含 clientId，仅有 asrId
      const asrId = Math.random().toString(36).substring(7);
      const contextId = `recording:${asrId}`;

      const res = await this.api.confirmUpload(ossKey, file.name, contextId);
      const reportId = res?.data?.reportId || res?.reportId || contextId;

      // Upload succeeds, do not block the UI. Navigate immediately to the skeleton report screen.
      this.isProcessing = false;
      this.showActionSheet = false;
      
      this.router.navigate(['/processing', encodeURIComponent(reportId)]);

    } catch (e: any) {
      console.error('Pipeline failed at upload', e);
      alert('上传失败: ' + e.message);
      this.isProcessing = false;
      this.showActionSheet = false;
    }
  }

  // --- Mock Pipeline for Recording ---

  closeSheets() {
    this.showActionSheet = false;
    this.showChatSheet = false;
  }

  // --- Report Chat Mock Logic ---
  async openChatSheet() {
    this.showChatSheet = true;
    
    // Only load history if we haven't loaded it yet for this context
    if (this.chatMessages.length === 0 && this.chatCtx.chatId()) {
      try {
        const res = await this.api.getChatHistory(this.chatCtx.chatId());
        if (res && res.messages && res.messages.length > 0) {
          this.chatMessages = res.messages.map((m: any) => {
            const rawContent = m.content || '';
            const displayStr = this.sanitizeStreamingContent(rawContent);
            const htmlContent = marked.parse(displayStr) as string;
            return {
              role: m.role,
              rawContent: rawContent,
              htmlContent: htmlContent,
              isStreaming: false
            };
          });
        } else {
          // No history, push initial greeting
          const title = this.chatCtx.contextTitle();
          const code = this.chatCtx.contextCode();
          const greeting = this.chatCtx.contextType() === 'client'
                           ? `医生您好，上下文已锁定：${title}（全景档案）。您可以向我追问历史拒因分析或索要跨品类破冰话术。`
                           : `医生您好，我是本场面诊的深维特勤 AI。上下文 (标识：${code}) 已锁定。您可以随时向我追问改进方案。`;
          const parsed = marked.parse(greeting) as string;
          this.chatMessages.push({ role: 'agent', rawContent: greeting, htmlContent: parsed, isStreaming: false });
        }
      } catch(e) {
        console.error('Failed to load chat history:', e);
        const errStr = '医生您好，我是深维特勤 AI。无法获取历史记录，您可以直接向我提问。';
        this.chatMessages.push({ role: 'agent', rawContent: errStr, htmlContent: errStr, isStreaming: false });
      }
    }
  }

  async sendChatMessage() {
    if (!this.chatInput.trim() || !this.chatCtx.chatId()) return;
    
    const text = this.chatInput;
    this.chatInput = '';
    
    // Push user message
    const parsedUser = marked.parse(text) as string;
    this.chatMessages.push({ role: 'user', rawContent: text, htmlContent: parsedUser, isStreaming: false });
    
    // Push agent placeholder
    this.chatMessages.push({ role: 'agent', rawContent: '', htmlContent: '', isStreaming: true });

    try {
      await this.api.sendChat(this.chatCtx.chatId(), text, this.chatCtx.contextId());
    } catch(e) {
       const failMsg = this.chatMessages.find(m => m.isStreaming && m.role === 'agent');
       if (failMsg) {
         failMsg.isStreaming = false;
         failMsg.htmlContent = `发送失败: 请重试`;
         failMsg.rawContent = failMsg.htmlContent;
       }
    }
  }

  private sanitizeStreamingContent(raw: string): string {
    if (!raw) return '';
    let text = raw;
    // Strip markdown JSON block wrappings entirely
    text = text.replace(/```json\s*\{[\s\S]*?\}\s*```/g, '');
    // Strip bare unescaped JSON tool reports which match specific sigs
    text = text.replace(/\{"content":[\s\S]*?\}/g, '');
    text = text.replace(/\{"total_count":[\s\S]*?\}/g, '');
    // Strip trailing tool garbage that might be partially yielded
    return text.trim();
  }

}