@extends('admin.layouts.app')

@section('styles')
<link rel="stylesheet" href="{{ asset('assets/css/auction-pool-stats.css') }}?v={{ @filemtime(public_path('assets/css/auction-pool-stats.css')) ?: time() }}">
<style>
/* Load after Bootstrap — Figma-aligned live control overrides */
.live_auction_control .live_control_header_actions .btn.btn-control-pause {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    color: #fff !important;
    opacity: 1 !important;
    box-shadow: none !important;
}
.live_auction_control .live_control_header_actions .btn.btn-control-pause:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #fff !important;
    color: #fff !important;
}
.live_auction_control .live_control_header_actions .btn.btn-control-danger {
    background: #dc2626 !important;
    border: 1px solid #dc2626 !important;
    color: #fff !important;
    opacity: 1 !important;
    box-shadow: none !important;
}
.live_auction_control .live_control_header_actions .btn.btn-control-danger:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}
.live_auction_control .live_stage_actions .btn.btn-control-purple {
    background: #7b2fff !important;
    border: 1px solid #7b2fff !important;
    color: #fff !important;
    box-shadow: none !important;
}
.live_auction_control .live_stage_actions .btn.btn-control-outline.btn-control-unsold {
    background: transparent !important;
    border: 1px solid #ef4444 !important;
    color: #ef4444 !important;
    box-shadow: none !important;
}
.live_auction_control .live_lot_item .btn-set-next {
    background: transparent !important;
    border: 1px solid #a0e86f !important;
    color: #a0e86f !important;
}
.live_auction_control .live_hidden_action,
.live_auction_control .live_current_bid,
.live_auction_control .live_round_label {
    display: none !important;
}

/* Gender filter — must load after Bootstrap (reboot styles bare buttons) */
.live_auction_control .live_lots_toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.live_auction_control .live_lots_toolbar .live_lots_category_filter {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}
.live_auction_control .live_lots_gender_filter {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
    margin-bottom: 0;
}
.live_auction_control .live_lots_gender_btn {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    min-width: 52px;
    background: #161616 !important;
    border: 1px solid #2b2b2b !important;
    color: #a1a1aa !important;
    border-radius: 999px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.live_auction_control .live_lots_gender_btn:hover:not(.active) {
    border-color: #3f3f46 !important;
    color: #e4e4e7 !important;
}
.live_auction_control .live_lots_gender_btn.active {
    background: var(--green) !important;
    border-color: var(--green) !important;
    color: #0d0d0d !important;
}
.live_auction_control .live_lots_tab {
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none !important;
}
</style>
@endsection

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

<div class="live_auction_control users_list" id="live-auction-app">
    <div class="breadcrumb">
        <a href="{{ route('admin.dashboard.index') }}">Dashboard</a>
        <span>›</span>
        <span class="active">Auction</span>
    </div>

    <div class="live_control_header">
        <div class="live_control_header_left">
            <div class="live_control_title_row">
                <h2>Live Auction Control</h2>
                <span class="live_status_badge" id="live-status-badge">
                    {{ $league->isPaused() ? 'Paused' : 'Live' }}
                </span>
            </div>
            <span class="live_league_name" id="live-league-name">{{ $league->name }}</span>
        </div>
        <div class="live_control_header_actions">
            <a href="{{ route('auction.display', $league) }}" class="btn btn-control-outline btn-display-board" target="_blank" rel="noopener">
                Open Display Board
            </a>
            <a href="{{ route('auction.tv', $league) }}" class="btn btn-control-outline btn-display-board" target="_blank" rel="noopener">
                Open TV Display
            </a>
            <button type="button" class="btn btn-control-outline btn-control-pause" id="btn-pause-resume">
                {{ $league->isPaused() ? 'Resume Auction' : 'Pause Auction' }}
            </button>
            <button type="button" class="btn btn-control-danger btn-control-end" id="btn-end-auction">End Auction</button>
        </div>
    </div>

    <div class="live_auction_pool_stats auction-pool-stats-host auction-pool-stats-host--admin" id="auction-pool-stats" hidden aria-label="Pool availability by category"></div>

    <div class="live_control_grid">
        <aside class="live_lots_sidebar">
            <div class="live_lots_sidebar_head">
                <h4 class="live_lots_sidebar_title">Auction</h4>
            </div>
            <div class="live_lots_toolbar">
                <select id="lots-category-filter" class="live_lots_category_filter" aria-label="Category filter">
                    <option value="">Loading...</option>
                </select>
                <div class="live_lots_gender_filter" role="group" aria-label="Gender filter">
                    <button type="button" class="live_lots_gender_btn active" data-gender="1" aria-pressed="true">Male</button>
                    <button type="button" class="live_lots_gender_btn" data-gender="2" aria-pressed="false">Female</button>
                </div>
            </div>
            <div class="live_lots_tabs">
                <button type="button" class="live_lots_tab active" data-status="upcoming">Upcoming</button>
                <button type="button" class="live_lots_tab" data-status="sold">Sold</button>
                <button type="button" class="live_lots_tab" data-status="unsold">Unsold</button>
            </div>
            <div class="live_lots_search">
                <input type="search" id="lots-search" placeholder="Search Here..." autocomplete="off">
            </div>
            <div class="live_lots_list" id="lots-list"></div>
            <div class="live_lots_pagination" id="lots-pagination"></div>
        </aside>

        <section class="live_stage_panel">
            <div class="live_stage_status">
                <span class="live_stage_progress" id="live-lot-progress">—</span>
                <span class="live_stage_category" id="live-stage-category"></span>
            </div>

            <div class="live_stage_hero">
                <div class="live_current_player" id="current-player-card">
                    <p class="live_empty_state">No player on stage</p>
                </div>
                <div class="live_timer_group">
                    <div class="live_timer_wrap" id="live-timer-wrap">
                        <svg class="live_timer_svg" viewBox="0 0 120 120" aria-hidden="true">
                            <circle class="live_timer_track" cx="60" cy="60" r="52"></circle>
                            <circle class="live_timer_progress" id="live-timer-ring" cx="60" cy="60" r="52"></circle>
                        </svg>
                        <div class="live_timer" id="live-timer">--:--</div>
                    </div>
                    <div class="live_round_label" id="live-round-label"></div>
                </div>
            </div>

            <div class="live_current_bid" id="current-bid-card">
                <span class="label">Current Bid</span>
                <div class="bid_value" id="current-bid-value">—</div>
            </div>

            <div class="live_bid_history">
                <div class="live_bid_history_header">
                    <h4>Player Bid History</h4>
                    <span class="live_bid_history_count" id="bid-history-count"></span>
                </div>
                <div class="live_bid_history_list" id="bid-history-list"></div>
            </div>

            <div class="live_stage_actions">
                <div id="closing-assign-panel" class="live_closing_panel" hidden>
                    <p class="live_closing_panel_lead">No eligible team for auto-assign. Select a team to assign at the closing price.</p>
                    <div class="live_closing_panel_controls">
                        <select id="closing-assign-team" class="live_closing_team_select" aria-label="Assign to team"></select>
                        <button type="button" class="btn btn-control-purple" id="btn-closing-assign">Confirm Assign</button>
                    </div>
                </div>
                <button type="button" class="btn btn-control-outline btn-control-stage live_hidden_action" id="btn-start-lot" disabled>Put On Stage</button>
                <button type="button" class="btn btn-control-outline btn-control-stage" id="btn-skip-cooldown" hidden>Skip Cooldown</button>
                <button type="button" class="btn btn-control-purple" id="btn-mark-sold" disabled>Mark As Sold</button>
                <button type="button" class="btn btn-control-outline btn-control-unsold" id="btn-mark-unsold" disabled>Mark As Unsold</button>
                <button type="button" class="btn btn-control-outline btn-control-withdraw live_hidden_action" id="btn-withdraw-lot" disabled>Withdraw Player</button>
            </div>
        </section>

        <aside class="live_teams_sidebar">
            <h4>Bidding Status</h4>
            <div class="live_teams_list" id="teams-list"></div>
        </aside>
    </div>

    <section class="live_activity_feed">
        <h4>Live Activity Stream</h4>
        <div class="live_activity_list" id="activity-list"></div>
        <button type="button" class="btn btn-control-outline btn-sm" id="btn-load-more-activity">Load more</button>
    </section>
</div>

{{-- Mark Sold modal --}}
<div class="modal fade" id="soldModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered live_modal_dialog">
        <div class="modal-content live_modal live_modal_confirm live_modal_sold">
            <div class="modal-header live_modal_confirm_header">
                <div class="live_modal_title_group">
                    <span class="live_modal_header_icon live_modal_header_icon--purple" aria-hidden="true">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 1.5L9.8 5.7L14.3 6.2L11 9.3L11.8 14L8 11.8L4.2 14L5 9.3L1.7 6.2L6.2 5.7L8 1.5Z" fill="currentColor"/></svg>
                    </span>
                    <h5 class="modal-title">Mark as Sold</h5>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="sold-modal-body">
                <p>Loading player details...</p>
            </div>
            <div class="modal-footer live_modal_confirm_footer">
                <button type="button" class="btn live_modal_btn_cancel" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-control-purple" id="btn-confirm-sold">Confirm Sold</button>
            </div>
        </div>
    </div>
</div>

{{-- Mark Unsold modal --}}
<div class="modal fade" id="unsoldModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered live_modal_dialog">
        <div class="modal-content live_modal live_modal_confirm live_modal_unsold">
            <div class="modal-header live_modal_confirm_header">
                <div class="live_modal_title_group">
                    <span class="live_modal_header_icon live_modal_header_icon--unsold" aria-hidden="true">S</span>
                    <h5 class="modal-title">Mark as Unsold</h5>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="unsold-modal-body">
                <div id="unsold-player-preview"></div>
                <p class="live_modal_lead" id="unsold-modal-lead">Select the next action for this player:</p>
                <div class="live_modal_options">
                    <label class="live_modal_option">
                        <input type="radio" name="unsold_disposition" value="RETURN_TO_QUEUE" checked>
                        <span class="live_modal_radio_mark" aria-hidden="true"></span>
                        <span class="live_modal_option_content">
                            <strong>Return to Queue</strong>
                            <span class="live_modal_option_desc">Player will be available for bidding in the second round of auctions.</span>
                        </span>
                    </label>
                    <label class="live_modal_option">
                        <input type="radio" name="unsold_disposition" value="FINAL">
                        <span class="live_modal_radio_mark" aria-hidden="true"></span>
                        <span class="live_modal_option_content">
                            <strong>Move to Final Unsold List</strong>
                            <span class="live_modal_option_desc">Player will be permanently marked as unsold for the current season.</span>
                        </span>
                    </label>
                </div>
            </div>
            <div class="modal-footer live_modal_confirm_footer">
                <button type="button" class="btn live_modal_btn_cancel" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-control-purple" id="btn-confirm-unsold">Confirm Unsold</button>
            </div>
        </div>
    </div>
</div>

{{-- Withdraw Player modal --}}
<div class="modal fade" id="withdrawLotModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content live_modal">
            <div class="modal-header">
                <h5 class="modal-title">Withdraw Player</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Remove this player from the auction queue? Active bids will be voided.</p>
                <label class="form-label" for="withdraw-reason">Reason (optional)</label>
                <textarea id="withdraw-reason" class="form-control" rows="3" maxlength="255" placeholder="Optional reason"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-control-outline" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-control-danger" id="btn-confirm-withdraw">Withdraw</button>
            </div>
        </div>
    </div>
</div>

{{-- End Auction modal --}}
<div class="modal fade" id="endAuctionModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered live_modal_dialog">
        <div class="modal-content live_modal live_modal_confirm live_modal_end">
            <div class="modal-header live_modal_confirm_header">
                <div class="live_modal_title_group">
                    <span class="live_modal_header_icon live_modal_header_icon--warning" aria-hidden="true">
                        <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 1.5L16.5 14.5H1.5L9 1.5Z" stroke="currentColor" stroke-width="1.5" fill="none"/><path d="M9 6.5V10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="12.5" r="0.9" fill="currentColor"/></svg>
                    </span>
                    <h5 class="modal-title">End Live Auction?</h5>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="end-auction-summary">
                <p>Loading summary...</p>
            </div>
            <div class="modal-footer live_modal_end_footer">
                <button type="button" class="btn btn-control-purple" id="btn-confirm-end">End Auction</button>
                <button type="button" class="btn live_modal_btn_cancel live_modal_btn_cancel--link" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script>
    window.AUCTION_CONFIG = @json($auctionConfig);
    @php
        $iclPlaceholders = [
            'default' => placeholder_image_url('default'),
            'player' => placeholder_image_url('player'),
            'team' => placeholder_image_url('team'),
        ];
    @endphp
    @php
        $clockSyncVersion = @filemtime(public_path('assets/js/auction/auction-clock-sync.js')) ?: time();
        $timerThresholdsVersion = @filemtime(public_path('assets/js/auction/auction-timer-thresholds.js')) ?: time();
        $poolStatsVersion = @filemtime(public_path('assets/js/auction/auction-pool-stats.js')) ?: time();
        $poolStatsCssVersion = @filemtime(public_path('assets/css/auction-pool-stats.css')) ?: time();
        $liveControlVersion = @filemtime(public_path('assets/js/admin/live-auction-control.js')) ?: time();
    @endphp
    window.ICL_PLACEHOLDERS = @json($iclPlaceholders);
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
@include('partials.socket-io')
<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<script src="{{ asset('assets/js/admin/toast.js') }}"></script>
<script src="{{ asset('assets/js/admin/auction-errors.js') }}"></script>
<script src="{{ asset('assets/js/auction/auction-clock-sync.js') }}?v={{ $clockSyncVersion }}"></script>
<script src="{{ asset('assets/js/auction/auction-timer-thresholds.js') }}?v={{ $timerThresholdsVersion }}"></script>
<script src="{{ asset('assets/js/auction/auction-pool-stats.js') }}?v={{ $poolStatsVersion }}"></script>
<script src="{{ asset('assets/js/admin/live-auction-control.js') }}?v={{ $liveControlVersion }}"></script>
@endsection