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

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

<div class="upcoming_auction_detail users_list team_detail_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>
        <a href="{{ $completedUrl }}">{{ $league->name }}</a>
        <span>›</span>
        <span class="active">{{ $team['name'] ?? 'Team' }}</span>
    </div>

    @if (!empty($loadError))
        <div class="team_detail_error">
            <p>{{ $loadError }}</p>
            <a href="{{ $completedUrl }}" class="team_side_link">Back to auction results</a>
        </div>
    @else
    <section class="team_hero_card">
        <x-safe-image :src="$team['logoUrl'] ?? null" type="team" :alt="$team['name']" class="team_hero_logo" />
        <div class="team_hero_meta">
            <span class="team_hero_badge">{{ $team['status'] }}</span>
            <h1>{{ $team['name'] }}</h1>
            <div class="team_hero_owner">
                <x-safe-image :src="$team['ownerAvatarUrl'] ?? null" type="user" :alt="$team['ownerName']" />
                <span>Owned by {{ $team['ownerName'] }}</span>
            </div>
        </div>
    </section>

    <section class="team_stats_grid">
        <div class="team_stat_card">
            <div class="label">Total Spend</div>
            <div class="value">{{ $team['totalSpend'] }}</div>
            @if ($team['spendPercent'] !== null)
                <div class="sub is-danger">{{ $team['spendPercent'] }}% of league spend</div>
            @endif
            <div class="team_budget_progress">
                <div class="team_budget_progress__fill" style="width: {{ $team['budgetSpentPercent'] }}%"></div>
            </div>
            <div class="team_budget_progress__label">{{ $team['totalSpend'] }} / {{ $team['budgetTotal'] }}</div>
        </div>
        <div class="team_stat_card">
            <div class="label">Total Players</div>
            <div class="value">{{ $team['playerCount'] }} <span style="font-size:16px;color:#6b7280;">/ {{ $team['squadLimit'] }}</span></div>
        </div>
        <div class="team_stat_card">
            <div class="label">Average Bid</div>
            <div class="value">{{ $team['averageBid'] }}</div>
            <div class="sub">per player</div>
        </div>
        <div class="team_stat_card">
            <div class="label">Rem. Budget</div>
            <div class="value">{{ $team['budgetRemaining'] }}</div>
            <div class="sub is-success">Available</div>
        </div>
    </section>

    <div class="team_detail_layout">
        <section class="team_squad_panel" id="teamSquadPanel">
            <div class="team_squad_header">
                <h3>Squad List</h3>
                <div class="team_squad_header__actions">
                    <input type="search" id="teamSquadSearch" class="team_squad_search" placeholder="Search players..." autocomplete="off">
                    <div class="team_role_filters" role="tablist" aria-label="Filter squad by role">
                    <button type="button" class="team_role_filter is-active" data-role-filter="all">All</button>
                    <button type="button" class="team_role_filter" data-role-filter="batsman">Batsman</button>
                    <button type="button" class="team_role_filter" data-role-filter="bowler">Bowler</button>
                    <button type="button" class="team_role_filter" data-role-filter="all-rounder">All Rounder</button>
                    </div>
                </div>
            </div>

            <div class="team_squad_head" aria-hidden="true">
                <div>Player Name</div>
                <div>Role</div>
                <div>Category</div>
                <div>Sold Price</div>
                <div>Status</div>
            </div>

            <div class="team_squad_body" id="teamSquadBody">
                @forelse ($squad as $player)
                    <article class="team_squad_row" data-role-key="{{ $player['roleKey'] }}" data-search="{{ strtolower($player['name'] . ' ' . $player['role']) }}">
                        <div class="team_squad_row__player">
                            <x-safe-image :src="$player['avatarUrl'] ?? null" type="player" :alt="$player['name']" />
                            <span>{{ $player['name'] }}</span>
                        </div>
                        <div class="team_squad_row__role">{{ $player['role'] }}</div>
                        <div>
                            <span class="figma_cat_badge figma_cat_badge--{{ $player['categoryClass'] }}">
                                {{ $player['categoryLabel'] }}
                            </span>
                        </div>
                        <div class="team_squad_row__price">{{ $player['soldPrice'] }}</div>
                        <div class="team_squad_row__status">
                            @if ($player['status'] === 'sold')
                                <span class="figma_status figma_status--sold" title="Signed" aria-label="Signed">
                                    <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                </span>
                            @else
                                <span class="figma_status figma_status--released" title="Released" aria-label="Released">
                                    <svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                                </span>
                            @endif
                        </div>
                    </article>
                @empty
                    <p class="after_auction_empty">No players in this squad yet.</p>
                @endforelse
            </div>
        </section>

        <aside class="team_side_stack">
            <section class="team_side_card">
                <h4>Recent Signings</h4>
                @forelse ($recentSignings as $signing)
                    <div class="team_signing_item">
                        <div class="team_signing_player">
                            <x-safe-image :src="$signing['avatarUrl'] ?? null" type="player" :alt="$signing['name']" />
                            <div>
                                <div class="team_signing_name">{{ $signing['name'] }}</div>
                                <div class="team_signing_time">{{ $signing['acquiredAgo'] }}</div>
                            </div>
                        </div>
                        <div class="team_signing_price">{{ $signing['soldPrice'] }}</div>
                    </div>
                @empty
                    <p class="after_auction_empty">No signings yet.</p>
                @endforelse
                <a href="{{ $completedUrl }}" class="team_side_link">View auction results</a>
            </section>

            <section class="team_side_card">
                <h4>Team Balance</h4>
                <div class="team_balance_bars">
                    <div class="team_balance_bar">
                        <label><span>Batting</span><span>{{ $composition['battingPercent'] }}%</span></label>
                        <div class="team_balance_track">
                            <div class="team_balance_fill team_balance_fill--batting" style="width: {{ $composition['battingPercent'] }}%"></div>
                        </div>
                    </div>
                    <div class="team_balance_bar">
                        <label><span>Bowling</span><span>{{ $composition['bowlingPercent'] }}%</span></label>
                        <div class="team_balance_track">
                            <div class="team_balance_fill team_balance_fill--bowling" style="width: {{ $composition['bowlingPercent'] }}%"></div>
                        </div>
                    </div>
                </div>
                <div class="team_balance_counts">
                    <div class="team_balance_count">
                        <strong>{{ $composition['batsmen'] }}</strong>
                        <span>Batsman</span>
                    </div>
                    <div class="team_balance_count">
                        <strong>{{ $composition['bowlers'] }}</strong>
                        <span>Bowlers</span>
                    </div>
                    <div class="team_balance_count">
                        <strong>{{ $composition['allRounders'] }}</strong>
                        <span>All-Rounder</span>
                    </div>
                </div>
                <p class="team_balance_note">{{ $composition['balanceNote'] }}</p>
            </section>
        </aside>
    </div>
    @endif
</div>
@endsection

@section('scripts')
    <script>
        (function () {
            const rows = Array.from(document.querySelectorAll('#teamSquadBody .team_squad_row'));
            const filters = document.querySelectorAll('.team_role_filter');
            const searchInput = document.getElementById('teamSquadSearch');
            let activeFilter = 'all';
            let searchValue = '';

            function applyFilter() {
                const term = searchValue.trim().toLowerCase();
                rows.forEach(function (row) {
                    const roleKey = row.dataset.roleKey || 'other';
                    const matchesRole = activeFilter === 'all' || roleKey === activeFilter;
                    const matchesSearch = !term || (row.dataset.search || '').includes(term);
                    row.classList.toggle('is-hidden', !(matchesRole && matchesSearch));
                });
            }

            filters.forEach(function (button) {
                button.addEventListener('click', function () {
                    activeFilter = button.dataset.roleFilter || 'all';
                    filters.forEach(function (btn) {
                        btn.classList.toggle('is-active', btn === button);
                    });
                    applyFilter();
                });
            });

            if (searchInput) {
                searchInput.addEventListener('input', function () {
                    searchValue = this.value;
                    applyFilter();
                });
            }
        })();
    </script>
@endsection