@using Sandbox;
@using Sandbox.UI;

@namespace Machines.UI
@inherits Panel

<root class="lap-counter">
    <div class="lap-text">
        <span class="lap-label">LAP</span>
        <span class="lap-current">@CurrentLap</span>
        <span class="lap-separator">/</span>
        <span class="lap-total">@TotalLaps</span>
    </div>
    <div class="segments">
        @for ( int i = 0; i < TotalSegments; i++ )
        {
            var fill = GetSegmentFill( i );
            <div class="segment @(fill > 0 ? "filled" : "") @(fill >= 1 ? "complete" : "")">
                <div class="segment-fill" style="width: @((int)(fill * 100))%"></div>
            </div>
        }
    </div>
</root>

@code
{
    [Property] public int CurrentLap { get; set; } = 1;
    [Property] public int TotalLaps { get; set; } = 4;
    [Property] public float LapProgress { get; set; } = 0.5f;

    private int TotalSegments => TotalLaps;

    private float GetSegmentFill( int index )
    {
        if ( index < CurrentLap - 1 )
            return 1f;
        if ( index == CurrentLap - 1 )
            return LapProgress;
        return 0f;
    }

    protected override int BuildHash()
    {
        return HashCode.Combine( CurrentLap, TotalLaps, LapProgress );
    }
}