@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">3</div>
        <div class="step-title">Kosten Berekenen</div>
        <div class="status-indicator"></div>
    </div>
    <div class="box-content">
        <div class="box-content-inner">
            <p class="box-description">Vergelijk kosten met en zonder batterij</p>

            <!-- Contractuele Kosten -->
            <div style="margin-bottom: 1.5rem;">
                <h4 style="color: var(--green-clr); margin-bottom: 0.75rem; border-bottom: 1px solid var(--border-clr); padding-bottom: 0.5rem;">
                    Contractuele Kosten
                </h4>
                <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
                    <div class="input-group" style="flex: 1;">
                        <label>Vaste vergoeding (€/jaar):</label>
                        <InputNumber @bind-value="Calculator.BasePayment" T="double" min="0" step="1" />
                    </div>
                    <div class="input-group" style="flex: 1;">
                        <label>Databeheer tarief (€/jaar):</label>
                        <InputNumber @bind-value="Calculator.DataManagementCost" T="double" min="0" step="0.01" />
                    </div>
                </div>

                <!-- Vaste Kosten Subbox (Collapsed by Default) -->
                <details class="collapsible-section" style="margin-top: 1rem;">
                    <summary class="collapsible-header">Vaste Kosten</summary>
                    <div class="collapsible-content">
                        <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
                            <div class="input-group" style="flex: 1;">
                                <label>Vlaamse energieheffing (€/jaar):</label>
                                <InputNumber @bind-value="Calculator.FlemishEnergyTariff" T="double" min="0" step="0.01" />
                            </div>
                        </div>

                        <!-- Heffingen Groene Stroom -->
                        <div style="margin-top: 1rem;">
                            <h5 style="color: var(--green-clr); margin-bottom: 0.5rem;">Heffingen Groene Stroom</h5>
                            <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
                                <div class="input-group" style="flex: 1;">
                                    <label>Groene stroomcertificaten (c€/kWh):</label>
                                    <InputNumber @bind-value="Calculator.GreenCertificateCost" T="double" min="0" step="0.0001" />
                                </div>
                                <div class="input-group" style="flex: 1;">
                                    <label>Warmtekracht certificaten (c€/kWh):</label>
                                    <InputNumber @bind-value="Calculator.HeatingCertificateCost" T="double" min="0" step="0.0001" />
                                </div>
                            </div>
                        </div>

                        <!-- Net- en distributiekosten -->
                        <div style="margin-top: 1rem;">
                            <h5 style="color: var(--green-clr); margin-bottom: 0.5rem;">Net- en distributiekosten</h5>
                            <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
                                <div class="input-group" style="flex: 1;">
                                    <label>Capaciteitstarief (€/kWh/jaar):</label>
                                    <InputNumber @bind-value="Calculator.CapacityCost" T="double" min="0" step="0.01" />
                                </div>
                                <div class="input-group" style="flex: 1;">
                                    <label>Afnametarief (c€/kWh):</label>
                                    <InputNumber @bind-value="Calculator.UsageTariff" T="double" min="0" step="0.0001" />
                                </div>
                            </div>
                        </div>

                        <!-- Heffingen en Toeslagen -->
                        <div style="margin-top: 1rem;">
                            <h5 style="color: var(--green-clr); margin-bottom: 0.5rem;">Heffingen en Toeslagen</h5>
                            <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
                                <div class="input-group" style="flex: 1;">
                                    <label>Energiebijdrage (c€/kWh):</label>
                                    <InputNumber @bind-value="Calculator.EnergyContribution" T="double" min="0" step="0.0001" />
                                </div>
                                <div class="input-group" style="flex: 1;">
                                    <label>Bijzondere accijns (c€/kWh):</label>
                                    <InputNumber @bind-value="Calculator.SpecialTariffs" T="double" min="0" step="0.0001" />
                                </div>
                            </div>
                        </div>
                    </div>
                </details>
            </div>

            <!-- Energiekosten -->
            <div style="margin-bottom: 1.5rem;">
                <h4 style="color: var(--green-clr); margin-bottom: 0.75rem; border-bottom: 1px solid var(--border-clr); padding-bottom: 0.5rem;">
                    Energiekosten
                </h4>
                <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
                    <div class="input-group" style="flex: 1;">
                        <label>Energiekost (c€/kWh):</label>
                        <InputNumber @bind-value="Calculator.EnergyCost" T="double" min="0" step="0.0001" />
                    </div>
                    <div class="input-group" style="flex: 1;">
                        <label>Terugleveringsvergoeding (c€/kWh):</label>
                        <InputNumber @bind-value="Calculator.ReturnCost" T="double" min="0" step="0.0001" />
                    </div>
                </div>
            </div>

            <div style="display: flex; justify-content: center; margin-top: 1.5rem;">
                <button @onclick="Calculate" @onclick:stopPropagation disabled="@(StepData.isProcessing || SimulationData.Length == 0)">
                    @if (StepData.isProcessing)
                    {
                        <text>Berekenen...</text>
                    }
                    else
                    {
                        <text>Bereken Kosten</text>
                    }
                </button>
            </div>

            @if (StepData.Completed)
            {
                <div class="results">
                    <p><strong>Originele kosten:</strong> <span class="result-value">€@NormalCost.ToString("0.00")</span></p>
                    <p><strong>Gesimuleerde kosten:</strong> <span class="result-value">€@SimulatedCost.ToString("0.00")</span></p>
                    <p><strong>Besparing:</strong> <span class="result-value">€@((NormalCost - SimulatedCost).ToString("0.00"))</span></p>
                    @if (NormalCost > 0)
                    {
                        <p><strong>Besparingspercent:</strong> <span class="result-value">@(((NormalCost - SimulatedCost) / NormalCost * 100).ToString("0.00"))%</span></p>
                    }
                </div>
            }
        </div>
    </div>
</div>

@code {
    [Parameter]
    public EnergyData[] SimulationData { get; set; } = [];
    
    [Parameter]
    public EnergyData[] FluviusDataRaw { get; set; } = [];
    
    [Parameter]
    public PipelineStep StepData { get; set; }
    
    [Parameter]
    public EnergyCostCalculator Calculator { get; set; } = new();
    
    [Parameter]
    public double NormalCost { get; set; } = 0.0;
    
    [Parameter]
    public double SimulatedCost { get; set; } = 0.0;
    
    [Parameter]
    public EventCallback OnCalculateCallback { 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 Calculate()
    {
        OnCalculateCallback.InvokeAsync();
    }
    
    private void ToggleBox()
    {
        OnToggleBoxCallback.InvokeAsync();
    }
}