import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as echarts from 'echarts';

@Component({
  selector: 'app-page-association',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './page-association.html',
  styleUrls: ['./page-association.scss']
})
export class PageAssociation implements AfterViewInit {
  @ViewChild('orgChart') orgChartElement!: ElementRef;
  @ViewChild('academicCalendar') academicCalendarElement!: ElementRef;

  // 课程数据
  courses = [
    { 
      title: '江西古建筑数字化保护', 
      description: '学习古建筑三维扫描、数字建模与修复技术',
      duration: '32课时',
      students: '1,245人'
    },
    { 
      title: '非遗技艺数字化传承', 
      description: '探索传统技艺的数字化记录与创新应用',
      duration: '24课时',
      students: '986人'
    },
    { 
      title: '红色文化XR应用开发', 
      description: '利用XR技术重现江西革命历史场景',
      duration: '40课时',
      students: '1,532人'
    },
    { 
      title: '智慧旅游系统设计', 
      description: '学习旅游动线策划与智能导览系统开发',
      duration: '28课时',
      students: '875人'
    }
  ];

  ngAfterViewInit(): void {
    this.initOrgChart();
    this.initAcademicCalendar();
  }

  initOrgChart(): void {
    const orgChart = echarts.init(this.orgChartElement.nativeElement);
    orgChart.setOption({
      tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
      },
      series: [
        {
          type: 'tree',
          data: [{
            name: '协会主席',
            children: [{
              name: '常务副主席',
              children: [
                { name: '会员服务部' },
                { name: '人才培养部' }
              ]
            }, {
              name: '秘书长',
              children: [
                { name: '技术研发中心' },
                { name: '平台建设部' }
              ]
            }, {
              name: '学术委员会',
              children: [
                { name: '红色文化研究所' },
                { name: '非遗研究中心' },
                { name: '数字技术实验室' }
              ]
            }]
          }],
          top: '5%',
          left: '10%',
          bottom: '5%',
          right: '20%',
          symbolSize: 20,
          symbol: 'circle',
          orient: 'vertical',
          expandAndCollapse: true,
          initialTreeDepth: 2,
          lineStyle: {
            width: 2,
            color: '#8B4513'
          },
          label: {
            position: 'top',
            verticalAlign: 'middle',
            align: 'middle',
            fontSize: 14,
            fontWeight: 'bold',
            color: '#8B4513'
          },
          itemStyle: {
            color: '#DEB887',
            borderColor: '#8B4513',
            borderWidth: 2
          },
          emphasis: {
            itemStyle: {
              color: '#e8c34d',
              borderColor: '#8B4513'
            }
          },
          leaves: {
            label: {
              position: 'right',
              verticalAlign: 'middle',
              align: 'left'
            },
            itemStyle: {
              color: '#f0e6d2',
              borderColor: '#8B4513'
            }
          }
        }
      ]
    });
    
    window.addEventListener('resize', () => orgChart.resize());
  }

  initAcademicCalendar(): void {
    const academicCalendar = echarts.init(this.academicCalendarElement.nativeElement);
    academicCalendar.setOption({
      tooltip: {
        formatter: function(params: any) {
          return `${params.name}<br/>热度: ${params.value[2]}<br/>地点: ${params.data.location}`;
        }
      },
      visualMap: {
        show: false,
        min: 0,
        max: 100,
        inRange: {
          color: ['#DEB887', '#A0522D', '#8B0000']
        }
      },
      calendar: {
        top: 30,
        left: 30,
        right: 30,
        cellSize: ['auto', 20],
        range: '2023-06',
        itemStyle: {
          borderWidth: 1,
          borderColor: '#e8e0d0'
        },
        dayLabel: {
          color: '#8B4513'
        },
        monthLabel: {
          color: '#8B4513',
          fontWeight: 'bold'
        },
        yearLabel: { show: false }
      },
      series: {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: [
          ['2023-06-05', 35, '数字文化论坛', '南昌'],
          ['2023-06-08', 65, '非遗保护研讨会', '景德镇'],
          ['2023-06-12', 45, '青年学者交流会', '九江'],
          ['2023-06-15', 85, '红色文化数字展', '井冈山'],
          ['2023-06-18', 25, '会员技术培训', '赣州'],
          ['2023-06-22', 75, '数字艺术创作大赛', '南昌'],
          ['2023-06-25', 55, '智慧旅游研讨会', '上饶'],
          ['2023-06-28', 95, '年度学术大会', '南昌']
        ].map((item) => ({
          value: [item[0], item[1], item[1], item[2], item[3]]
        }))
      }
    });
    
    window.addEventListener('resize', () => academicCalendar.resize());
  }

  highlightSearch(searchTerm: string): void {
    if (searchTerm) {
      const content = document.querySelector('.constitution-content');
      if (content) {
        const text = content.innerHTML;
        const regex = new RegExp(searchTerm, 'gi');
        const highlighted = text.replace(regex, match => 
          `<span class="highlight">${match}</span>`
        );
        content.innerHTML = highlighted;
      }
    }
  }

  highlightVersion(event: MouseEvent, type: 'diff' | 'new'): void {
    const elements = document.querySelectorAll(`.${type}-highlight`);
    elements.forEach(el => {
      el.classList.add('active-highlight');
    });
    
    const handler = () => {
      elements.forEach(el => {
        el.classList.remove('active-highlight');
      });
      document.removeEventListener('mouseup', handler);
    };
    
    document.addEventListener('mouseup', handler);
  }
}