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

@Component({
  selector: 'app-page-co-creation',
  standalone: true,
  templateUrl: './page-co-creation.html',
  styleUrls: ['./page-co-creation.scss']
})
export class PageCoCreation implements AfterViewInit {
  @ViewChild('redCultureChart') redCultureChart!: ElementRef;
  @ViewChild('waterCultureChart') waterCultureChart!: ElementRef;
  @ViewChild('heritageChart') heritageChart!: ElementRef;
  @ViewChild('archaeologyMap') archaeologyMap!: ElementRef;

  // 解锁的文化彩蛋数据
  culturalEasterEggs = [
    { icon: 'fa-utensils', color: '#e8c34d', title: '南昌瓦罐汤制作秘籍' },
    { icon: 'fa-music', color: '#c1272d', title: '赣南采茶戏经典唱段' },
    { icon: 'fa-archway', color: '#2a5daa', title: '景德镇制瓷七十二道工序' },
    { icon: 'fa-mountain', color: '#4a6b3d', title: '庐山历史名人轶事' }
  ];

  // 高校联盟数据
  universities = [
    { name: '水利水电大学', icon: 'fa-tint', bg: 'linear-gradient(135deg, #4a86e8, #4a86e8)' },
    { name: '南昌大学', icon: 'fa-university', bg: 'linear-gradient(135deg, #c1272d, #c1272d)' },
    { name: '景德镇陶瓷大学', icon: 'fa-paint-brush', bg: 'linear-gradient(135deg, #e8c34d, #e8c34d)' },
    { name: '江西农业大学', icon: 'fa-tree', bg: 'linear-gradient(135deg, #4a6b3d, #4a6b3d)' },
    { name: '江西师范大学', icon: 'fa-laptop-code', bg: 'linear-gradient(135deg, #6a5acd, #7b68ee)' }
  ];

  ngAfterViewInit(): void {
    this.initRedCultureChart();
    this.initWaterCultureChart();
    this.initHeritageChart();
    this.initArchaeologyMap();

    window.addEventListener('resize', () => {
      this.resizeCharts();
    });
  }

  private initRedCultureChart(): void {
    const chart = echarts.init(this.redCultureChart.nativeElement);
    chart.setOption({
      tooltip: { trigger: 'item', triggerOn: 'mousemove' },
      series: [{
        type: 'graph',
        layout: 'force',
        symbolSize: 50,
        roam: true,
        label: { show: true },
        force: { repulsion: 150 },
        data: [
          { name: '南昌起义', value: 10, symbol: 'circle', itemStyle: { color: '#c1272d' } },
          { name: '井冈山', value: 8, symbol: 'circle', itemStyle: { color: '#e74c3c' } },
          { name: '瑞金', value: 7, symbol: 'circle', itemStyle: { color: '#e67e22' } },
          { name: '方志敏', value: 6, symbol: 'circle', itemStyle: { color: '#d35400' } },
          { name: '安源路矿', value: 5, symbol: 'circle', itemStyle: { color: '#c0392b' } }
        ],
        links: [
          { source: '南昌起义', target: '井冈山' },
          { source: '南昌起义', target: '瑞金' },
          { source: '井冈山', target: '瑞金' },
          { source: '井冈山', target: '方志敏' },
          { source: '瑞金', target: '方志敏' },
          { source: '方志敏', target: '安源路矿' }
        ],
        lineStyle: { color: 'source', curveness: 0.3 }
      }]
    });
  }

  private initWaterCultureChart(): void {
    const chart = echarts.init(this.waterCultureChart.nativeElement);
    chart.setOption({
      tooltip: { trigger: 'item', triggerOn: 'mousemove' },
      series: [{
        type: 'graph',
        layout: 'force',
        symbolSize: 50,
        roam: true,
        label: { show: true },
        force: { repulsion: 150 },
        data: [
          { name: '赣江', value: 10, symbol: 'circle', itemStyle: { color: '#3498db' } },
          { name: '鄱阳湖', value: 9, symbol: 'circle', itemStyle: { color: '#2980b9' } },
          { name: '水利工程', value: 8, symbol: 'circle', itemStyle: { color: '#1abc9c' } },
          { name: '水运文化', value: 7, symbol: 'circle', itemStyle: { color: '#16a085' } },
          { name: '水资源保护', value: 6, symbol: 'circle', itemStyle: { color: '#27ae60' } }
        ],
        links: [
          { source: '赣江', target: '鄱阳湖' },
          { source: '赣江', target: '水利工程' },
          { source: '赣江', target: '水运文化' },
          { source: '鄱阳湖', target: '水资源保护' },
          { source: '水利工程', target: '水资源保护' },
          { source: '水运文化', target: '水资源保护' }
        ],
        lineStyle: { color: 'source', curveness: 0.3 }
      }]
    });
  }

  private initHeritageChart(): void {
    const chart = echarts.init(this.heritageChart.nativeElement);
    chart.setOption({
      tooltip: { trigger: 'item', triggerOn: 'mousemove' },
      series: [{
        type: 'graph',
        layout: 'force',
        symbolSize: 50,
        roam: true,
        label: { show: true },
        force: { repulsion: 150 },
        data: [
          { name: '景德镇陶瓷', value: 10, symbol: 'circle', itemStyle: { color: '#e8c34d' } },
          { name: '赣南采茶戏', value: 9, symbol: 'circle', itemStyle: { color: '#f39c12' } },
          { name: '婺源徽派建筑', value: 8, symbol: 'circle', itemStyle: { color: '#d35400' } },
          { name: '铅山连四纸', value: 7, symbol: 'circle', itemStyle: { color: '#e67e22' } },
          { name: '瑞昌剪纸', value: 6, symbol: 'circle', itemStyle: { color: '#f1c40f' } }
        ],
        links: [
          { source: '景德镇陶瓷', target: '赣南采茶戏' },
          { source: '景德镇陶瓷', target: '婺源徽派建筑' },
          { source: '赣南采茶戏', target: '铅山连四纸' },
          { source: '婺源徽派建筑', target: '瑞昌剪纸' },
          { source: '铅山连四纸', target: '瑞昌剪纸' }
        ],
        lineStyle: { color: 'source', curveness: 0.3 }
      }]
    });
  }

  private initArchaeologyMap(): void {
    const chart = echarts.init(this.archaeologyMap.nativeElement);
    chart.setOption({
      tooltip: { trigger: 'item' },
      visualMap: {
        min: 0,
        max: 100,
        calculable: true,
        inRange: { color: ['#f6efa6', '#d88273', '#bf444c'] }
      },
      series: [{
        name: '考古遗址',
        type: 'map',
        map: 'china',
        roam: true,
        zoom: 7,
        center: [115.8, 28.5], // 江西中心坐标
        label: { show: true },
        data: [
          { name: '樟树市', value: 95 },
          { name: '南昌市', value: 85 },
          { name: '九江市', value: 78 },
          { name: '景德镇市', value: 90 },
          { name: '鹰潭市', value: 65 },
          { name: '新余市', value: 50 },
          { name: '萍乡市', value: 60 },
          { name: '赣州市', value: 82 },
          { name: '吉安市', value: 75 },
          { name: '宜春市', value: 70 },
          { name: '抚州市', value: 68 },
          { name: '上饶市', value: 80 }
        ],
        emphasis: { label: { show: true } }
      }]
    });
  }

  private resizeCharts(): void {
    [this.redCultureChart, this.waterCultureChart, this.heritageChart, this.archaeologyMap].forEach(chart => {
      if (chart) {
        const instance = echarts.getInstanceByDom(chart.nativeElement);
        if (instance) {
          instance.resize();
        }
      }
    });
  }
}