@using Radzen
@using Radzen.Blazor
@using BattSim.Models
@using BattSim.Services

<div class="pipeline-box @GetPipelineStepClasses(StepData)">
    <div class="box-header" @onclick="ToggleBox">
        <div class="step-number">2</div>
        <div class="step-title">Batterij Simulatie</div>
        <div class="status-indicator"></div>
    </div>
    <div class="box-content">
        <div class="box-content-inner">
            <p class="box-description">Test verschillende batterijconfiguraties</p>
            
            @if (FluviusDataRaw.Length == 0)
            {
                <div class="info-text">
                    <p>Upload eerst je Fluvius data (stap 1) om deze stap te kunnen uitvoeren.</p>
                </div>
            }
            else
            {
                <div class="form-section">
                    <div style="display: flex; gap: 1rem;">
                        <div class="input-group" style="flex: 1;">
                            <label>Batterijcapaciteit (kWh):</label>
                            <InputNumber @bind-value="BatteryCapacity" T="double" min="0.1" max="100" step="0.1" />
                        </div>
                        <div class="input-group" style="flex: 1;">
                            <label>Round-trip Efficiëntie (%):</label>
                            <InputNumber @bind-value="Efficiency" T="double" min="0" max="100" step="1" />
                        </div>
                    </div>
                    <p style="font-size: 0.85rem; color: var(--text-clr); margin-top: 1rem;">
                        Efficiëntie is het percentage van opgeslagen energie dat terug kan worden gebruikt.
                    </p>
                </div>
                
                <div style="display: flex; justify-content: center; margin-top: 1.5rem;">
                    <button @onclick="SimulateBattery" @onclick:stopPropagation disabled="@(StepData.isProcessing || FluviusDataRaw.Length == 0)">
                        @if (StepData.isProcessing)
                        {
                            <text>Simuleren...</text>
                        }
                        else
                        {
                            <text>Simuleer Batterij</text>
                        }
                    </button>
                </div>
                
                @if (StepData.Completed)
                {
                    <div class="success-message">
                        Simulatie voltooid! @SimulationData.Length kwartieren gesimuleerd.
                    </div>
                }
            }
        </div>
    </div>
</div>

@code {
    [Parameter]
    public EnergyData[] FluviusDataRaw { get; set; } = [];
    
    [Parameter]
    public EnergyData[] SimulationData { get; set; } = [];
    
    [Parameter]
    public PipelineStep StepData { get; set; }
    
    [Parameter]
    public double BatteryCapacity { get; set; } = 7.5;
    
    [Parameter]
    public double Efficiency { get; set; } = 90;
    
    [Parameter]
    public EventCallback OnSimulateBatteryCallback { get; set; }
    
    [Parameter]
    public EventCallback OnToggleBoxCallback { get; set; }
    
    private string GetPipelineStepClasses(PipelineStep step)
    {
        var classes = new List<string>();
        if (step.Expanded) classes.Add("expanded");
        if (step.Completed) classes.Add("completed");
        if (step.isProcessing) classes.Add("running");
        return string.Join(" ", classes);
    }
    
    private void SimulateBattery()
    {
        OnSimulateBatteryCallback.InvokeAsync();
    }
    
    private void ToggleBox()
    {
        OnToggleBoxCallback.InvokeAsync();
    }
}