@using Koogle.Domain.Enums

<div class="number-panel">
    <div class="number-buttons">
        @for (int i = 0; i <= 9; i++)
        {
            var number = i;
            <MudButton Variant="Variant.Filled"
                       Color="Color.Secondary"
                       Size="Size.Large"
                       OnClick="() => HandleNumberClick(number)"
                       Class="number-button"
                       Disabled="@(!IsInteractive)">
                @number
            </MudButton>
        }
    </div>

    
</div>

<style>
    .number-panel {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16px;
        background: var(--mud-palette-surface);
        border-radius: 8px;
    }

    .number-buttons {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
    }

    .number-button {
        min-width: 48px !important;
        height: 48px !important;
        font-size: 1.2rem !important;
        font-weight: bold !important;
    }

    .action-buttons {
        display: flex;
        gap: 8px;
        justify-content: center;
    }

    .action-button {
        flex: 1;
        height: 56px !important;
    }

    .confirm-button {
        min-width: 120px;
    }

    @@media (max-width: 600px) {
        .number-buttons {
            grid-template-columns: repeat(5, 1fr);
            gap: 6px;
        }

        .number-button {
            min-width: 40px !important;
            height: 40px !important;
            font-size: 1rem !important;
        }

        .action-button {
            height: 48px !important;
        }
    }
</style>

@code {
    /// <summary>
    /// Whether the panel is interactive.
    /// </summary>
    [Parameter]
    public bool IsInteractive { get; set; } = true;

    /// <summary>
    /// Whether the throw can be confirmed (pins have been selected).
    /// </summary>
    [Parameter]
    public bool CanConfirmThrow { get; set; } = true;

    /// <summary>
    /// Currently selected number (for highlighting).
    /// </summary>
    [Parameter]
    public int? SelectedNumber { get; set; }

    // /// <summary>
    // /// Current bell value state.
    // /// </summary>
    // [Parameter]
    // public bool BellValue { get; set; }

    /// <summary>
    /// Callback when a number is clicked (sets all pins 1-N as fallen).
    /// </summary>
    [Parameter]
    public EventCallback<int> OnNumberClicked { get; set; }

    // /// <summary>
    // /// Callback when bell button is clicked.
    // /// </summary>
    // [Parameter]
    // public EventCallback OnBellClicked { get; set; }

    // /// <summary>
    // /// Callback when throw is confirmed.
    // /// </summary>
    // [Parameter]
    // public EventCallback OnThrowConfirmed { get; set; }

    // private Color GetButtonColor(int number)
    // {
    //     if (SelectedNumber == number)
    //         return Color.Secondary;

    //     // Special colors for key numbers
    //     return number switch
    //     {
    //         0 => Color.Error,     // Rinne (gutter)
    //         9 => Color.Success,   // Alle (strike)
    //         _ => Color.Primary
    //     };
    // }

    private async Task HandleNumberClick(int number)
    {
        if (!IsInteractive)
            return;

        await OnNumberClicked.InvokeAsync(number);
    }

    // private async Task HandleBellClick()
    // {
    //     if (!IsInteractive)
    //         return;

    //     await OnBellClicked.InvokeAsync();
    // }

    
}