{% extends "base.html" %}

{% block title %}Activity - FinBot CTF{% endblock %}
{% block nav_activity %}active{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', path='css/ctf/activity.css') }}">
{% endblock %}

{% block content %}
<!-- Header -->
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-2xl font-bold text-text-bright">
            <span class="glow-cyan">Activity</span> Stream
        </h1>
        <p class="text-text-secondary text-sm mt-1">Trace multi-agent orchestration workflows in real time</p>
    </div>
    <div class="flex items-center gap-4">
        <div class="flex items-center gap-2 text-xs text-text-secondary">
            <div class="live-dot"></div>
            <span>Live</span>
        </div>
        <div class="view-toggle">
            <button id="btn-workflow-view" class="view-btn active">
                <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="M4 6h16M4 10h16M4 14h16M4 18h16"/>
                </svg>
                Workflows
            </button>
            <button id="btn-timeline-view" class="view-btn">
                <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                Timeline
            </button>
        </div>
    </div>
</div>

<!-- Main Layout: Workflow View (2-column) -->
<div id="workflow-view" class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Orchestrations List (Left) -->
    <div class="lg:col-span-2 space-y-4">
        <!-- Loading State -->
        <div id="orch-loading">
            <div class="orch-card">
                <div class="p-5">
                    <div class="ctf-skeleton h-5 w-64 mb-3"></div>
                    <div class="ctf-skeleton h-3 w-40 mb-4"></div>
                    <div class="ctf-skeleton h-7 w-full mb-2"></div>
                    <div class="ctf-skeleton h-7 w-full mb-2"></div>
                    <div class="ctf-skeleton h-7 w-3/4"></div>
                </div>
            </div>
            <div class="orch-card mt-4">
                <div class="p-5">
                    <div class="ctf-skeleton h-5 w-48 mb-3"></div>
                    <div class="ctf-skeleton h-3 w-32 mb-4"></div>
                    <div class="ctf-skeleton h-7 w-full"></div>
                </div>
            </div>
        </div>

        <!-- Workflow Cards -->
        <div id="orch-list" class="space-y-4 hidden"></div>

        <!-- Empty State -->
        <div id="orch-empty" class="hidden text-center py-16">
            <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-portal-bg-tertiary flex items-center justify-center">
                <svg class="w-8 h-8 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
            </div>
            <h3 class="text-lg font-semibold text-text-bright mb-2">No Activity Yet</h3>
            <p class="text-text-secondary text-sm">Interact with the vendor portal to generate agent workflows.</p>
            <a href="/ctf/challenges" class="inline-block mt-4 px-6 py-3 rounded-lg bg-gradient-to-r from-ctf-primary to-ctf-secondary text-text-bright font-medium text-sm hover:opacity-90 transition-opacity">
                View Challenges
            </a>
        </div>

    </div>

    <!-- Detail Panel (Right) -->
    <div>
        <div id="detail-panel" class="detail-panel sticky top-8">
            <!-- Empty state -->
            <div id="detail-empty" class="p-12 text-center">
                <div class="w-12 h-12 mx-auto mb-3 rounded-full bg-portal-bg-tertiary flex items-center justify-center">
                    <svg class="w-6 h-6 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                    </svg>
                </div>
                <p class="text-sm text-text-secondary">Select a workflow to inspect its events</p>
            </div>

            <!-- Detail content (hidden until workflow selected) -->
            <div id="detail-content" class="detail-content-wrapper" style="display:none">
                <div class="detail-header">
                    <div id="detail-title" class="text-sm font-medium text-text-bright"></div>
                    <div id="detail-subtitle" class="text-xs text-text-secondary font-mono mt-1"></div>
                </div>
                <div id="detail-tabs" class="detail-tabs"></div>
                <div id="detail-events" class="detail-events-list"></div>
            </div>
        </div>
    </div>
</div>

<!-- Timeline View (hidden by default) -->
<div id="timeline-view" class="hidden">
    <div id="timeline-container" class="timeline-container"></div>
    <div id="timeline-empty" class="hidden text-center py-16">
        <p class="text-sm text-text-secondary">No events to display.</p>
    </div>
</div>

<!-- Load More (shared across workflow & timeline views) -->
<div id="load-more-container" class="hidden load-more-container">
    <div id="load-more-info" class="text-xs text-text-secondary mb-3"></div>
    <button id="load-more-btn" class="load-more-btn">Load Older Activity</button>
</div>

<!-- Agentic Trace View (replaces workflow view when active) -->
<div id="trace-view" class="hidden">
    <div class="flex items-center gap-3 mb-6">
        <button id="trace-back-btn" class="trace-back-btn">
            <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="M15 19l-7-7 7-7"/>
            </svg>
            Back to Workflows
        </button>
        <span class="text-text-secondary text-sm">·</span>
        <span id="trace-title" class="text-sm font-medium text-text-bright"></span>
    </div>
    <div id="trace-container"></div>
</div>

<!-- Mobile Detail Modal (for smaller screens) -->
<div id="detail-modal" class="event-modal" style="display:none">
    <div class="event-modal-backdrop" onclick="closeDetailModal()"></div>
    <div class="event-modal-content glass-card" style="max-width: 560px;">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-sm font-bold text-text-bright" id="mobile-detail-title">Workflow Events</h3>
            <button onclick="closeDetailModal()" class="p-2 rounded-lg hover:bg-portal-bg-tertiary text-text-secondary hover:text-text-bright transition-colors">
                <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="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div id="mobile-detail-events" class="space-y-2 max-h-[60vh] overflow-y-auto"></div>
    </div>
</div>

{% endblock %}

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