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

{% block wfbo_title %}Event 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_events') }}"
           class="back-link">
            ← Back to Event Management
        </a>
    </div>

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

            <h2 class="wfbo-card-title mb-3">
                {{ event.management.name }} — {{ event.eventDate|date('Y-m-d') }}
            </h2>

            <div class="detail-grid mb-3">
                <div class="detail-item">
                    <div class="detail-label">Arena</div>
                    <div class="detail-value">{{ event.management.name }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Event Date</div>
                    <div class="detail-value">{{ event.eventDate|date('Y-m-d') }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Video Link</div>
                    <div class="detail-value">
                        {% if event.videoUrl %}
                            <a href="{{ event.videoUrl }}" target="_blank" rel="noopener">{{ event.videoUrl }}</a>
                        {% else %}
                            —
                        {% endif %}
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">Status</div>
                    <div class="detail-value">
                        {% if event.published %}
                            <span class="badge-role badge-role--active" data-testid="event-status">Published</span>
                        {% else %}
                            <span class="badge-role badge-role--suspended" data-testid="event-status">Draft</span>
                        {% endif %}
                    </div>
                </div>
            </div>

            {% if not event.published %}
                <form method="POST"
                      action="{{ path('app_wfbo_event_publish', {id: event.id}) }}"
                      onsubmit="return confirm('Publish this event? Races and horses cannot be edited or deleted once published.');"
                      class="m-0">
                    <input type="hidden" name="_token" value="{{ csrf_token('wfbo_event_publish_' ~ event.id) }}">
                    <button type="submit"
                            class="btn btn-admin-save"
                            data-testid="btn-publish-event">
                        Publish Event
                    </button>
                </form>
            {% else %}
            {% endif %}

        </div>
    </div>

    <div class="d-flex gap-2 mb-3 tabs-border-bottom">
        <a href="{{ path('app_wfbo_event_show', {id: event.id, tab: 'races'}) }}"
           class="tab-link--block {% if currentTab == 'races' %}is-active{% endif %}"
           data-testid="tab-races">
            Races <span class="tab-count">({{ races|length }})</span>
        </a>
        <a href="{{ path('app_wfbo_event_show', {id: event.id, tab: 'report'}) }}"
           class="tab-link--block {% if currentTab == 'report' %}is-active{% endif %}"
           data-testid="tab-report">
            Report
        </a>
        <a href="{{ path('app_wfbo_event_show', {id: event.id, tab: 'bet-types'}) }}"
           class="tab-link--block {% if currentTab == 'bet-types' %}is-active{% endif %}"
           data-testid="tab-bet-types">
            Bet Types
        </a>
        <a href="{{ path('app_wfbo_live_racing_audit', {eventId: event.id}) }}"
           class="tab-link--block"
           data-testid="tab-audit">
            Audit
        </a>
        <a href="{{ path('app_wfbo_event_settlements', {id: event.id}) }}"
           class="tab-link--block"
           data-testid="tab-settlements">
            Settlements
        </a>
        <a href="{{ path('app_wfbo_event_show', {id: event.id, tab: 'earners'}) }}"
           class="tab-link--block {% if currentTab == 'earners' %}is-active{% endif %}"
           data-testid="tab-earners">
            Top Earners
        </a>
    </div>

    {% if currentTab == 'races' %}

    <div class="d-flex align-items-center justify-content-between mb-4">
        <h2 class="wfbo-card-title mb-0">Races</h2>
        <a href="{{ path('app_wfbo_event_race_new', {id: event.id}) }}"
           class="pill-link--primary"
           data-testid="btn-new-race">
            + Add Race
        </a>
    </div>

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

            {% if races is empty %}
                <p class="td-empty--lg text-center" data-testid="empty-state-races">
                    No races added yet.
                </p>
            {% else %}
                <table class="w-100 stack-table" data-testid="races-table">
                    <thead>
                        <tr class="thead-row--strong">
                            <th class="th-white">Race Number</th>
                            <th class="th-white">Horses</th>
                            <th class="th-white">Status</th>
                            <th class="th-white">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for race in races %}
                        <tr class="table-row" data-testid="race-row-{{ race.id }}">
                            <td class="td-cell td-cell--dark fw-semibold" data-label="Race Number">{{ race.raceNumber }}</td>
                            <td class="td-cell" data-label="Horses" data-testid="race-horse-count-{{ race.id }}">{{ horseCountByRaceId[race.id] ?? 0 }}</td>
                            <td class="td-cell" data-label="Status">
                                {% if race.open %}
                                    <span class="badge-role badge-role--active" data-testid="race-status-{{ race.id }}">Open</span>
                                {% else %}
                                    <span class="badge-role badge-role--suspended" data-testid="race-status-{{ race.id }}">Closed</span>
                                {% endif %}
                            </td>
                            <td class="td-cell" data-label="Actions">
                                <div class="d-flex gap-2 align-items-center">
                                    <a href="{{ path('app_wfbo_event_race_show', {id: race.id}) }}"
                                       class="pill-link--secondary"
                                       data-testid="btn-view-race-{{ race.id }}">
                                        View
                                    </a>
                                    {% if race.open and not event.published %}
                                    <form method="POST"
                                          action="{{ path('app_wfbo_event_race_delete', {id: race.id}) }}"
                                          onsubmit="return confirm('Delete this race?');"
                                          class="m-0">
                                        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_event_race_delete_' ~ race.id) }}">
                                        <button type="submit"
                                                class="btn-reject"
                                                data-testid="btn-delete-race-{{ race.id }}">
                                            Delete
                                        </button>
                                    </form>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% endif %}

        </div>
    </div>

    {% endif %}

    {% if currentTab == 'report' %}

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

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

            {% if races is empty %}
                <p class="td-empty--lg text-center" data-testid="empty-state-report">
                    No races added yet.
                </p>
            {% else %}
                <table class="w-100 stack-table" data-testid="report-table">
                    <thead>
                        <tr class="thead-row--strong">
                            <th class="th-white">Race Number</th>
                            <th class="th-white">Bets</th>
                            <th class="th-white">Bet Amount</th>
                            <th class="th-white">Payout</th>
                            <th class="th-white">Revenue</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for race in races %}
                        {% set s = raceStatsByRaceId[race.id] ?? {count: 0, betAmount: '0.00', payout: '0.00', revenue: '0.00'} %}
                        <tr class="table-row" data-testid="report-row-{{ race.id }}">
                            <td class="td-cell td-cell--dark fw-semibold" data-label="Race Number">{{ race.raceNumber }}</td>
                            <td class="td-cell" data-label="Bets" data-testid="report-bet-count-{{ race.id }}">{{ s.count }}</td>
                            <td class="td-cell" data-label="Bet Amount" data-testid="report-bet-amount-{{ race.id }}">₱{{ s.betAmount|number_format(2) }}</td>
                            <td class="td-cell" data-label="Payout" data-testid="report-payout-{{ race.id }}">₱{{ s.payout|number_format(2) }}</td>
                            <td class="td-cell" data-label="Revenue" data-testid="report-revenue-{{ race.id }}">₱{{ s.revenue|number_format(2) }}</td>
                        </tr>
                        {% endfor %}
                        <tr class="table-row fw-bold" data-testid="report-totals-row">
                            <td class="td-cell td-cell--dark" data-label="Race Number">Total</td>
                            <td class="td-cell" data-label="Bets" data-testid="report-total-bet-count">{{ reportTotals.count }}</td>
                            <td class="td-cell" data-label="Bet Amount" data-testid="report-total-bet-amount">₱{{ reportTotals.betAmount|number_format(2) }}</td>
                            <td class="td-cell" data-label="Payout" data-testid="report-total-payout">₱{{ reportTotals.payout|number_format(2) }}</td>
                            <td class="td-cell" data-label="Revenue" data-testid="report-total-revenue">₱{{ reportTotals.revenue|number_format(2) }}</td>
                        </tr>
                    </tbody>
                </table>
            {% endif %}

        </div>
    </div>

    {% endif %}

    {% if currentTab == 'bet-types' %}

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

    {% if not event.published %}
    <form method="POST"
          action="{{ path('app_wfbo_event_bet_types_save', {id: event.id}) }}"
          data-testid="bet-types-form">
        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_event_bet_types_' ~ event.id) }}">
    {% endif %}

    {% if races is empty %}
        <p class="form-hint mb-4">Add races first before configuring bet types.</p>
    {% else %}

        <h3 class="wfbo-card-title" style="font-size: 14px;">Single-race bets</h3>
        <p class="form-hint mb-3">Tick every race each bet type is offered on. Each is graded off that race alone.</p>

        <div class="table-card mb-4">
            <div class="card-body p-0">
                <table class="w-100 stack-table" data-testid="bet-types-table">
                    <thead>
                        <tr class="thead-row--strong">
                            <th class="th-white">Bet Type</th>
                            <th class="th-white">Races Offered On</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for betType in liveRacingBetTypes|filter(bt => bt.kind == 'single') %}
                        {% set instance = (eventBetTypes[betType.value] ?? [])|first %}
                        {% set legIds = instance ? instance.legs : [] %}
                        <tr class="table-row" data-testid="bet-type-row-{{ betType.value }}">
                            <td class="td-cell td-cell--dark fw-semibold" data-label="Bet Type">{{ betType.label }}</td>
                            <td class="td-cell" data-label="Races Offered On">
                                <div class="d-flex flex-wrap gap-3">
                                    {% for race in races %}
                                        <label class="form-check-label d-flex align-items-center gap-1">
                                            {% if event.published %}
                                                {% if race.id in legIds %}{{ race.raceNumber }}{% endif %}
                                            {% else %}
                                                <input type="checkbox"
                                                       class="form-check-input"
                                                       name="legs[{{ betType.value }}][]"
                                                       value="{{ race.id }}"
                                                       {{ race.id in legIds ? 'checked' : '' }}
                                                       data-testid="checkbox-leg-{{ betType.value }}-{{ race.id }}">
                                                {{ race.raceNumber }}
                                            {% endif %}
                                        </label>
                                    {% endfor %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <h3 class="wfbo-card-title" style="font-size: 14px;">Multi-race bets</h3>
        <p class="form-hint mb-3">
            Multi-race bets combine races based on the betting rules (e.g. Daily Double = 2 consecutive races;
            Extra Double = 2 races with one skipped in between; WTA = any races). You can add multiple combos of the
            same bet type &mdash; e.g. two separate Daily Doubles on different race pairs. To remove a combo, uncheck
            all of its races and save.
        </p>

        {% for betType in liveRacingBetTypes|filter(bt => bt.kind == 'multi') %}
        {% set instances = eventBetTypes[betType.value] ?? [] %}
        <div class="card mb-3" data-testid="bet-type-row-{{ betType.value }}">
            <div class="card-body">
                <h4 class="wfbo-card-title" style="font-size: 13px;">
                    {{ betType.label }}
                    <span class="form-hint" style="display:inline; font-weight: normal;">&mdash; {{ betType.legPatternHint }}</span>
                </h4>

                <div id="combo-list-{{ betType.value }}">
                    {% for instance in instances %}
                    <div class="d-flex flex-wrap align-items-center gap-3 mb-2 combo-row" data-testid="combo-{{ betType.value }}-{{ loop.index0 }}">
                        {% for race in races %}
                            <label class="form-check-label d-flex align-items-center gap-1">
                                {% if event.published %}
                                    {% if race.id in instance.legs %}{{ race.raceNumber }}{% endif %}
                                {% else %}
                                    <input type="checkbox"
                                           class="form-check-input"
                                           name="multi[{{ betType.value }}][{{ loop.parent.loop.index0 }}][]"
                                           value="{{ race.id }}"
                                           {{ race.id in instance.legs ? 'checked' : '' }}
                                           data-testid="checkbox-combo-{{ betType.value }}-{{ loop.parent.loop.index0 }}-{{ race.id }}">
                                    {{ race.raceNumber }}
                                {% endif %}
                            </label>
                        {% endfor %}
                        {% if not event.published %}
                            <button type="button"
                                    class="btn-reject"
                                    data-remove-combo
                                    data-testid="btn-remove-combo-{{ betType.value }}-{{ loop.index0 }}">
                                Remove
                            </button>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
                <p class="form-hint mb-2" data-testid="empty-combos-{{ betType.value }}"{% if instances is not empty %} style="display:none;"{% endif %}>
                    Not configured.
                </p>

                {% if not event.published %}
                <template id="combo-template-{{ betType.value }}">
                    <div class="d-flex flex-wrap align-items-center gap-3 mb-2 combo-row" data-testid="combo-{{ betType.value }}-new-__INDEX__">
                        {% for race in races %}
                            <label class="form-check-label d-flex align-items-center gap-1">
                                <input type="checkbox"
                                       class="form-check-input"
                                       name="multi[{{ betType.value }}][__INDEX__][]"
                                       value="{{ race.id }}"
                                       data-testid="checkbox-combo-{{ betType.value }}-new-__INDEX__-{{ race.id }}">
                                {{ race.raceNumber }}
                            </label>
                        {% endfor %}
                        <button type="button" class="btn-reject" data-remove-combo data-testid="btn-remove-combo-{{ betType.value }}-new-__INDEX__">
                            Remove
                        </button>
                    </div>
                </template>
                <button type="button"
                        class="pill-link--secondary"
                        data-add-combo="{{ betType.value }}"
                        data-add-combo-next="{{ instances|length }}"
                        data-testid="btn-add-combo-{{ betType.value }}">
                    + Add {{ betType.label }} combo
                </button>
                <p class="form-hint mb-0 mt-2">
                    Click "+ Add {{ betType.label }} combo" to configure a combo &mdash; click it again to add
                    another before saving.
                </p>
                {% endif %}
            </div>
        </div>
        {% endfor %}

    {% endif %}

    {% if not event.published %}
        <div class="mb-4">
            <button type="submit"
                    class="btn btn-admin-save"
                    data-testid="btn-save-bet-types">
                Save Bet Types
            </button>
        </div>
    </form>
    {% endif %}

    {% if not event.published %}
    <script>
        // Multi-race combo rows start empty (no blank row by default): clicking
        // "+ Add {type} combo" instantiates one from that bet type's <template>,
        // and "Remove" deletes a row (existing or freshly-added) outright. The
        // backend accepts any number of multi[key][N][] groups per submit and
        // simply skips indices missing from the payload, so removing a row here
        // needs no server round-trip - it just won't be there when Save runs.
        document.addEventListener('click', function (event) {
            var addButton = event.target.closest('[data-add-combo]');
            if (addButton) {
                event.preventDefault();

                var key = addButton.getAttribute('data-add-combo');
                var list = document.getElementById('combo-list-' + key);
                var template = document.getElementById('combo-template-' + key);
                if (!list || !template) {
                    return;
                }

                var nextIndex = parseInt(addButton.getAttribute('data-add-combo-next'), 10);
                var html = template.innerHTML.split('__INDEX__').join(String(nextIndex));
                var wrapper = document.createElement('div');
                wrapper.innerHTML = html.trim();
                list.appendChild(wrapper.firstElementChild);
                addButton.setAttribute('data-add-combo-next', String(nextIndex + 1));

                var emptyHint = document.querySelector('[data-testid="empty-combos-' + key + '"]');
                if (emptyHint) {
                    emptyHint.style.display = 'none';
                }

                return;
            }

            var removeButton = event.target.closest('[data-remove-combo]');
            if (removeButton) {
                event.preventDefault();
                var row = removeButton.closest('.combo-row');
                var list = row ? row.closest('[id^="combo-list-"]') : null;
                if (row) {
                    row.remove();
                }
                if (list && list.children.length === 0) {
                    var key = list.id.replace('combo-list-', '');
                    var emptyHint = document.querySelector('[data-testid="empty-combos-' + key + '"]');
                    if (emptyHint) {
                        emptyHint.style.display = '';
                    }
                }
            }
        });
    </script>
    {% endif %}

    {% endif %}

    {% if currentTab == 'earners' %}

        <div class="card">
            <div class="card-body">
                <h3 class="wfbo-card-title mb-3">Top Earners</h3>
                <p class="form-hint mb-3">Players who won the most on this event, ranked by total payout.</p>

                {% if topEarners is empty %}
                    <p class="text-muted" data-testid="earners-empty">No winners yet for this event.</p>
                {% else %}
                    <div class="table-responsive">
                        <table class="w-100 stack-table" data-testid="earners-table">
                            <thead>
                                <tr class="thead-row--strong">
                                    <th class="th-white">#</th>
                                    <th class="th-white">Player</th>
                                    <th class="th-white">Won</th>
                                    <th class="th-white">Staked</th>
                                    <th class="th-white">Bets</th>
                                    <th class="th-white">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for earner in topEarners %}
                                    <tr class="table-row" data-testid="earner-row-{{ earner.userId }}">
                                        <td class="td-cell fw-bold">{{ loop.index }}</td>
                                        <td class="td-cell" data-label="Player">
                                            <a href="{{ path('app_wfbo_user_transactions', {id: earner.userId}) }}" style="color:inherit; text-decoration:underline; text-underline-offset:2px;">
                                                {{ earner.firstName }} {{ earner.lastName }}
                                            </a>
                                            <br><small class="text-muted">{{ earner.mobileNumber }}</small>
                                        </td>
                                        <td class="td-cell" data-label="Won" style="color:#059669; font-weight:600;">₱{{ earner.totalPayout|number_format(2) }}</td>
                                        <td class="td-cell" data-label="Staked">₱{{ earner.totalStaked|number_format(2) }}</td>
                                        <td class="td-cell" data-label="Bets">{{ earner.betCount }}</td>
                                        <td class="td-cell" data-label="Status">
                                            {% if earner.isOnHold %}
                                                <span class="badge-role" style="background:#f59e0b;color:#ffffff;">On Hold</span>
                                                <form method="post" action="{{ path('app_wfbo_user_action', {id: earner.userId, type: 'unhold'}) }}" style="display:inline;" data-turbo="false">
                                                    <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ earner.userId) }}">
                                                    <button type="submit" class="btn btn-sm btn-outline-secondary" style="font-size:11px;padding:2px 8px;" data-testid="btn-unhold-{{ earner.userId }}">Unhold</button>
                                                </form>
                                            {% else %}
                                                <span class="badge-role badge-role--active">Active</span>
                                                <form method="post" action="{{ path('app_wfbo_user_action', {id: earner.userId, type: 'hold'}) }}" style="display:inline;" data-turbo="false">
                                                    <input type="hidden" name="_token" value="{{ csrf_token('wfbo_user_action_' ~ earner.userId) }}">
                                                    <button type="submit" class="btn btn-sm btn-outline-warning" style="font-size:11px;padding:2px 8px;" data-testid="btn-hold-{{ earner.userId }}">Hold</button>
                                                </form>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% endif %}
            </div>
        </div>

    {% endif %}

{% endblock %}