@using Koogle.Domain.Enums

<div class="pin @GetPinClass()" @onclick="OnClick" style="@GetStyle()">
    <span class="pin-number">@PinNumber</span>
</div>

<style>
    .pin {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        user-select: none;
        transition: all 0.15s ease;
        font-weight: bold;
        font-size: 1.2rem;
        border: 3px solid transparent;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .pin:hover:not(.pin-disabled) {
        transform: scale(1.1);
    }

    .pin:active:not(.pin-disabled) {
        transform: scale(0.95);
    }

    .pin-standing {
        background-color: var(--mud-palette-primary);
        color: white;
        border-color: var(--mud-palette-primary-darken);
    }

    .pin-fallen {
        background-color: var(--mud-palette-error);
        color: white;
        border-color: var(--mud-palette-error-darken);
    }

    .pin-disabled {
        background-color: var(--mud-palette-gray-light);
        color: var(--mud-palette-gray-dark);
        cursor: not-allowed;
        opacity: 0.5;
    }

    .pin-number {
        pointer-events: none;
    }

    @@media (max-width: 600px) {
        .pin {
            width: 40px;
            height: 40px;
            font-size: 1rem;
        }
    }
</style>

@code {
    /// <summary>
    /// The pin number (1-9).
    /// </summary>
    [Parameter]
    public int PinNumber { get; set; }

    /// <summary>
    /// Current status of the pin.
    /// </summary>
    [Parameter]
    public PinStatus Status { get; set; } = PinStatus.Standing;

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

    /// <summary>
    /// Callback when pin is clicked.
    /// </summary>
    [Parameter]
    public EventCallback<int> OnPinClicked { get; set; }

    private string GetPinClass() => Status switch
    {
        PinStatus.Standing => "pin-standing",
        PinStatus.Fallen => "pin-fallen",
        PinStatus.Disabled => "pin-disabled",
        _ => "pin-standing"
    };

    private string GetStyle()
    {
        if (!IsInteractive || Status == PinStatus.Disabled)
        {
            return "pointer-events: none;";
        }
        return string.Empty;
    }

    private async Task OnClick()
    {
        if (!IsInteractive || Status == PinStatus.Disabled)
            return;

        await OnPinClicked.InvokeAsync(PinNumber);
    }
}