@* Masked input for tire sizes in the format ###/## R## (e.g. 225/45 R17).
   The user only types digits; separators are inserted automatically. *@

<input type="text"
       class="form-control @CssClass"
       inputmode="numeric"
       maxlength="10"
       placeholder="@Placeholder"
       value="@Value"
       @oninput="OnInput" />

@code {
    [Parameter] public string? Value { get; set; }
    [Parameter] public EventCallback<string?> ValueChanged { get; set; }
    [Parameter] public string Placeholder { get; set; } = "z.B. 225/45 R17";
    [Parameter] public string? CssClass { get; set; }

    private async Task OnInput(ChangeEventArgs e)
    {
        var raw = e.Value?.ToString() ?? string.Empty;
        var formatted = FormatTireSize(raw);
        Value = formatted;
        await ValueChanged.InvokeAsync(formatted);
    }

    /// <summary>
    /// Formats digit input into the tire size mask ###/## R##.
    /// Examples: "2254517" -> "225/45 R17", "22545" -> "225/45", "225" -> "225"
    /// </summary>
    private static string FormatTireSize(string input)
    {
        var digits = new string(input.Where(char.IsDigit).Take(7).ToArray());

        if (digits.Length == 0)
            return string.Empty;

        if (digits.Length <= 3)
            return digits;

        if (digits.Length <= 5)
            return $"{digits[..3]}/{digits[3..]}";

        return $"{digits[..3]}/{digits[3..5]} R{digits[5..]}";
    }
}