@implements IDisposable
@inject UiBusyService Busy

@if (Busy.IsVisible)
{
    <div class="busy-overlay" role="alert" aria-live="assertive">
        <div class="busy-overlay__panel">
            <div class="busy-overlay__spinner" aria-hidden="true"></div>
            <div class="busy-overlay__content">
                <div class="busy-overlay__eyebrow">Operacion en curso</div>
                <h2 class="busy-overlay__title">@Busy.Title</h2>
                <p class="busy-overlay__message">@Busy.Message</p>

                @if (!string.IsNullOrWhiteSpace(Busy.Detail))
                {
                    <div class="busy-overlay__detail">@Busy.Detail</div>
                }

                <div class="busy-overlay__progress" aria-hidden="true">
                    <div class="@ProgressBarCss" style="@ProgressStyle"></div>
                </div>

                @if (!Busy.IsIndeterminate && Busy.Total is > 0)
                {
                    <div class="busy-overlay__counter">
                        @Busy.Current de @Busy.Total
                    </div>
                }
            </div>
        </div>
    </div>
}

<style>
    .busy-overlay {
        position: fixed;
        inset: 0;
        z-index: 5000;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
        background:
            radial-gradient(circle at 20% 20%, rgba(41, 101, 194, 0.28), transparent 32%),
            rgba(6, 22, 41, 0.46);
        backdrop-filter: blur(8px);
    }

    .busy-overlay__panel {
        display: flex;
        gap: 1.25rem;
        width: min(520px, 100%);
        padding: 1.5rem;
        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: 0 26px 80px rgba(5, 27, 54, 0.28);
        color: #0d345f;
    }

    .busy-overlay__spinner {
        width: 3.25rem;
        height: 3.25rem;
        flex: 0 0 auto;
        border: 4px solid rgba(42, 82, 152, 0.16);
        border-top-color: #2865c2;
        border-radius: 50%;
        animation: busy-spin 0.9s linear infinite;
    }

    .busy-overlay__content {
        min-width: 0;
        flex: 1;
    }

    .busy-overlay__eyebrow {
        margin-bottom: 0.35rem;
        color: #4f6c8e;
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .busy-overlay__title {
        margin: 0;
        color: #0a315c;
        font-size: clamp(1.25rem, 3vw, 1.65rem);
        font-weight: 800;
    }

    .busy-overlay__message {
        margin: 0.4rem 0 0;
        color: #385c80;
        line-height: 1.45;
    }

    .busy-overlay__detail {
        margin-top: 0.85rem;
        padding: 0.55rem 0.7rem;
        border-radius: 14px;
        background: #eef5ff;
        color: #264f79;
        font-size: 0.9rem;
        font-weight: 700;
    }

    .busy-overlay__progress {
        position: relative;
        overflow: hidden;
        height: 0.55rem;
        margin-top: 1.1rem;
        border-radius: 999px;
        background: #dbe8f7;
    }

    .busy-overlay__progress-bar {
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #2865c2, #1fa47f);
        transition: width 0.24s ease;
    }

    .busy-overlay__progress-bar--indeterminate {
        position: absolute;
        width: 42%;
        animation: busy-progress 1.15s ease-in-out infinite;
    }

    .busy-overlay__counter {
        margin-top: 0.5rem;
        color: #5d7187;
        font-size: 0.86rem;
        font-weight: 700;
        text-align: right;
    }

    @@keyframes busy-spin {
        to {
            transform: rotate(360deg);
        }
    }

    @@keyframes busy-progress {
        0% {
            left: -45%;
        }

        100% {
            left: 105%;
        }
    }

    @@media (max-width: 575.98px) {
        .busy-overlay__panel {
            flex-direction: column;
            padding: 1.2rem;
        }
    }
</style>

@code {
    private string ProgressBarCss => Busy.IsIndeterminate
        ? "busy-overlay__progress-bar busy-overlay__progress-bar--indeterminate"
        : "busy-overlay__progress-bar";

    private string ProgressStyle => Busy.IsIndeterminate
        ? string.Empty
        : $"width: {Busy.ProgressPercent}%;";

    protected override void OnInitialized()
    {
        Busy.Changed += HandleBusyChanged;
    }

    public void Dispose()
    {
        Busy.Changed -= HandleBusyChanged;
    }

    private void HandleBusyChanged()
    {
        _ = InvokeAsync(StateHasChanged);
    }
}
