import { Component, ElementRef, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { predict } from 'src/app/service/api'; // 引入 API 服务
import { ModalController } from '@ionic/angular';
import { CeramicDetailsPage } from '../ceramic-details/ceramic-details.page';
@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page implements AfterViewInit{
  @ViewChild('video',{ static: false }) videoElement!: ElementRef<HTMLVideoElement>;
  @ViewChild('canvas',{ static: false }) canvasElement!: ElementRef<HTMLCanvasElement>;
  @ViewChild('fileInput',{ static: false }) fileInput!: ElementRef<HTMLInputElement>;
  isCameraMode: boolean = false; // 是否为摄像头模式
  imageCaptured: boolean = false; // 是否已捕获图像
  cameraAvailable: boolean = false; // 摄像头是否可用
  imageSrc: string | null = null; // 保存图片数据
  videoStream: MediaStream | null = null; // 保存视频流
  showAlert: boolean = false; // 是否显示弹窗
  isDestroyed: boolean = false; // 管理背景和相关元素的状态
  recognitionResults: { result: string; confidence: string}[] = []; // 动态识别结果
  constructor(private modalController: ModalController) {
    this.checkCameraAvailability();
  }
  checkCameraAvailability() {
    navigator.mediaDevices
      .getUserMedia({ video: true })
      .then(() => {
        this.cameraAvailable = true; // 摄像头可用
      })
      .catch(() => {
        this.cameraAvailable = false; // 摄像头不可用
      });
  }
  // 确保视图加载完成后 ViewChild 初始化
  ngAfterViewInit() {
    console.log('Video Element:', this.videoElement);
    console.log('Canvas Element:', this.canvasElement);
    console.log('File Input Element:', this.fileInput);
  }
  // 卷轴卷起/放下
  toggleBackground() {
    this.isDestroyed = !this.isDestroyed;
    if (this.isDestroyed) {
       // 销毁视频流
       if (this.videoStream) {
        const tracks = this.videoStream.getTracks();
        tracks.forEach((track) => track.stop());
        this.videoStream = null;
      }
      this.imageSrc = null; // 清除图片数据
      this.isCameraMode = false; // 停止摄像头模式
    } else {
      // 恢复摄像头功能
      this.checkCameraAvailability();
    }
  }
  // 切换模式
  toggleMode() {
    this.isCameraMode = !this.isCameraMode;
    this.imageSrc = null; // 切换模式时清除图片
    if (!this.isCameraMode) {
      this.stopCamera();
    }
  }
  // 选择图片
  selectImage() {
    if (this.isDestroyed) {
      alert('当前功能已禁用，请先恢复背景！');
      return;
    }
    if (this.fileInput) {
      this.fileInput.nativeElement.click();
    } else {
      console.error('File input is not available');
    }
  }
  // 处理选择的图片
  onFileSelected(event: any) {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e: any) => {
        this.imageSrc = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  }
  // 启动摄像头
  async startCamera() {
    if (this.isDestroyed) {
      alert('当前功能已禁用，请先恢复背景！');
      return;
    }
    try {
      this.isCameraMode = true;
      this.imageCaptured = false;
      this.videoStream = await navigator.mediaDevices.getUserMedia({ video: true });
      const video = this.videoElement.nativeElement;
      video.srcObject = this.videoStream;
      video.play();
      // 自动捕获图像逻辑：3秒后捕获最后一帧
      setTimeout(() => {
        if (this.isCameraMode && this.videoStream) {
          this.captureImage();
        }
      }, 3000);
    } catch (error) {
      console.error('Error accessing camera:', error);
    }
  }
  // 停止摄像头
  stopCamera() {
    if (this.videoStream) {
      const tracks = this.videoStream.getTracks();
      tracks.forEach(track => track.stop());
      this.videoStream = null;
    }
    this.isCameraMode = false;
  }
  // 捕获图像
  captureImage() {
    if (!this.videoElement || !this.canvasElement) {
      console.error('Video or Canvas element is not available');
      return;
    }
    const video = this.videoElement.nativeElement;
    const canvas = this.canvasElement.nativeElement;
    const context = canvas.getContext('2d');
    if (context) {
      // 设置 Canvas 大小与视频相同
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      // 绘制当前视频帧到 Canvas
      context.drawImage(video, 0, 0, canvas.width, canvas.height);
      // 获取图片数据并保存到 imageSrc
      this.imageSrc = canvas.toDataURL('image/png');
      this.imageCaptured = true;
      // 停止摄像头
      this.stopCamera();
    }
  }
  //开始检测
  async startDetection() {
    if (!this.imageSrc) {
      console.error('No image available for detection');
      alert('请先捕获或选择图像！');
      return;
    }
    console.log('开始检测事件触发，调用后端接口');
    //调用Flask API进行检测
    try {
      predict(this.imageSrc)
        .then(async (response) => {
          console.log('检测结果:', response);
          // 假设后端返回的数据格式为 { prediction: string, confidence: string, details: string }
          const newResult = {
            result: response.prediction.predicted_label || '未知结果',
            confidence: response.prediction.confidence
            ? response.prediction.confidence.toFixed(3) 
            : '未知置信度',
          };
          // 将新结果添加到识别结果数组
        this.recognitionResults.push(newResult);
        // 显示陶瓷详情页面
        await this.openCeramicDetails(newResult.result, newResult.confidence); // 传递两个参数
      })
    }
    catch(error) {
      console.error('检测失败:', error);
      alert('检测失败，请检查网络或后端服务！');
    };
  }
  // 显示陶瓷详情模态框
  async openCeramicDetails(ceramicName: string, confidence: string) {
    // 定义陶瓷信息映射表
    const ceramicInfo: { [key: string]: { description: string; imageUrl: string } } = {
      '兔毫盏': {
        description: '兔毫盏是一种特殊的黑釉瓷器，以其如丝似毫的窑变色彩流纹命名。它的特点是在黑釉中有丝状黑褐色兔毛般结晶，俗称“兔毫”。兔毫盏在宋代非常流行，与当时的饮茶风气有关，特别是“斗茶”习俗。宋代的兔毫盏以福建省建阳县水吉镇建窑烧造的最为著名，其胎体厚实、坚致，色呈浅黑或紫黑，器型以碗、盏为主。兔毫盏的析晶斑纹为黑色釉层中透出均匀细密的丝状筋脉条纹，形如兔子的毫毛，故得此名。宋代文人对兔毫盏多有赞美之辞，如蔡襄《茶录》云：“兔毫紫瓯新，蟹眼清泉煮。”宋徽宗赵佶在《大观茶论》中称“盏色贵青黑，玉毫条达者为上。”指的就是兔毫盏。',
        imageUrl: 'assets/images/Ceramics/tuhaozhan.jpg',
      },
      '凤纹盏': {
        description: '凤纹盏是一种具有独特装饰的茶盏，常见于宋代吉州窑的作品中。其特点包括敞口外撇、弧腹壁、圈足，盏内彩绘或剪纸贴花装饰有凤纹，凤纹笔意潇洒，具有民间气息。凤纹盏的制作工艺独特，如剪纸贴花是将民间剪纸艺术与瓷器装饰相结合，先在坯体上施一层含铁量较高的釉，贴上剪纸图案，再施一层含铁量较低的釉，揭掉剪纸后入窑高温烧成。凤纹盏不仅具有实用价值，也是宋代瓷器装饰艺术的重要代表，反映了当时的审美风格和文化内涵。',
        imageUrl: 'assets/images/Ceramics/fengwenzhan.jpg',
      },
      '剪纸贴花盏': {
        description: '剪纸贴花盏是一种将剪纸艺术与瓷器制作相结合的独特装饰手法。这种工艺最早出现在宋代吉州窑，工匠们将传统的剪纸纹样移植到黑釉瓷器上，赋予了沉闷单调的黑瓷以民间艺术之美。剪纸贴花盏的制作过程包括将剪好的图案贴于胎体上，然后施加黑釉，揭掉剪纸后一次烧制成功。常见的剪纸纹饰有双龙、双凤、朵花、花卉飞凤、梅花鹿、梅花竹枝和长命富贵、福寿康宁、福山寿海、金玉满堂等吉语。这种装饰手法在民国时期也曾流行，成为一种具有浓郁民族特色的陶瓷装饰艺术。',
        imageUrl: 'assets/images/Ceramics/jianzhitiehuazhan.jpg',
      },
      '玳瑁釉盏': {
        description: '玳瑁釉盏是一种具有独特艺术魅力的瓷器，其釉色酷似玳瑁海龟的甲壳花纹，因此得名。玳瑁釉盏的制作工艺复杂，属于窑变釉，每一件作品的花纹都是独一无二的。它在宋代时期非常流行，尤其是在吉州窑的产品中，玳瑁釉盏与木叶盏、剪纸贴花盏一并饮誉中外。玳瑁釉盏的复兴在上世纪80年代取得了成功，如今它仍然是收藏家和茶艺爱好者所珍视的对象。',
        imageUrl: 'assets/images/Ceramics/daimaoyouzhan.jpg',
      },
      '梅瓶': {
        description: '梅瓶是一种流行于宋辽时期的瓷器，其器形得名较晚，历史上曾被称为“经瓶”。梅瓶的特点是小口、短颈、丰肩、瘦底、圈足，因口小只能插梅枝而得名。它既是酒器，又是观赏品，制作精美，考虑到贮酒容量和造型优美。梅瓶最早出现于唐代，盛行于宋代，元代继承宋代形制并有所发展，明清时期御窑厂大量制造，造型越来越优美，用途也更加多样化，成为身份和地位的象征。',
        imageUrl: 'assets/images/Ceramics/meiping.jpg',
      },
      '黑釉盏': {
        description: '黑釉盏是一种在宋代流行的茶具，以其独特的黑色釉面闻名。它的设计和制作工艺在宋代达到了巅峰，尤其是福建建阳窑、福清窑、江西吉州窑的黑釉盏最为著名。黑釉盏的流行与宋代的斗茶风俗密切相关，其深沉的釉色能够很好地衬托出白色的茶沫，因此受到了斗茶者的喜爱。黑釉盏不仅在国内享有盛誉，还曾一度成为宫廷御用的茶具，其影响甚至远播至日本等国。',
        imageUrl: 'assets/images/Ceramics/heiyouhan.jpg',
      },
      '梅纹盏': {
        description: '梅纹盏是一种具有独特装饰纹样的瓷器，主要流行于宋代。这种瓷器的装饰纹样以梅花为主，梅花在宋代文人的心目中具有高洁、傲骨的象征意义，因此在瓷器装饰中广泛应用。梅纹盏的制作工艺多样，包括黑釉彩绘、剪纸贴花、剔花等多种技法，其中以吉州窑的梅纹盏最为著名。这些梅纹盏不仅具有观赏价值，还反映了宋代的文化品位和审美体验。',
        imageUrl: 'asset/images/Ceramics/meiwenzhan.jpg',
      },
      '鹧鸪斑盏': {
        description: '鹧鸪斑盏是一种宋代烧制的黑釉茶盏，其釉面呈现出鹧鸪鸟胸部羽毛般的白点正圆如珠的斑纹，因此得名。鹧鸪斑盏的烧制工艺复杂，成品极为难得，因其烧制条件要求非常高，所以成品凤毛麟角，佳品独特难得。鹧鸪斑盏在宋代时期并非主流社会推崇的产品，当时更受欢迎的是兔毫盏，但它却反映了当时茶文化的繁荣和审美观念的多样性，为研究宋代茶文化提供了重要的实物资料。',
        imageUrl: 'assets/images/Ceramics/zhegubanzhan.jpg',
      },
      '木叶天目盏': {
        description: '木叶天目盏是一种起源于南宋吉州窑的独特瓷器，其制作工艺是将木叶置于施完天目釉的坯体之上，经过高温烧制，木叶高温氧化自然落灰，木叶灰与底层釉面高温融合，浑然天成形成木叶纹理。这种茶盏的树叶专门选用桑叶，有禅宗文化的背景，桑叶与禅在当时存在特殊的关联。木叶天目盏的胎质紧致，盏内木叶茎脉清晰、栩栩如生，釉面光滑平整，树叶与釉面融合在一个平面上，用手触摸无突兀感。注水后，木叶盏中的叶片纹路似雨后新叶悠然飘至盏底。由于木叶在高温下的变化难以预测，加之手工操作的不可复制性，使得每一件木叶盏都是独一无二的艺术品。',
        imageUrl: 'assets/images/Ceramics/muyetianmuzhan.jpg',
      },
    };
    const ceramicDetails = ceramicInfo[ceramicName] || {
      description: '暂无详细信息。',
      imageUrl: 'assets/images/default.jpg',
    };
    const modal = await this.modalController.create({
      component: CeramicDetailsPage,
      componentProps: {
        title: ceramicName,
        description: ceramicDetails.description,
        imageUrl: ceramicDetails.imageUrl,
      },
      cssClass: 'custom-modal', 
    });
    await modal.present();
  }
  // 查看详情事件
  async viewDetails(item: { result: string; confidence: string }) {
    console.log('查看详情:', item);
    // 跳转到陶瓷详情模态框
    await this.openCeramicDetails(item.result, item.confidence);
  }
}