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

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

{% block wfbo_content %}

    {% 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>
            {% endif %}

        </div>
    </div>

    {% if not race.settled and not race.hasResult %}

    <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 %}{# /not race.settled and not race.hasResult #}

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

    {% if race.hasResult %}

        <div class="card mb-4" data-testid="race-result-summary">
            <div class="card-body">
                {% if is_granted('ROLE_SUPER_ADMIN') %}
                    <div class="d-flex justify-content-end mb-2">
                        <a href="{{ path('app_wfbo_event_race_correct_result', {id: race.id}) }}"
                           class="btn btn-sm btn-outline-danger"
                           data-testid="btn-correct-result">Correct result</a>
                    </div>
                {% endif %}
                {% 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 %}

        {% embed 'wfbo/event-races/_result_form.html.twig' with {
            formAction:  path('app_wfbo_event_race_result_save', {id: race.id}),
            csrfToken:   csrf_token('wfbo_event_race_result_' ~ race.id),
            confirmText: 'Save this result?',
        } %}{% endembed %}

    {% else %}

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

    {% endif %}

{% endblock %}