import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { EnergyPriceService, EnergyPrice } from './energy-price.service';
import { EnergyChartComponent } from './energy-chart/energy-chart.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  imports: [CommonModule, FormsModule, EnergyChartComponent]
})
export class AppComponent implements OnInit {
  title = 'Energy Price Dashboard';
  priceData: EnergyPrice[] = [];
  loading = true;
  error = '';

  // Default values
  selectedDate = new Date();
  selectedRegion = 'SE3'; // Stockholm / Södra Mellansverige as default

  regions = [
    { value: 'SE1', label: 'Luleå / Norra Sverige' },
    { value: 'SE2', label: 'Sundsvall / Norra Mellansverige' },
    { value: 'SE3', label: 'Stockholm / Södra Mellansverige' },
    { value: 'SE4', label: 'Malmö / Södra Sverige' }
  ];

  private energyPriceService = inject(EnergyPriceService);

  ngOnInit() {
    this.loadPriceData();
  }

  loadPriceData() {
    this.loading = true;
    this.error = '';

    const { year, month, day } = this.energyPriceService.formatDate(this.selectedDate);

    this.energyPriceService.getPrices(year, month, day, this.selectedRegion)
      .subscribe({
        next: (data) => {
          this.priceData = data;
          this.loading = false;
        },
        error: (err) => {
          this.error = 'Failed to load energy price data. Please try again later.';
          this.loading = false;
          console.error('Error fetching price data:', err);
        }
      });
  }

  onRegionChange() {
    this.loadPriceData();
  }

  onDateChange(event: Event) {
    // Fix: properly handle date input event
    const inputElement = event.target as HTMLInputElement;
    if (inputElement.value) {
      this.selectedDate = new Date(inputElement.value);
      this.loadPriceData();
    }
  }

  get maxDate(): string {
    const today = new Date();
    return today.toISOString().split('T')[0];
  }

  get formattedDate(): string {
    return this.selectedDate.toISOString().split('T')[0];
  }
}