{% extends "base.html" %}

{% block title %}Tactics Center{% endblock %}

{% block head %}
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<style>
    .player-token { cursor: grab; transition: transform 0.1s; }
    .player-token:active { cursor: grabbing; transform: scale(1.05); }
    #map-container { background-color: #1a1a1a; z-index: 1; }
    .leaflet-container { background: #1a1a1a; }
    .custom-scroll::-webkit-scrollbar { width: 6px; }
    .custom-scroll::-webkit-scrollbar-track { background: transparent; }
    .custom-scroll::-webkit-scrollbar-thumb { background-color: rgba(156, 163, 175, 0.5); border-radius: 20px; }
    [x-cloak] { display: none !important; }
</style>
{% endblock %}

{% block content %}
<div class="flex h-[calc(100vh-4rem)] overflow-hidden" x-data="tacticsApp()" x-cloak>
    
    <!-- Left Sidebar: Roster (Permanent) -->
    <div class="w-72 flex flex-col bg-white dark:bg-slate-800 border-r border-gray-200 dark:border-slate-700 shadow-xl z-20 shrink-0">
        <div class="p-4 border-b border-gray-200 dark:border-slate-700">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white">队员列表 (Roster)</h2>
            <p class="text-xs text-gray-500">拖拽队员至右侧功能区</p>
        </div>
        
        <div class="flex-1 overflow-y-auto custom-scroll p-4 space-y-2">
            <template x-for="player in roster" :key="player.steam_id_64">
                <div class="player-token group flex items-center p-2 rounded-lg border border-transparent hover:bg-gray-50 dark:hover:bg-slate-700 hover:border-gray-200 dark:hover:border-slate-600 transition select-none cursor-grab active:cursor-grabbing"
                     :data-id="player.steam_id_64"
                     draggable="true"
                     @dragstart="dragStart($event, player)">
                    
                    <template x-if="player.avatar_url">
                        <img :src="player.avatar_url" class="w-10 h-10 rounded-full border border-gray-200 dark:border-slate-600 object-cover pointer-events-none">
                    </template>
                    <template x-if="!player.avatar_url">
                        <div class="w-10 h-10 rounded-full bg-yrtv-100 flex items-center justify-center border border-gray-200 dark:border-slate-600 text-yrtv-600 font-bold text-xs pointer-events-none">
                            <span x-text="(player.username || player.name || player.steam_id_64).substring(0, 2).toUpperCase()"></span>
                        </div>
                    </template>
                    
                    <div class="ml-3 flex-1 min-w-0 pointer-events-none">
                        <div class="text-sm font-medium text-gray-900 dark:text-white truncate" x-text="player.username || player.name || player.steam_id_64"></div>
                        <!-- Tag Display -->
                        <div class="flex flex-wrap gap-1 mt-0.5">
                            <template x-for="tag in player.tags">
                                <span class="text-[10px] bg-gray-100 dark:bg-slate-600 text-gray-600 dark:text-gray-300 px-1 rounded" x-text="tag"></span>
                            </template>
                        </div>
                    </div>
                </div>
            </template>
            
            <template x-if="roster.length === 0">
                <div class="text-sm text-gray-500 text-center py-8">
                    暂无队员，请去 <a href="/teams" class="text-yrtv-600 hover:underline">Team</a> 页面添加。
                </div>
            </template>
        </div>
    </div>

    <!-- Right Content Area -->
    <div class="flex-1 flex flex-col min-w-0 bg-gray-50 dark:bg-gray-900">
        
        <!-- Top Navigation Tabs -->
        <div class="bg-white dark:bg-slate-800 border-b border-gray-200 dark:border-slate-700 px-4">
            <nav class="-mb-px flex space-x-8">
                <button @click="switchTab('analysis')" :class="{'border-yrtv-500 text-yrtv-600 dark:text-yrtv-400': activeTab === 'analysis', 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400': activeTab !== 'analysis'}" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition">
                    深度分析 (Deep Analysis)
                </button>
                <button @click="switchTab('data')" :class="{'border-yrtv-500 text-yrtv-600 dark:text-yrtv-400': activeTab === 'data', 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400': activeTab !== 'data'}" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition">
                    数据中心 (Data Center)
                </button>
                <button @click="switchTab('board')" :class="{'border-yrtv-500 text-yrtv-600 dark:text-yrtv-400': activeTab === 'board', 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400': activeTab !== 'board'}" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition">
                    战术白板 (Strategy Board)
                </button>
                <button @click="switchTab('economy')" :class="{'border-yrtv-500 text-yrtv-600 dark:text-yrtv-400': activeTab === 'economy', 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400': activeTab !== 'economy'}" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition">
                    经济计算 (Economy)
                </button>
            </nav>
        </div>

        <!-- Tab Contents -->
        <div class="flex-1 overflow-y-auto p-6 relative">
            
            <!-- 1. Deep Analysis -->
            <div x-show="activeTab === 'analysis'" class="space-y-6">
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">阵容化学反应分析</h3>
                
                <div class="flex flex-col space-y-8">
                    <!-- Drop Zone -->
                    <div class="bg-white dark:bg-slate-800 p-8 rounded-xl shadow-lg min-h-[320px] border border-gray-100 dark:border-slate-700" 
                         @dragover.prevent @drop="dropAnalysis($event)">
                        <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-6 flex justify-between items-center">
                            <span class="flex items-center gap-2">
                                <span class="bg-yrtv-100 text-yrtv-700 p-1 rounded">🏗️</span>
                                <span x-text="'阵容构建 (' + analysisLineup.length + '/5)'">阵容构建 (0/5)</span>
                            </span>
                            <button @click="clearAnalysis()" class="px-3 py-1.5 bg-red-50 text-red-600 rounded-md hover:bg-red-100 text-sm font-medium transition">清空全部</button>
                        </h4>
                        
                        <div class="grid grid-cols-5 gap-6">
                            <template x-for="(p, idx) in analysisLineup" :key="p.steam_id_64">
                                <div class="relative group bg-gradient-to-b from-gray-50 to-gray-100 dark:from-slate-700 dark:to-slate-800 p-4 rounded-xl border-2 border-yrtv-200 dark:border-slate-600 flex flex-col items-center justify-center h-48 shadow-sm transition-all duration-200 hover:-translate-y-1 hover:shadow-md">
                                    <button @click="removeFromAnalysis(idx)" class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center opacity-0 group-hover:opacity-100 transition shadow-sm">&times;</button>
                                    
                                    <!-- Avatar -->
                                    <template x-if="p.avatar_url">
                                        <img :src="p.avatar_url" class="w-20 h-20 rounded-full mb-3 object-cover border-4 border-white dark:border-slate-600 shadow-md">
                                    </template>
                                    <template x-if="!p.avatar_url">
                                        <div class="w-20 h-20 rounded-full mb-3 bg-white flex items-center justify-center text-yrtv-600 font-bold text-2xl border-4 border-gray-100 dark:border-slate-600 shadow-md">
                                            <span x-text="(p.username || p.name || p.steam_id_64).substring(0, 2).toUpperCase()"></span>
                                        </div>
                                    </template>

                                    <span class="text-sm font-bold truncate w-full text-center dark:text-white mb-1" x-text="p.username || p.name"></span>
                                    <div class="px-2.5 py-1 bg-white dark:bg-slate-900 rounded-full text-xs text-gray-500 dark:text-gray-400 shadow-inner border border-gray-100 dark:border-slate-700">
                                        Rating: <span class="font-bold text-yrtv-600" x-text="(p.stats?.basic_avg_rating || 0).toFixed(2)"></span>
                                    </div>
                                </div>
                            </template>
                            
                            <!-- Empty Slots -->
                            <template x-for="i in (5 - analysisLineup.length)">
                                <div class="border-2 border-dashed border-gray-300 dark:border-slate-600 rounded-xl flex flex-col items-center justify-center h-48 text-gray-400 text-sm bg-gray-50/30 dark:bg-slate-800/30 hover:bg-gray-50 dark:hover:bg-slate-800 transition cursor-default">
                                    <div class="text-4xl mb-2 opacity-30 text-gray-300">+</div>
                                    <span class="opacity-70">拖拽队员</span>
                                </div>
                            </template>
                        </div>
                    </div>

                    <!-- Results Area -->
                    <div class="bg-white dark:bg-slate-800 p-8 rounded-xl shadow-lg min-h-[240px] border border-gray-100 dark:border-slate-700">
                        <template x-if="!analysisResult">
                            <div class="h-48 flex flex-col items-center justify-center text-gray-400">
                                <div class="text-5xl mb-4 opacity-20 grayscale">📊</div>
                                <div class="text-lg font-medium text-gray-500">请先构建阵容，系统将自动分析</div>
                            </div>
                        </template>
                        <template x-if="analysisResult">
                            <div class="space-y-6">
                                <div class="flex justify-between items-end border-b border-gray-100 dark:border-slate-700 pb-4">
                                    <h4 class="font-bold text-xl text-gray-900 dark:text-white flex items-center gap-2">
                                        <span>📈</span> 综合评分
                                    </h4>
                                    <div class="flex items-baseline gap-2">
                                        <span class="text-sm text-gray-500">Team Rating</span>
                                        <span class="text-4xl font-black text-yrtv-600 tracking-tight" x-text="analysisResult.avg_stats.rating.toFixed(2)"></span>
                                    </div>
                                </div>
                                
                                <div class="grid grid-cols-3 gap-6 text-center">
                                    <div class="bg-gray-50 dark:bg-slate-700 p-4 rounded-xl border border-gray-100 dark:border-slate-600">
                                        <div class="text-gray-500 text-xs uppercase tracking-wider mb-1">Avg K/D</div>
                                        <div class="text-2xl font-bold dark:text-white" x-text="analysisResult.avg_stats.kd.toFixed(2)"></div>
                                    </div>
                                    <div class="bg-gray-50 dark:bg-slate-700 p-4 rounded-xl border border-gray-100 dark:border-slate-600">
                                        <div class="text-gray-500 text-xs uppercase tracking-wider mb-1">Avg ADR</div>
                                        <div class="text-2xl font-bold dark:text-white" x-text="analysisResult.avg_stats.adr.toFixed(1)"></div>
                                    </div>
                                    <div class="bg-gray-50 dark:bg-slate-700 p-4 rounded-xl border border-gray-100 dark:border-slate-600">
                                        <div class="text-gray-500 text-xs uppercase tracking-wider mb-1">Shared Matches</div>
                                        <div class="text-2xl font-bold dark:text-white" x-text="analysisResult.total_shared_matches"></div>
                                    </div>
                                </div>
                                
                                <div>
                                    <h5 class="text-sm font-bold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
                                        <span>🗓️</span> 共同比赛记录 (Shared Matches History)
                                    </h5>
                                    <div class="max-h-60 overflow-y-auto custom-scroll border border-gray-200 dark:border-slate-700 rounded-lg mb-6">
                                        <table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
                                            <thead class="bg-gray-50 dark:bg-slate-800 sticky top-0">
                                                <tr>
                                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Map</th>
                                                    <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Score</th>
                                                    <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Result</th>
                                                </tr>
                                            </thead>
                                            <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
                                                <template x-for="m in analysisResult.shared_matches" :key="m.match_id">
                                                    <tr class="hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors">
                                                        <td class="px-4 py-3 text-sm font-medium dark:text-gray-300" x-text="m.map_name"></td>
                                                        <td class="px-4 py-3 text-sm text-right dark:text-gray-400 font-mono" x-text="m.score_team1 + ':' + m.score_team2"></td>
                                                        <td class="px-4 py-3 text-sm text-right font-bold">
                                                            <span :class="m.is_win ? 'bg-green-100 text-green-800 px-2 py-0.5 rounded dark:bg-green-900 dark:text-green-200' : 'bg-red-100 text-red-800 px-2 py-0.5 rounded dark:bg-red-900 dark:text-red-200'" 
                                                                  x-text="m.result_str"></span>
                                                        </td>
                                                    </tr>
                                                </template>
                                            </tbody>
                                        </table>
                                        <template x-if="analysisResult.shared_matches.length === 0">
                                            <div class="p-8 text-center text-gray-400 bg-gray-50 dark:bg-slate-800">
                                                无共同比赛记录
                                            </div>
                                        </template>
                                    </div>
                                    
                                    <!-- Map Stats -->
                                    <h5 class="text-sm font-bold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
                                        <span>🗺️</span> 地图表现统计 (Map Performance)
                                    </h5>
                                    <div class="border border-gray-200 dark:border-slate-700 rounded-lg overflow-hidden">
                                        <table class="min-w-full divide-y divide-gray-200 dark:divide-slate-700">
                                            <thead class="bg-gray-50 dark:bg-slate-800">
                                                <tr>
                                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Map</th>
                                                    <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Matches</th>
                                                    <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Wins</th>
                                                    <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Win Rate</th>
                                                </tr>
                                            </thead>
                                            <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-slate-700">
                                                <template x-for="stat in analysisResult.map_stats" :key="stat.map_name">
                                                    <tr class="hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors">
                                                        <td class="px-4 py-2 text-sm font-medium dark:text-gray-300" x-text="stat.map_name"></td>
                                                        <td class="px-4 py-2 text-sm text-right dark:text-gray-400" x-text="stat.count"></td>
                                                        <td class="px-4 py-2 text-sm text-right text-green-600 font-bold" x-text="stat.wins"></td>
                                                        <td class="px-4 py-2 text-sm text-right font-bold dark:text-white">
                                                            <div class="flex items-center justify-end gap-2">
                                                                <span x-text="stat.win_rate.toFixed(1) + '%'"></span>
                                                                <div class="w-16 h-1.5 bg-gray-200 dark:bg-slate-600 rounded-full overflow-hidden">
                                                                    <div class="h-full bg-yrtv-500 rounded-full" :style="'width: ' + stat.win_rate + '%'"></div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </template>
                                            </tbody>
                                        </table>
                                        <template x-if="!analysisResult.map_stats || analysisResult.map_stats.length === 0">
                                            <div class="p-4 text-center text-gray-400 bg-gray-50 dark:bg-slate-800 text-sm">
                                                暂无地图数据
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            <!-- 2. Data Center -->
            {% include 'tactics/data.html' %}

            <!-- 3. Strategy Board -->
            <div x-show="activeTab === 'board'" class="h-full flex flex-col">
                <!-- Map Controls -->
                <div class="mb-4 flex justify-between items-center bg-white dark:bg-slate-800 p-3 rounded shadow">
                    <div class="flex space-x-2">
                        <select x-model="currentMap" @change="changeMap()" class="rounded border-gray-300 dark:bg-slate-700 dark:border-slate-600 dark:text-white text-sm">
                            <option value="de_mirage">Mirage</option>
                            <option value="de_inferno">Inferno</option>
                            <option value="de_dust2">Dust 2</option>
                            <option value="de_nuke">Nuke</option>
                            <option value="de_ancient">Ancient</option>
                            <option value="de_anubis">Anubis</option>
                            <option value="de_vertigo">Vertigo</option>
                        </select>
                        <button @click="clearBoard()" class="px-3 py-1 bg-red-100 text-red-700 rounded hover:bg-red-200 text-sm">清空 (Clear)</button>
                        <button @click="saveBoard()" class="px-3 py-1 bg-green-100 text-green-700 rounded hover:bg-green-200 text-sm">保存快照 (Save)</button>
                    </div>
                    <div class="text-sm text-gray-500">
                        在场人数: <span x-text="boardPlayers.length" class="font-bold text-yrtv-600"></span>
                    </div>
                </div>
                
                <!-- Map Area -->
                <div class="flex-1 relative bg-gray-900 rounded-lg overflow-hidden border border-gray-700" 
                     id="board-dropzone" 
                     @dragover.prevent 
                     @drop="dropBoard($event)">
                    <div id="map-container" class="w-full h-full"></div>
                </div>
            </div>

            <!-- 4. Economy -->
            <div x-show="activeTab === 'economy'" class="bg-white dark:bg-slate-800 shadow rounded-lg p-6">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">经济计算器 (Economy Calculator)</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">本回合结果</label>
                            <select x-model="econ.result" class="mt-1 block w-full rounded-md border-gray-300 dark:bg-slate-700 dark:text-white">
                                <option value="win">胜利 (Won)</option>
                                <option value="loss">失败 (Lost)</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">连败加成等级 (Loss Bonus)</label>
                            <select x-model="econ.lossBonus" class="mt-1 block w-full rounded-md border-gray-300 dark:bg-slate-700 dark:text-white">
                                <option value="0">$1400 (0)</option>
                                <option value="1">$1900 (1)</option>
                                <option value="2">$2400 (2)</option>
                                <option value="3">$2900 (3)</option>
                                <option value="4">$3400 (4+)</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">存活人数</label>
                            <input type="number" x-model="econ.surviving" min="0" max="5" class="mt-1 block w-full rounded-md border-gray-300 dark:bg-slate-700 dark:text-white">
                        </div>
                        
                        <div class="pt-4">
                            <div class="p-4 bg-gray-100 dark:bg-slate-700 rounded-lg">
                                <div class="text-sm text-gray-500 dark:text-gray-400">下回合收入预测</div>
                                <div class="text-3xl font-bold text-green-600 dark:text-green-400" x-text="'$' + calculateIncome()"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>

<!-- External Libs -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
function tacticsApp() {
    return {
        activeTab: 'analysis',
        roster: [],
        
        // Analysis State
        analysisLineup: [],
        analysisResult: null,
        debounceTimer: null,
        
        // Data Center State
        dataLineup: [],
        dataResult: [],
        searchQuery: '',
        radarChart: null,
        allMaps: ['de_mirage', 'de_inferno', 'de_dust2', 'de_nuke', 'de_ancient', 'de_anubis', 'de_vertigo'],
        mapStatsCache: {},
        isDraggingOverData: false,
        
        // Board State
        currentMap: 'de_mirage',
        map: null,
        markers: {},
        boardPlayers: [],
        
        // Economy State
        econ: {
            result: 'loss',
            lossBonus: '0',
            surviving: 0
        },
        
        init() {
            this.fetchRoster();
            
            // Auto-analyze when lineup changes
            this.$watch('analysisLineup', () => {
                if (this.debounceTimer) clearTimeout(this.debounceTimer);
                this.debounceTimer = setTimeout(() => {
                    if (this.analysisLineup.length > 0) {
                        this.analyzeLineup();
                    } else {
                        this.analysisResult = null;
                    }
                }, 300);
            });

            // Watch Data Lineup
            this.$watch('dataLineup', () => {
                this.comparePlayers();
            });

            // Init map on first board view, or delay
            this.$watch('activeTab', value => {
                if (value === 'board') {
                    this.$nextTick(() => {
                        if (!this.map) this.initMap();
                        else this.map.invalidateSize();
                    });
                }
            });
        },
        
        fetchRoster() {
            fetch('/teams/api/roster')
                .then(res => res.json())
                .then(data => {
                    this.roster = data.roster || [];
                });
        },
        
        switchTab(tab) {
            this.activeTab = tab;
        },
        
        // --- Drag & Drop Generic ---
        dragStart(event, player) {
            // Only send essential data to avoid circular references with Alpine proxies
            const payload = {
                steam_id_64: player.steam_id_64,
                username: player.username || player.name,
                name: player.name || player.username,
                avatar_url: player.avatar_url
            };
            event.dataTransfer.setData('text/plain', JSON.stringify(payload));
            event.dataTransfer.effectAllowed = 'copy';
        },
        
        // --- Data Center Logic ---
        searchPlayer() {
            if (!this.searchQuery) return;
            const q = this.searchQuery.toLowerCase();
            const found = this.roster.find(p => 
                (p.username && p.username.toLowerCase().includes(q)) || 
                (p.steam_id_64 && p.steam_id_64.includes(q))
            );
            if (found) {
                this.addToDataLineup(found);
                this.searchQuery = '';
            } else {
                alert('未找到玩家 (Locally)');
            }
        },

        addToDataLineup(player) {
            if (this.dataLineup.some(p => p.steam_id_64 === player.steam_id_64)) {
                alert('该选手已在对比列表中');
                return;
            }
            if (this.dataLineup.length >= 5) {
                alert('对比列表已满 (最多5人)');
                return;
            }
            this.dataLineup.push(player);
        },

        removeFromDataLineup(index) {
            this.dataLineup.splice(index, 1);
        },

        clearDataLineup() {
            this.dataLineup = [];
        },

        dropData(event) {
            this.isDraggingOverData = false;
            const data = event.dataTransfer.getData('text/plain');
            if (!data) return;
            try {
                const player = JSON.parse(data);
                this.addToDataLineup(player);
            } catch (e) {
                console.error("Drop Error:", e);
                alert("无法解析拖拽数据");
            }
        },
        
        comparePlayers() {
            if (this.dataLineup.length === 0) {
                this.dataResult = [];
                if (this.radarChart) {
                    this.radarChart.data.datasets = [];
                    this.radarChart.update();
                }
                return;
            }
            
            const ids = this.dataLineup.map(p => p.steam_id_64).join(',');
            
            // 1. Fetch Basic & Radar Stats
            fetch('/players/api/batch_stats?ids=' + ids)
                .then(res => res.json())
                .then(data => {
                    this.dataResult = data;
                    // Use $nextTick to ensure DOM update if needed, but for Chart.js usually direct call is fine.
                    // However, dataResult is reactive. Let's call update explicitly.
                    this.$nextTick(() => {
                        this.updateRadarChart();
                    });
                });

            // 2. Fetch Map Stats
            fetch('/players/api/batch_map_stats?ids=' + ids)
                .then(res => res.json())
                .then(mapData => {
                    this.mapStatsCache = mapData; 
                });
        },

        getMapStat(sid, mapName) {
            if (!this.mapStatsCache[sid]) return null;
            return this.mapStatsCache[sid].find(m => m.map_name === mapName);
        },

        getPlayerColor(idx) {
            const colors = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6'];
            return colors[idx % colors.length];
        },
        
        getRatingColor(rating) {
            if (rating >= 1.2) return 'text-red-500';
            if (rating >= 1.05) return 'text-green-600';
            return 'text-gray-500';
        },

        updateRadarChart() {
            // Force destroy to avoid state issues (fullSize error)
            if (this.radarChart) {
                this.radarChart.destroy();
                this.radarChart = null;
            }

            const canvas = document.getElementById('dataRadarChart');
            if (!canvas) return; // Tab might not be visible yet

            // Unwrap proxy if needed
            const rawData = JSON.parse(JSON.stringify(this.dataResult));
            
            const datasets = rawData.map((p, idx) => {
                const color = this.getPlayerColor(idx);
                const d = [
                    p.radar.BAT || 0, p.radar.PTL || 0, p.radar.HPS || 0, 
                    p.radar.SIDE || 0, p.radar.UTIL || 0, p.radar.STA || 0
                ];
                
                return {
                    label: p.username,
                    data: d,
                    borderColor: color,
                    backgroundColor: color + '20',
                    borderWidth: 2,
                    pointRadius: 3
                };
            });

            // Recreate Chart with Profile-aligned config
            const ctx = canvas.getContext('2d');
            this.radarChart = new Chart(ctx, {
                type: 'radar',
                data: {
                    labels: ['BAT (火力)', 'PTL (手枪)', 'HPS (抗压)', 'SIDE (阵营)', 'UTIL (道具)', 'STA (稳定)'],
                    datasets: datasets
                },
                options: {
                    maintainAspectRatio: false,
                    scales: {
                        r: {
                            min: 0,
                            max: 100,
                            ticks: { 
                                display: false, // Cleaner look like profile
                                stepSize: 20 
                            },
                            pointLabels: {
                                font: { size: 12, weight: 'bold' },
                                color: (ctx) => document.documentElement.classList.contains('dark') ? '#cbd5e1' : '#374151'
                            },
                            grid: {
                                color: (ctx) => document.documentElement.classList.contains('dark') ? 'rgba(51, 65, 85, 0.5)' : 'rgba(229, 231, 235, 0.8)'
                            },
                            angleLines: {
                                color: (ctx) => document.documentElement.classList.contains('dark') ? 'rgba(51, 65, 85, 0.5)' : 'rgba(229, 231, 235, 0.8)'
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                color: (ctx) => document.documentElement.classList.contains('dark') ? '#fff' : '#000',
                                usePointStyle: true,
                                padding: 20
                            }
                        }
                    }
                }
            });
        },

        initRadarChart() {
            const canvas = document.getElementById('dataRadarChart');
            if (!canvas) return; // Tab might not be visible yet
            
            const ctx = canvas.getContext('2d');
            this.radarChart = new Chart(ctx, {
                type: 'radar',
                data: {
                    labels: ['BAT (火力)', 'PTL (手枪)', 'HPS (抗压)', 'SIDE (阵营)', 'UTIL (道具)', 'STA (稳定)'],
                    datasets: []
                },
                options: {
                    scales: {
                        r: {
                            min: 0,
                            max: 100,
                            ticks: { display: false, stepSize: 20 },
                            pointLabels: {
                                font: { size: 12, weight: 'bold' },
                                color: (ctx) => document.documentElement.classList.contains('dark') ? '#cbd5e1' : '#374151'
                            },
                            grid: {
                                color: (ctx) => document.documentElement.classList.contains('dark') ? '#334155' : '#e5e7eb'
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            labels: {
                                color: (ctx) => document.documentElement.classList.contains('dark') ? '#fff' : '#000'
                            }
                        }
                    },
                    maintainAspectRatio: false
                }
            });
        },

        // --- Analysis Logic ---
        dropAnalysis(event) {
            const data = event.dataTransfer.getData('text/plain');
            if (!data) return;
            const player = JSON.parse(data);
            
            // Check duplicates
            if (this.analysisLineup.some(p => p.steam_id_64 === player.steam_id_64)) return;
            
            // Limit 5
            if (this.analysisLineup.length >= 5) return;
            
            this.analysisLineup.push(player);
        },
        
        removeFromAnalysis(index) {
            this.analysisLineup.splice(index, 1);
        },
        
        clearAnalysis() {
            this.analysisLineup = [];
            this.analysisResult = null;
        },
        
        analyzeLineup() {
            const ids = this.analysisLineup.map(p => p.steam_id_64);
            fetch('/tactics/api/analyze', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({steam_ids: ids})
            })
            .then(res => res.json())
            .then(data => {
                this.analysisResult = data;
            });
        },
        
        // --- Board Logic ---
        initMap() {
            this.map = L.map('map-container', {
                crs: L.CRS.Simple,
                minZoom: -2,
                maxZoom: 2,
                zoomControl: true,
                attributionControl: false
            });
            this.loadMapImage();
        },
        
        loadMapImage() {
            const mapUrls = {
                'de_mirage': 'https://static.wikia.nocookie.net/cswikia/images/e/e3/Mirage_CS2_Radar.png',
                'de_inferno': 'https://static.wikia.nocookie.net/cswikia/images/7/77/Inferno_CS2_Radar.png',
                'de_dust2': 'https://static.wikia.nocookie.net/cswikia/images/0/03/Dust2_CS2_Radar.png',
                'de_nuke': 'https://static.wikia.nocookie.net/cswikia/images/1/14/Nuke_CS2_Radar.png',
                'de_ancient': 'https://static.wikia.nocookie.net/cswikia/images/1/16/Ancient_CS2_Radar.png',
                'de_anubis': 'https://static.wikia.nocookie.net/cswikia/images/2/22/Anubis_CS2_Radar.png',
                'de_vertigo': 'https://static.wikia.nocookie.net/cswikia/images/2/23/Vertigo_CS2_Radar.png'
            };
            const url = mapUrls[this.currentMap] || mapUrls['de_mirage'];
            const bounds = [[0,0], [1024,1024]];
            
            this.map.eachLayer((layer) => { this.map.removeLayer(layer); });
            L.imageOverlay(url, bounds).addTo(this.map);
            this.map.fitBounds(bounds);
        },
        
        changeMap() {
            this.loadMapImage();
            this.clearBoard();
        },
        
        dropBoard(event) {
            const data = event.dataTransfer.getData('text/plain');
            if (!data) return;
            const player = JSON.parse(data);
            
            const container = document.getElementById('map-container');
            const rect = container.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            const point = this.map.containerPointToLatLng([x, y]);
            
            this.addMarker(player, point);
        },
        
        addMarker(player, latlng) {
            if (this.markers[player.steam_id_64]) {
                this.markers[player.steam_id_64].setLatLng(latlng);
            } else {
                const displayName = player.username || player.name || player.steam_id_64;
                const iconHtml = `
                    <div class="flex flex-col items-center justify-center transform hover:scale-110 transition duration-200">
                        ${player.avatar_url ? 
                            `<img src="${player.avatar_url}" class="w-8 h-8 rounded-full border-2 border-white shadow-lg box-content object-cover">` : 
                            `<div class="w-8 h-8 rounded-full bg-yrtv-100 border-2 border-white shadow-lg box-content flex items-center justify-center text-yrtv-600 font-bold text-[10px]">${(player.username || player.name).substring(0, 2).toUpperCase()}</div>`
                        }
                        <span class="mt-1 text-[10px] font-bold text-white bg-black/60 px-1.5 py-0.5 rounded backdrop-blur-sm whitespace-nowrap overflow-hidden max-w-[80px] text-ellipsis">
                            ${displayName}
                        </span>
                    </div>
                `;
                const icon = L.divIcon({ className: 'bg-transparent', html: iconHtml, iconSize: [60, 60], iconAnchor: [30, 30] });
                
                const marker = L.marker(latlng, { icon: icon, draggable: true }).addTo(this.map);
                this.markers[player.steam_id_64] = marker;
                this.boardPlayers.push(player);
            }
        },
        
        clearBoard() {
            for (let id in this.markers) { this.map.removeLayer(this.markers[id]); }
            this.markers = {};
            this.boardPlayers = [];
        },
        
        saveBoard() {
            const title = prompt("请输入战术标题:", "New Strat " + new Date().toLocaleTimeString());
            if (!title) return;
            
            const markerData = [];
            for (let id in this.markers) {
                const m = this.markers[id];
                markerData.push({ id: id, lat: m.getLatLng().lat, lng: m.getLatLng().lng });
            }
            
            fetch('/tactics/save_board', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ title: title, map_name: this.currentMap, markers: markerData })
            })
            .then(r => r.json())
            .then(data => alert(data.success ? "保存成功" : "保存失败"));
        },
        
        // --- Economy Logic ---
        calculateIncome() {
            let base = 0;
            const lbLevel = parseInt(this.econ.lossBonus);
            
            if (this.econ.result === 'win') {
                base = 3250 + (300 * this.econ.surviving); // Simplified estimate
            } else {
                // Loss base
                const lossAmounts = [1400, 1900, 2400, 2900, 3400];
                base = lossAmounts[Math.min(lbLevel, 4)];
            }
            return base;
        }
    }
}
</script>
{% endblock %}