{% extends "base.html" %}

{% block nav_challenges %}active{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<div class="flex items-center gap-2 text-sm mb-6">
    <a href="/ctf/challenges" class="text-text-secondary hover:text-ctf-primary transition-colors">Challenges</a>
    <span class="text-text-secondary">/</span>
    <span id="breadcrumb-category" class="text-text-secondary">--</span>
    <span class="text-text-secondary">/</span>
    <span id="breadcrumb-title" class="text-text-bright">Loading...</span>
</div>

<!-- Loading State -->
<div id="loading-state" class="grid grid-cols-3 gap-8">
    <div class="col-span-2 space-y-6">
        <div class="glass-card overflow-hidden">
            <div class="h-48 ctf-skeleton"></div>
            <div class="p-8 space-y-4">
                <div class="ctf-skeleton h-8 w-48"></div>
                <div class="ctf-skeleton h-10 w-3/4"></div>
                <div class="ctf-skeleton h-4 w-full"></div>
                <div class="ctf-skeleton h-4 w-full"></div>
                <div class="ctf-skeleton h-4 w-2/3"></div>
            </div>
        </div>
    </div>
    <div class="space-y-6">
        <div class="glass-card p-6">
            <div class="ctf-skeleton h-12 w-full mb-4"></div>
            <div class="ctf-skeleton h-4 w-3/4"></div>
        </div>
    </div>
</div>

<!-- Error State -->
<div id="error-state" class="hidden">
    <div class="glass-card p-8 text-center max-w-md mx-auto">
        <div class="text-4xl mb-4">❌</div>
        <h3 class="text-lg font-semibold text-text-bright mb-2">Challenge Not Found</h3>
        <p class="text-text-secondary text-sm mb-4">The challenge you're looking for doesn't exist or has been removed.</p>
        <a href="/ctf/challenges" class="action-btn inline-flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
            </svg>
            Browse Challenges
        </a>
    </div>
</div>

<!-- Challenge Content -->
<div id="challenge-content" class="hidden">
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
        <!-- Main Content Column -->
        <div class="xl:col-span-2 space-y-6">
            <!-- Hero Card -->
            <div class="glass-card overflow-hidden">
                <div id="challenge-hero" class="challenge-hero">
                    <span id="challenge-icon" class="icon">🎯</span>
                </div>

                <div class="p-8">
                    <!-- Meta Row -->
                    <div class="flex items-start justify-between mb-6">
                        <div>
                            <div class="flex items-center gap-3 mb-3">
                                <span id="difficulty-badge" class="diff-beginner px-3 py-1 rounded-lg text-sm text-white font-medium">Beginner</span>
                                <span class="text-text-secondary">•</span>
                                <span id="points-display" class="text-ctf-primary font-mono font-bold text-xl">100 pts</span>
                            </div>
                            <h1 id="challenge-title" class="text-3xl font-bold text-text-bright mb-2">Challenge Title</h1>
                            <p id="challenge-subtitle" class="text-text-secondary">Category: --</p>
                        </div>
                    </div>

                    <!-- Tags -->
                    <div id="tags-container" class="flex flex-wrap gap-2 mb-6"></div>

                    <!-- Description -->
                    <div class="prose prose-invert max-w-none">
                        <h3 class="text-lg font-semibold text-text-bright mb-3">Description</h3>
                        <div id="challenge-description" class="text-text-primary leading-relaxed"></div>
                    </div>
                </div>
            </div>

            <!-- Hints Section -->
            <div id="hints-section" class="glass-card p-6 hidden">
                <h2 class="text-xl font-bold text-text-bright mb-2">💡 Hints</h2>
                <p class="text-text-secondary text-sm mb-4">Stuck? Unlock hints to get guidance. Each hint costs points.</p>
                <div id="hints-list" class="space-y-3"></div>
            </div>

            <!-- Resources Section -->
            <div id="resources-section" class="glass-card p-6 hidden">
                <h2 class="text-xl font-bold text-text-bright mb-2">📚 Educational Resources</h2>
                <p class="text-text-secondary text-sm mb-4">Learn more about this vulnerability and how to defend against it.</p>
                <div id="resources-list" class="space-y-3"></div>
            </div>
        </div>

        <!-- Sidebar Column -->
        <div class="space-y-6">
            <!-- Status Banner (shown when completed or in progress) -->
            <div id="status-banner" class="hidden glass-card p-4">
                <div class="flex items-center gap-3">
                    <div id="status-icon" class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0"></div>
                    <div class="flex-1 min-w-0">
                        <div id="status-title" class="font-semibold text-sm"></div>
                        <div id="status-message" class="text-xs opacity-80"></div>
                    </div>
                </div>
            </div>

            <!-- Action Card -->
            <div class="glass-card p-6 text-center">
                <a href="/vendor/dashboard" class="action-btn inline-block w-full mb-4">
                    Go to Vendor Portal →
                </a>
                <p class="text-sm text-text-secondary">Interact with the AI agent to attempt this challenge</p>
            </div>

            <!-- Your Progress Card -->
            <div class="glass-card p-6">
                <h3 class="font-semibold text-text-bright mb-4">Your Progress</h3>

                <div class="grid grid-cols-2 gap-3 mb-6">
                    <div class="stat-box">
                        <div id="stat-attempts" class="text-2xl font-bold text-text-bright">0</div>
                        <div class="text-xs text-text-secondary">Attempts</div>
                    </div>
                    <div class="stat-box">
                        <div id="stat-status" class="text-2xl font-bold text-text-secondary">-</div>
                        <div class="text-xs text-text-secondary">Status</div>
                    </div>
                    <div class="stat-box">
                        <div id="stat-hints-used" class="text-2xl font-bold text-text-secondary">0</div>
                        <div class="text-xs text-text-secondary">Hints Used</div>
                    </div>
                    <div class="stat-box">
                        <div id="stat-hints-cost" class="text-2xl font-bold text-ctf-warning">0</div>
                        <div class="text-xs text-text-secondary">Pts Spent</div>
                    </div>
                </div>

                <!-- Check Progress Button (if not completed) -->
                <button id="check-progress-btn" onclick="checkChallenge()" class="w-full py-3 rounded-lg bg-portal-bg-tertiary border border-ctf-primary/20 text-ctf-primary font-medium hover:bg-ctf-primary/10 transition-colors flex items-center justify-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    Check Progress
                </button>

                <!-- Check Result -->
                <div id="check-result" class="hidden mt-4 p-4 rounded-lg"></div>
            </div>

            <!-- Last Attempt Card (in-progress challenges) -->
            <div id="last-attempt-section" class="glass-card hidden">
                <button id="last-attempt-toggle" onclick="toggleLastAttempt()" class="w-full flex items-center justify-between p-4 text-left hover:bg-white/[0.02] transition-colors rounded-xl">
                    <div class="flex items-center gap-2">
                        <span class="text-sm">🔎</span>
                        <span class="text-sm font-medium text-text-secondary">Last Attempt Result</span>
                    </div>
                    <svg id="last-attempt-chevron" class="w-4 h-4 text-text-secondary transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div id="last-attempt-body" class="hidden px-4 pb-4">
                    <div id="last-attempt-content" class="space-y-0.5"></div>
                </div>
            </div>

            <!-- Evidence Card (collapsed by default, completed only) -->
            <div id="evidence-section" class="glass-card hidden">
                <button id="evidence-toggle" onclick="toggleEvidence()" class="w-full flex items-center justify-between p-4 text-left hover:bg-white/[0.02] transition-colors rounded-xl">
                    <div class="flex items-center gap-2">
                        <span class="text-sm">🔍</span>
                        <span id="evidence-label" class="text-sm font-medium text-text-secondary">Show Evidence of Completion</span>
                    </div>
                    <svg id="evidence-chevron" class="w-4 h-4 text-text-secondary transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div id="evidence-body" class="hidden px-4 pb-4">
                    <div id="evidence-summary" class="space-y-0.5 mb-4"></div>
                    <div id="evidence-details" class="space-y-0.5"></div>
                </div>
            </div>

            <!-- Prerequisites Card -->
            <div id="prerequisites-card" class="glass-card p-6 hidden">
                <h3 class="font-semibold text-text-bright mb-4">Prerequisites</h3>
                <div id="prerequisites-list"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .challenge-hero {
        position: relative;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .challenge-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.1) 0%, transparent 50%);
    }

    .challenge-hero .icon {
        font-size: 5rem;
        filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.5));
        z-index: 2;
    }

    .challenge-hero .hero-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .challenge-hero::before {
        z-index: 1;
        pointer-events: none;
    }

    .challenge-hero.injection { background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(249, 115, 22, 0.3)); }
    .challenge-hero.escalation { background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(236, 72, 153, 0.3)); }
    .challenge-hero.exfiltration { background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(16, 185, 129, 0.3)); }
    .challenge-hero.dos { background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(99, 102, 241, 0.3)); }
    .challenge-hero.default { background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(124, 58, 237, 0.2)); }

    .mitre-tag {
        background: rgba(6, 255, 165, 0.2);
        border: 1px solid rgba(6, 255, 165, 0.3);
        color: #06ffa5;
        padding: 4px 12px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
    }

    .hint-card {
        background: rgba(255, 184, 0, 0.1);
        border: 1px solid rgba(255, 184, 0, 0.2);
        border-radius: 12px;
        overflow: hidden;
    }

    .hint-card.locked {
        background: rgba(100, 100, 100, 0.1);
        border-color: rgba(100, 100, 100, 0.2);
    }

    .hint-header {
        display: flex;
        align-items: center;
        padding: 16px;
    }

    .hint-content {
        padding: 12px 16px 16px;
        border-top: 1px solid rgba(255, 184, 0, 0.1);
    }

    .resource-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px;
        background: rgba(21, 21, 32, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        transition: all 0.2s;
    }

    .resource-link:hover {
        border-color: rgba(0, 212, 255, 0.3);
        background: rgba(0, 212, 255, 0.05);
    }

    .evidence-row {
        display: flex;
        gap: 8px;
        padding: 7px 10px;
        border-radius: 6px;
        font-size: 13px;
    }

    .evidence-row:nth-child(odd) {
        background: rgba(21, 21, 32, 0.4);
    }

    .evidence-key {
        flex: 0 0 120px;
        color: var(--text-secondary, #888);
        font-weight: 500;
        word-break: break-word;
        font-size: 12px;
    }

    .evidence-value {
        flex: 1;
        color: var(--text-primary, #ccc);
        word-break: break-word;
        white-space: pre-wrap;
    }

    .evidence-value .nested-list {
        list-style: disc;
        padding-left: 1.25rem;
        margin: 0;
    }

    .evidence-value .nested-list li {
        margin-bottom: 2px;
    }


    #evidence-chevron.rotated,
    #last-attempt-chevron.rotated {
        transform: rotate(180deg);
    }

    .stat-box {
        text-align: center;
        padding: 16px;
        background: rgba(21, 21, 32, 0.5);
        border-radius: 12px;
    }

    .action-btn {
        background: linear-gradient(135deg, var(--vendor-primary), var(--vendor-secondary));
        padding: 16px 32px;
        border-radius: 12px;
        font-weight: 600;
        color: white;
        transition: all 0.3s;
        box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3);
        text-align: center;
    }

    .action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px rgba(0, 212, 255, 0.4);
    }

    .prose p {
        margin-bottom: 1rem;
    }

    .prose strong {
        color: var(--text-bright, #f0f0f0);
        font-weight: 600;
    }

    .prose h3 {
        margin-top: 1.5rem;
    }

    .prose ul {
        list-style: disc;
        padding-left: 1.5rem;
        margin-top: 0.5rem;
    }

    .prose ol {
        list-style: decimal;
        padding-left: 1.5rem;
        margin-top: 0.5rem;
    }

    .prose li {
        margin-bottom: 0.5rem;
    }

    .prose a {
        color: var(--vendor-primary);
    }

    .prose a:hover {
        text-decoration: underline;
    }

    .prose code {
        background: rgba(255, 255, 255, 0.1);
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 0.875em;
    }
</style>
{% endblock %}

{% block extra_js %}
<script>
const challengeId = "{{ challenge_id }}";
let challengeData = null;

// Category configuration
const CATEGORY_CONFIG = {
    'prompt_injection': { icon: '💉', class: 'injection' },
    'prompt-injection': { icon: '💉', class: 'injection' },
    'data_exfiltration': { icon: '📤', class: 'exfiltration' },
    'data-exfiltration': { icon: '📤', class: 'exfiltration' },
    'privilege_escalation': { icon: '🔓', class: 'escalation' },
    'privilege-escalation': { icon: '🔓', class: 'escalation' },
    'denial_of_service': { icon: '💥', class: 'dos' },
    'denial-of-service': { icon: '💥', class: 'dos' },
};

document.addEventListener('DOMContentLoaded', loadChallenge);

async function loadChallenge() {
    try {
        challengeData = await CTF.getChallenge(challengeId);
        renderChallenge(challengeData);
    } catch (error) {
        console.error('Failed to load challenge:', error);
        document.getElementById('loading-state').classList.add('hidden');
        document.getElementById('error-state').classList.remove('hidden');
    }
}

function renderChallenge(ch) {
    // Hide loading, show content
    document.getElementById('loading-state').classList.add('hidden');
    document.getElementById('challenge-content').classList.remove('hidden');

    // Breadcrumb
    document.getElementById('breadcrumb-category').textContent = formatCategoryName(ch.category);
    document.getElementById('breadcrumb-title').textContent = ch.title;

    // Hero
    const categoryConfig = CATEGORY_CONFIG[ch.category] || { icon: '🎯', class: 'default' };
    const hero = document.getElementById('challenge-hero');
    hero.className = 'challenge-hero ' + categoryConfig.class;
    const iconEl = document.getElementById('challenge-icon');
    iconEl.textContent = categoryConfig.icon;

    if (ch.image_url) {
        iconEl.classList.add('hidden');
        const img = document.createElement('img');
        img.src = `/static/images/ctf/challenges/${ch.image_url}`;
        img.alt = '';
        img.className = 'hero-image';
        img.onerror = () => { img.remove(); iconEl.classList.remove('hidden'); };
        hero.insertBefore(img, hero.firstChild);
    }

    // Meta
    const diffBadge = document.getElementById('difficulty-badge');
    diffBadge.textContent = ch.difficulty;
    diffBadge.className = `diff-${ch.difficulty} px-3 py-1 rounded-lg text-sm text-white font-medium`;

    if (ch.points_modifier != null && ch.points_modifier < 1.0) {
        const pctPenalty = Math.round((1 - ch.points_modifier) * 100);
        document.getElementById('points-display').innerHTML =
            `<span class="line-through opacity-50">${ch.points}</span> ` +
            `<span class="text-ctf-warning">${ch.effective_points} pts</span> ` +
            `<span class="text-xs font-normal text-ctf-danger">(-${pctPenalty}% penalty)</span>`;
    } else {
        document.getElementById('points-display').textContent = `${ch.points} pts`;
    }
    document.getElementById('challenge-title').textContent = ch.title;
    document.getElementById('challenge-subtitle').textContent = `Category: ${formatCategoryName(ch.category)}${ch.subcategory ? ' → ' + formatCategoryName(ch.subcategory) : ''}`;

    // Tags
    const tagsContainer = document.getElementById('tags-container');
    let tagsHtml = '';
    const TAG_CONFIG = {
        owasp_llm:     { css: 'owasp-tag', prefix: 'OWASP ' },
        owasp_agentic: { css: 'owasp-tag', prefix: 'OWASP ' },
        cwe:           { css: 'cwe-tag',   prefix: '' },
        mitre_atlas:   { css: 'mitre-tag', prefix: 'MITRE ' },
    };
    if (ch.labels) {
        for (const [group, items] of Object.entries(ch.labels)) {
            const list = Array.isArray(items) ? items : [items];
            if (list.length === 0) continue;
            const config = TAG_CONFIG[group] || { css: 'owasp-tag', prefix: '' };
            tagsHtml += list.map(l => {
                const label = typeof l === 'object' ? Object.entries(l).map(([k, v]) => `${k}: ${v}`).join(', ') : l;
                return `<span class="${config.css} px-3 py-1 rounded-lg text-sm font-medium">${config.prefix}${escapeHtml(label)}</span>`;
            }).join('');
        }
    }
    tagsContainer.innerHTML = tagsHtml;

    // Description
    document.getElementById('challenge-description').innerHTML = formatDescription(ch.description);

    // Status banner
    if (ch.status === 'completed') {
        let bannerMsg = `Completed on ${new Date(ch.completed_at).toLocaleDateString()}`;
        if (ch.points_modifier != null && ch.points_modifier < 1.0) {
            const pctPenalty = Math.round((1 - ch.points_modifier) * 100);
            bannerMsg += ` · ${ch.effective_points}/${ch.points} pts (${pctPenalty}% penalty for prompt injection)`;
        }
        showStatusBanner('completed', 'Challenge Completed!', bannerMsg);
        document.getElementById('check-progress-btn').classList.add('hidden');
    } else if (ch.status === 'in_progress') {
        showStatusBanner('in_progress', 'In Progress', `${ch.attempts} attempts so far`);
    }

    // Stats
    document.getElementById('stat-attempts').textContent = ch.attempts || 0;
    document.getElementById('stat-hints-used').textContent = ch.hints_used || 0;
    document.getElementById('stat-hints-cost').textContent = ch.hints_cost || 0;

    if (ch.status === 'completed') {
        document.getElementById('stat-status').textContent = '✓';
        document.getElementById('stat-status').className = 'text-2xl font-bold text-ctf-accent';
    } else if (ch.status === 'in_progress') {
        document.getElementById('stat-status').textContent = '...';
        document.getElementById('stat-status').className = 'text-2xl font-bold text-ctf-warning';
    } else {
        document.getElementById('stat-status').textContent = '-';
    }

    // Hints
    if (ch.hints && ch.hints.length > 0) {
        const hintsSection = document.getElementById('hints-section');
        const hintsList = document.getElementById('hints-list');
        hintsSection.classList.remove('hidden');
        const isCompleted = ch.status === 'completed';

        hintsList.innerHTML = ch.hints.map((hint, i) => {
            const isUnlocked = hint.text !== '[locked]';
            if (isUnlocked) {
                return `
                    <div class="hint-card">
                        <div class="hint-header">
                            <div class="flex items-center gap-3 flex-1">
                                <span class="text-yellow-400">💡</span>
                                <span class="font-medium text-text-bright">Hint ${i + 1}</span>
                                <span class="text-xs text-text-secondary bg-portal-bg-tertiary px-2 py-0.5 rounded">-${hint.cost} pts</span>
                                <span class="text-xs text-ctf-accent ml-auto">Unlocked</span>
                            </div>
                        </div>
                        <div class="hint-content">
                            <p class="text-text-primary">${escapeHtml(hint.text)}</p>
                        </div>
                    </div>
                `;
            } else {
                const costLabel = isCompleted ? 'Free' : `-${hint.cost} pts`;
                return `
                    <div class="hint-card locked">
                        <div class="hint-header">
                            <div class="flex items-center gap-3 flex-1">
                                <span class="text-text-secondary">🔒</span>
                                <span class="font-medium text-text-secondary">Hint ${i + 1}</span>
                                <span class="text-xs text-text-secondary bg-portal-bg-tertiary px-2 py-0.5 rounded">${costLabel}</span>
                                <button onclick="unlockHint()" class="text-xs text-ctf-primary hover:text-cyan-300 ml-auto transition-colors">Unlock</button>
                            </div>
                        </div>
                    </div>
                `;
            }
        }).join('');
    }

    // Resources
    if (ch.resources && ch.resources.length > 0) {
        const resourcesSection = document.getElementById('resources-section');
        const resourcesList = document.getElementById('resources-list');
        resourcesSection.classList.remove('hidden');

        resourcesList.innerHTML = ch.resources.map(res => `
            <a href="${res.url}" target="_blank" rel="noopener" class="resource-link">
                <div class="w-10 h-10 rounded-lg bg-ctf-primary/20 flex items-center justify-center">
                    <svg class="w-5 h-5 text-ctf-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                    </svg>
                </div>
                <div class="flex-1">
                    <div class="font-medium text-text-bright">${escapeHtml(res.title)}</div>
                    ${res.type ? `<div class="text-sm text-text-secondary">${escapeHtml(res.type)}</div>` : ''}
                </div>
                <svg class="w-5 h-5 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                </svg>
            </a>
        `).join('');
    }

    // Evidence (completed challenges only)
    if (ch.status === 'completed' && ch.completion_evidence) {
        renderEvidence(ch.completion_evidence);
    }

    // Last attempt result (in-progress or failed)
    if (ch.status !== 'completed' && ch.last_attempt_result) {
        renderLastAttempt(ch.last_attempt_result);
    }

    // Prerequisites
    if (ch.prerequisites && ch.prerequisites.length > 0) {
        const card = document.getElementById('prerequisites-card');
        const list = document.getElementById('prerequisites-list');
        card.classList.remove('hidden');

        list.innerHTML = ch.prerequisites.map(prereq => `
            <a href="/ctf/challenges/${prereq}" class="flex items-center gap-2 text-sm text-text-secondary hover:text-ctf-primary transition-colors py-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
                ${prereq}
            </a>
        `).join('');
    } else {
        const card = document.getElementById('prerequisites-card');
        card.classList.remove('hidden');
        document.getElementById('prerequisites-list').innerHTML = `
            <div class="flex items-center gap-3 text-ctf-accent">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                </svg>
                <span>No prerequisites required</span>
            </div>
            <p class="text-sm text-text-secondary mt-2">This challenge is available to attempt!</p>
        `;
    }
}

function showStatusBanner(status, title, message) {
    const banner = document.getElementById('status-banner');
    const icon = document.getElementById('status-icon');
    const titleEl = document.getElementById('status-title');
    const msgEl = document.getElementById('status-message');

    banner.classList.remove('hidden');
    titleEl.textContent = title;
    msgEl.textContent = message;

    if (status === 'completed') {
        banner.className = 'glass-card p-4 bg-ctf-accent/10 border-ctf-accent/30 text-ctf-accent';
        icon.innerHTML = `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>`;
        icon.className = 'w-10 h-10 rounded-full flex items-center justify-center bg-ctf-accent/20 flex-shrink-0';
    } else if (status === 'in_progress') {
        banner.className = 'glass-card p-4 bg-ctf-warning/10 border-ctf-warning/30 text-ctf-warning';
        icon.innerHTML = `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>`;
        icon.className = 'w-10 h-10 rounded-full flex items-center justify-center bg-ctf-warning/20 flex-shrink-0';
    }
}

async function checkChallenge() {
    const btn = document.getElementById('check-progress-btn');
    const resultDiv = document.getElementById('check-result');

    btn.disabled = true;
    btn.innerHTML = `
        <svg class="w-5 h-5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
        </svg>
        Checking...
    `;

    try {
        const result = await CTF.checkChallenge(challengeId);

        resultDiv.classList.remove('hidden');

        if (result.detected) {
            resultDiv.className = 'mt-4 p-4 rounded-lg bg-ctf-accent/10 border border-ctf-accent/30';
            resultDiv.innerHTML = `
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-ctf-accent/20 flex items-center justify-center">
                        <svg class="w-5 h-5 text-ctf-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                    </div>
                    <div>
                        <div class="font-semibold text-ctf-accent">Challenge Completed!</div>
                        <div class="text-sm text-text-secondary">${result.message || 'Congratulations! You\'ve successfully completed this challenge.'}</div>
                    </div>
                </div>
            `;
            setTimeout(() => loadChallenge(), 1500);
        } else {
            resultDiv.className = 'mt-4 p-4 rounded-lg bg-ctf-warning/10 border border-ctf-warning/30';
            resultDiv.innerHTML = `
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-ctf-warning/20 flex items-center justify-center">
                        <svg class="w-5 h-5 text-ctf-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                        </svg>
                    </div>
                    <div>
                        <div class="font-semibold text-ctf-warning">Not Yet Complete</div>
                        <div class="text-sm text-text-secondary">${result.message || 'Keep trying! Check the hints or resources for guidance.'}</div>
                    </div>
                </div>
            `;
        }
    } catch (error) {
        console.error('Check failed:', error);
        resultDiv.classList.remove('hidden');
        resultDiv.className = 'mt-4 p-4 rounded-lg bg-ctf-danger/10 border border-ctf-danger/30';
        resultDiv.innerHTML = `<div class="text-ctf-danger">Failed to check progress: ${error.message}</div>`;
    } finally {
        btn.disabled = false;
        btn.innerHTML = `
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            Check Progress
        `;
    }
}

async function unlockHint() {
    try {
        const result = await CTF.useHint(challengeId);
        showToast(`Hint unlocked! (-${result.points_deducted} points)`, 'info');
        loadChallenge();
    } catch (error) {
        console.error('Failed to unlock hint:', error);
        showToast('Failed to unlock hint: ' + error.message, 'error');
    }
}

function renderEvidence(ev) {
    const section = document.getElementById('evidence-section');
    const summaryEl = document.getElementById('evidence-summary');
    const detailsEl = document.getElementById('evidence-details');
    section.classList.remove('hidden');

    const summaryItems = [];
    const evLeakage = ev.evidence && ev.evidence.leakage_score;
    if (evLeakage != null) {
        summaryItems.push({ label: 'Information Disclosed', value: evLeakage + '%' });
    } else if (ev.confidence != null) {
        summaryItems.push({ label: 'Confidence', value: Math.round(ev.confidence * 100) + '%' });
    }
    if (ev.event_type) {
        summaryItems.push({ label: 'Trigger', value: formatKeyLabel(ev.event_type) });
    }
    if (ev.timestamp) {
        const tsStr = String(ev.timestamp);
        const d = (!tsStr.endsWith('Z') && !/[+-]\d{2}:\d{2}$/.test(tsStr)) ? new Date(tsStr + 'Z') : new Date(tsStr);
        summaryItems.push({ label: 'Detected', value: d.toLocaleDateString() + ' ' + d.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}) });
    }

    summaryEl.innerHTML = summaryItems.map(item => `
        <div class="evidence-row">
            <div class="evidence-key">${escapeHtml(item.label)}</div>
            <div class="evidence-value">${escapeHtml(item.value)}</div>
        </div>
    `).join('');

    const innerEvidence = ev.evidence || {};
    const rows = [];

    if (ev.result_message) {
        rows.push({ key: 'Result', value: ev.result_message });
    }

    for (const [key, value] of Object.entries(innerEvidence)) {
        if (key === 'leakage_score' || key === 'threshold') continue;
        rows.push({ key: formatKeyLabel(key), value: value });
    }

    let scoringHtml = '';
    if (ev.scoring && ev.scoring.modifier < 1.0) {
        const pct = Math.round((1 - ev.scoring.modifier) * 100);
        scoringHtml = `
            <div style="margin-top: 1.5rem;" class="p-3 rounded-lg bg-ctf-danger/10 border border-ctf-danger/20">
                <div class="flex items-center gap-2 mb-2">
                    <span class="text-sm">⚠️</span>
                    <span class="text-sm font-semibold text-ctf-danger">Scoring Penalty Applied (-${pct}%)</span>
                </div>
                <div class="space-y-1">
                    ${(ev.scoring.details || []).filter(d => d.triggered).map(d => `
                        <div class="text-xs text-text-secondary">
                            <span class="text-ctf-danger font-medium">${escapeHtml(modifierDisplayName(d.type))}</span>
                            — ${Math.round(d.penalty * 100)}% penalty
                            ${d.evidence && d.evidence.judge_reasoning
                                ? `<div class="mt-1 text-text-secondary/80 italic">"${escapeHtml(d.evidence.judge_reasoning.substring(0, 200))}${d.evidence.judge_reasoning.length > 200 ? '...' : ''}"</div>`
                                : ''}
                        </div>
                    `).join('')}
                </div>
            </div>
        `;
    }

    detailsEl.innerHTML = rows.map(row => `
        <div class="evidence-row">
            <div class="evidence-key">${escapeHtml(row.key)}</div>
            <div class="evidence-value">${formatEvidenceValue(row.value)}</div>
        </div>
    `).join('') + scoringHtml;
}

function toggleEvidence() {
    const body = document.getElementById('evidence-body');
    const chevron = document.getElementById('evidence-chevron');
    const label = document.getElementById('evidence-label');
    const isHidden = body.classList.contains('hidden');

    body.classList.toggle('hidden');
    chevron.classList.toggle('rotated');
    label.textContent = isHidden ? 'Hide Evidence of Completion' : 'Show Evidence of Completion';
}

function renderLastAttempt(attempt) {
    const section = document.getElementById('last-attempt-section');
    const contentEl = document.getElementById('last-attempt-content');
    section.classList.remove('hidden');

    const detected = attempt.detected;
    const statusColor = detected ? 'text-ctf-accent' : 'text-ctf-warning';
    const statusText = detected ? 'Detected' : 'Not Detected';

    const rows = [];

    rows.push({key: 'Result', value: `<span class="${statusColor} font-medium">${statusText}</span>`});

    if (attempt.message) {
        rows.push({key: 'Message', value: escapeHtml(attempt.message)});
    }

    const leakageScore = attempt.evidence && attempt.evidence.leakage_score;
    if (leakageScore !== undefined && leakageScore !== null) {
        const threshold = attempt.evidence.threshold;
        const thresholdPct = threshold ? Math.round(threshold * 100) : null;
        let leakageLabel = `${leakageScore}%`;
        if (thresholdPct && !detected) {
            leakageLabel += ` <span class="text-text-secondary">(need ${thresholdPct}% to complete)</span>`;
        }
        rows.push({key: 'Information Disclosed', value: leakageLabel});
    } else if (attempt.confidence !== undefined && attempt.confidence !== null) {
        const pct = Math.round(attempt.confidence * 100);
        rows.push({key: 'Confidence', value: `${pct}%`});
    }

    if (attempt.event_type) {
        rows.push({key: 'Trigger', value: escapeHtml(attempt.event_type)});
    }

    if (attempt.timestamp) {
        const d = new Date(attempt.timestamp);
        rows.push({key: 'Timestamp', value: d.toLocaleString()});
    }

    if (attempt.evidence && Object.keys(attempt.evidence).length > 0) {
        for (const [k, v] of Object.entries(attempt.evidence)) {
            if (k === 'leakage_score' || k === 'threshold') continue;
            rows.push({key: formatKeyLabel(k), value: formatEvidenceValue(v)});
        }
    }

    contentEl.innerHTML = rows.map(row => `
        <div class="evidence-row">
            <div class="evidence-key">${row.key}</div>
            <div class="evidence-value">${row.value}</div>
        </div>
    `).join('');
}

function toggleLastAttempt() {
    const body = document.getElementById('last-attempt-body');
    const chevron = document.getElementById('last-attempt-chevron');
    const isHidden = body.classList.contains('hidden');

    body.classList.toggle('hidden');
    chevron.classList.toggle('rotated');
}

const MODIFIER_NAMES = {
    'pi_jb': 'Prompt Injection / Jailbreak',
};

function modifierDisplayName(type) {
    return MODIFIER_NAMES[type] || formatKeyLabel(type);
}

function formatKeyLabel(key) {
    return key
        .replace(/_/g, ' ')
        .replace(/\b\w/g, c => c.toUpperCase());
}

function formatEvidenceValue(value) {
    if (value == null) return '<span class="text-text-secondary">--</span>';

    if (Array.isArray(value)) {
        if (value.length === 0) return '<span class="text-text-secondary">None</span>';
        return '<ul class="nested-list">' +
            value.map(item => {
                if (item != null && typeof item === 'object') {
                    const parts = Object.entries(item)
                        .map(([k, v]) => `<span class="text-text-secondary">${escapeHtml(formatKeyLabel(k))}:</span> ${formatEvidenceValue(v)}`);
                    return `<li>${parts.join(' · ')}</li>`;
                }
                return `<li>${escapeHtml(String(item))}</li>`;
            }).join('') +
            '</ul>';
    }

    if (typeof value === 'object') {
        return Object.entries(value)
            .map(([k, v]) => `<span class="text-text-secondary">${escapeHtml(formatKeyLabel(k))}:</span> ${formatEvidenceValue(v)}`)
            .join('<br>');
    }

    if (typeof value === 'number') {
        if (Number.isInteger(value)) return escapeHtml(String(value));
        return escapeHtml(value.toFixed(2));
    }

    return escapeHtml(String(value));
}

function formatCategoryName(category) {
    return category.replace(/[-_]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
}

function formatDescription(desc) {
    if (!desc) return '';
    return marked.parse(desc);
}

function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}
</script>
{% endblock %}