import { Component, OnInit, ViewChild } from '@angular/core';
import { ChartConfiguration, ChartOptions } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';
import { GeneralService } from '../../services/generalservice';

@Component({
  selector: 'app-main-dashboard-content',
  standalone: false,
  templateUrl: './main-dashboard-content.component.html',
  styleUrls: ['./main-dashboard-content.component.css']
})
export class MainDashboardContentComponent implements OnInit {
  @ViewChild(BaseChartDirective) chart?: BaseChartDirective;

  public lineChartData: ChartConfiguration<'line'>['data'] = {
    labels: [],
    datasets: [
      {
        data: [],
        label: 'Revenue',
        fill: true,
        tension: 0.5,
        borderColor: 'rgba(75,192,192,1)',
        backgroundColor: 'rgba(75,192,192,0.2)'
      }
    ]
  };

  public lineChartOptions: ChartOptions<'line'> = {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true
      }
    },
    plugins: {
      legend: {
        display: true,
      },
      title: {
        display: true,
        text: 'Revenue Summary - Last 6 Months'
      }
    }
  };

  constructor(private generalService: GeneralService) {}

  ngOnInit(): void {
    let token = localStorage.getItem('access_token')
    this.OnSearchAct(token, true);
  }

  OnSearchAct(value: any, setupFirst: boolean): void {
    const uri = '/api/web/accountingSearch';
    let request = {
      token: value
    }
    this.generalService.postRequest(uri, request).subscribe({
      next: (result: any) => {
        if (result.code === '200') {
          this.generalService.trowApi(result);
          console.log(`✅ OTP ส่งไปที่ ${value.email}`);
        }
      },
      error: (error: any) => {

      },
      complete: () => {

      }
    });
  }

  // fetchChartData(): void {
  //   // NOTE: Using a placeholder endpoint as the actual one was not provided.
  //   const uri = '/api/dashboard/summary-last-6-months';

  //   this.generalService.getRequest(uri).subscribe({
  //     next: (result: any) => {
  //       if (result.code === '200' && result.data) {
  //         this.processChartData(result.data);
  //       } else {
  //         console.warn('Could not fetch chart data:', result.message_th);
  //         // Optionally, display placeholder data or an error message
  //         this.setupPlaceholderData();
  //       }
  //     },
  //     error: (error: any) => {
  //       console.error('Error fetching chart data:', error);
  //       // Display placeholder data on error to show the graph structure
  //       this.setupPlaceholderData();
  //     }
  //   });
  // }

  processChartData(data: any[]): void {
    const labels = data.map(item => item.month);
    const revenues = data.map(item => item.revenue);

    this.lineChartData.labels = labels;
    this.lineChartData.datasets[0].data = revenues;

    this.chart?.update();
  }

  setupPlaceholderData(): void {
    // This function is called if the API fails, to show a sample graph.
    const labels = ['January', 'February', 'March', 'April', 'May', 'June'];
    const revenues = [1200, 1900, 3000, 5000, 2300, 3200]; // Sample data

    this.lineChartData.labels = labels;
    this.lineChartData.datasets[0].data = revenues;

    this.chart?.update();
  }
}