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

{% block wfbo_title %}Race Details{% endblock %}

{% block wfbo_content %}

<style>
    /* Mobile: stack the scratch and winning-combination rows vertically. */
    @media (max-width: 576px) {
        .result-scratch-row {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 6px !important;
        }
        .result-scratch-row select {
            max-width: 100% !important;
            width: 100%;
        }
        .combo-row {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 6px !important;
        }
        .combo-row .form-control {
            max-width: 100% !important;
            width: 100%;
        }
    }
</style>

    {% for flash in app.flashes('success') %}
        <div class="alert alert-success mb-4" role="alert" data-testid="flash-success">{{ flash }}</div>
    {% endfor %}
    {% for flash in app.flashes('error') %}
        <div class="alert alert-danger mb-4" role="alert" data-testid="flash-error">{{ flash }}</div>
    {% endfor %}

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

    <div class="card mb-4">
        <div class="card-body">

            <h2 class="wfbo-card-title mb-3">
                Race {{ race.raceNumber }}
            </h2>

            <div class="detail-grid mb-4">
                <div class="detail-item">
                    <div class="detail-label">Arena</div>
                    <div class="detail-value">{{ race.event.management.name }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Event Date</div>
                    <div class="detail-value">{{ race.event.eventDate|date('Y-m-d') }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Status</div>
                    <div class="detail-value">
                        {% if race.open %}
                            <span class="badge-role badge-role--active" data-testid="race-status">Open</span>
                        {% elseif race.closed %}
                            <span class="badge-role badge-role--suspended" data-testid="race-status">Closed</span>
                        {% else %}
                            <span class="badge-role badge-role--suspended" data-testid="race-status">Settled</span>
                        {% endif %}
                    </div>
                </div>
            </div>

            {% if race.event.videoUrl %}
                {% set embedUrl = race.event.videoUrl|replace({'watch?v=': 'embed/', 'youtu.be/': 'youtube.com/embed/'}) %}
                {% if 'embed/' not in embedUrl %}
                    {% set embedUrl = race.event.videoUrl %}
                {% endif %}
                <div class="mb-3" style="max-width: 560px;">
                    <div class="ratio ratio-16x9 rounded overflow-hidden">
                        <iframe src="{{ embedUrl }}?autoplay=1&controls=0&mute=0"
                                allow="autoplay; encrypted-media"
                                style="border:0;"
                                allowfullscreen></iframe>
                    </div>
                </div>
            {% endif %}

            {% if race.open %}
                <form method="POST"
                      action="{{ path('app_wfbo_event_race_close', {id: race.id}) }}"
                      onsubmit="return confirm('Close betting for this race? This cannot be undone.');"
                      class="m-0">
                    <input type="hidden" name="_token" value="{{ csrf_token('wfbo_event_race_close_' ~ race.id) }}">
                    <button type="submit"
                            class="btn-reject"
                            data-testid="btn-close-betting">
                        Close Betting
                    </button>
                </form>
                <p class="mt-2 mb-0 fw-semibold"
                   style="color: #dc2626; font-size: 15px;"
                   data-testid="late-scratch-note">
                    Late Scratch should be checked after the close betting.
                </p>
            {% endif %}

        </div>
    </div>

    {% if race.open %}

    <div class="d-flex align-items-center justify-content-between mb-2">
        <h2 class="wfbo-card-title mb-0">Horses</h2>
        {% if not race.event.published %}
        <a href="{{ path('app_wfbo_event_race_horse_new', {id: race.id}) }}"
           class="pill-link--primary"
           data-testid="btn-new-horse">
            + Add Horse
        </a>
        {% endif %}
    </div>

    {% if not race.event.published %}
        <p class="form-hint mb-4">Scratch becomes available once the event is published.</p>
    {% endif %}

    {# Empty carrier form: checkboxes/Save button below reference it via the HTML5
       form="" attribute so they can submit together without nesting <form> tags
       around each row's own Delete form. #}
    <form id="horse-scratch-form"
          method="POST"
          action="{{ path('app_wfbo_event_race_horses_scratch', {id: race.id}) }}"
          style="display:none;">
        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_event_race_horses_scratch_' ~ race.id) }}">
    </form>

    <div class="table-card">
        <div class="card-body p-0">

            {% if horses is empty %}
                <p class="td-empty--lg text-center" data-testid="empty-state-horses">
                    No horses added yet.
                </p>
            {% else %}
                <table class="w-100 stack-table" data-testid="horses-table">
                    <thead>
                        <tr class="thead-row--strong">
                            <th class="th-white">Horse #</th>
                            <th class="th-white">Name</th>
                            <th class="th-white">Jockey</th>
                            <th class="th-white">Trainer</th>
                            <th class="th-white">Status</th>
                            <th class="th-white">Scratch</th>
                            <th class="th-white">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for horse in horses %}
                        <tr class="table-row" data-testid="horse-row-{{ horse.id }}">
                            <td class="td-cell td-cell--dark fw-semibold" data-label="Horse #">{{ horse.horseNumber }}</td>
                            <td class="td-cell" data-label="Name">{{ horse.horseName }}</td>
                            <td class="td-cell" data-label="Jockey">{{ horse.horseJockey }}</td>
                            <td class="td-cell" data-label="Trainer">{{ horse.horseTrainer ?: '—' }}</td>
                            <td class="td-cell" data-label="Status">
                                {% if horse.active %}
                                    <span class="badge-role badge-role--active" data-testid="horse-status-{{ horse.id }}">Active</span>
                                {% else %}
                                    <span class="badge-role badge-role--suspended" data-testid="horse-status-{{ horse.id }}">Scratched</span>
                                {% endif %}
                            </td>
                            <td class="td-cell" data-label="Scratch">
                                {% if horse.active and race.event.published %}
                                    <input type="checkbox"
                                           class="form-check-input"
                                           name="scratch[{{ horse.id }}]"
                                           value="1"
                                           form="horse-scratch-form"
                                           data-testid="checkbox-scratch-{{ horse.id }}">
                                {% else %}
                                    —
                                {% endif %}
                            </td>
                            <td class="td-cell" data-label="Actions">
                                {% if not race.event.published %}
                                <div class="d-flex gap-2 align-items-center">
                                    <a href="{{ path('app_wfbo_event_race_horse_edit', {id: horse.id}) }}"
                                       class="pill-link--secondary"
                                       data-testid="btn-edit-horse-{{ horse.id }}">
                                        Edit
                                    </a>
                                    <form method="POST"
                                          action="{{ path('app_wfbo_event_race_horse_delete', {id: horse.id}) }}"
                                          onsubmit="return confirm('Delete this horse?');"
                                          class="m-0">
                                        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_horse_delete_' ~ horse.id) }}">
                                        <button type="submit"
                                                class="btn-reject"
                                                data-testid="btn-delete-horse-{{ horse.id }}">
                                            Delete
                                        </button>
                                    </form>
                                </div>
                                {% else %}
                                    —
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>

                {% if race.event.published and horses|filter(h => h.active) is not empty %}
                    <div class="p-3">
                        <button type="submit"
                                form="horse-scratch-form"
                                class="btn btn-admin-save"
                                data-testid="btn-save-scratches">
                            Save Scratches
                        </button>
                    </div>
                {% endif %}
            {% endif %}

        </div>
    </div>

    {% endif %}{# /race.open #}

    <div class="d-flex align-items-center justify-content-between mb-2 mt-4">
        <h2 class="wfbo-card-title mb-0">Result</h2>
    </div>

    {% macro combo_row(row, idx, combo) %}
        {% if row.isOddEven %}
            <div class="d-flex flex-wrap align-items-center gap-2 combo-row" data-combo-row data-testid="combo-row-{{ row.id }}-{{ idx }}">
                <select name="combination_selection[{{ row.id }}][{{ idx }}]" class="form-select" style="max-width: 140px;"
                        data-testid="select-combo-selection-{{ row.id }}-{{ idx }}">
                    <option value="">— winner —</option>
                    <option value="odd" {{ combo and combo.selection == 'odd' ? 'selected' : '' }}>Odd</option>
                    <option value="even" {{ combo and combo.selection == 'even' ? 'selected' : '' }}>Even</option>
                </select>
                <span class="fw-bold text-body-secondary">=</span>
                <input type="number" step="0.01" min="0" class="form-control" style="max-width: 120px;"
                       name="combination_dividend[{{ row.id }}][{{ idx }}]"
                       value="{{ combo ? combo.dividend : '' }}" placeholder="Dividend"
                       data-testid="input-combo-dividend-{{ row.id }}-{{ idx }}">
                <button type="button" class="btn btn-sm btn-link text-danger p-0" data-remove-combo>× remove</button>
            </div>
        {% else %}
            <div class="d-flex flex-wrap align-items-center gap-2 combo-row" data-combo-row data-testid="combo-row-{{ row.id }}-{{ idx }}">
                <div class="d-flex align-items-center">
                    {% for slot in row.slots %}
                        {% set slotIdx = loop.index0 %}
                        {% if not loop.first %}<span class="fw-bold text-body-secondary">-</span>{% endif %}
                        <select name="combination[{{ row.id }}][{{ idx }}][{{ slotIdx }}]" class="form-select" style="max-width: 90px;"
                                title="{{ row.kind == 'multi' ? 'Leg' : 'Position' }} {{ loop.index }}"
                                data-testid="select-combo-{{ row.id }}-{{ idx }}-{{ slotIdx }}">
                            <option value="">—</option>
                            {% for h in slot.horses %}
                                <option value="{{ h.id }}" {{ combo and combo.horseIds[slotIdx] is defined and combo.horseIds[slotIdx] == h.id ? 'selected' : '' }}>{{ h.number }}{{ h.scratched ? ' [s]' : '' }}</option>
                            {% endfor %}
                        </select>
                    {% endfor %}
                </div>
                <span class="fw-bold text-body-secondary">=</span>
                <input type="number" step="0.01" min="0" class="form-control" style="max-width: 120px;"
                       name="combination_dividend[{{ row.id }}][{{ idx }}]"
                       value="{{ combo ? combo.dividend : '' }}" placeholder="Dividend"
                       data-testid="input-combo-dividend-{{ row.id }}-{{ idx }}">
                <button type="button" class="btn btn-sm btn-link text-danger p-0" data-remove-combo>× remove</button>
            </div>
        {% endif %}
    {% endmacro %}

    {% if race.hasResult %}

        <div class="card mb-4" data-testid="race-result-summary">
            <div class="card-body">
                {% if not race.settled %}
                    <p class="form-hint mb-3" data-testid="result-pending-settlement">
                        Result saved. It can no longer be edited — go to Settlements to settle pending bets.
                    </p>
                {% endif %}
                <div class="detail-grid mb-0">
                    <div class="detail-item">
                        <div class="detail-label">Winner{{ race.result|length > 1 ? 's' : '' }}</div>
                        <div class="detail-value" data-testid="race-result-text">
                            {% for entry in race.result %}
                                {{ not loop.first ? ', ' : '' }}Horse #{{ entry.horseNumber }}
                            {% else %}—{% endfor %}
                        </div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">Result Set At</div>
                        <div class="detail-value">{{ race.resultSetAt|date('Y-m-d H:i') }}</div>
                    </div>
                    {% set scratchedAfterClose = horses|filter(h => h.scratchedAfterClose) %}
                    {% if scratchedAfterClose is not empty %}
                        <div class="detail-item">
                            <div class="detail-label">Scratched After Close</div>
                            <div class="detail-value" data-testid="scratched-after-close-summary">
                                {% for horse in scratchedAfterClose %}
                                    {{ not loop.first ? ', ' : '' }}Horse #{{ horse.horseNumber }}
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                    {% if dividendRows is not empty %}
                        <div class="detail-item">
                            <div class="detail-label">Winning combinations</div>
                            <div class="detail-value" data-testid="dividends-summary">
                                {% for row in dividendRows %}
                                    <div data-testid="dividend-summary-row-{{ row.id }}">
                                        <strong>{{ row.label }}</strong>:
                                        {% if row.refund %}Refunded{% endif %}
                                        {% for c in row.combinations %}
                                            {{ not loop.first ? ' · ' : (row.refund ? ' · ' : '') }}{% if c.selection %}{{ c.selection|capitalize }}{% else %}{{ c.numbers|join('-') }}{% endif %} : {{ c.dividend }}
                                        {% else %}
                                            {% if not row.refund %}—{% endif %}
                                        {% endfor %}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

    {% elseif race.closed %}

        <form method="POST"
              action="{{ path('app_wfbo_event_race_result_save', {id: race.id}) }}"
              onsubmit="return confirm('Save this result?');"
              data-testid="result-form">
            <input type="hidden" name="_token" value="{{ csrf_token('wfbo_event_race_result_' ~ race.id) }}">

            <div class="card mb-4">
                <div class="card-body">

                    <h3 class="wfbo-card-title" style="font-size: 14px;">Scratch after close</h3>
                    <p class="form-hint mb-3">
                        Tick any horse that withdrew after betting closed. Any bet on a scratched horse is
                        voided and the full stake refunded (pick-N combos treat the scratched leg as a wildcard).
                        Exception: a Daily Double / Extra Double horse scratched after close in the last leg is
                        not voided — it is graded against the winning combinations you enter below, so add a
                        combination that uses the scratched runner if those tickets should still be paid.
                    </p>

                    <div class="d-flex flex-column gap-2 mb-3">
                        {% for horse in horses %}
                            {% if horse.active %}
                                <div class="d-flex align-items-center gap-3 result-scratch-row" data-testid="result-scratch-row-{{ horse.id }}">
                                    <label class="form-check-label d-flex align-items-center gap-1">
                                        <input type="checkbox"
                                               class="form-check-input result-scratch-checkbox"
                                               name="scratch[{{ horse.id }}]"
                                               value="1"
                                               data-testid="checkbox-result-scratch-{{ horse.id }}">
                                        Horse #{{ horse.horseNumber }} ({{ horse.horseName }})
                                    </label>
                                </div>
                            {% elseif horse.scratchedAfterClose %}
                                <div class="d-flex align-items-center gap-3 result-scratch-row" data-testid="result-scratch-row-{{ horse.id }}">
                                    <span class="form-hint">Horse #{{ horse.horseNumber }} ({{ horse.horseName }}) — Scratched</span>
                                </div>
                            {% else %}
                                <div class="d-flex align-items-center gap-3 result-scratch-row" data-testid="result-scratch-row-{{ horse.id }}">
                                    <span class="form-hint">Horse #{{ horse.horseNumber }} ({{ horse.horseName }}) — Scratched (before close)</span>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>

                    {% if combinationRows is not empty %}
                        <h3 class="wfbo-card-title" style="font-size: 14px;">Winning combinations</h3>
                        <p class="form-hint mb-3">
                            For each bet type, enter every winning combination (pick the horse for each
                            position / leg) and its dividend. Add a row per winning combination — that covers
                            dead heats too. Refund voids that bet type on this race.
                        </p>

                        <div class="d-flex flex-column gap-3 mb-3">
                            {% for row in combinationRows %}
                                <div class="combo-bettype" data-combo-bettype="{{ row.id }}"
                                     {% if row.kind == 'single' and not row.isOddEven %}data-combo-ordered{% endif %}
                                     data-testid="combo-bettype-{{ row.id }}">
                                    <div class="d-flex align-items-center gap-3 mb-1">
                                        <label class="fw-semibold mb-0" style="min-width: 160px;">
                                            {{ row.label }}
                                        </label>
                                        {% if row.kind == 'single' and not row.isOddEven %}
                                            <label class="form-check-label d-flex align-items-center gap-1">
                                                <input type="checkbox" class="form-check-input" data-refund-toggle
                                                       name="refund[{{ row.id }}]" value="1" {{ row.refund ? 'checked' : '' }}
                                                       data-testid="checkbox-refund-{{ row.id }}">
                                                Refund
                                            </label>
                                        {% endif %}
                                    </div>

                                    <div class="d-flex flex-column gap-2" data-combo-rows>
                                        {% set saved = row.savedCombinations %}
                                        {% for combo in (saved is empty ? [null] : saved) %}
                                            {{ _self.combo_row(row, loop.index0, combo) }}
                                        {% endfor %}
                                    </div>

                                    <button type="button" class="btn btn-sm btn-outline-secondary mt-2" data-add-combo
                                            data-testid="btn-add-combo-{{ row.id }}">+ Add combination</button>

                                    <template data-combo-template>{{ _self.combo_row(row, '__ROW__', null) }}</template>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}

                    <button type="submit"
                            class="btn btn-admin-save"
                            data-testid="btn-save-result">
                        Save Result
                    </button>

                </div>
            </div>
        </form>

        <script>
            (function () {
                var scratchBoxes = Array.prototype.slice.call(document.querySelectorAll('.result-scratch-checkbox'));

                function scratchedIds() {
                    var ids = {};
                    scratchBoxes.forEach(function (cb) {
                        var m = cb.getAttribute('name').match(/scratch\[(\d+)\]/);
                        if (m) { ids[m[1]] = cb.checked; }
                    });
                    return ids;
                }

                // A horse ticked as scratched-after-close is marked " [s]" in
                // every combination dropdown so the admin can see it's out.
                function syncScratches() {
                    var scr = scratchedIds();
                    document.querySelectorAll('[data-combo-row] select').forEach(function (sel) {
                        Array.prototype.forEach.call(sel.options, function (opt) {
                            if (!opt.value || !(opt.value in scr)) { return; }
                            var base = opt.textContent.replace(/ \[s\]$/, '');
                            opt.textContent = scr[opt.value] ? base + ' [s]' : base;
                        });
                    });
                }

                scratchBoxes.forEach(function (cb) { cb.addEventListener('change', syncScratches); });

                // The single-race ordered bet types (Win, Forecast, Trifecta,
                // Quartet, Pentafecta, Super Six) all describe the same race, so
                // finish position N is the same horse in every one of them.
                // Picking a slot in one fills that slot (same row + position) in
                // every other ordered bet type that has it.
                var SLOT_RE = /^combination\[(\d+)\]\[(\d+)\]\[(\d+)\]$/;
                document.addEventListener('change', function (e) {
                    var src = e.target;
                    if (!src || src.tagName !== 'SELECT') { return; }
                    if (!src.closest('.combo-bettype[data-combo-ordered]')) { return; }
                    var m = (src.getAttribute('name') || '').match(SLOT_RE);
                    if (!m) { return; }
                    var rowIdx = m[2], slotIdx = m[3], val = src.value;
                    document.querySelectorAll('.combo-bettype[data-combo-ordered] [data-combo-row] select').forEach(function (sel) {
                        if (sel === src) { return; }
                        var mm = (sel.getAttribute('name') || '').match(SLOT_RE);
                        if (!mm || mm[2] !== rowIdx || mm[3] !== slotIdx || sel.value === val) { return; }
                        var ok = val === '' || Array.prototype.some.call(sel.options, function (o) { return o.value === val; });
                        if (ok) { sel.value = val; }
                    });
                });

                document.querySelectorAll('[data-combo-bettype]').forEach(function (block) {
                    var list = block.querySelector('[data-combo-rows]');
                    var tpl  = block.querySelector('[data-combo-template]');

                    function nextIndex() {
                        var max = -1;
                        list.querySelectorAll('[data-combo-row]').forEach(function (r) {
                            r.querySelectorAll('[name]').forEach(function (f) {
                                var m = f.getAttribute('name').match(/\[(\d+)\]/g);
                                if (m && m.length) {
                                    var n = parseInt(m[m.length === 1 ? 0 : 1].replace(/[\[\]]/g, ''), 10);
                                    if (!isNaN(n) && n > max) max = n;
                                }
                            });
                        });
                        return max + 1;
                    }

                    block.querySelector('[data-add-combo]').addEventListener('click', function () {
                        var html = tpl.innerHTML.replace(/__ROW__/g, String(nextIndex()));
                        var wrap = document.createElement('div');
                        wrap.innerHTML = html.trim();
                        list.appendChild(wrap.firstElementChild);
                        syncScratches();
                    });

                    list.addEventListener('click', function (e) {
                        var btn = e.target.closest('[data-remove-combo]');
                        if (!btn) return;
                        var rows = list.querySelectorAll('[data-combo-row]');
                        if (rows.length > 1) btn.closest('[data-combo-row]').remove();
                        else btn.closest('[data-combo-row]').querySelectorAll('select, input').forEach(function (f) { f.value = ''; });
                    });

                    var refund = block.querySelector('[data-refund-toggle]');
                    if (refund) {
                        var sync = function () {
                            list.querySelectorAll('select, input').forEach(function (f) { f.disabled = refund.checked; });
                            block.querySelector('[data-add-combo]').disabled = refund.checked;
                        };
                        refund.addEventListener('change', sync);
                        sync();
                    }
                });

                syncScratches();
            })();
        </script>

    {% else %}

        <p class="form-hint mb-4">Close betting to enter the result.</p>

    {% endif %}

{% endblock %}