import { Component, ViewChild, ElementRef, AfterViewInit, OnInit } from '@angular/core';
import Chart from 'chart.js/auto';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-page-trends',
  standalone: true,
  imports: [CommonModule], // 添加 CommonModule 解决 ngIf 问题
  templateUrl: './page-trends.component.html',
  styleUrls: ['./page-trends.component.scss']
})
export class PageTrendsComponent implements OnInit, AfterViewInit {
  @ViewChild('colorChart') colorChartRef!: ElementRef;
  private colorChart: any;
  isLoading = true;
  
  // 使用模拟数据确保图表始终显示
  chartData: any = {
    labels: ['天空蓝', '热情红', '森林绿', '阳光黄', '紫罗兰', '碧波绿'],
    datasets: [{
      label: '使用次数',
      data: [1850, 1620, 1540, 1420, 1360, 1280],
      backgroundColor: [
        '#3498db',
        '#e74c3c',
        '#2ecc71',
        '#f1c40f',
        '#9b59b6',
        '#1abc9c'
      ],
      borderColor: [
        '#2980b9',
        '#c0392b',
        '#27ae60',
        '#f39c12',
        '#8e44ad',
        '#16a085'
      ],
      borderWidth: 1,
      borderRadius: 10
    }]
  };

  // 模拟热门搭配数据
  popularCombinations: any[] = [
    {
      colors: ['#3498db', '#2c3e50'],
      name: '深海蓝黑',
      count: '5,678 次使用',
      icon: 'fas fa-water'
    },
    {
      colors: ['#e74c3c', '#f1c40f'],
      name: '日落橙黄',
      count: '4,987 次使用',
      icon: 'fas fa-sun'
    }
  ];

  ngOnInit() {
    // 模拟数据加载
    setTimeout(() => {
      this.isLoading = false;
      this.initChart();
    }, 1000);
  }

  ngAfterViewInit() {
    // 确保视图初始化后尝试创建图表
    setTimeout(() => this.initChart(), 500);
  }

  private initChart() {
    if (!this.colorChartRef?.nativeElement) {
      console.warn('Canvas元素不可用，延迟重试');
      setTimeout(() => this.initChart(), 500);
      return;
    }
    
    const ctx = this.colorChartRef.nativeElement.getContext('2d');
    
    // 销毁现有图表实例
    if (this.colorChart) {
      this.colorChart.destroy();
    }
    
    this.colorChart = new Chart(ctx, {
      type: 'bar',
      data: this.chartData,
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          },
          title: {
            display: true,
            text: '颜色使用频率统计',
            font: {
              size: 16
            }
          },
          tooltip: {
            callbacks: {
              label: function(context) {
                return `使用次数: ${context.parsed.y.toLocaleString()}`;
              }
            }
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            grid: {
              color: 'rgba(0, 0, 0, 0.05)'
            },
            ticks: {
              callback: function(value) {
                return value.toLocaleString();
              }
            }
          },
          x: {
            grid: {
              display: false
            }
          }
        }
      }
    });
  }

  getGradientStyle(colors: string[]): string {
    return `background: linear-gradient(135deg, ${colors[0]}, ${colors[1]});`;
  }
}