{% extends "sidebar.html" %}

{% block title %}AstraOS — AyranTracker{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto px-4 py-6">

    <div id="searchSection" class="w-full flex flex-col items-center justify-center text-center my-12">
        <div class="mb-8">
            <span class="px-3 py-1 bg-purple-500/10 text-purple-400 border border-purple-500/20 rounded-full text-xs font-semibold uppercase tracking-wider">
                Live Match Analytics
            </span>
            <h1 class="text-3xl md:text-4xl font-black mt-4 mb-2 tracking-tight uppercase">
                Track Your <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-violet-300">Performance</span>
            </h1>
        </div>

        <div class="w-full max-w-xl bg-slate-950/60 p-5 rounded-xl border border-purple-900/30 shadow-2xl backdrop-blur-md">
            <form id="searchForm" class="flex flex-col sm:flex-row gap-2">
                <div class="flex-grow">
                    <input type="text" id="riotInput" placeholder="Riot ID #TAG (z.B. Drax#SWEAT)" required class="w-full bg-slate-900/90 border border-purple-900/40 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-purple-500 text-center sm:text-left">
                </div>
                <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white text-sm font-bold px-6 py-3 rounded-lg uppercase tracking-wider transition whitespace-nowrap">
                    Analyse
                </button>
            </form>
        </div>
    </div>

    <div id="profileSection" class="w-full hidden">

        <div class="bg-slate-950/60 border border-purple-900/30 rounded-2xl p-6 flex flex-col md:flex-row justify-between items-center gap-6 mb-6 backdrop-blur-md">
            <div class="flex items-center space-x-4 text-center md:text-left flex-col md:flex-row">
                <div id="playerCard" class="w-20 h-20 bg-purple-950 border border-purple-500/30 rounded-xl flex items-center justify-center text-2xl font-bold text-purple-300">VAL</div>
                <div>
                    <div class="flex items-center justify-center md:justify-start space-x-2">
                        <h2 id="displayPlayerName" class="text-2xl font-black tracking-wide">Player</h2>
                        <span id="displayPlayerTag" class="text-slate-400 font-bold bg-slate-900 px-2 py-0.5 rounded text-xs">#TAG</span>
                    </div>
                    <p class="text-xs text-slate-400 mt-1">Account Level: <span id="displayLevel" class="text-purple-400 font-bold">--</span></p>
                </div>
            </div>

            <div class="bg-slate-900/80 border border-purple-900/40 p-4 rounded-xl flex items-center space-x-4 min-w-[240px]">
                <div id="rankImageContainer" class="w-12 h-12 flex items-center justify-center bg-purple-950/40 border border-purple-900/20 rounded-lg p-1">
                    <img id="displayRankImage" src="" alt="Rank Icon" class="hidden w-full h-full object-contain">
                    <span id="rankFallbackIcon" class="text-xl">🏆</span>
                </div>
                <div>
                    <p class="text-[10px] text-slate-400 uppercase tracking-widest font-bold">Current Rank</p>
                    <p id="displayRank" class="text-lg font-black text-purple-300">Loading...</p>
                    <p id="displayRR" class="text-xs text-slate-500">-- RR</p>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <div class="bg-slate-950/40 border border-purple-950 p-4 rounded-xl">
                <p class="text-xs text-slate-400 font-semibold uppercase tracking-wider mb-1">Win Rate</p>
                <p id="calcWinrate" class="text-2xl font-black text-emerald-400">--</p>
            </div>
            <div class="bg-slate-950/40 border border-purple-950 p-4 rounded-xl">
                <p class="text-xs text-slate-400 font-semibold uppercase tracking-wider mb-1">Average K/D Ratio</p>
                <p id="calcKD" class="text-2xl font-black text-slate-100">--</p>
            </div>
            <div class="bg-slate-950/40 border border-purple-950 p-4 rounded-xl">
                <p class="text-xs text-slate-400 font-semibold uppercase tracking-wider mb-1">Best Agent (by KDA)</p>
                <p id="calcBestAgent" class="text-2xl font-black text-purple-400">--</p>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            <div class="lg:col-span-2 bg-slate-950/40 border border-purple-900/20 rounded-2xl p-5">
                <h3 id="matchHistoryHeader" class="text-sm font-bold uppercase tracking-wider mb-4 text-slate-300">Recent Matches</h3>
                <div id="matchHistoryContainer" class="space-y-2.5"></div>
            </div>

            <div class="bg-slate-950/40 border border-purple-900/20 rounded-2xl p-5">
                <h3 class="text-sm font-bold uppercase tracking-wider mb-4 text-slate-300">Played Agents Performance</h3>
                <div id="agentContainer" class="space-y-3"></div>
            </div>
        </div>

        <button onclick="window.location.reload()" class="mt-8 text-xs text-purple-400 hover:text-purple-300 uppercase font-bold transition flex items-center space-x-2 mx-auto">
            <span>← Neue Suche</span>
        </button>
    </div>
</div>

<script>
    document.getElementById('searchForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const rawInput = document.getElementById('riotInput').value.trim();
        if (!rawInput.includes('#')) {
            alert("Bitte gib deine ID im Format 'Name#Tag' an.");
            return;
        }

        const [name, tag] = rawInput.split('#').map(p => p.trim());
        if (!name || !tag) {
            alert("Name oder Tag unvollständig.");
            return;
        }

        const btn = this.querySelector('button[type="submit"]');
        btn.innerText = "Analyzing...";
        btn.disabled = true;

        try {
            const response = await fetch(`/api/v1/profile/${encodeURIComponent(name)}/${encodeURIComponent(tag)}?mode=competitive`);
            const data = await response.json();

            if (data.status === "success") {
                // Spieler- & Account-Daten binden
                document.getElementById('displayPlayerName').innerText = data.account.name;
                document.getElementById('displayPlayerTag').innerText = `#${data.account.tag.toUpperCase()}`;
                document.getElementById('displayLevel').innerText = data.account.level;
                document.getElementById('displayRank').innerText = data.rank.current_tier_name;
                document.getElementById('displayRR').innerText = `${data.rank.ranking_in_tier} RR`;

                // Dynamisches Einbinden des Rang-Bildes
                const rankImg = document.getElementById('displayRankImage');
                const rankFallback = document.getElementById('rankFallbackIcon');
                if (data.rank.rank_image_url) {
                    rankImg.src = data.rank.rank_image_url;
                    rankImg.classList.remove('hidden');
                    rankFallback.classList.add('hidden');
                } else {
                    rankImg.classList.add('hidden');
                    rankFallback.classList.remove('hidden');
                }

                if (data.account.card_url) {
                    const cardDiv = document.getElementById('playerCard');
                    cardDiv.style.backgroundImage = `url('${data.account.card_url}')`;
                    cardDiv.style.backgroundSize = 'cover';
                    cardDiv.innerText = '';
                }

                // Global berechnete Werte füllen
                document.getElementById('calcWinrate').innerText = data.calculated_stats.win_rate;
                document.getElementById('calcKD').innerText = data.calculated_stats.kd_ratio;
                document.getElementById('calcBestAgent').innerText = data.calculated_stats.best_agent;

                // Tabellen-Überschrift aktualisieren
                document.getElementById('matchHistoryHeader').innerText = `Recent Matches (Competitive - Last ${data.calculated_stats.matches_analyzed})`;

                // Matches-Liste befüllen (Hier wurden alle fehlerhaften Assets entfernt)
                const historyContainer = document.getElementById('matchHistoryContainer');
                historyContainer.innerHTML = '';

                if (data.matches.length === 0) {
                    historyContainer.innerHTML = '<p class="text-xs text-slate-500 p-4 text-center">Keine aktuellen Competitive Matches gefunden.</p>';
                } else {
                    data.matches.forEach(match => {
                        const borderColor = match.has_won ? 'border-emerald-500' : 'border-rose-500';
                        const textColor = match.has_won ? 'text-emerald-400' : 'text-rose-400';

                        let rrDisplay = "0 RR", rrClass = "text-slate-400 bg-slate-900 border border-slate-800";
                        if (match.mmr_change > 0) {
                            rrDisplay = `+${match.mmr_change} RR`;
                            rrClass = "text-emerald-400 bg-emerald-950/40 border border-emerald-900/30";
                        } else if (match.mmr_change < 0) {
                            rrDisplay = `${match.mmr_change} RR`;
                            rrClass = "text-rose-400 bg-rose-950/40 border border-rose-900/30";
                        }

                        const matchHTML = `
                            <div class="bg-slate-900/60 border-l-4 ${borderColor} rounded-r-xl p-3.5 flex justify-between items-center text-xs sm:text-sm transition hover:bg-slate-900/90">
                                <div>
                                    <span class="font-black ${textColor} tracking-wider mr-2">${match.has_won ? 'WIN' : 'LOSS'}</span>
                                    <span class="font-bold text-slate-200">${match.score}</span>
                                    <span class="text-slate-400 text-xs block mt-0.5">${match.map} • <span class="text-purple-300">${match.agent}</span></span>
                                </div>
                                <div class="text-center">
                                    <p class="text-[10px] text-slate-500 uppercase tracking-wider">K / D / A</p>
                                    <p class="font-bold text-slate-200">${match.kills} / <span class="text-rose-400/80">${match.deaths}</span> / ${match.assists}</p>
                                </div>
                                <div class="text-right flex flex-col items-end justify-center">
                                    <span class="font-semibold text-xs px-2.5 py-1 rounded-md ${rrClass}">
                                        ${rrDisplay}
                                    </span>
                                </div>
                            </div>
                        `;
                        historyContainer.insertAdjacentHTML('beforeend', matchHTML);
                    });
                }

                // Alle gespielten Agenten ausgeben
                const agentContainer = document.getElementById('agentContainer');
                agentContainer.innerHTML = '';
                if (data.all_agents.length === 0) {
                    agentContainer.innerHTML = '<p class="text-xs text-slate-500 text-center py-2">Keine Agenten-Daten.</p>';
                } else {
                    data.all_agents.forEach(agent => {
                        agentContainer.insertAdjacentHTML('beforeend', `
                            <div class="bg-slate-900/50 p-3 rounded-lg border border-purple-950/40 flex justify-between items-center">
                                <div>
                                    <p class="text-xs font-bold text-purple-300">${agent.name}</p>
                                    <p class="text-[10px] text-slate-500 mt-0.5">KDA Ø: <span class="text-slate-300 font-mono">${agent.kda}</span></p>
                                </div>
                                <span class="text-xs font-semibold text-slate-400 bg-slate-950 px-2 py-1 rounded">${agent.count}x gespielt</span>
                            </div>
                        `);
                    });
                }

                document.getElementById('searchSection').classList.add('hidden');
                document.getElementById('profileSection').classList.remove('hidden');
            } else {
                alert("Fehler: " + data.message);
            }
        } catch (error) {
            alert("API-Fehler oder Verbindungsabbruch.");
        } finally {
            btn.innerText = "Analyse";
            btn.disabled = false;
        }
    });
</script>
{% endblock %}