// page-dynamic.component.ts
import { Component, AfterViewInit } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-page-dynamic',
  standalone: true,
  templateUrl: './page-dynamic.html',
  styleUrls: ['./page-dynamic.scss'],
  imports: [FormsModule]
})
export class PageDynamic implements AfterViewInit {
  isOcrSuccess: boolean | null = null;
  activeLanterns = false;
  isProcessing = false;
  formData = {
    awardName: '',
    applicant: '',
    description: '',
    document: null as File | null
  };

  ngAfterViewInit() {
    this.initCraneInteraction();
    this.initPavilionInteraction();
  }

  onOcrClick() {
    this.isProcessing = true;
    this.activeLanterns = false;
    this.isOcrSuccess = null;

    // 模拟OCR处理过程
    setTimeout(() => {
      this.isProcessing = false;
      const isSuccess = Math.random() > 0.3;
      this.isOcrSuccess = isSuccess;
      this.activeLanterns = isSuccess;
      
      if (!isSuccess) {
        this.createCeramicShards();
      }
    }, 1500);
  }

  createCeramicShards() {
    const gate = document.querySelector('.ocr-gate');
    if (!gate) return;

    for (let i = 0; i < 8; i++) {
      const shard = document.createElement('div');
      shard.classList.add('ceramic-shard');
      shard.style.setProperty('--angle', `${Math.random() * 360}deg`);
      shard.style.setProperty('--distance', `${50 + Math.random() * 100}px`);
      gate.appendChild(shard);

      setTimeout(() => {
        shard.style.opacity = '1';
        shard.style.transform = `translate(
          calc(var(--distance) * cos(var(--angle))), 
          calc(var(--distance) * sin(var(--angle)))
        ) rotate(var(--angle))`;
      }, 10);

      setTimeout(() => {
        shard.remove();
      }, 1000);
    }
  }

  initCraneInteraction() {
    const cranes = document.querySelectorAll('.crane');
    cranes.forEach(crane => {
      crane.addEventListener('mouseenter', () => {
        if (!crane.classList.contains('main-crane')) {
          crane.classList.add('hovered');
        }
      });
      
      crane.addEventListener('mouseleave', () => {
        crane.classList.remove('hovered');
      });
    });
  }

  initPavilionInteraction() {
  const pavilion = document.querySelector('.pavilion-model');
  if (!pavilion) return;

  // 使用类型断言明确指定事件类型
  pavilion.addEventListener('mousemove', (e: Event) => {
    const mouseEvent = e as MouseEvent; // 类型断言
    const rect = pavilion.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    
    const rotateY = (mouseEvent.clientX - centerX) / 20;
    const rotateX = (centerY - mouseEvent.clientY) / 20;
    
    (pavilion as HTMLElement).style.transform = 
      `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
  });
  
  pavilion.addEventListener('mouseleave', () => {
    (pavilion as HTMLElement).style.transform = 
      'perspective(1000px) rotateX(0) rotateY(0)';
  });
}

onFileSelected(event: Event) {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files.length > 0) {
      this.formData.document = input.files[0];
    }
  }

  submitForm() {
    console.log('Form submitted:', this.formData);
    // 实际应用中这里会发送数据到服务器
    alert('奖项申报已提交！');
    this.formData = {
      awardName: '',
      applicant: '',
      description: '',
      document: null
    };
  }
}