{% extends 'wfbo/_layout.html.twig' %}

{% block wfbo_title %}Race Results — {{ event.eventDate|date('F j, Y') }}{% endblock %}

{% block wfbo_content %}

    <div class="mb-4">
        <a href="{{ path('app_wfbo_karera_event_show', {id: event.id}) }}"
           class="back-link">
            ← Back to Event
        </a>
    </div>

    <div class="mb-4">
        <h1 style="margin-bottom: 4px; color: #000;" data-testid="event-date">{{ event.eventDate|date('F j, Y') }}</h1>
        <p class="wfbo-card-desc mb-0" data-testid="event-arena">{{ event.arena.name }} — {{ event.numberOfRaces }} race(s) {% if event.locked %}<span class="badge bg-danger ms-2">Locked</span>{% endif %}</p>
    </div>

    {% set betPositions = {
        'win': 1,
        'forecast': 2,
        'trifecta': 3,
        'quartet': 4,
        'pentafecta': 5,
        'super_six': 6
    } %}

    {% for race in races %}
        {% set raceResults = resultsByRace[race.id] ?? [] %}
        {% set raceEntries = entriesByRace[race.id] ?? {} %}

        <div class="table-card mb-4" data-testid="results-race-{{ race.id }}">
            <div class="card-body p-0">

                <div class="d-flex align-items-center justify-content-between p-4 pb-3">
                    <h2 class="wfbo-card-title mb-0">Race {{ race.raceNumber }}</h2>
                    {% set activeEntries = activeEntriesByRace[race.id] ?? [] %}
                    {% if not isPast and activeEntries|length > 0 and not race.bettingOpen %}
                        <button type="button"
                                class="pill-link--primary"
                                data-bs-toggle="modal"
                                data-bs-target="#setResultModal-{{ race.id }}"
                                data-testid="btn-set-result-{{ race.id }}">
                            {{ raceResults is not empty ? 'Edit Results' : 'Set Results' }}
                        </button>
                    {% endif %}
                </div>

                <div class="p-4 pt-0">
                    <div class="mb-3">
                        <div class="results-label">Finish Order</div>
                        {% if raceResults|length > 0 %}
                            <div class="race-results-summary">
                                {% for result in raceResults %}
                                    {% set posLabel = positionLabels[result.position - 1] ?? ('#' ~ result.position) %}
                                    <span class="race-result-chip" data-testid="result-chip-{{ race.id }}-{{ result.position }}">
                                        <span class="race-result-chip__pos">{{ posLabel }}</span>
                                        <span class="race-result-chip__name">{{ result.entry.horse.name }}</span>
                                        <span class="race-result-chip__num">#{{ result.entry.number }}</span>
                                    </span>
                                {% endfor %}
                            </div>
                        {% else %}
                            <p class="results-empty">No results recorded yet.</p>
                        {% endif %}
                    </div>

                    {% if singleRaceOfferings[race.id] is defined and singleRaceOfferings[race.id]|length > 0 %}
                        <div>
                            <div class="results-label">Bet Results</div>
                            <div class="results-bet-list">
                                {% for offering in singleRaceOfferings[race.id] %}
                                    {% set code = offering.betType.code %}
                                    {% set showN = betPositions[code] ?? 1 %}
                                    <div class="results-bet-row" data-testid="bet-result-{{ race.id }}-{{ code }}">
                                        <span class="results-bet-type">{{ offering.betType.label }}</span>
                                        <span class="results-bet-arrow">→</span>
                                        {% if raceResults|length > 0 %}
                                            <span class="results-bet-outcome">
                                                {% set topResults = raceResults|slice(0, showN) %}
                                                {% for result in topResults %}
                                                    <span class="results-bet-entry" data-testid="bet-entry-{{ race.id }}-{{ code }}-{{ result.position }}">
                                                        {{ result.entry.horse.name }} (#{{ result.entry.number }}){% if not loop.last %},{% endif %}
                                                    </span>
                                                {% endfor %}
                                                {% if topResults|length < showN %}
                                                    <span class="results-bet-pending">
                                                        + {{ showN - topResults|length }} more position(s) pending
                                                    </span>
                                                {% endif %}
                                            </span>
                                        {% else %}
                                            <span class="results-bet-pending" data-testid="bet-pending-{{ race.id }}-{{ code }}">Pending — no results</span>
                                        {% endif %}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                </div>

            </div>
        </div>

        {% set activeEntries = activeEntriesByRace[race.id] ?? [] %}
        {% if activeEntries|length > 0 and not race.bettingOpen %}
        <div class="modal fade" id="setResultModal-{{ race.id }}" tabindex="-1" aria-labelledby="setResultModalLabel-{{ race.id }}" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form method="POST"
                          action="{{ path('app_wfbo_karera_race_result', {eventId: event.id, raceId: race.id}) }}"
                          data-testid="result-form-{{ race.id }}"
                          data-turbo="false"
                          novalidate>
                        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_karera_race_result_' ~ race.id) }}">

                        <div class="modal-header">
                            <h5 class="modal-title" id="setResultModalLabel-{{ race.id }}">Set Race {{ race.raceNumber }} Results</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            {% set posLabels = ['1st','2nd','3rd','4th','5th','6th','7th','8th','9th'] %}
                            {% for i in 0..(activeEntries|length - 1) %}
                                <div class="mb-3">
                                    <label class="form-label--sm">{{ posLabels[i] }} Place <span class="text-danger">*</span></label>
                                    <select name="positions[{{ i + 1 }}]"
                                            class="form-control"
                                            data-testid="result-position-{{ race.id }}-{{ i }}">
                                        <option value="">— Select entry —</option>
                                        {% for entry in activeEntries %}
                                            {% set alreadyPicked = false %}
                                            {% for r in raceResults %}
                                                {% if r.position == i + 1 and r.entry.id == entry.id %}
                                                    {% set alreadyPicked = true %}
                                                {% endif %}
                                            {% endfor %}
                                            <option value="{{ entry.id }}" {{ alreadyPicked ? 'selected' : '' }}>
                                                #{{ entry.number }} — {{ entry.horse.name }} ({{ entry.jockey.name }})
                                            </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            {% endfor %}
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-admin-save" data-testid="btn-save-result-{{ race.id }}">Save Results</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        {% endif %}

    {% endfor %}

    {% if multiRaceOfferings|length > 0 %}
        <div class="table-card mb-4">
            <div class="card-body p-0">

                <div class="p-4 pb-3">
                    <h2 class="wfbo-card-title mb-0">Multi-Race Bets</h2>
                </div>

                <div class="p-4 pt-0">
                    <div class="results-bet-list">
                        {% for offering in multiRaceOfferings %}
                            {% set hasAllResults = true %}
                            {% set legData = [] %}
                            {% for leg in offering.legs %}
                                {% set legRace = leg.race %}
                                {% set legResults = resultsByRace[legRace.id] ?? [] %}
                                {% if legResults|length > 0 %}
                                    {% set legData = legData|merge([{
                                        'raceNumber': legRace.raceNumber,
                                        'horse': legResults[0].entry.horse.name,
                                        'number': legResults[0].entry.number
                                    }]) %}
                                {% else %}
                                    {% set hasAllResults = false %}
                                    {% set legData = legData|merge([{
                                        'raceNumber': legRace.raceNumber,
                                        'horse': null,
                                        'number': null
                                    }]) %}
                                {% endif %}
                            {% endfor %}

                            <div class="results-multi-bet-row" data-testid="multi-bet-result-{{ offering.id }}">
                                <div class="results-multi-bet-header">
                                    <span class="results-bet-type">{{ offering.betType.label }}</span>
                                    <span class="results-bet-races">
                                        Races {{ offering.legs|map(leg => leg.race.raceNumber)|join(' → ') }}
                                    </span>
                                </div>
                                <div class="results-multi-bet-legs">
                                    {% for leg in legData %}
                                        <span class="results-multi-bet-leg {% if leg.horse is null %}results-multi-bet-leg--pending{% endif %}">
                                            <span class="results-multi-bet-leg-race">R{{ leg.raceNumber }}</span>
                                            {% if leg.horse %}
                                                <span class="results-multi-bet-leg-name">{{ leg.horse }} (#{{ leg.number }})</span>
                                            {% else %}
                                                <span class="results-multi-bet-leg-pending">Pending</span>
                                            {% endif %}
                                        </span>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>

            </div>
        </div>
    {% endif %}

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('[data-testid^="result-form-"]').forEach(function (form) {
                var selects = form.querySelectorAll('select[name^="positions["]');
                var errorEl = document.createElement('div');
                errorEl.className = 'results-dup-error';
                errorEl.textContent = 'Same horse entry cannot be used in multiple positions.';
                errorEl.style.display = 'none';
                form.querySelector('.modal-body').prepend(errorEl);

                function checkDuplicates() {
                    var picked = {};
                    var hasDup = false;
                    selects.forEach(function (sel) {
                        var val = sel.value;
                        if (!val) return;
                        if (picked[val]) {
                            hasDup = true;
                        }
                        picked[val] = true;
                        sel.style.borderColor = '';
                    });
                    if (hasDup) {
                        selects.forEach(function (sel) {
                            if (sel.value && picked[sel.value]) {
                                sel.style.borderColor = '#ef4444';
                            }
                        });
                    }
                    errorEl.style.display = hasDup ? 'block' : 'none';
                    return !hasDup;
                }

                selects.forEach(function (sel) {
                    sel.addEventListener('change', checkDuplicates);
                });

                form.addEventListener('submit', function (e) {
                    if (!checkDuplicates()) {
                        e.preventDefault();
                    }
                });
            });
        });
    </script>

{% endblock %}