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

@Component({
  selector: 'app-page-mine',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './page-mine.component.html',
  styleUrls: ['./page-mine.component.scss']
})
export class PageMineComponent implements AfterViewInit {
  @ViewChild('orderChart', { static: false }) chartRef!: ElementRef<HTMLCanvasElement>;
  private orderChart!: Chart;
  
  // 用户数据
  user = {
    name: '喵小美',
    level: '黄金会员 · Lv.5',
    monthlySpend: 1256,
    points: 128,
    coupons: 15,
    vipProgress: 64
  };
  
  // 健康档案数据
  healthData = [
    { icon: 'fas fa-allergies', title: '过敏源', content: '海鲜、花生' },
    { icon: 'fas fa-utensils', title: '饮食偏好', content: '少油、微辣' },
    { icon: 'fas fa-heartbeat', title: '健康目标', content: '控制碳水摄入' },
    { icon: 'fas fa-ban', title: '忌口', content: '香菜、生姜' }
  ];
  
  // 订单分析数据
  orderStats = [
    { value: 6580, label: '总消费' },
    { value: 42, label: '总订单' },
    { value: 4.8, label: '平均评分' }
  ];
  
  // 功能项数据
  functions = [
    { icon: 'fas fa-history', text: '历史订单' },
    { icon: 'fas fa-ticket-alt', text: '优惠券' },
    { icon: 'fas fa-star', text: '我的收藏' },
    { icon: 'fas fa-map-marker-alt', text: '收货地址' },
    { icon: 'fas fa-comment-dots', text: '我的评价' },
    { icon: 'fas fa-question-circle', text: '帮助中心' },
    { icon: 'fas fa-shield-alt', text: '安全中心' },
    { icon: 'fas fa-sign-out-alt', text: '退出登录' }
  ];
  
  // 会员权益
  benefits = [
    { icon: 'fas fa-percent', text: '专属折扣' },
    { icon: 'fas fa-gift', text: '生日礼包' },
    { icon: 'fas fa-bolt', text: '优先配送' },
    { icon: 'fas fa-coffee', text: '免费饮品' }
  ];
  

  
  ngAfterViewInit() {
    this.initChart();
    this.animateVipProgress();
  }
  
  initChart() {
    const ctx = this.chartRef.nativeElement.getContext('2d');
    if (!ctx) return;
    
    const config: ChartConfiguration = {
      type: 'line',
      data: {
        labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
        datasets: [{
          label: '月消费金额 (¥)',
          data: [980, 1200, 850, 1100, 1560, 1280],
          fill: true,
          backgroundColor: 'rgba(255, 107, 107, 0.1)',
          borderColor: 'rgba(255, 107, 107, 1)',
          tension: 0.4,
          pointBackgroundColor: 'rgba(255, 107, 107, 1)',
          pointBorderColor: '#fff',
          pointRadius: 5,
          pointHoverRadius: 7
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            grid: {
              color: 'rgba(0, 0, 0, 0.05)'
            }
          },
          x: {
            grid: {
              display: false
            }
          }
        }
      }
    };
    
    this.orderChart = new Chart(ctx, config);
  }
  
  animateVipProgress() {
    setTimeout(() => {
      this.user.vipProgress = 64;
    }, 500);
  }
  
  animateIcon(event: Event, selector: string) {
    const target = event.currentTarget as HTMLElement;
    const icon = target.querySelector(selector);
    
    if (icon) {
      icon.classList.add('active');
      
      setTimeout(() => {
        icon.classList.remove('active');
      }, 300);
    }
  }
  
  navigateTo(page: string) {
    alert(`即将打开${page}功能`);
  }
}
