{% extends "base.html" %}

{% block title %}Dashboard - FinBot CTF{% endblock %}
{% block nav_dashboard %}active{% endblock %}

{% block content %}
<!-- Header -->
<div class="mb-8">
    <h1 class="text-3xl font-bold text-text-bright mb-2">
        Welcome back, <span class="glow-cyan">Hacker</span> <span class="ml-1">👋</span>
    </h1>
    <p class="text-text-secondary">Your AI security journey continues. Ready to exploit some vulnerabilities?</p>
</div>

<!-- Stats Row -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mb-8">
    <!-- Progress Ring Card -->
    <div class="holo-card p-6">
        <div class="flex items-center gap-6">
            <div class="relative">
                <svg class="progress-ring w-20 h-20" id="progress-ring">
                    <defs>
                        <linearGradient id="progress-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                            <stop offset="0%" style="stop-color:#00d4ff"/>
                            <stop offset="100%" style="stop-color:#06ffa5"/>
                        </linearGradient>
                    </defs>
                    <circle cx="40" cy="40" r="35" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="6"/>
                    <circle id="progress-circle" cx="40" cy="40" r="35" fill="none" stroke="url(#progress-gradient)" stroke-width="6"
                        stroke-dasharray="220" stroke-dashoffset="220" stroke-linecap="round"/>
                </svg>
                <div class="absolute inset-0 flex items-center justify-center">
                    <span id="progress-percent" class="text-2xl font-bold text-text-bright">--%</span>
                </div>
            </div>
            <div>
                <div class="text-sm text-text-secondary mb-1">Overall Progress</div>
                <div class="text-2xl font-bold text-text-bright"><span id="challenges-completed">--</span>/<span id="challenges-total">--</span></div>
                <div class="text-xs text-text-secondary">Challenges Complete</div>
            </div>
        </div>
    </div>

    <!-- Points Card -->
    <div class="stat-card cyan">
        <div class="text-sm text-text-secondary mb-2">Total Points</div>
        <div id="total-points" class="text-3xl font-bold text-text-bright mb-1 font-mono">--</div>
        <div class="flex items-center gap-2">
            <span id="points-today" class="text-ctf-accent text-sm"></span>
            <span id="points-today-label" class="text-text-secondary text-xs"></span>
        </div>
    </div>

    <!-- Badges Card -->
    <div class="stat-card purple">
        <div class="text-sm text-text-secondary mb-2">Badges Earned</div>
        <div class="text-3xl font-bold text-text-bright mb-1"><span id="badges-earned">--</span></div>
        <div class="flex items-center gap-2">
            <span id="badges-rarity-breakdown" class="text-xs"></span>
        </div>
    </div>

    <!-- Activity Streak Card -->
    <div class="stat-card green">
        <div class="text-sm text-text-secondary mb-2">Activity Streak</div>
        <div class="flex items-baseline gap-1">
            <span id="current-streak" class="text-3xl font-bold text-text-bright">--</span>
            <span class="text-text-secondary text-sm">days</span>
        </div>
        <div class="flex items-center gap-2 mt-1">
            <span id="streak-status" class="text-ctf-accent text-sm">consecutive days active</span>
        </div>
    </div>
</div>

<!-- Main Grid -->
<div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
    <!-- Active Challenges -->
    <div class="xl:col-span-2 glass-card p-6">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-xl font-bold text-text-bright">Active Challenges</h2>
            <a href="/ctf/challenges" class="text-ctf-primary hover:text-cyan-300 text-sm transition-colors">View All →</a>
        </div>

        <div id="active-challenges" class="space-y-4">
            <!-- Loading skeleton -->
            <div class="challenge-mini animate-pulse">
                <div class="w-12 h-12 rounded-xl bg-portal-bg-tertiary"></div>
                <div class="flex-1 space-y-2">
                    <div class="h-4 bg-portal-bg-tertiary rounded w-3/4"></div>
                    <div class="h-3 bg-portal-bg-tertiary rounded w-1/2"></div>
                </div>
            </div>
            <div class="challenge-mini animate-pulse">
                <div class="w-12 h-12 rounded-xl bg-portal-bg-tertiary"></div>
                <div class="flex-1 space-y-2">
                    <div class="h-4 bg-portal-bg-tertiary rounded w-3/4"></div>
                    <div class="h-3 bg-portal-bg-tertiary rounded w-1/2"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Badges -->
    <div class="glass-card p-6">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-xl font-bold text-text-bright">Recent Badges</h2>
            <a href="/ctf/badges" class="text-ctf-primary hover:text-cyan-300 text-sm transition-colors">View All →</a>
        </div>

        <div id="recent-badges" class="space-y-4">
            <!-- Loading skeleton -->
            <div class="badge-item animate-pulse">
                <div class="w-10 h-10 rounded-lg bg-portal-bg-tertiary"></div>
                <div class="flex-1 space-y-2">
                    <div class="h-4 bg-portal-bg-tertiary rounded w-2/3"></div>
                    <div class="h-3 bg-portal-bg-tertiary rounded w-1/2"></div>
                </div>
            </div>
        </div>

        <div id="no-badges" class="hidden text-center py-8">
            <div class="text-4xl mb-3">🏆</div>
            <p class="text-text-secondary text-sm">No badges earned yet</p>
            <p class="text-text-secondary text-xs mt-1">Complete challenges to earn badges!</p>
        </div>
    </div>

    <!-- Activity Feed -->
    <div class="xl:col-span-2 glass-card p-6">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-xl font-bold text-text-bright">Recent Activity</h2>
            <div class="live-indicator">
                <span class="live-dot"></span>
                <span class="text-sm text-text-secondary">Live</span>
            </div>
        </div>

        <div id="activity-feed" class="space-y-3">
            <!-- Loading skeleton -->
            <div class="activity-item animate-pulse">
                <div class="w-10 h-10 rounded-lg bg-portal-bg-tertiary"></div>
                <div class="flex-1 space-y-2">
                    <div class="h-4 bg-portal-bg-tertiary rounded w-1/2"></div>
                    <div class="h-3 bg-portal-bg-tertiary rounded w-3/4"></div>
                </div>
            </div>
        </div>

        <div id="no-activity" class="hidden text-center py-8">
            <div class="text-4xl mb-3">⚡</div>
            <p class="text-text-secondary text-sm">No activity yet</p>
            <p class="text-text-secondary text-xs mt-1">Start interacting with the vendor portal!</p>
        </div>

        <a href="/ctf/activity" class="mt-4 block text-center text-ctf-primary hover:text-cyan-300 text-sm py-2 border-t border-gray-800 transition-colors">
            View Full Activity Stream →
        </a>
    </div>

    <!-- Category Progress -->
    <div class="glass-card p-6">
        <h2 class="text-xl font-bold text-text-bright mb-6">Category Progress</h2>

        <div id="category-progress" class="space-y-4">
            <!-- Loading skeleton -->
            <div class="animate-pulse">
                <div class="flex justify-between mb-2">
                    <div class="h-3 bg-portal-bg-tertiary rounded w-1/3"></div>
                    <div class="h-3 bg-portal-bg-tertiary rounded w-1/6"></div>
                </div>
                <div class="h-2 bg-portal-bg-tertiary rounded"></div>
            </div>
            <div class="animate-pulse">
                <div class="flex justify-between mb-2">
                    <div class="h-3 bg-portal-bg-tertiary rounded w-1/3"></div>
                    <div class="h-3 bg-portal-bg-tertiary rounded w-1/6"></div>
                </div>
                <div class="h-2 bg-portal-bg-tertiary rounded"></div>
            </div>
        </div>

        <div id="no-categories" class="hidden text-center py-8">
            <div class="text-4xl mb-3">📊</div>
            <p class="text-text-secondary text-sm">No challenges available</p>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', path='js/ctf/dashboard.js') }}"></script>
{% endblock %}