wattif/Pages/Home.razor

@page "/"
@using Radzen
@using Radzen.Blazor
@using BattSim.Models
@using BattSim.Services
@using BattSim.Pages.Nodes

<PageTitle>Wattif</PageTitle>

<h1 style="color: white">Wattif - Simuleer verbeteringen aan je energiesysteem</h1>

<div class="pipeline-container">
    <!-- Pipeline with 3 connected boxes -->
    <div class="pipeline-row">
        <div class="pipeline-connector"></div>
        
        <!-- Node Components -->
        <FluviusUploadNode 
            FluviusDataRaw="FluviusDataRaw"
            StepData="StepData[0]"
            UploadedFileName="_uploadedFileName"
            UploadError="_uploadError"
            OnFileUploadedCallback="OnFileUploaded"
            OnToggleBoxCallback="() => ToggleBox(0)" />
        
        <BatterySimulationNode 
            FluviusDataRaw="FluviusDataRaw"
            SimulationData="SimulationData"
            StepData="StepData[1]"
            BatteryCapacity="BatteryCapacity"
            Efficiency="Efficiency"
            OnSimulateBatteryCallback="SimulateBattery"
            OnToggleBoxCallback="() => ToggleBox(1)" />
        
        <CostCalculationNode 
            SimulationData="SimulationData"
            FluviusDataRaw="FluviusDataRaw"
            StepData="StepData[2]"
            Calculator="calculator"
            NormalCost="normalCost"
            SimulatedCost="simulatedCost"
            OnCalculateCallback="Calculate"
            OnToggleBoxCallback="() => ToggleBox(2)" />
    </div>

</div>


<!-- Chart - Directly on page, full width -->
@if (FilteredFluviusData.Length > 0)
{
    <div class="chart-container">
        <h2>Overzicht: Energie Data & Simulatie</h2>
        
        <!-- Time Period Toggle -->
        <div class="time-toggle-container">
            <button class="@GetTimeButtonClass("all")" @onclick="SetTimePeriodAll" @onclick:stopPropagation>
                Volledige periode
            </button>
            <button class="@GetTimeButtonClass("year")" @onclick="SetTimePeriodYear" @onclick:stopPropagation>
                Laatste jaar
            </button>
            <button class="@GetTimeButtonClass("month")" @onclick="SetTimePeriodMonth" @onclick:stopPropagation>
                Laatste maand
            </button>
            <button class="@GetTimeButtonClass("week")" @onclick="SetTimePeriodWeek" @onclick:stopPropagation>
                Laatste week
            </button>
            <button class="@GetTimeButtonClass("day")" @onclick="SetTimePeriodDay" @onclick:stopPropagation>
                Laatste dag
            </button>
        </div>
        
        <RadzenChart Class="unified-chart">
            <!-- Original Data -->
            <RadzenAreaSeries Smooth=true Data="@FilteredFluviusData" CategoryProperty="Time" Title="Consumption" ValueProperty="Consumption">
            </RadzenAreaSeries>
            <RadzenAreaSeries Smooth=true Data="@FilteredFluviusData" CategoryProperty="Time" Title="Production" ValueProperty="Production">
            </RadzenAreaSeries>
            
            <!-- Simulated Data -->
            @if (FilteredSimulationData.Length > 0)
            {
                <RadzenAreaSeries Smooth=true Data="@FilteredSimulationData" CategoryProperty="Time" Title="Simulated Consumption" ValueProperty="Consumption">
                </RadzenAreaSeries>
                <RadzenAreaSeries Smooth=true Data="@FilteredSimulationData" CategoryProperty="Time" Title="Simulated Production" ValueProperty="Production">
                </RadzenAreaSeries>
                <RadzenAreaSeries Smooth=true Data="@FilteredSimulationData" CategoryProperty="Time" Title="Battery Charge" ValueProperty="BatteryCharge">
                </RadzenAreaSeries>
            }
            
            <RadzenCategoryAxis Formatter="@FormatObject" Padding="20" LabelAutoRotation="-45">
                <RadzenGridLines Visible="true"/>
                <RadzenAxisTitle Text="Tijd"/>
            </RadzenCategoryAxis>
            <RadzenValueAxis Formatter="@FormatObject">
                <RadzenGridLines Visible="true"/>
                <RadzenAxisTitle Text="Energie (kWh)"/>
            </RadzenValueAxis>
        </RadzenChart>
    </div>
}

@code {
    EnergyData[] FluviusDataRaw = [];    
    EnergyData[] SimulationData = [];
    
    DataFilter.FilterOption SelectedFilterOption = DataFilter.FilterOption.ALL;

    EnergyData[] FilteredFluviusData = [];
    EnergyData[] FilteredSimulationData = [];
    
    EnergyCostCalculator calculator = new();
    double normalCost = 0.0;
    double simulatedCost = 0.0;
    
    PipelineStep[] StepData = [ 
        new PipelineStep(), // Step 1
        new PipelineStep(), // Step 2
        new PipelineStep(), // Step 3
    ];
    
    string _uploadedFileName = string.Empty;
    string? _uploadError = null;
    
    string _timePeriod = "all";
    
    double BatteryCapacity = 7.5;
    double Efficiency = 90;

    private string GetTimeButtonClass(string period)
    {
        var baseClass = "time-toggle-button";
        if (_timePeriod == period)
        {
            return $"{baseClass} active";
        }
        return baseClass;
    }

    private void SetTimePeriodAll() => SetTimePeriod("all");
    private void SetTimePeriodYear() => SetTimePeriod("year");
    private void SetTimePeriodMonth() => SetTimePeriod("month");
    private void SetTimePeriodWeek() => SetTimePeriod("week");
    private void SetTimePeriodDay() => SetTimePeriod("day");

    private void ToggleBox(int step)
    {
        if(step == 1 && FluviusDataRaw.Length == 0) return;
        if(step == 2 && SimulationData.Length == 0) return;
        StepData[step].Expanded = !StepData[step].Expanded;
        StateHasChanged();
    }

    private async Task OnFileUploaded(InputFileChangeEventArgs e)
    {
        _uploadError = null;
        var file = e.File;
        _uploadedFileName = file.Name;
        
        if (file.ContentType != "text/csv")
        {
            _uploadError = "Alleen CSV bestanden zijn toegestaan!";
            StateHasChanged();
            return;
        }

        try
        {
            StepData[0].isProcessing = true;
            StateHasChanged();
            
            FluviusDataRaw = await FluviusDataHandler.LoadAndProcessFile(file);
            SetTimePeriod("all");
            FilteredSimulationData = [];
            
            StepData[0].isProcessing = false;
            StepData[0].Completed = true;
            StepData[1].Completed = false;
            StepData[2].Completed = false;
            SimulationData = [];
            
            StateHasChanged();
        }
        catch (Exception ex)
        {
            StepData[0].isProcessing = false;
            _uploadError = ex.Message;
            StateHasChanged();
        }
    }

    private void SimulateBattery()
    {
        if (FluviusDataRaw.Length == 0) return;
        
        StepData[1].isProcessing = true;
        StateHasChanged();
        
        try
        {
            SimulationData = BatterySimulator.SimulateBattery(FluviusDataRaw, BatteryCapacity, Efficiency/100);
            SetTimePeriod("all");
            
            StepData[1].isProcessing = false;
            StepData[1].Completed = true;
            StepData[2].Completed = false;
            normalCost = 0;
            simulatedCost = 0;
            
            StateHasChanged();
        }
        catch (Exception ex)
        {
            StepData[1].isProcessing = false;
            Console.WriteLine($"Error: {ex.Message}");
        }
    }

    private void Calculate()
    {
        if (SimulationData.Length == 0) return;
        
        StepData[2].isProcessing = true;
        StateHasChanged();
        
        try
        {
            normalCost = calculator.CalculateCostOfEnergyUsage(FluviusDataRaw);            
            simulatedCost = calculator.CalculateCostOfEnergyUsage(SimulationData);            
            StepData[2].isProcessing = false;
            StepData[2].Completed = true;
            StateHasChanged();
        }
        catch (Exception ex)
        {
            StepData[2].isProcessing = false;
            Console.WriteLine($"Error: {ex.Message}");
        }
    }

    private void SetTimePeriod(string period)
    {
        _timePeriod = period;
        var filterOption = period switch {
            "all" => DataFilter.FilterOption.ALL,
            "year" => DataFilter.FilterOption.YEAR,
            "month" => DataFilter.FilterOption.MONTH,
            "week" => DataFilter.FilterOption.WEEK,
            "day" => DataFilter.FilterOption.DAY,
        };
        // Filter data based on selected period
        if(FluviusDataRaw.Length > 0) FilteredFluviusData = DataFilter.FilterData(FluviusDataRaw, filterOption);
        if(SimulationData.Length > 0) FilteredSimulationData = DataFilter.FilterData(SimulationData, filterOption);
        
        StateHasChanged();
    }

    private string FormatObject(object value) {
        if(value is double d) return $"{d:0.##} kWh";
        if(value is DateTime time) return time.ToString("dd/MM/yyyy");
        if(value is DateOnly date) return date.ToString("dd/MM/yyyy");
        return string.Empty;
    }
}