@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">1</div>
        <div class="step-title">Fluvius Data</div>
        <div class="status-indicator"></div>
    </div>
    <div class="box-content">
        <div class="box-content-inner">
            <p class="box-description">Upload je Fluvius kwartierdata om te beginnen</p>
            
            <div class="form-section">
                <div class="file-input-wrapper">
                    <InputFile type="file" id="fileUpload" accept=".csv" onchange="async (e) => await OnFileUploaded(e)" />
                    <label for="fileUpload" class="file-input-label">
                        @if (StepData.isProcessing)
                        {
                            <div class="loading-indicator">
                                <div class="spinner"></div>
                                <span style="margin-left: 10px;">Data aan het inladen...</span>
                            </div>
                        }
                        else
                        {
                            @if (FluviusDataRaw.Length == 0)
                            {
                                <text>Kies CSV bestand</text>
                            }
                            else
                            {
                                <text>OK @FluviusDataRaw.Length kwartieren geladen</text>
                            }
                        }
                    </label>
                    @if (FluviusDataRaw.Length > 0 && !StepData.isProcessing)
                    {
                        <p class="file-name">@UploadedFileName</p>
                    }
                </div>
            </div>
            
            @if (StepData.Completed)
            {
                <div class="success-message">
                    Data succesvol ingeladen en verwerkt!
                </div>
            }
            @if (UploadError != null)
            {
                <div class="error-message">
                    @UploadError
                </div>
            }
            
            <div class="info-text">
                <p><strong>Tip:</strong> Download een volledig jaar aan kwartierdata voor de meest accurate resultaten.</p>
            </div>
        </div>
    </div>
</div>

@code {
    [Parameter]
    public EnergyData[] FluviusDataRaw { get; set; } = [];
    
    [Parameter]
    public PipelineStep StepData { get; set; }
    
    [Parameter]
    public string UploadedFileName { get; set; } = string.Empty;
    
    [Parameter]
    public string? UploadError { get; set; }
    
    [Parameter]
    public EventCallback<InputFileChangeEventArgs> OnFileUploadedCallback { 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 async Task OnFileUploaded(InputFileChangeEventArgs e)
    {
        await OnFileUploadedCallback.InvokeAsync(e);
    }
    
    private void ToggleBox()
    {
        OnToggleBoxCallback.InvokeAsync();
    }
}