@extends('admin.layouts.app')
@section('styles')
    @include('admin.leagues.partials._final_squads_figma_styles')
@endsection

@section('content')
@include('admin.layouts.alert')

@php
    $summaryAuction = $summary['auction'] ?? [];
    $summarySpending = $summary['spending'] ?? [];
    $mostExpensive = $summary['mostExpensivePlayer'] ?? null;
    $topTeam = $summary['topSpendingTeam'] ?? null;
@endphp

<div class="upcoming_auction_detail users_list after_auction_page">
    <div class="breadcrumb">
        <a href="{{ route('admin.dashboard.index') }}">Dashboard</a>
        <span>›</span>
        <a href="{{ route('admin.leagues.index') }}">My Event Auction</a>
        <span>›</span>
        <span class="active">{{ $league->name }}</span>
    </div>

    <div class="upcoming_hero_banner">
        <x-safe-image :src="$league->bannerImageUrl()" type="league" :alt="$league->name" />
    </div>

    <div class="upcoming_header">
        <div class="left">
            <h2>{{ $league->name }} <span>Auction Completed</span></h2>

            <div class="meta">
                <span>Season {{ $league->season }}</span>
                <span>{{ $league->displayLocation() }}</span>
                @if ($league->auctionAt())
                <span>
                    <svg viewBox="0 0 24 24" fill="none" stroke="#aaa" stroke-width="2" width="14" height="14">
                        <rect x="3" y="4" width="18" height="18" rx="2" />
                        <line x1="16" y1="2" x2="16" y2="6" />
                        <line x1="8" y1="2" x2="8" y2="6" />
                    </svg>
                    {{ $league->auctionAt()->format('d M Y') }}
                </span>
                <span>
                    <svg viewBox="0 0 24 24" fill="none" stroke="#aaa" stroke-width="2" width="14" height="14">
                        <circle cx="12" cy="12" r="10" />
                        <polyline points="12 6 12 12 16 14" />
                    </svg>
                    {{ $league->auctionAt()->setTimezone('Pacific/Auckland')->format('h:i A') }}
                </span>
                @endif
            </div>
        </div>
    </div>

    <div class="stats after_auction">
        <div class="card">
            <div class="title">Total Players Sold</div>
            <div class="value-row">
                <div class="value">
                    {{ $summaryAuction['soldLots'] ?? 0 }}<span class="small">/{{ $summaryAuction['totalLots'] ?? 0 }}</span>
                </div>
                <div class="badge">{{ number_format($summaryAuction['soldPercentage'] ?? 0, 1) }}%</div>
            </div>
        </div>

        <div class="card">
            <div class="title">Total Auction Spend</div>
            <div class="value-row">
                <div class="value purple">{{ $summarySpending['totalSpend'] ?? '—' }}</div>
                <div class="icon-box">
                    <svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13 9C12.1667 9 11.4583 8.70833 10.875 8.125C10.2917 7.54167 10 6.83333 10 6C10 5.16667 10.2917 4.45833 10.875 3.875C11.4583 3.29167 12.1667 3 13 3C13.8333 3 14.5417 3.29167 15.125 3.875C15.7083 4.45833 16 5.16667 16 6C16 6.83333 15.7083 7.54167 15.125 8.125C14.5417 8.70833 13.8333 9 13 9ZM6 12C5.45 12 4.97917 11.8042 4.5875 11.4125C4.19583 11.0208 4 10.55 4 10V2C4 1.45 4.19583 0.979167 4.5875 0.5875C4.97917 0.195833 5.45 0 6 0H20C20.55 0 21.0208 0.195833 21.4125 0.5875C21.8042 0.979167 22 1.45 22 2V10C22 10.55 21.8042 11.0208 21.4125 11.4125C21.0208 11.8042 20.55 12 20 12H6ZM8 10H18C18 9.45 18.1958 8.97917 18.5875 8.5875C18.9792 8.19583 19.45 8 20 8V4C19.45 4 18.9792 3.80417 18.5875 3.4125C18.1958 3.02083 18 2.55 18 2H8C8 2.55 7.80417 3.02083 7.4125 3.4125C7.02083 3.80417 6.55 4 6 4V8C6.55 8 7.02083 8.19583 7.4125 8.5875C7.80417 8.97917 8 9.45 8 10ZM19 16H2C1.45 16 0.979167 15.8042 0.5875 15.4125C0.195833 15.0208 0 14.55 0 14V3H2V14H19V16ZM6 10V2V10Z" fill="#475569" />
                    </svg>
                </div>
            </div>
            <div class="sub">Avg spend: {{ $summarySpending['averageSpend'] ?? '—' }} · Avg remaining: {{ $summarySpending['averageRemainingBudget'] ?? '—' }}</div>
        </div>

        <div class="card">
            <div class="title">Most Expensive Player</div>
            @if ($mostExpensive)
            <div class="value">{{ $mostExpensive['playerName'] }}</div>
            <div class="sub">{{ $mostExpensive['amount'] }} &nbsp; Sold to {{ $mostExpensive['teamName'] }}</div>
            @else
            <div class="value after_auction_empty">No sales yet</div>
            <div class="sub">—</div>
            @endif
        </div>

        <div class="card">
            <div class="title">Top Spending Team</div>
            @if ($topTeam)
            <div class="value">{{ $topTeam['teamName'] }}</div>
            <div class="sub">
                Spent {{ $topTeam['spend'] }}
                @if ($topTeam['budgetPercent'] !== null)
                ({{ $topTeam['budgetPercent'] }}% Budget)
                @endif
            </div>
            @else
            <div class="value after_auction_empty">No sales yet</div>
            <div class="sub">—</div>
            @endif
        </div>
    </div>

    <div class="participating_sec">
        <div>
            <div class="header">
                <h3>Participating Teams</h3>
            </div>

            <div class="team-grid">
                @forelse ($teams as $team)
                <a href="{{ route('admin.leagues.teams.show', [$league, $team['id']]) }}" class="card team-card-link">
                    <div class="top">
                        <div class="team">
                            <x-safe-image :src="$team['logoUrl'] ?? null" type="team" :alt="$team['name']" />
                            <div class="team-name">{{ $team['name'] }}</div>
                        </div>
                        <div class="slots">{{ $team['squadCount'] }}/{{ $team['squadLimit'] }} Slots</div>
                    </div>

                    <div class="budget-row">
                        <span>Budget Spent</span>
                        <span>{{ $team['budgetSpent'] }} / {{ $team['budgetTotal'] }}</span>
                    </div>

                    <div class="progress">
                        <div class="bar {{ $team['barColor'] }}" style="width:{{ $team['budgetPercent'] }}%"></div>
                    </div>
                </a>
                @empty
                <p class="after_auction_empty">No teams found for this auction.</p>
                @endforelse
            </div>
        </div>

        <div class="right-box">
            <div class="header">
                <h3>Recent Signings</h3>
            </div>

            <div class="right-boxs">
                @forelse ($recentSignings as $signing)
                <div class="signing">
                    <div class="player">
                        <x-safe-image :src="$signing['avatarUrl'] ?? null" type="player" :alt="$signing['playerName']" />
                        <div>
                            <div class="player-name">{{ $signing['playerName'] }}</div>
                            <div class="player-role">{{ $signing['role'] }} — {{ $signing['teamName'] }}</div>
                        </div>
                    </div>
                    <div class="price">{{ $signing['soldPrice'] }} <span>Sold</span></div>
                </div>
                @empty
                <p class="after_auction_empty">No recent signings yet.</p>
                @endforelse
            </div>

            @if (($historyAvailable ?? true) && empty($loadError))
            <a href="{{ route('admin.leagues.history', $league) }}" class="btn">VIEW FULL AUCTION HISTORY</a>
            @else
            <button type="button" class="btn after_auction_btn_disabled" disabled>VIEW FULL AUCTION HISTORY</button>
            @endif
        </div>
    </div>

    @include('admin.leagues.partials._final_squads_figma')
</div>
@endsection

@section('scripts')
    <script>
        (function () {
            const root = document.getElementById('figmaFinalSquads');
            if (!root) {
                return;
            }

            const rows = Array.from(root.querySelectorAll('.figma_squad_row'));
            const tabs = root.querySelectorAll('.figma_final_squads__tab');
            const roleFilter = document.getElementById('figmaSquadsRoleFilter');
            const searchInput = document.getElementById('figmaSquadsSearch');
            const footer = document.getElementById('figmaSquadsFooter');
            const info = document.getElementById('figmaSquadsInfo');
            const pager = document.getElementById('figmaSquadsPager');
            const emptyState = document.getElementById('figmaSquadsEmpty');

            let statusFilter = 'sold';
            let roleValue = '';
            let searchValue = '';
            let currentPage = 1;
            const pageSize = 10;

            const roles = new Set();
            rows.forEach(function (row) {
                const role = (row.dataset.role || '').trim();
                if (role && role !== '—') {
                    roles.add(role);
                }
            });
            Array.from(roles).sort().forEach(function (role) {
                const option = document.createElement('option');
                option.value = role;
                option.textContent = role;
                roleFilter.appendChild(option);
            });

            function filteredRows() {
                const term = searchValue.trim().toLowerCase();
                return rows.filter(function (row) {
                    if (row.dataset.status !== statusFilter) {
                        return false;
                    }
                    if (roleValue && row.dataset.role !== roleValue) {
                        return false;
                    }
                    if (term && !(row.dataset.search || '').includes(term)) {
                        return false;
                    }
                    return true;
                });
            }

            function renderPager(totalPages) {
                pager.innerHTML = '';
                if (totalPages <= 1) {
                    return;
                }

                const prev = document.createElement('button');
                prev.type = 'button';
                prev.textContent = '‹';
                prev.disabled = currentPage === 1;
                prev.addEventListener('click', function () {
                    currentPage -= 1;
                    render();
                });
                pager.appendChild(prev);

                for (let page = 1; page <= totalPages; page += 1) {
                    const btn = document.createElement('button');
                    btn.type = 'button';
                    btn.textContent = String(page);
                    btn.classList.toggle('is-active', page === currentPage);
                    btn.addEventListener('click', function () {
                        currentPage = page;
                        render();
                    });
                    pager.appendChild(btn);
                }

                const next = document.createElement('button');
                next.type = 'button';
                next.textContent = '›';
                next.disabled = currentPage === totalPages;
                next.addEventListener('click', function () {
                    currentPage += 1;
                    render();
                });
                pager.appendChild(next);
            }

            function render() {
                const visible = filteredRows();
                const total = visible.length;
                const totalPages = Math.max(1, Math.ceil(total / pageSize));

                if (currentPage > totalPages) {
                    currentPage = totalPages;
                }

                const start = (currentPage - 1) * pageSize;
                const pageRows = new Set(visible.slice(start, start + pageSize));

                rows.forEach(function (row) {
                    row.classList.toggle('is-hidden', !pageRows.has(row));
                });

                if (total === 0) {
                    footer.hidden = true;
                    if (emptyState) {
                        emptyState.classList.remove('is-hidden');
                    }
                    return;
                }

                if (emptyState) {
                    emptyState.classList.add('is-hidden');
                }

                footer.hidden = false;
                const from = start + 1;
                const to = Math.min(start + pageSize, total);
                info.textContent = 'Showing ' + from + ' to ' + to + ' of ' + total + ' players';
                renderPager(totalPages);
            }

            tabs.forEach(function (tab) {
                tab.addEventListener('click', function () {
                    statusFilter = tab.dataset.statusFilter || 'sold';
                    currentPage = 1;
                    tabs.forEach(function (btn) {
                        const active = btn === tab;
                        btn.classList.toggle('is-active', active);
                        btn.setAttribute('aria-selected', active ? 'true' : 'false');
                    });
                    render();
                });
            });

            roleFilter.addEventListener('change', function () {
                roleValue = this.value;
                currentPage = 1;
                render();
            });

            searchInput.addEventListener('input', function () {
                searchValue = this.value;
                currentPage = 1;
                render();
            });

            render();
        })();
    </script>
@endsection