Angular-DotIO/src/app/pages/home/home.component.ts

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

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

  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' }
  ];

  // Default values
  selectedDate = new Date();
  // Default will be overridden by localStorage if available
  selectedRegion = this.regions[Math.floor(Math.random() * this.regions.length)].value;

  private energyPriceService = inject(EnergyPriceService);
  private datePipe = inject(DatePipe);

  ngOnInit() {
    // Load saved region from localStorage if available
    const savedRegion = localStorage.getItem('selectedRegion');
    if (savedRegion) {
      this.selectedRegion = savedRegion;
    }

    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() {
    // Save selected region to localStorage
    localStorage.setItem('selectedRegion', this.selectedRegion);
    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];
  }

  get formattedDisplayDate(): string {
    return this.datePipe.transform(this.selectedDate, 'd MMMM yyyy') || '';
  }

  get currentPrice(): EnergyPrice | null {
    if (!this.priceData || this.priceData.length === 0) {
      return null;
    }

    const now = new Date();
    const currentHour = now.getHours();

    // Find the price for the current hour
    return this.priceData.find(price => {
      const priceHour = new Date(price.time_start).getHours();
      return priceHour === currentHour;
    }) || this.priceData[0]; // Default to first price if not found
  }

  get averagePrice(): number {
    if (!this.priceData || this.priceData.length === 0) {
      return 0;
    }

    const sum = this.priceData.reduce((total, price) => total + price.SEK_per_kWh, 0);
    return sum / this.priceData.length;
  }

  get highestPrice(): EnergyPrice | null {
    if (!this.priceData || this.priceData.length === 0) {
      return null;
    }

    return this.priceData.reduce((max, price) =>
      price.SEK_per_kWh > max.SEK_per_kWh ? price : max, this.priceData[0]);
  }

  get lowestPrice(): EnergyPrice | null {
    if (!this.priceData || this.priceData.length === 0) {
      return null;
    }

    return this.priceData.reduce((min, price) =>
      price.SEK_per_kWh < min.SEK_per_kWh ? price : min, this.priceData[0]);
  }

  getRegionName(regionCode: string): string {
    const region = this.regions.find(r => r.value === regionCode);
    return region ? region.label : regionCode;
  }
}