@namespace DeepDrftPublic.Client.Controls
@using DeepDrftPublic.Client.Services
@inject MixVisualizerControlState ControlState

@* The Mix visualizer controls (Phase 10, Wave 4). Four continuous RadialKnobs — resolution,
   bubblyness, detach, color-shift speed — laid out in a row. This component lives inside the
   lava-lamp popover on the Mix detail page (Wave 4 moved it out of the always-visible TopContent row).
   It owns NO JS interop: it mutates the shared, session-scoped MixVisualizerControlState and raises its
   Changed event. The backdrop bridge (MixWaveformVisualizer) subscribes to that event and pushes the
   affected uniform to the WebGL module. That keeps the JS module handle single-owned by the bridge and
   this component purely presentational. None of these is a seek surface (spec §D).

   RadialKnob has no icon slot (its Label renders as SVG text), so each control's Material icon rides
   beside its knob as an adjacent MudIcon caption (spec §7e). HoldValue stays false so the knobs are
   live — ValueChanged fires continuously during drag, exactly as the sliders fired before, preserving
   the "visibly and continuously affects its target" feel and the Changed/NotifyChanged seam. *@

<div class="mix-visualizer-controls">

    @* RadialKnob exposes no aria-label/attribute-capture and is out of scope to modify, so the
       accessible name rides on the wrapping group div instead (a plain element accepts it).
       R2 TEMP: this knob is repurposed from resolution/zoom to WAVEFORM WIDTH for in-browser lava
       testing (scroll speed isn't critical for evaluating the lava). The on-screen icon still reads
       ZoomIn; R4 redraws the controls and restores the resolution mapping. *@
    <div class="mix-visualizer-control" role="group" aria-label="Waveform width (R2 temp: on the resolution knob)">
        <RadialKnob Value="@ControlState.WaveformWidth"
                    ValueChanged="@OnWaveformWidthChanged"
                    Min="0"
                    Max="1"
                    Step="0.001"
                    Size="72"
                    Color="Color.Primary" />
        <MudIcon Icon="@Icons.Material.Filled.ZoomIn" Size="Size.Small" Class="mix-visualizer-control-icon" />
    </div>

    <div class="mix-visualizer-control" role="group" aria-label="Bubblyness">
        <RadialKnob Value="@ControlState.Bubblyness"
                    ValueChanged="@OnBubblynessChanged"
                    Min="0"
                    Max="1"
                    Step="0.001"
                    Size="72"
                    Color="Color.Primary" />
        <MudIcon Icon="@Icons.Material.Filled.BubbleChart" Size="Size.Small" Class="mix-visualizer-control-icon" />
    </div>

    <div class="mix-visualizer-control" role="group" aria-label="Detach (unleash the lava lamp)">
        <RadialKnob Value="@ControlState.Detach"
                    ValueChanged="@OnDetachChanged"
                    Min="0"
                    Max="1"
                    Step="0.001"
                    Size="72"
                    Color="Color.Primary" />
        <MudIcon Icon="@Icons.Material.Filled.Air" Size="Size.Small" Class="mix-visualizer-control-icon" />
    </div>

    <div class="mix-visualizer-control" role="group" aria-label="Color-shift speed">
        <RadialKnob Value="@ControlState.ColorShiftSpeed"
                    ValueChanged="@OnColorShiftSpeedChanged"
                    Min="0"
                    Max="1"
                    Step="0.001"
                    Size="72"
                    Color="Color.Primary" />
        <MudIcon Icon="@Icons.Material.Filled.Palette" Size="Size.Small" Class="mix-visualizer-control-icon" />
    </div>

</div>

@code {
    // R2 TEMP: the resolution knob is repurposed to WAVEFORM WIDTH (already normalized [0,1], binds
    // directly). R4 restores the log zoom mapping (MixZoomMapping) and gives width its own knob.
    private void OnWaveformWidthChanged(double value)
    {
        ControlState.WaveformWidth = value;
        ControlState.NotifyChanged();
    }

    private void OnBubblynessChanged(double value)
    {
        ControlState.Bubblyness = value;
        ControlState.NotifyChanged();
    }

    private void OnDetachChanged(double value)
    {
        ControlState.Detach = value;
        ControlState.NotifyChanged();
    }

    private void OnColorShiftSpeedChanged(double value)
    {
        ControlState.ColorShiftSpeed = value;
        ControlState.NotifyChanged();
    }
}