@props(['honorRankings', 'pveRankings', 'killsRankings', 'playtimeRankings', 'wealthRankings', 'realmData'])

<div {{ $attributes->merge(['class' => 'rankings-widget']) }}>
    <div class="d-flex justify-content-end align-items-center mb-4">
        <div class="d-flex align-items-center">
            @if(!empty($realmData)) {{-- Показываем выбор реалма, только если их больше одного --}}
                <select class="form-select form-select-sm rounded-2 me-2 realm-select" id="rankingRealmSelect">
                    @foreach($realmData as $realm)
                        <option value="{{ $realm->id }}" @if($loop->first) selected @endif>{{ $realm->name }}</option>
                    @endforeach
                </select>
            @endif
        </div>
    </div>

    <ul class="nav nav-tabs d-flex" id="rankingsTab" role="tablist">
        <li class="nav-item flex-fill text-center" role="presentation">
            <button class="nav-link active fw-bold px-2 py-2" id="pvp-tab" data-bs-toggle="tab" data-bs-target="#pvp-rankings" type="button" role="tab" aria-controls="pvp-rankings" aria-selected="true">
                <i class="fas fa-swords me-1"></i>{{ __('Честь') }}
            </button>
        </li>
        <li class="nav-item flex-fill text-center" role="presentation">
            <button class="nav-link fw-bold px-2 py-2" id="pve-tab" data-bs-toggle="tab" data-bs-target="#pve-rankings" type="button" role="tab" aria-controls="pve-rankings" aria-selected="false">
                <i class="fas fa-scroll me-1"></i>{{ __('Квесты') }}
            </button>
        </li>
        <li class="nav-item flex-fill text-center" role="presentation">
            <button class="nav-link fw-bold px-2 py-2" id="kills-tab" data-bs-toggle="tab" data-bs-target="#kills-rankings" type="button" role="tab" aria-controls="kills-rankings" aria-selected="false">
                <i class="fas fa-skull-crossbones me-1"></i>{{ __('Убийства') }}
            </button>
        </li>
        <li class="nav-item flex-fill text-center" role="presentation">
            <button class="nav-link fw-bold px-2 py-2" id="playtime-tab" data-bs-toggle="tab" data-bs-target="#playtime-rankings" type="button" role="tab" aria-controls="playtime-rankings" aria-selected="false">
                <i class="fas fa-clock me-1"></i>{{ __('Время в игре') }}
            </button>
        </li>
        <li class="nav-item flex-fill text-center" role="presentation">
            <button class="nav-link fw-bold px-2 py-2" id="wealth-tab" data-bs-toggle="tab" data-bs-target="#wealth-rankings" type="button" role="tab" aria-controls="wealth-rankings" aria-selected="false">
                <i class="fas fa-coins me-1"></i>{{ __('Богатство') }}
            </button>
        </li>
    </ul>

    <div class="tab-content pt-3" id="rankingsTabContent">
        <div class="tab-pane fade show active" id="pvp-rankings" role="tabpanel" aria-labelledby="pvp-tab">
            <h4 class="mb-3 text-phoenix-gold" id="pvpRankingsTitle">
                <i class="fas fa-trophy me-2 text-phoenix-gold"></i>{{ __('Топ 10 по очкам чести:') }}
            </h4>
            <div id="pvpRankingsList" class="list-group list-group-flush">
                {{-- Содержимое будет заполнено динамически или отобразит начальные данные --}}
                @forelse($honorRankings as $ranking)
                    <a href="{{ route('character.show', ['realm' => $ranking->character->realm, 'name' => $ranking->character->name]) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-2 ranking-item">
                        <div class="d-flex align-items-center">
                            <span class="me-3 ranking-position">{{ $ranking->rank }}</span>
                            <img src="{{ $ranking->character->user->avatar_url ?? asset('images/avatars/default.png') }}" alt="{{ $ranking->character->name }}" class="rounded-circle me-3" width="40" height="40" style="object-fit: cover; border: 2px solid var(--color-phoenix-gold);">
                            <div class="flex-grow-1">
                                <span class="fw-bold character-name d-block">{{ $ranking->character->name }}</span>
                                <small class="text-muted d-block">{{ $ranking->character->raceName }} / {{ $ranking->character->className }} ({{ __('Ур.') }} {{ $ranking->character->level }})</small>
                                {{-- Если у вас есть гильдия и фракция --}}
                                @if(isset($ranking->character->guildName))
                                    <small class="{{ strtolower($ranking->character->faction ?? '') === 'alliance' ? 'text-info' : (strtolower($ranking->character->faction ?? '') === 'horde' ? 'text-danger' : '') }}">&lt;{{ $ranking->character->guildName }}&gt;</small>
                                @endif
                            </div>
                        </div>
                        <div>
                            <span class="badge bg-primary px-3 py-2 fs-6">{{ $ranking->character->honor->rankPoints ?? 'N/A' }} {{ __('ОЧ') }}</span>
                        </div>
                    </a>
                @empty
                    <div class="list-group-item text-center py-4">
                        <i class="fas fa-trophy fa-2x mb-3 text-phoenix-gold"></i>
                        <p class="mb-0 text-muted">{{ __('PvP рейтинги пока недоступны.') }}</p>
                    </div>
                @endforelse
            </div>
        </div>
        <div class="tab-pane fade" id="pve-rankings" role="tabpanel" aria-labelledby="pve-tab">
            <h4 class="mb-3 text-phoenix-gold" id="pveRankingsTitle">
                <i class="fas fa-scroll me-2 text-phoenix-gold"></i>{{ __('Топ 10 по выполненным квестам:') }}
            </h4>
            <div id="pveRankingsList" class="list-group list-group-flush">
                {{-- Содержимое будет заполнено динамически или отобразит начальные данные --}}
                @forelse($pveRankings as $ranking)
                    <a href="{{ route('character.show', ['realm' => $ranking->character->realm, 'name' => $ranking->character->name]) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-2 ranking-item">
                        <div class="d-flex align-items-center">
                            <span class="me-3 ranking-position">{{ $ranking->rank }}</span>
                            <img src="{{ $ranking->character->user->avatar_url ?? asset('images/avatars/default.png') }}" alt="{{ $ranking->character->name }}" class="rounded-circle me-3" width="40" height="40" style="object-fit: cover; border: 2px solid var(--color-phoenix-gold);">
                            <div class="flex-grow-1">
                                <span class="fw-bold character-name d-block">{{ $ranking->character->name }}</span>
                                <small class="text-muted d-block">{{ $ranking->character->raceName }} / {{ $ranking->character->className }} ({{ __('Ур.') }} {{ $ranking->character->level }})</small>
                                {{-- Если у вас есть гильдия и фракция --}}
                                @if(isset($ranking->character->guildName))
                                    <small class="{{ strtolower($ranking->character->faction ?? '') === 'alliance' ? 'text-info' : (strtolower($ranking->character->faction ?? '') === 'horde' ? 'text-danger' : '') }}">&lt;{{ $ranking->character->guildName }}&gt;</small>
                                @endif
                            </div>
                        </div>
                        <div>
                            <span class="badge bg-success px-3 py-2 fs-6">{{ __('Квестов:') }} {{ $ranking->completedQuestsCount ?? 'N/A' }}</span>
                        </div>
                    </a>
                @empty
                    <div class="list-group-item text-center py-4">
                        <i class="fas fa-scroll fa-2x mb-3 text-phoenix-gold"></i>
                        <p class="mb-0 text-muted">{{ __('PvE рейтинги пока недоступны.') }}</p>
                    </div>
                @endforelse
            </div>
        </div>
        <div class="tab-pane fade" id="kills-rankings" role="tabpanel" aria-labelledby="kills-tab">
            <h4 class="mb-3 text-phoenix-gold" id="killsRankingsTitle">
                <i class="fas fa-skull-crossbones me-2 text-phoenix-gold"></i>{{ __('Топ 10 по убийствам:') }}
            </h4>
            <div id="killsRankingsList" class="list-group list-group-flush">
                @forelse($killsRankings as $ranking)
                    <a href="{{ route('character.show', ['realm' => $ranking->character->realm, 'name' => $ranking->character->name]) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-2 ranking-item">
                        <div class="d-flex align-items-center">
                            <span class="me-3 ranking-position">{{ $ranking->rank }}</span>
                            <img src="{{ $ranking->character->user->avatar_url ?? asset('images/avatars/default.png') }}" alt="{{ $ranking->character->name }}" class="rounded-circle me-3" width="40" height="40" style="object-fit: cover; border: 2px solid var(--color-phoenix-gold);">
                            <div class="flex-grow-1">
                                <span class="fw-bold character-name d-block">{{ $ranking->character->name }}</span>
                                <small class="text-muted d-block">{{ $ranking->character->raceName }} / {{ $ranking->character->className }} ({{ __('Ур.') }} {{ $ranking->character->level }})</small>
                                @if(isset($ranking->character->guildName))
                                    <small class="{{ strtolower($ranking->character->faction ?? '') === 'alliance' ? 'text-info' : (strtolower($ranking->character->faction ?? '') === 'horde' ? 'text-danger' : '') }}">&lt;{{ $ranking->character->guildName }}&gt;</small>
                                @endif
                            </div>
                        </div>
                        <div>
                            <span class="badge bg-danger px-3 py-2 fs-6">{{ __('Убийств:') }} {{ $ranking->character->honor_stored_hk ?? 'N/A' }}</span>
                        </div>
                    </a>
                @empty
                    <div class="list-group-item text-center py-4">
                        <i class="fas fa-skull-crossbones fa-2x mb-3 text-phoenix-gold"></i>
                        <p class="mb-0 text-muted">{{ __('Рейтинги по убийствам пока недоступны.') }}</p>
                    </div>
                @endforelse
            </div>
        </div>
        <div class="tab-pane fade" id="playtime-rankings" role="tabpanel" aria-labelledby="playtime-tab">
            <h4 class="mb-3 text-phoenix-gold" id="playtimeRankingsTitle">
                <i class="fas fa-clock me-2 text-phoenix-gold"></i>{{ __('Топ 10 по времени в игре:') }}
            </h4>
            <div id="playtimeRankingsList" class="list-group list-group-flush">
                @forelse($playtimeRankings as $ranking)
                    <a href="{{ route('character.show', ['realm' => $ranking->character->realm, 'name' => $ranking->character->name]) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-2 ranking-item">
                        <div class="d-flex align-items-center">
                            <span class="me-3 ranking-position">{{ $ranking->rank }}</span>
                            <img src="{{ $ranking->character->user->avatar_url ?? asset('images/avatars/default.png') }}" alt="{{ $ranking->character->name }}" class="rounded-circle me-3" width="40" height="40" style="object-fit: cover; border: 2px solid var(--color-phoenix-gold);">
                            <div class="flex-grow-1">
                                <span class="fw-bold character-name d-block">{{ $ranking->character->name }}</span>
                                <small class="text-muted d-block">{{ $ranking->character->raceName }} / {{ $ranking->character->className }} ({{ __('Ур.') }} {{ $ranking->character->level }})</small>
                                @if(isset($ranking->character->guildName))
                                    <small class="{{ strtolower($ranking->character->faction ?? '') === 'alliance' ? 'text-info' : (strtolower($ranking->character->faction ?? '') === 'horde' ? 'text-danger' : '') }}">&lt;{{ $ranking->character->guildName }}&gt;</small>
                                @endif
                            </div>
                        </div>
                        <div>
                            <span class="badge bg-info px-3 py-2 fs-6">{{ floor($ranking->character->played_time_total / 3600) }} {{ __('ч.') }}</span>
                        </div>
                    </a>
                @empty
                    <div class="list-group-item text-center py-4">
                        <i class="fas fa-clock fa-2x mb-3 text-phoenix-gold"></i>
                        <p class="mb-0 text-muted">{{ __('Рейтинги по времени в игре пока недоступны.') }}</p>
                    </div>
                @endforelse
            </div>
        </div>
        <div class="tab-pane fade" id="wealth-rankings" role="tabpanel" aria-labelledby="wealth-tab">
            <h4 class="mb-3 text-phoenix-gold" id="wealthRankingsTitle">
                <i class="fas fa-coins me-2 text-phoenix-gold"></i>{{ __('Топ 10 по богатству:') }}
            </h4>
            <div id="wealthRankingsList" class="list-group list-group-flush">
                @forelse($wealthRankings as $ranking)
                    <a href="{{ route('character.show', ['realm' => $ranking->character->realm, 'name' => $ranking->character->name]) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-2 ranking-item">
                        <div class="d-flex align-items-center">
                            <span class="me-3 ranking-position">{{ $ranking->rank }}</span>
                            <img src="{{ $ranking->character->user->avatar_url ?? asset('images/avatars/default.png') }}" alt="{{ $ranking->character->name }}" class="rounded-circle me-3" width="40" height="40" style="object-fit: cover; border: 2px solid var(--color-phoenix-gold);">
                            <div class="flex-grow-1">
                                <span class="fw-bold character-name d-block">{{ $ranking->character->name }}</span>
                                <small class="text-muted d-block">{{ $ranking->character->raceName }} / {{ $ranking->character->className }} ({{ __('Ур.') }} {{ $ranking->character->level }})</small>
                                @if(isset($ranking->character->guildName))
                                    <small class="{{ strtolower($ranking->character->faction ?? '') === 'alliance' ? 'text-info' : (strtolower($ranking->character->faction ?? '') === 'horde' ? 'text-danger' : '') }}">&lt;{{ $ranking->character->guildName }}&gt;</small>
                                @endif
                            </div>
                        </div>
                        <div>
                            <span class="badge px-3 py-2 fs-6">{{ number_format(floor($ranking->character->money / 10000)) }} <i class="fas fa-coins text-warning"></i></span>
                        </div>
                    </a>
                @empty
                    <div class="list-group-item text-center py-4">
                        <i class="fas fa-coins fa-2x mb-3 text-phoenix-gold"></i>
                        <p class="mb-0 text-muted">{{ __('Рейтинги по богатству пока недоступны.') }}</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('app:loaded', function() {
        const rankingRealmSelect = $('#rankingRealmSelect');
        const pvpRankingsList = $('#pvpRankingsList');
        const pveRankingsList = $('#pveRankingsList');
        const killsRankingsList = $('#killsRankingsList');
        const playtimeRankingsList = $('#playtimeRankingsList');
        const wealthRankingsList = $('#wealthRankingsList');

        function renderRankings(rankings, listElementId, rankingType) {
            let html = '';
            if (rankings && rankings.length > 0) {
                rankings.forEach(function(ranking, index) {
                    const avatarUrl = ranking.character.user ? ranking.character.user.avatar_url : '{{ asset('images/avatars/default.png') }}';
                    const factionClass = ranking.character.faction ? (ranking.character.faction.toLowerCase() === 'alliance' ? 'text-info' : (ranking.character.faction.toLowerCase() === 'horde' ? 'text-danger' : '')) : '';
                    let valueDisplay = '';

                    switch (rankingType) {
                        case 'honor':
                            valueDisplay = `${ranking.character.honor.rankPoints ?? 'N/A'} ОЧ`;
                            break;
                        case 'pve':
                            valueDisplay = `Квестов: ${ranking.completedQuestsCount ?? 'N/A'}`;
                            break;
                        case 'kills':
                            valueDisplay = `Убийств: ${ranking.character.honor_stored_hk ?? 'N/A'}`;
                            break;
                        case 'playtime':
                            valueDisplay = `${Math.floor(ranking.character.played_time_total / 3600)} ч.`;
                            break;
                        case 'wealth':
                            valueDisplay = `${Math.floor(ranking.character.money / 10000).toLocaleString()} <i class="fas fa-coins text-warning"></i>`;
                            break;
                    }

                    // Определяем цвет позиции в зависимости от места
                    let positionClass = 'bg-secondary';
                    if (index === 0) positionClass = 'bg-gold';
                    else if (index === 1) positionClass = 'bg-silver';
                    else if (index === 2) positionClass = 'bg-bronze';

                    html += `
                        <a href="/character/${ranking.character.realm}/${ranking.character.name}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center mb-2 ranking-item">
                            <div class="d-flex align-items-center">
                                <span class="me-3 ranking-position ${positionClass}">${ranking.rank}</span>
                                <img src="${avatarUrl}" alt="${ranking.character.name}" class="rounded-circle me-3" width="40" height="40" style="object-fit: cover; border: 2px solid var(--phoenix-gold);">
                                <div class="flex-grow-1">
                                    <span class="fw-bold character-name d-block">${ranking.character.name}</span>
                                    <small class="text-muted d-block">${ranking.character.raceName} ${ranking.character.className} (Ур. ${ranking.character.level})</small>
                                    ${ranking.character.guildName ? `<small class="${factionClass}">&lt;${ranking.character.guildName}&gt;</small>` : ''}
                                </div>
                            </div>
                            <div>
                                <span class="badge ${rankingType === 'wealth' ? 'bg-warning text-dark' : (rankingType === 'kills' ? 'bg-danger' : (rankingType === 'playtime' ? 'bg-info' : (rankingType === 'pve' ? 'bg-success' : 'bg-primary')))} px-3 py-2 fs-6">${valueDisplay}</span>
                            </div>
                        </a>
                    `;
                });
            } else {
                const emptyIcons = {
                    'honor': 'fa-swords',
                    'pve': 'fa-scroll',
                    'kills': 'fa-skull-crossbones',
                    'playtime': 'fa-clock',
                    'wealth': 'fa-coins'
                };

                html = `<div class="list-group-item text-center py-4">
                    <i class="fas ${emptyIcons[rankingType] || 'fa-trophy'} fa-2x mb-3 text-phoenix-gold"></i>
                    <p class="mb-0 text-muted">Рейтинги пока недоступны.</p>
                </div>`;
            }
            $(listElementId).html(html);
        }

        function updateRankings() {
            const selectedRealmId = rankingRealmSelect.val();
            if (!selectedRealmId) {
                pvpRankingsList.html('<div class="list-group-item text-center text-light py-4"><i class="fas fa-sync fa-spin me-2"></i>Выберите реалм.</div>');
                pveRankingsList.html('<div class="list-group-item text-center text-light py-4"><i class="fas fa-sync fa-spin me-2"></i>Выберите реалм.</div>');
                killsRankingsList.html('<div class="list-group-item text-center text-light py-4"><i class="fas fa-sync fa-spin me-2"></i>Выберите реалм.</div>');
                playtimeRankingsList.html('<div class="list-group-item text-center text-light py-4"><i class="fas fa-sync fa-spin me-2"></i>Выберите реалм.</div>');
                wealthRankingsList.html('<div class="list-group-item text-center text-light py-4"><i class="fas fa-sync fa-spin me-2"></i>Выберите реалм.</div>');
                return;
            }

            pvpRankingsList.html('<div class="list-group-item text-center text-light py-4"><i class="fas fa-sync fa-spin me-2"></i>Загрузка...</div>');
            pveRankingsList.html('<div class="list-group-item text-center text-light py-4"><i class="fas fa-sync fa-spin me-2"></i>Загрузка...</div>');
            killsRankingsList.html('<div class="list-group-item text-center text-light py-4"><i class="fas fa-sync fa-spin me-2"></i>Загрузка...</div>');
            playtimeRankingsList.html('<div class="list-group-item text-center text-light py-4"><i class="fas fa-sync fa-spin me-2"></i>Загрузка...</div>');
            wealthRankingsList.html('<div class="list-group-item text-center text-light py-4"><i class="fas fa-sync fa-spin me-2"></i>Загрузка...</div>');

            $.ajax({
                url: '/api/rankings-by-realm',
                method: 'GET',
                data: { realm_id: selectedRealmId },
                success: function(response) {
                    renderRankings(response.honorRankings, '#pvpRankingsList', 'honor');
                    renderRankings(response.pveRankings, '#pveRankingsList', 'pve');
                    renderRankings(response.killsRankings, '#killsRankingsList', 'kills');
                    renderRankings(response.playtimeRankings, '#playtimeRankingsList', 'playtime');
                    renderRankings(response.wealthRankings, '#wealthRankingsList', 'wealth');
                },
                error: function() {
                    pvpRankingsList.html('<div class="list-group-item text-center text-danger py-4"><i class="fas fa-exclamation-triangle me-2"></i>Ошибка загрузки.</div>');
                    pveRankingsList.html('<div class="list-group-item text-center text-danger py-4"><i class="fas fa-exclamation-triangle me-2"></i>Ошибка загрузки.</div>');
                    killsRankingsList.html('<div class="list-group-item text-center text-danger py-4"><i class="fas fa-exclamation-triangle me-2"></i>Ошибка загрузки.</div>');
                    playtimeRankingsList.html('<div class="list-group-item text-center text-danger py-4"><i class="fas fa-exclamation-triangle me-2"></i>Ошибка загрузки.</div>');
                    wealthRankingsList.html('<div class="list-group-item text-center text-danger py-4"><i class="fas fa-exclamation-triangle me-2"></i>Ошибка загрузки.</div>');
                }
            });
        }

        rankingRealmSelect.on('change', updateRankings);

        if (rankingRealmSelect.length && rankingRealmSelect.find('option').length > 1) {
            updateRankings();
        }
    });
</script>
@endpush