@implements IDisposable
@inject LocalizationService Loc

<div class="lang-selector">
    <button class="lang-current" @onclick="ToggleDropdown" title="@Loc["lang.select"]">
        <img src="@Loc.CurrentLanguageInfo.FlagIcon" alt="@Loc.CurrentLanguageInfo.DisplayName" class="lang-flag" />
    </button>

    @if (isOpen)
    {
        <div class="lang-dropdown">
            @foreach (var lang in LocalizationService.AvailableLanguages)
            {
                <button class="lang-option @(lang.Code == Loc.CurrentLanguage ? "active" : "")"
                        @onclick="() => SelectLanguage(lang.Code)">
                    <img src="@lang.FlagIcon" alt="@lang.DisplayName" class="lang-flag" />
                    <span>@lang.DisplayName</span>
                </button>
            }
        </div>
    }
</div>

@if (isOpen)
{
    <div class="lang-overlay" @onclick="CloseDropdown"></div>
}

<style>
    .lang-selector {
        position: fixed;
        top: 15px;
        right: 60px;
        z-index: 1001;
    }

    .lang-current {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid var(--border-color);
        background-color: var(--bg-secondary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 0;
        overflow: hidden;
    }

    .lang-current:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .lang-flag {
        width: 20px;
        height: 15px;
        object-fit: cover;
        border-radius: 2px;
    }

    .lang-dropdown {
        position: absolute;
        top: 42px;
        right: 0;
        background-color: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        min-width: 140px;
        z-index: 1002;
    }

    .lang-option {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 8px 12px;
        border: none;
        background: none;
        color: var(--text-primary);
        cursor: pointer;
        font-size: 13px;
        transition: background-color 0.15s;
    }

    .lang-option:hover {
        background-color: var(--bg-tertiary);
    }

    .lang-option.active {
        background-color: var(--table-active-bg);
        font-weight: bold;
    }

    .lang-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
    }
</style>

@code {
    private bool isOpen = false;

    protected override void OnInitialized()
    {
        Loc.OnLanguageChanged += OnLanguageChanged;
    }

    private void ToggleDropdown() => isOpen = !isOpen;
    private void CloseDropdown() => isOpen = false;

    private async Task SelectLanguage(string code)
    {
        isOpen = false;
        await Loc.SetLanguageAsync(code);
    }

    private void OnLanguageChanged() => InvokeAsync(StateHasChanged);

    public void Dispose()
    {
        Loc.OnLanguageChanged -= OnLanguageChanged;
    }
}