{% extends "base.html" %}

{% block title %}Dashboard{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('admin.static', filename='admin.css') }}">
{% endblock %}

{% block body %}
<!-- Top Navigation Bar -->
<div class="navbar bg-base-100 border-b border-base-200 sticky top-0 z-50">
    <div class="flex-1">
        <span class="text-xl font-bold px-4">MUG</span>
        <span class="text-sm text-base-content/60">Admin Console</span>
    </div>
    <div class="flex-none gap-2">
        <div class="badge badge-lg gap-2" id="connection-status">
            <span class="status-dot"></span>
            <span class="status-text">Connecting...</span>
        </div>
        <span class="badge badge-error hidden" id="problems-count-badge">0</span>
        <a href="{{ url_for('admin.logout') }}" class="btn btn-ghost btn-sm">Logout</a>
    </div>
</div>

<div class="min-h-screen bg-base-200 p-4">
    <div class="max-w-screen-2xl mx-auto">

        <!-- Stats Bar -->
        <div class="stats-bar">
            <div class="stat-card">
                <div class="stat-card-icon bg-success/15">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-success">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                    </svg>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-value text-success" id="stat-active">0</div>
                    <div class="stat-card-label">Active</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-card-icon bg-warning/15">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-warning">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-value text-warning" id="stat-waiting">0</div>
                    <div class="stat-card-label">Waiting</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-card-icon bg-info/15">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-info">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-value text-info" id="stat-completed">0</div>
                    <div class="stat-card-label">Completed</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-card-icon bg-accent/15">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-accent">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
                    </svg>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-value text-accent" id="stat-completion">0%</div>
                    <div class="stat-card-label">Completion</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-card-icon bg-secondary/15">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-secondary">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-value text-secondary" id="stat-duration">--</div>
                    <div class="stat-card-label">Avg Duration</div>
                </div>
            </div>
        </div>

        <!-- Active Participants Table -->
        <div class="section-card mb-4">
            <div class="section-header">
                <h3>Active Participants <span class="badge badge-ghost badge-sm ml-2" id="active-participants-count">0</span></h3>
                <div class="flex items-center gap-3">
                    <label class="filter-toggle">
                        <input type="checkbox" id="show-inactive-toggle" class="checkbox checkbox-xs">
                        <span>Show inactive</span>
                    </label>
                    <span class="health-legend"><span class="health-dot" style="background-color: #22c55e;"></span> Connected</span>
                    <span class="health-legend"><span class="health-dot" style="background-color: #eab308;"></span> Waiting</span>
                    <span class="health-legend"><span class="health-dot" style="background-color: #3b82f6;"></span> In Game</span>
                </div>
            </div>
            <div class="section-body p-0">
                <div id="active-participants-table">
                    <div class="empty-state">
                        <p class="text-base-content/50">No active participants</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Active Multiplayer Sessions -->
        <div class="section-card mb-4">
            <div class="section-header">
                <h3>Active Multiplayer Sessions <span class="badge badge-ghost badge-sm ml-2" id="sessions-count">0</span></h3>
                <div class="flex items-center gap-3">
                    <span class="health-legend"><span class="health-dot" style="background-color: #22c55e;"></span> Healthy</span>
                    <span class="health-legend"><span class="health-dot" style="background-color: #eab308;"></span> Degraded</span>
                    <span class="health-legend"><span class="health-dot" style="background-color: #ef4444;"></span> Problem</span>
                </div>
            </div>
            <div class="section-body">
                <div id="multiplayer-sessions-list">
                    <div class="empty-state">
                        <p class="text-base-content/50">No active multiplayer sessions</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Two Column: Problems + Session Outcomes -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
            <!-- Problems -->
            <div class="section-card">
                <div class="section-header">
                    <h3>Problems</h3>
                </div>
                <div class="section-body">
                    <div id="problems-list">
                        <div class="empty-state">
                            <p class="text-base-content/50">No problems detected</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Session Outcomes (Aggregates) -->
            <div class="section-card">
                <div class="section-header">
                    <h3>Session Outcomes</h3>
                </div>
                <div class="section-body">
                    <!-- Summary Stats Row -->
                    <div class="outcome-summary" id="outcome-summary">
                        <div class="outcome-stat">
                            <span class="outcome-stat-value text-success" id="stat-pct-completed">--%</span>
                            <span class="outcome-stat-label">Completed</span>
                        </div>
                        <div class="outcome-stat">
                            <span class="outcome-stat-value text-warning" id="stat-pct-waitroom-timeout">--%</span>
                            <span class="outcome-stat-label">No Partner</span>
                        </div>
                        <div class="outcome-stat">
                            <span class="outcome-stat-value text-orange-500" id="stat-pct-partner-away">--%</span>
                            <span class="outcome-stat-label">Partner Away</span>
                        </div>
                        <div class="outcome-stat">
                            <span class="outcome-stat-value text-error" id="stat-pct-partner-left">--%</span>
                            <span class="outcome-stat-label">Partner Left</span>
                        </div>
                        <div class="outcome-stat">
                            <span class="outcome-stat-value text-base-content/50" id="stat-pct-other">--%</span>
                            <span class="outcome-stat-label">Other</span>
                        </div>
                    </div>

                    <!-- Scene Histogram -->
                    <div class="scene-histogram-container">
                        <div class="scene-histogram-label">Session Endings by Scene</div>
                        <div id="scene-histogram" class="scene-histogram">
                            <p class="text-base-content/50 text-sm">No data yet</p>
                        </div>
                    </div>

                    <!-- Metrics Panel -->
                    <div class="metrics-panel-row">
                        <div class="metric-row">
                            <span class="metric-label">Avg Wait</span>
                            <span class="metric-value" id="wait-avg">--</span>
                        </div>
                        <div class="metric-row">
                            <span class="metric-label">Max Wait</span>
                            <span class="metric-value" id="wait-max">--</span>
                        </div>
                        <div class="metric-row">
                            <span class="metric-label">Latency</span>
                            <div class="sparkline-container">
                                <span id="latency-sparkline"></span>
                                <span class="metric-value" id="latency-current">--</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Console Logs -->
        <div class="section-card mb-4">
            <div class="section-header">
                <h3>Console Logs <span class="badge badge-ghost badge-sm ml-2" id="logs-count">0</span></h3>
                <div class="logs-header">
                    <select id="log-level-filter" class="select select-xs select-bordered">
                        <option value="all">All</option>
                        <option value="error">Errors</option>
                        <option value="warn">Warnings</option>
                        <option value="info">Info</option>
                    </select>
                    <select id="log-participant-filter" class="select select-xs select-bordered">
                        <option value="all">All Participants</option>
                    </select>
                </div>
            </div>
            <div class="section-body p-0">
                <div id="console-logs-list">
                    <div class="empty-state">
                        <p class="text-base-content/50">No logs</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Archived Sessions (Collapsible) -->
        <div class="collapse collapse-arrow bg-base-100 rounded-xl shadow-sm mb-4">
            <input type="checkbox" />
            <div class="collapse-title font-semibold">
                Archived Sessions <span class="badge badge-ghost badge-sm ml-2" id="archived-sessions-count">0</span>
            </div>
            <div class="collapse-content p-0">
                <div id="archived-sessions-list">
                    <p class="text-base-content/50 p-4">No archived sessions</p>
                </div>
            </div>
        </div>

        <!-- Completed Participants (Collapsible) -->
        <div class="collapse collapse-arrow bg-base-100 rounded-xl shadow-sm">
            <input type="checkbox" />
            <div class="collapse-title font-semibold">
                Completed Participants <span class="badge badge-ghost badge-sm ml-2" id="completed-count">0</span>
            </div>
            <div class="collapse-content p-0">
                <div id="completed-participants-list">
                    <p class="text-base-content/50 p-4">No completed participants</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Participant Detail Panel -->
<div id="participant-detail-overlay" class="hidden">
    <div class="detail-panel">
        <div class="detail-header">
            <h3>Participant Details</h3>
            <button onclick="closeParticipantDetail()" class="btn btn-ghost btn-sm btn-circle">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
        <div id="participant-detail-content" class="detail-content">
        </div>
    </div>
</div>

<!-- Session Detail Panel -->
<div id="session-detail-overlay" class="hidden">
    <div class="detail-panel detail-panel-wide">
        <div class="detail-header">
            <h3>Multiplayer Session Details</h3>
            <button onclick="closeSessionDetail()" class="btn btn-ghost btn-sm btn-circle">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
        <div id="session-detail-content" class="detail-content">
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('admin.static', filename='admin.js') }}"></script>
{% endblock %}