@page "/rvrb"
<PageTitle>rvrb bot</PageTitle>
<script type="module" src="@Assets["Components/Pages/Rvrb.razor.js"]"></script>

<main>
    <h1>rvrb bot</h1>

    <p class="flex-spread">
        <span class="@StatusClass">@StatusLabel</span>
        <label class="noselect">
            Auto-refresh
            <input type="checkbox" id="autoRefresh">
        </label>
    </p>

    @if (Snapshot is null)
    {
        <Panel Legend="Unreachable">
            <p>
                Nothing answered on the bot's node, so there are no stats to show.
            </p>
            @if (Status.Error is { } error)
            {
                @* A failure on the far side arrives as an Erlang term, stack trace and all, which
                   is worth keeping but not worth putting in front of everyone. *@
                <details>
                    <summary class="status-down">What went wrong</summary>
                    <pre>@error</pre>
                </details>
            }
        </Panel>
    }
    else
    {
        <Panel Legend="Now playing">
            @if (Snapshot.Live is null)
            {
                <p>The bot isn't connected to RVRB right now, so nothing is playing.</p>
            }
            else if (Snapshot.Live.CurrentTrack is not { } track)
            {
                <p>Connected, but no track has played since the bot joined.</p>
            }
            else
            {
                <div class="now-playing">
                    @if (track.AlbumArt is { } art)
                    {
                        <img class="album-art" src="@art" alt="" width="128" height="128"/>
                    }
                    <div>
                        <h3>
                            <SpotifyLink Kind="track" Id="@track.SpotifyTrackId" Name="@track.Name"/>
                        </h3>
                        <p><ArtistLinks Names="track.ArtistNames" Ids="track.SpotifyArtistIds"/></p>
                        @* A bar needs both halves to mean anything: a track that came without a
                           duration, or one already playing when the bot connected, gets neither. *@
                        @if (track.Duration is { } length && track.Elapsed is not null)
                        {
                            <p>
                                <progress id="trackProgress" max="1000"
                                          value="@((int)((track.Progress ?? 0) * 1000))"
                                          data-elapsed-ms="@((long)track.Elapsed.Value.TotalMilliseconds)"
                                          data-duration-ms="@((long)length.TotalMilliseconds)"
                                          data-age-ms="@((long)Age.TotalMilliseconds)"></progress>
                                <span id="trackElapsed">@Format.Duration(track.Elapsed)</span>
                                /
                                <span>@Format.Duration(length)</span>
                            </p>
                        }
                        <p>
                            👍 @Snapshot.Live.Dopes
                            🔖 @Snapshot.Live.Stars
                            @if (Snapshot.Live.AutoDoped)
                            {
                                <span class="status-up"> — the bot doped this one</span>
                            }
                            @if (Snapshot.Live.AutoStarred)
                            {
                                <span class="status-up"> — and starred it</span>
                            }
                        </p>
                    </div>
                </div>
            }
        </Panel>

        @if (Snapshot.Live is { Djs.Count: > 0 } live)
        {
            <Panel Legend="@($"DJ queue — one lap ≈ {Format.Duration(live.Lap)}")">
                <div class="table-scroll">
                    <table>
                        <thead>
                        <tr>
                            <th>DJ</th>
                            <th>Avg track length</th>
                            <th>Next play in</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach (var dj in live.Djs)
                        {
                            <tr>
                                <td>@(dj.Current ? "▶ " : "")@(dj.Name ?? "someone")</td>
                                <td>
                                    ≈ @Format.Duration(dj.AverageTrack)
                                    @if (!dj.Measured)
                                    {
                                        <span class="muted"> (assumed)</span>
                                    }
                                </td>
                                <td>≈ @Format.Duration(dj.Wait)</td>
                            </tr>
                        }
                        </tbody>
                    </table>
                </div>
                @if (live.QueuedTracks > 0)
                {
                    <p>@live.QueuedTracks @(live.QueuedTracks == 1 ? "track" : "tracks") queued for the bot's own turn.</p>
                }
            </Panel>
        }

        <Panel Legend="Totals">
            <dl class="stats">
                <div><dt>Plays</dt><dd>@Snapshot.Totals.Plays</dd></div>
                <div><dt>Tracks</dt><dd>@Snapshot.Totals.Tracks</dd></div>
                <div><dt>Artists</dt><dd>@Snapshot.Totals.Artists</dd></div>
                <div><dt>DJs</dt><dd>@Snapshot.Totals.Djs</dd></div>
                <div><dt>Users seen</dt><dd>@Snapshot.Totals.Users</dd></div>
                <div><dt>Dopes</dt><dd>@Snapshot.Totals.Dopes</dd></div>
                <div><dt>Stars</dt><dd>@Snapshot.Totals.Stars</dd></div>
            </dl>
            @if (Snapshot.Totals.FirstPlayAt is { } first)
            {
                <p>Recording plays since <Timestamp At="first"/>.</p>
            }
        </Panel>

        <Panel Legend="@($"Plays per day — last {Snapshot.PlaysPerDay.Count} days")">
            <ol class="bars">
                @foreach (var day in Snapshot.PlaysPerDay)
                {
                    <li title="@BarTitle(day)">
                        <span class="bar" style="block-size: @(BarHeight(day.Plays))%"></span>
                        <span class="bar-label">@day.Plays</span>
                        <span class="bar-day"><span class="day-abbrev">@DayLabel(day)</span><span class="day-initial">@DayInitial(day)</span></span>
                    </li>
                }
            </ol>
        </Panel>

        <Panel Legend="Top DJs">
            <div class="table-scroll">
                <table>
                    <thead>
                    <tr>
                        <th>DJ</th>
                        <th>Plays</th>
                        <th>👍</th>
                        <th>🔖</th>
                        <th>Score</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach (var dj in Snapshot.TopDjs)
                    {
                        <tr>
                            <td>@dj.Name</td>
                            <td>@dj.Plays</td>
                            <td>@dj.Dopes</td>
                            <td>@dj.Stars</td>
                            <td>@dj.Score</td>
                        </tr>
                    }
                    </tbody>
                </table>
            </div>
        </Panel>

        <Panel Legend="Top tracks">
            <div class="table-scroll">
                <table>
                    <thead>
                    <tr>
                        <th>Track</th>
                        <th>Artist</th>
                        <th>Plays</th>
                        <th>Score</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach (var track in Snapshot.TopTracks)
                    {
                        <tr>
                            <td>
                                <SpotifyLink Kind="track" Id="@track.SpotifyTrackId" Name="@track.TrackName"/>
                            </td>
                            <td><ArtistLinks Names="track.ArtistNames" Ids="track.SpotifyArtistIds"/></td>
                            <td>@track.Plays</td>
                            <td>@track.Score</td>
                        </tr>
                    }
                    </tbody>
                </table>
            </div>
        </Panel>

        <Panel Legend="Top artists">
            <div class="table-scroll">
                <table>
                    <thead>
                    <tr>
                        <th>Artist</th>
                        <th>Plays</th>
                        <th>Score</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach (var artist in Snapshot.TopArtists)
                    {
                        <tr>
                            <td>
                                <SpotifyLink Kind="artist" Id="@artist.SpotifyArtistId" Name="@artist.ArtistName"/>
                            </td>
                            <td>@artist.Plays</td>
                            <td>@artist.Score</td>
                        </tr>
                    }
                    </tbody>
                </table>
            </div>
        </Panel>

        <Panel Legend="Recently played">
            <div class="table-scroll">
                <table>
                    <thead>
                    <tr>
                        <th>When</th>
                        <th>DJ</th>
                        <th>Track</th>
                        <th>Artist</th>
                        <th>Score</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach (var play in Snapshot.RecentPlays)
                    {
                        <tr>
                            <td><Timestamp At="play.PlayedAt"/></td>
                            <td>@play.Dj</td>
                            <td>
                                <SpotifyLink Kind="track" Id="@play.SpotifyTrackId" Name="@play.TrackName"/>
                            </td>
                            <td><ArtistLinks Names="play.ArtistNames" Ids="play.SpotifyArtistIds"/></td>
                            <td>@play.Score</td>
                        </tr>
                    }
                    </tbody>
                </table>
            </div>
        </Panel>

        <p class="muted">
            Read from <code>@Options.Node</code> over Erlang distribution with
            <a href="https://github.com/Besselking/BeamSharp">BeamSharp</a>. Snapshot taken <Timestamp At="Snapshot.GeneratedAt"/>.
        </p>
    }
</main>