import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as echarts from 'echarts';
import * as jiangxiMap from '../../../../assets/江西省.json';

@Component({
  selector: 'app-page-co-creation',
  standalone: true,
  imports: [CommonModule],
  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 {
  echarts.registerMap('江西', jiangxiMap as any);
  const chart = echarts.init(this.archaeologyMap.nativeElement);
  
  // 更精准的考古遗址数据（含经纬度）
  const siteData = [
    {name: '海昏侯墓', value: 95, lng: 115.92, lat: 28.82, period: '汉代', level: '国家级'},
    {name: '滕王阁遗址', value: 88, lng: 115.88, lat: 28.68, period: '唐代', level: '省级'},
    {name: '湖田古窑址', value: 92, lng: 117.22, lat: 29.32, period: '宋代', level: '国家级'},
    {name: '庐山石刻群', value: 85, lng: 115.98, lat: 29.52, period: '唐宋时期', level: '国家级'},
    {name: '通天岩石窟', value: 82, lng: 114.95, lat: 25.82, period: '唐宋时期', level: '省级'},
    {name: '龙虎山悬棺', value: 90, lng: 116.98, lat: 28.12, period: '春秋战国', level: '国家级'},
    {name: '吉州窑遗址', value: 78, lng: 114.97, lat: 27.12, period: '宋代', level: '国家级'},
    {name: '婺源古村落', value: 82, lng: 117.85, lat: 29.25, period: '明清时期', level: '省级'},
    {name: '安源煤矿遗址', value: 75, lng: 113.85, lat: 27.63, period: '近代', level: '省级'},
    {name: '瑞昌铜矿遗址', value: 70, lng: 115.65, lat: 29.68, period: '商周时期', level: '省级'}
  ];

  // 生成热力数据（含涟漪效果）
  const heatData = siteData.map(item => ({
    ...item,
    ripple: {
      period: Math.random() * 4 + 4,
      scale: Math.random() * 0.5 + 1.2
    }
  }));

  const option = {
    title: {
      text: '江西考古遗址热力图',
      left: 'center',
      textStyle: {
        color: '#2a5daa',
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function(params: any) {
        const data = params.data;
        return `<div class="tooltip-title">${data.name}</div>
                <div class="tooltip-content">
                  <div><span>历史时期：</span><span>${data.period}</span></div>
                  <div><span>保护等级：</span><span>${data.level}</span></div>
                  <div><span>遗址热度：</span><span>${data.value}</span></div>
                </div>`;
      },
      backgroundColor: 'rgba(255,255,255,0.95)',
      borderColor: '#e8c34d',
      textStyle: { color: '#333' }
    },
    visualMap: {
      min: 70,
      max: 100,
      calculable: true,
      realtime: false,
      inRange: {
        color: ['#f6efa6', '#e8c34d', '#d88273', '#bf444c']
      },
      textStyle: { color: '#333' },
      left: 'left',
      bottom: '30px',
      orient: 'horizontal'
    },
    geo: {
      map: '江西',
      roam: true,
      zoom: 6.5,
      center: [116.3, 27.5],
      label: {
        show: true,
        color: '#2a5daa',
        fontWeight: 'bold'
      },
      itemStyle: {
        areaColor: 'rgba(42, 93, 170, 0.05)',
        borderColor: '#2a5daa',
        borderWidth: 1
      },
      emphasis: {
        itemStyle: {
          areaColor: 'rgba(232, 195, 77, 0.2)'
        },
        label: {
          color: '#c1272d',
          fontWeight: 'bold'
        }
      }
    },
    series: [
      {
        name: '热力分布',
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: heatData.map(item => [item.lng, item.lat, item.value]),
        pointSize: 15,
        blurSize: 25,
        minOpacity: 0.4,
        maxOpacity: 0.8
      },
      {
        name: '遗址标记',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: heatData,
        symbolSize: function(val: any) {
          return val[2] / 4;
        },
        showEffectOn: 'render',
        rippleEffect: {
          period: function(index: number) {
            return heatData[index].ripple.period;
          },
          scale: function(index: number) {
            return heatData[index].ripple.scale;
          },
          brushType: 'fill'
        },
        itemStyle: {
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
              {offset: 0, color: 'rgba(232, 195, 77, 0.8)'},
              {offset: 1, color: 'rgba(191, 68, 76, 0.3)'}
            ]
          },
          shadowBlur: 10,
          shadowColor: '#e8c34d'
        },
        zlevel: 1
      }
    ]
  };

  chart.setOption(option);

  // 添加地图控制功能
  document.getElementById('zoom-in')?.addEventListener('click', () => {
    chart.dispatchAction({ type: 'geoRoam', zoom: 0.2 });
  });

  document.getElementById('zoom-out')?.addEventListener('click', () => {
    chart.dispatchAction({ type: 'geoRoam', zoom: -0.2 });
  });

  document.getElementById('reset-view')?.addEventListener('click', () => {
    chart.setOption({
      geo: { center: [116.3, 27.5], zoom: 6.5 }
    });
  });
  
  // 添加鼠标滚轮缩放
  this.archaeologyMap.nativeElement.addEventListener('wheel', (e: WheelEvent) => {
    e.preventDefault();
    chart.dispatchAction({
      type: 'geoRoam',
      zoom: e.deltaY < 0 ? 0.1 : -0.1
    });
  });
}

  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();
        }
      }
    });
  }
}