import { Component, OnInit, afterNextRender } from '@angular/core';
import { Chart } from 'chart.js';

@Component({
  selector: 'app-nutrition-chart',
  standalone: true,
  template: '<div class="chart-container"><canvas id="nutritionChart"></canvas></div>',
  styles: [`
    .chart-container {
      width: 100%;
      height: 200px;
      position: relative;
      margin: 15px 0;
    }
  `]
})
export class NutritionChartComponent implements OnInit {
  constructor() {
    afterNextRender(() => {
      this.initializeChart();
    });
  }

  ngOnInit(): void {}

  initializeChart(): void {
    const ctx = document.getElementById('nutritionChart') as HTMLCanvasElement;
    if (!ctx) return;

    new Chart(ctx, {
      type: 'radar',
      data: {
        labels: ['蛋白质', '碳水', '脂肪', '纤维', '维生素'],
        datasets: [{
          label: '当前营养值',
          data: [85, 70, 45, 60, 75],
          fill: true,
          backgroundColor: 'rgba(255, 107, 107, 0.2)',
          borderColor: 'rgba(255, 107, 107, 1)',
          pointBackgroundColor: 'rgba(255, 107, 107, 1)',
          pointBorderColor: '#fff',
          pointHoverBackgroundColor: '#fff',
          pointHoverBorderColor: 'rgba(255, 107, 107, 1)'
        }]
      },
      options: {
        scales: {
          r: {
            angleLines: { display: true },
            suggestedMin: 0,
            suggestedMax: 100,
            ticks: {
              stepSize: 20,
              backdropColor: 'transparent'
            },
            grid: { color: 'rgba(0, 0, 0, 0.1)' },
            pointLabels: { font: { size: 11 } }
          }
        },
        plugins: { legend: { display: false } }
      }
    });
  }
}