@using EnvelopeGenerator.Server.Client.Services
@rendermode InteractiveWebAssembly
@implements IDisposable

@inject ThemeService ThemeService

<div class="sf-theme-slider">

    @* Moon — left end (blazing-dark) *@
    <svg class="sf-theme-icon @(ThemeService.ThemeName == "blazing-dark" ? "sf-theme-icon--active" : "")"
         xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 24 24"
         title="Blazing Dark">
        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
    </svg>

    @* Track wrapper: range input + left/mid/right ticks *@
    <div class="sf-theme-track-wrapper">
        @* Left tick *@
        <div class="sf-theme-tick sf-theme-tick--left"></div>
        @* Mid tick (marks the middle position) *@
        <div class="sf-theme-tick sf-theme-tick--mid"></div>
        @* Right tick *@
        <div class="sf-theme-tick sf-theme-tick--right"></div>

        <input type="range"
               class="sf-theme-range"
               min="0" max="2" step="1"
               value="@SliderValue"
               @oninput="OnSliderChanged"
               title="@ThemeService.AvailableThemes[SliderValue].Label" />
    </div>

    @* Sun — right end (purple) *@
    <svg class="sf-theme-icon @(ThemeService.ThemeName == "purple" ? "sf-theme-icon--active" : (ThemeService.ThemeName == "blazing-berry" ? "sf-theme-icon--mid" : ""))"
         xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 24 24"
         stroke="currentColor" stroke-width="1.5"
         title="Blazing Berry / Purple">
        <circle cx="12" cy="12" r="4" fill="currentColor" stroke="none"/>
        <line x1="12" y1="2"  x2="12" y2="5"/>
        <line x1="12" y1="19" x2="12" y2="22"/>
        <line x1="4.22" y1="4.22"   x2="6.34" y2="6.34"/>
        <line x1="17.66" y1="17.66" x2="19.78" y2="19.78"/>
        <line x1="2"  y1="12" x2="5"  y2="12"/>
        <line x1="19" y1="12" x2="22" y2="12"/>
        <line x1="4.22" y1="19.78" x2="6.34" y2="17.66"/>
        <line x1="17.66" y1="6.34" x2="19.78" y2="4.22"/>
    </svg>

</div>

@code {
    private Action? _themeChangeHandler;

    /// <summary>
    /// Maps the active theme to a 0-based slider step.
    /// 0 = blazing-dark  (🌙 left)
    /// 1 = blazing-berry (middle)
    /// 2 = purple        (☀️ right)
    /// </summary>
    private int SliderValue => ThemeService.ThemeName switch
    {
        "blazing-dark" => 0,
        "purple"       => 2,
        _              => 1
    };

    protected override void OnInitialized()
    {
        _themeChangeHandler = () => InvokeAsync(StateHasChanged);
        ThemeService.OnChange += _themeChangeHandler;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await ThemeService.InitializeAsync();
    }

    private async Task OnSliderChanged(ChangeEventArgs e)
    {
        if (!int.TryParse(e.Value?.ToString(), out var step)) return;

        var themeName = step switch
        {
            0 => "blazing-dark",
            2 => "purple",
            _ => "blazing-berry"
        };

        await ThemeService.SetThemeAsync(themeName);
    }

    public void Dispose()
        => ThemeService.OnChange -= _themeChangeHandler;
}