{# Live region for the Live Racing monitor. Rendered inside monitor.html.twig on
   first load AND standalone by WfboController::liveRacingMonitorData(), re-fetched
   by the lr-monitor Stimulus controller every 15s (innerHTML swap of this file's
   output only — the header and video iframe live in the shell). #}

{% if state == 'idle' %}
    <div class="lr-mon__idle" data-testid="lr-monitor-idle">
        <div class="lr-mon__idle-clock">{{ now|date('H:i') }}</div>
        <div class="lr-mon__idle-msg">No live event right now</div>
        {% if notFound %}
            <div class="lr-mon__idle-next">Requested event not found.</div>
        {% endif %}
        {% if nextEvent %}
            <div class="lr-mon__idle-next">Next: {{ nextEvent.management.name }} &mdash; {{ nextEvent.eventDate|date('D, M j, Y') }}</div>
        {% endif %}
    </div>
{% else %}
    {# Remaining Stakes = Turnover minus Settled Stake, i.e. stake money not yet
       resolved to won/lost. This also nets out any scratched/void stake, so it
       can run a bit above the Pending Bets tile's own pending-only total;
       snapshot.pendingStaked is the strictly-pending figure if that distinction
       ever matters. #}
    {% set kpis = [
        {label: 'Turnover',       value: '₱' ~ snapshot.staked|number_format(2), sub: snapshot.count ~ ' bets · ' ~ snapshot.pendingCount ~ ' pending'},
        {label: 'Settled Stake',  value: '₱' ~ totals.betAmount|number_format(2), sub: totals.count ~ ' settled bets'},
        {label: 'Remaining Stakes', value: '₱' ~ (snapshot.staked - totals.betAmount)|number_format(2), sub: 'turnover not yet won/lost'},
        {label: 'Payout',         value: '₱' ~ totals.payout|number_format(2),    sub: null},
        {label: 'Commission',     value: '₱' ~ totals.commission|number_format(2), sub: null},
        {label: 'Revenue',        value: '₱' ~ totals.revenue|number_format(2),    sub: null, signed: true, amount: totals.revenue},
        {label: 'Pending Bets',   value: pendingTotal,                            sub: null},
        {label: 'Settled Bets',   value: totals.count,                            sub: null},
        {label: 'Win Count',      value: statusCounts.won.count,                  sub: '₱' ~ statusCounts.won.amount|number_format(2)},
        {label: 'Lose Count',     value: statusCounts.lost.count,                 sub: '₱' ~ statusCounts.lost.amount|number_format(2)},
        {label: 'Void Count',     value: statusCounts.void.count,                 sub: '₱' ~ statusCounts.void.amount|number_format(2)},
        {label: 'Failed Credits', value: settlement.failed,                       sub: settlement.total ~ ' settlement rows', danger: settlement.failed > 0},
        {label: 'Win Rate Today', value: winRate ~ '%',                           sub: 'payout ÷ settled stake'},
        {label: 'Active Players Today', value: activePlayers,                    sub: 'placed a live racing bet'},
        {label: 'Late Bets',      value: lateBetTotal,                           sub: 'placed after betting closed', danger: lateBetTotal > 0},
    ] %}

    {% set settledBets = totals.count %}
    {% set settleKnown = settledBets + pendingTotal %}

        <div class="lr-mon__side">
            {% for row in races %}
                {% if row.statusKey in ['betting-closed', 'awaiting-settlement'] %}
                    <div class="lr-mon__horses" data-testid="lr-monitor-race-{{ row.race.raceNumber }}-horses">
                        <div class="lr-mon__horses-head">Race {{ row.race.raceNumber }} — Horses</div>
                        <div class="lr-mon__horses-list">
                            {% for h in row.horses %}
                                <span class="lr-mon__horse{{ h.isScratched ? ' lr-mon__horse--scratched' : '' }}">
                                    #{{ h.horseNumber }} {{ h.horseName }}
                                </span>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            {% endfor %}

            <div class="lr-mon__kpis" data-testid="lr-monitor-kpis">
                {% for kpi in kpis %}
                    <div class="lr-mon__kpi" data-testid="lr-monitor-kpi">
                        <div class="lr-mon__kpi-label">{{ kpi.label }}</div>
                        <div class="lr-mon__kpi-value
                            {%- if kpi.signed is defined and kpi.signed %} {{ kpi.amount + 0 >= 0 ? 'lr-mon__pos' : 'lr-mon__neg' }}{% endif %}
                            {%- if kpi.danger is defined and kpi.danger %} lr-mon__neg{% endif %}">{{ kpi.value }}</div>
                        {% if kpi.sub is defined and kpi.sub %}<div class="lr-mon__kpi-sub">{{ kpi.sub }}</div>{% endif %}
                    </div>
                {% endfor %}
            </div>
        </div>

        {% if settleKnown > 0 %}
            <div class="lr-mon__settle" data-testid="lr-monitor-settlement"
                 data-settlement-state="{{ settlementActive ? 'in-progress' : (pendingTotal > 0 ? 'waiting' : 'complete') }}">
                <div class="lr-mon__settle-head">
                    <span>
                        {% if settlementActive %}
                            <span class="lr-mon__spin">⚙</span> Settlement running — {{ settledBets }} of {{ settleKnown }} bets
                        {% elseif pendingTotal == 0 %}
                            Settlement — all {{ settledBets }} bets settled
                        {% else %}
                            Settlement — {{ pendingTotal }} bets awaiting settlement
                        {% endif %}
                        {%- if settlement.failed > 0 %} <span class="lr-mon__neg">· {{ settlement.failed }} failed</span>{% endif %}
                    </span>
                    <span>{{ (settledBets / settleKnown * 100)|round }}%</span>
                </div>
                <div class="lr-mon__bar"><span style="width: {{ (settledBets / settleKnown * 100)|round(1) }}%"></span></div>
            </div>
        {% endif %}

        <div class="lr-mon__body-row">
        <div class="lr-mon__races" data-testid="lr-monitor-races">
            {% for row in races %}
                {% set labels = {
                    'open': 'Open',
                    'betting-closed': 'Betting closed',
                    'awaiting-settlement': 'Awaiting settlement',
                    'settled': 'Settled',
                } %}
                <div class="lr-mon__race{{ row.settling ? ' lr-mon__race--settling' : '' }}" data-testid="lr-monitor-race-{{ row.race.raceNumber }}">
                    <div class="lr-mon__race-head">
                        <span class="lr-mon__race-no">Race {{ row.race.raceNumber }}</span>
                        <span>
                            {% if row.dividendsSaved %}
                                <span class="lr-mon__saved" data-testid="lr-monitor-race-{{ row.race.raceNumber }}-dividends-saved">✓ Dividends saved</span>
                            {% elseif row.statusKey == 'betting-closed' %}
                                <span class="lr-mon__div-label" data-testid="lr-monitor-race-{{ row.race.raceNumber }}-dividends-pending">Dividends not entered</span>
                            {% endif %}
                            {% if row.settling %}
                                <span class="lr-mon__badge lr-mon__badge--settling" data-testid="lr-monitor-race-{{ row.race.raceNumber }}-settling"><span class="lr-mon__spin">⚙</span> Settling now</span>
                            {% else %}
                                <span class="lr-mon__badge lr-mon__badge--{{ row.statusKey }}">{{ labels[row.statusKey] }}</span>
                            {% endif %}
                        </span>
                    </div>

                    {% set raceKnown = row.stats.count + row.pendingCount %}
                    {% if row.race.hasResult and not row.race.isSettled and raceKnown > 0 %}
                        <div class="lr-mon__chip" data-testid="lr-monitor-race-{{ row.race.raceNumber }}-settle">
                            {{ row.stats.count }}/{{ raceKnown }} settled · {{ row.pendingCount }} pending
                        </div>
                    {% elseif row.pendingCount > 0 %}
                        <div class="lr-mon__chip">{{ row.pendingCount }} pending</div>
                    {% endif %}

                    {% if row.scratchedHorses is not empty %}
                        <div class="lr-mon__scratch">
                            Scratched:
                            {% for h in row.scratchedHorses %}
                                #{{ h.horseNumber }} {{ h.horseName }}{{ h.isScratchedAfterClose ? ' (after close)' : '' }}{{ not loop.last ? ', ' : '' }}
                            {% endfor %}
                        </div>
                    {% endif %}

                    {% if row.statusKey == 'settled' and row.race.result is not empty %}
                        <div class="lr-mon__winner" data-testid="lr-monitor-race-{{ row.race.raceNumber }}-winner">
                            &#127942;
                            {% for finisher in row.race.result %}
                                {% set horse = row.horses|filter(h => h.id == finisher.horseId)|first %}
                                {{ not loop.first ? ', ' : '' }}#{{ finisher.horseNumber }}{% if horse %} {{ horse.horseName }}{% endif %}
                            {% endfor %}
                        </div>
                    {% endif %}

                    {% if row.lateBetCount > 0 %}
                        <div class="lr-mon__late" data-testid="lr-monitor-race-{{ row.race.raceNumber }}-late-bets">
                            &#9888; {{ row.lateBetCount }} bet{{ row.lateBetCount > 1 ? 's' : '' }} placed after betting closed
                        </div>
                    {% endif %}

                    <div class="lr-mon__race-money">
                        ₱{{ row.stats.betAmount|number_format(2) }} staked · ₱{{ row.stats.payout|number_format(2) }} paid
                    </div>
                </div>
            {% else %}
                <div class="lr-mon__race">No races on this event yet.</div>
            {% endfor %}
        </div>

        <div class="lr-mon__right">
            <div class="lr-mon__earners" data-testid="lr-monitor-earners">
                <div class="lr-mon__earners-head">Top Earners</div>
                {% for earner in topEarners %}
                    <div class="lr-mon__earner-row" data-testid="lr-monitor-earner-row">
                        <span class="lr-mon__earner-rank">{{ loop.index }}</span>
                        <span class="lr-mon__earner-name">{{ earner.firstName }} {{ earner.lastName }}</span>
                        <span class="lr-mon__earner-amount">&#8369;{{ earner.totalPayout|number_format(2) }}</span>
                    </div>
                {% else %}
                    <div class="lr-mon__earners-empty">No winners yet.</div>
                {% endfor %}
            </div>

            <div class="lr-mon__ticker" data-testid="lr-monitor-ticker">
                <div class="lr-mon__ticker-head">Recent Bets</div>
                {% for ticket in recentTickets %}
                    <div class="lr-mon__ticker-row" data-testid="lr-monitor-ticker-row">
                        <span class="lr-mon__ticker-time">{{ ticket.createdAt|date('H:i:s') }}</span>
                        <span class="lr-mon__ticker-name">{{ ticket.user.firstName }} {{ ticket.user.lastName }}</span>
                        <span class="lr-mon__ticker-bet">{{ ticket.betTypeLabel }} &middot; {{ ticket.firstRaceLabel }}</span>
                        <span class="lr-mon__ticker-amount">&#8369;{{ ticket.amount|number_format(2) }}</span>
                    </div>
                {% else %}
                    <div class="lr-mon__ticker-empty">No bets yet.</div>
                {% endfor %}
            </div>
        </div>
        </div>

        <div class="lr-mon__updated" data-testid="lr-monitor-updated">Updated {{ updatedAt|date('H:i:s') }}</div>
{% endif %}