{% extends "base.html" %}

{% block title %}Dashboard - Talk2Me Admin{% endblock %}

{% block content %}
<!-- Quick Actions -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card bg-light">
            <div class="card-body">
                <h5 class="card-title">Quick Actions</h5>
                <div class="btn-group" role="group">
                    <a href="{{ url_for('admin.users') }}" class="btn btn-primary">
                        <i class="fas fa-users"></i> Manage Users
                    </a>
                    <button onclick="exportData('all')" class="btn btn-secondary">
                        <i class="fas fa-download"></i> Export Data
                    </button>
                    <button onclick="clearCache()" class="btn btn-warning">
                        <i class="fas fa-trash"></i> Clear Cache
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Overview Cards -->
<div class="row mb-4">
    <div class="col-md-3 mb-3">
        <div class="card text-white bg-primary">
            <div class="card-body">
                <h5 class="card-title">Total Requests</h5>
                <h2 class="card-text" id="total-requests">
                    <div class="spinner-border spinner-border-sm" role="status"></div>
                </h2>
                <p class="card-text"><small>Today: <span id="today-requests">-</span></small></p>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 mb-3">
        <div class="card text-white bg-success">
            <div class="card-body">
                <h5 class="card-title">Active Sessions</h5>
                <h2 class="card-text" id="active-sessions">
                    <div class="spinner-border spinner-border-sm" role="status"></div>
                </h2>
                <p class="card-text"><small>Live users</small></p>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 mb-3">
        <div class="card text-white bg-warning">
            <div class="card-body">
                <h5 class="card-title">Error Rate</h5>
                <h2 class="card-text" id="error-rate">
                    <div class="spinner-border spinner-border-sm" role="status"></div>
                </h2>
                <p class="card-text"><small>Last 24 hours</small></p>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 mb-3">
        <div class="card text-white bg-info">
            <div class="card-body">
                <h5 class="card-title">Cache Hit Rate</h5>
                <h2 class="card-text" id="cache-hit-rate">
                    <div class="spinner-border spinner-border-sm" role="status"></div>
                </h2>
                <p class="card-text"><small>Performance metric</small></p>
            </div>
        </div>
    </div>
</div>

<!-- System Health Status -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-heartbeat"></i> System Health</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-database fa-2x me-3"></i>
                            <div>
                                <h6 class="mb-0">Redis</h6>
                                <span class="badge" id="redis-status">Checking...</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-server fa-2x me-3"></i>
                            <div>
                                <h6 class="mb-0">PostgreSQL</h6>
                                <span class="badge" id="postgresql-status">Checking...</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-microphone fa-2x me-3"></i>
                            <div>
                                <h6 class="mb-0">Whisper/TTS</h6>
                                <span class="badge" id="ml-status">Checking...</span>
                                <small class="d-block text-muted" id="tts-details"></small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- TTS Server Status Card -->
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">TTS Server Status</h5>
                <button class="btn btn-sm btn-outline-primary" onclick="loadTTSStatus()">
                    <i class="fas fa-sync"></i> Refresh
                </button>
            </div>
            <div class="card-body">
                <div class="row" id="tts-status-container">
                    <div class="col-md-4">
                        <h6>Configuration</h6>
                        <ul class="list-unstyled mb-0">
                            <li><strong>Status:</strong> <span id="tts-config-status" class="badge">Loading...</span></li>
                            <li><strong>Server URL:</strong> <span id="tts-server-url">-</span></li>
                            <li><strong>API Key:</strong> <span id="tts-api-key-status">-</span></li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <h6>Server Health</h6>
                        <ul class="list-unstyled mb-0">
                            <li><strong>Health:</strong> <span id="tts-health-status" class="badge">Loading...</span></li>
                            <li><strong>Available Voices:</strong> <span id="tts-voice-count">-</span></li>
                            <li><strong>Error:</strong> <span id="tts-error-message" class="text-danger">-</span></li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <h6>Usage & Performance</h6>
                        <ul class="list-unstyled mb-0">
                            <li><strong>Today's Requests:</strong> <span id="tts-usage-today">-</span></li>
                            <li><strong>Avg Response Time:</strong> <span id="tts-avg-response">-</span></li>
                            <li><strong>Total Requests:</strong> <span id="tts-usage-total">-</span></li>
                        </ul>
                    </div>
                </div>
                <div class="row mt-3" id="tts-voices-container" style="display: none;">
                    <div class="col-md-12">
                        <h6>Available Voices</h6>
                        <div id="tts-voices-list" class="d-flex flex-wrap gap-2"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row 1 -->
<div class="row mb-4">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Request Volume</h5>
                <div class="btn-group btn-group-sm float-end" role="group">
                    <button type="button" class="btn btn-outline-primary active" onclick="updateRequestChart('minute')">Minute</button>
                    <button type="button" class="btn btn-outline-primary" onclick="updateRequestChart('hour')">Hour</button>
                    <button type="button" class="btn btn-outline-primary" onclick="updateRequestChart('day')">Day</button>
                </div>
            </div>
            <div class="card-body">
                <canvas id="requestChart" height="100"></canvas>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Language Pairs</h5>
            </div>
            <div class="card-body">
                <canvas id="languageChart" height="200"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row 2 -->
<div class="row mb-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Operations</h5>
            </div>
            <div class="card-body">
                <canvas id="operationsChart" height="120"></canvas>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Response Times (ms)</h5>
            </div>
            <div class="card-body">
                <canvas id="responseTimeChart" height="120"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Error Analysis -->
<div class="row mb-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Error Types</h5>
            </div>
            <div class="card-body">
                <canvas id="errorTypeChart" height="150"></canvas>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Recent Errors</h5>
            </div>
            <div class="card-body" style="max-height: 300px; overflow-y: auto;">
                <div id="recent-errors-list">
                    <div class="text-center">
                        <div class="spinner-border" role="status"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Performance Metrics -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Performance Metrics</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Operation</th>
                                <th>Average (ms)</th>
                                <th>95th Percentile (ms)</th>
                                <th>99th Percentile (ms)</th>
                            </tr>
                        </thead>
                        <tbody id="performance-table">
                            <tr>
                                <td colspan="4" class="text-center">
                                    <div class="spinner-border" role="status"></div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Real-time Updates Status -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1000">
    <div class="toast" id="update-toast" role="alert">
        <div class="toast-header">
            <i class="fas fa-sync-alt me-2"></i>
            <strong class="me-auto">Real-time Updates</strong>
            <small id="last-update">Just now</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            <span id="update-status">Connected</span>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
// Initialize dashboard
$(document).ready(function() {
    initializeDashboard();
    
    // Start real-time updates
    startRealtimeUpdates();
    
    // Load initial data
    loadOverviewStats();
    loadRequestChart('minute');
    loadOperationStats();
    loadErrorStats();
    loadPerformanceStats();
    
    // Refresh data periodically
    setInterval(loadOverviewStats, 10000); // Every 10 seconds
    setInterval(function() {
        loadRequestChart(currentTimeframe);
    }, 30000); // Every 30 seconds
});
</script>
{% endblock %}