@namespace DeepDrftPublic.Client.Controls.AudioPlayerBar

@* High-density loudness-waveform seekbar. Replaces the MudSlider in PlayerSeekZone.
   Bars render once; the played/unplayed split is a single clip-width animation on the
   muted overlay (see .razor.css), so a seek never re-renders the 200 bar divs. *@
<div class="@($"waveform-seeker {Class}".TrimEnd())"
     style="--played-fraction: @PlayedFraction.ToString("F4", System.Globalization.CultureInfo.InvariantCulture);"
     @ref="_seekerElement"
     @onpointerdown="HandlePointerDown"
     @onpointermove="HandlePointerMove"
     @onpointerup="HandlePointerUp"
     @onpointercancel="HandlePointerUp"
     @onpointerleave="HandlePointerLeave">

    @* Played layer: every bar in the accent colour. *@
    <div class="waveform-layer waveform-layer-played">
        @for (var i = 0; i < _renderedBars.Length; i++)
        {
            <div class="waveform-bar" style="--bar-height: @FormatHeight(_renderedBars[i]);"></div>
        }
    </div>

    @* Unplayed overlay: an identical bar set in the muted colour, clipped to the
       unplayed portion. Only its clip width changes on seek — one CSS property. *@
    <div class="waveform-layer waveform-layer-unplayed">
        @for (var i = 0; i < _renderedBars.Length; i++)
        {
            <div class="waveform-bar" style="--bar-height: @FormatHeight(_renderedBars[i]);"></div>
        }
    </div>

    @* Playhead rule at the split point. *@
    @* <div class="waveform-playhead"></div> *@

    @* Hover preview line + time tooltip (suppressed while dragging). *@
    @if (_showHover && !_isSeeking)
    {
        <div class="waveform-hover-line"
             style="left: @HoverPercent;"></div>
        <div class="waveform-hover-time"
             style="left: @HoverPercent;">
            @FormatTime(_hoverTime)
        </div>
    }
</div>