{% extends 'base.html' %}
{% load static %}

{% block title %}Dashboard - Stream Processor{% endblock %}

{% block extra_css %}
<!-- SweetAlert2 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<style>
    /* Dashboard Animations */
    .dashboard-fade-in {
        animation: fadeInUp 0.6s ease-out;
    }
    
    .stat-card {
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(37, 99, 235, 0.15);
    }
    
    .quick-action-card {
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }
    
    .quick-action-card:hover {
        transform: translateY(-3px);
        border-color: var(--primary-200);
        box-shadow: 0 6px 20px rgba(37, 99, 235, 0.1);
    }
    
    .counter-animation {
        font-variant-numeric: tabular-nums;
    }
    
    .pulse-icon {
        animation: pulse 2s infinite;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.05);
        }
    }
    

</style>
{% endblock %}

{% block page_title %}
    <div class="d-flex align-items-center">
        <i class="fas fa-tachometer-alt me-3 text-primary"></i>
        Dashboard
    </div>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="mb-4">
        <div class="card shadow-sm">
            <div class="card-body border-bottom">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h1 class="h2 fw-bold text-dark mb-1">System Dashboard</h1>
                        <p class="text-muted small mb-0">Monitor your streaming infrastructure and performance</p>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{% url 'monitoring:metrics' %}" 
                           class="btn btn-outline-secondary btn-sm d-flex align-items-center">
                            <i class="fas fa-chart-line me-2"></i>
                            View Metrics
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Info Panel -->
    <div class="mb-4">
        <div class="alert alert-info d-flex align-items-center" role="alert">
            <i class="fas fa-info-circle me-3"></i>
            <div>
                <h6 class="alert-heading mb-1">Real-time Monitoring</h6>
                <p class="mb-0 small">Dashboard updates automatically every 30 seconds to show current system status.</p>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row g-3 mb-4">
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm h-100 stat-card dashboard-fade-in" style="animation-delay: 0.1s;">
                <div class="card-body position-relative">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                <i class="fas fa-play text-success pulse-icon"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="text-muted small fw-medium mb-1">Active Streams</p>
                            <p class="h3 fw-bold text-dark mb-1 counter-animation" data-target="{{ stats.active_streams }}">{{ stats.active_streams }}</p>
                            <a href="{% url 'streams:session_list' %}" class="text-primary text-decoration-none small">View sessions →</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm h-100 stat-card dashboard-fade-in" style="animation-delay: 0.2s;">
                <div class="card-body position-relative">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                <i class="fas fa-tv text-primary pulse-icon"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="text-muted small fw-medium mb-1">Total Channels</p>
                            <p class="h3 fw-bold text-dark mb-1 counter-animation" data-target="{{ stats.total_channels }}">{{ stats.total_channels }}</p>
                            <a href="{% url 'streams:channel_list' %}" class="text-primary text-decoration-none small">Manage channels →</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm h-100 stat-card dashboard-fade-in" style="animation-delay: 0.3s;">
                <div class="card-body position-relative">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                <i class="fas fa-bullseye text-info pulse-icon"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="text-muted small fw-medium mb-1">Detections Today</p>
                            <p class="h3 fw-bold text-dark mb-1 counter-animation" data-target="{{ stats.detections_today }}">{{ stats.detections_today }}</p>
                            <a href="{% url 'jingles:detection_list' %}" class="text-primary text-decoration-none small">View detections →</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-12 col-md-6 col-lg-3">
            <div class="card shadow-sm h-100 stat-card dashboard-fade-in" style="animation-delay: 0.4s;">
                <div class="card-body position-relative">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                                <i class="fas fa-ad text-warning pulse-icon"></i>
                            </div>
                        </div>
                        <div class="ms-3">
                            <p class="text-muted small fw-medium mb-1">Ad Breaks Today</p>
                            <p class="h3 fw-bold text-dark mb-1 counter-animation" data-target="{{ stats.ad_breaks_today }}">{{ stats.ad_breaks_today }}</p>
                            <a href="{% url 'jingles:adbreak_list' %}" class="text-primary text-decoration-none small">View ad breaks →</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="row g-3 mb-4">
        <div class="col-12 col-lg-6">
            <div class="card shadow-sm dashboard-fade-in" style="animation-delay: 0.5s;">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="h5 mb-0 text-dark">
                            <i class="fas fa-clock text-primary me-2 pulse-icon"></i>
                            Recent Detections
                        </h3>
                        <div hx-get="{% url 'monitoring:recent_activity' %}" 
                             hx-trigger="every 30s"
                             hx-target="#recent-detections-container"
                             class="d-flex align-items-center text-muted small">
                             <i class="fas fa-sync-alt me-1"></i>
                             Auto-refresh
                         </div>
                    </div>
                </div>
                <div class="card-body">
                    <div id="recent-detections-container">
                        {% if recent_detections %}
                            <div class="d-flex flex-column gap-3">
                                {% for detection in recent_detections %}
                                <div class="d-flex align-items-center dashboard-fade-in" style="animation-delay: 0.7s;">
                                    <div class="flex-shrink-0">
                                        <div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center pulse-icon" style="width: 32px; height: 32px;">
                                            <i class="fas fa-bullseye text-info small"></i>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3 min-width-0">
                                        <p class="fw-medium text-dark mb-1 text-truncate">
                                            {{ detection.jingle.name }}
                                        </p>
                                        <p class="text-muted small mb-0">
                                            {{ detection.channel.name }} • {{ detection.detected_at|timesince }} ago
                                        </p>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <span class="badge bg-success">
                                            {{ detection.confidence|floatformat:1 }}%
                                        </span>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center py-4 dashboard-fade-in" style="animation-delay: 0.6s;">
                                <i class="fas fa-inbox text-muted fa-3x mb-3 pulse-icon"></i>
                                <p class="text-muted mb-0">No recent detections</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-6">
            <div class="card shadow-sm dashboard-fade-in" style="animation-delay: 0.5s;">
                <div class="card-header bg-white border-bottom">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="h5 mb-0 text-dark">
                            <i class="fas fa-play text-primary me-2 pulse-icon"></i>
                            Active Streams
                        </h3>
                        <div hx-get="{% url 'monitoring:live_streams' %}" 
                             hx-trigger="every 30s"
                             hx-target="#live-streams-container"
                             class="d-flex align-items-center text-muted small">
                            <i class="fas fa-sync-alt me-1"></i>
                            Auto-refresh
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div id="live-streams-container">
                        {% if active_sessions %}
                            <div class="d-flex flex-column gap-3">
                                {% for session in active_sessions %}
                                <div class="d-flex align-items-center dashboard-fade-in" style="animation-delay: 0.7s;">
                                    <div class="flex-shrink-0">
                                        <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center pulse-icon" style="width: 32px; height: 32px;">
                                            <i class="fas fa-play text-success small"></i>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3 min-width-0">
                                        <p class="fw-medium text-dark mb-1 text-truncate">
                                            {{ session.channel.name }}
                                        </p>
                                        <p class="text-muted small mb-0">
                                            {% if session.started_at %}
                                                Started {{ session.started_at|timesince }} ago
                                            {% else %}
                                                Starting...
                                            {% endif %}
                                        </p>
                                    </div>
                                    <div class="flex-shrink-0">
                                        {% if session.status == 'active' %}
                                            <span class="badge bg-success">
                                                Active
                                            </span>
                                        {% elif session.status == 'processing' %}
                                            <span class="badge bg-warning">
                                                Processing
                                            </span>
                                        {% else %}
                                            <span class="badge bg-secondary">
                                                {{ session.status|title }}
                                            </span>
                                        {% endif %}
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="text-center py-4 dashboard-fade-in" style="animation-delay: 0.6s;">
                                <i class="fas fa-inbox text-muted fa-3x mb-3 pulse-icon"></i>
                                <p class="text-muted mb-0">No active streams</p>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="card shadow-sm dashboard-fade-in" style="animation-delay: 0.6s;">
        <div class="card-header bg-white border-bottom">
            <h3 class="h5 mb-0 text-dark">
                <i class="fas fa-bolt text-primary me-2 pulse-icon"></i>
                Quick Actions
            </h3>
            <p class="text-muted small mb-0 mt-1">Common tasks and shortcuts</p>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-12 col-sm-6 col-lg-3">
                    <a href="{% url 'streams:channel_list' %}" 
                       class="card border text-decoration-none h-100 quick-action-card position-relative">
                        <div class="card-body p-3">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="bg-success bg-opacity-10 rounded d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                        <i class="fas fa-play text-success"></i>
                                    </div>
                                </div>
                                <div class="ms-3">
                                    <p class="fw-medium text-dark mb-0 small">Start Stream</p>
                                    <p class="text-muted mb-0" style="font-size: 0.75rem;">Launch new channel</p>
                                </div>
                            </div>
                        </div> 
                    </a>
                </div>

                <div class="col-12 col-sm-6 col-lg-3">
                    <a href="{% url 'jingles:template_list' %}" 
                       class="card border text-decoration-none h-100 quick-action-card position-relative">
                        <div class="card-body p-3">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="bg-info bg-opacity-10 rounded d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                        <i class="fas fa-music text-info"></i>
                                    </div>
                                </div>
                                <div class="ms-3">
                                    <p class="fw-medium text-dark mb-0 small">Upload Jingle</p>
                                    <p class="text-muted mb-0" style="font-size: 0.75rem;">Add new template</p>
                                </div>
                            </div>
                        </div> 
                    </a>
                </div>

                <div class="col-12 col-sm-6 col-lg-3">
                    <a href="{% url 'notifications:channel_list' %}" 
                       class="card border text-decoration-none h-100 quick-action-card position-relative">
                        <div class="card-body p-3">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="bg-primary bg-opacity-10 rounded d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                        <i class="fas fa-bell text-primary"></i>
                                    </div>
                                </div>
                                <div class="ms-3">
                                    <p class="fw-medium text-dark mb-0 small">Notifications</p>
                                    <p class="text-muted mb-0" style="font-size: 0.75rem;">Manage alerts</p>
                                </div>
                            </div>
                        </div> 
                    </a>
                </div>

                <div class="col-12 col-sm-6 col-lg-3">
                    <a href="{% url 'monitoring:metrics' %}" 
                       class="card border text-decoration-none h-100 quick-action-card position-relative">
                        <div class="card-body p-3">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <div class="bg-warning bg-opacity-10 rounded d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                        <i class="fas fa-chart-line text-warning"></i>
                                    </div>
                                </div>
                                <div class="ms-3">
                                    <p class="fw-medium text-dark mb-0 small">View Metrics</p>
                                    <p class="text-muted mb-0" style="font-size: 0.75rem;">System analytics</p>
                                </div>
                            </div>
                        </div> 
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- SweetAlert2 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Dashboard Manager -->
<script src="{% static 'js/dashboard-manager.js' %}"></script>

<script>
// Initialize dashboard when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    window.dashboardManager = new DashboardManager();
    
    // Initialize dashboard
    window.dashboardManager.init();
});
</script>

{% if user.is_authenticated %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        if (window.dashboardManager) {
            window.dashboardManager.showWelcomeMessage(true, '{{ user.first_name|default:user.username|escapejs }}');
        }
    }, 200);
});
</script>
{% else %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        if (window.dashboardManager) {
            window.dashboardManager.showWelcomeMessage(false, '');
        }
    }, 200);
});
</script>
{% endif %}



<!-- Django Messages Handling -->
{% if messages %}
    {% for message in messages %}
        {% if message.tags == 'error' %}
            <script>
                Swal.fire({
                    title: 'Error',
                    text: '{{ message|escapejs }}',
                    icon: 'error',
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#ef4444',
                    background: '#ffffff',
                    color: '#1f2937',
                    position: 'bottom-end'
                });
            </script>
        {% elif message.tags == 'success' %}
            <script>
                Swal.fire({
                    title: 'Success',
                    text: '{{ message|escapejs }}',
                    icon: 'success',
                    timer: 3000,
                    showConfirmButton: false,
                    toast: true,
                    position: 'bottom-end',
                    background: '#ffffff',
                    color: '#1f2937',
                    iconColor: '#10b981'
                });
            </script>
        {% elif message.tags == 'info' %}
            <script>
                Swal.fire({
                    title: 'Information',
                    text: '{{ message|escapejs }}',
                    icon: 'info',
                    timer: 4000,
                    showConfirmButton: false,
                    toast: true,
                    position: 'bottom-end',
                    background: '#ffffff',
                    color: '#1f2937',
                    iconColor: '#3b82f6'
                });
            </script>
        {% elif message.tags == 'warning' %}
            <script>
                Swal.fire({
                    title: 'Warning',
                    text: '{{ message|escapejs }}',
                    icon: 'warning',
                    confirmButtonText: 'OK',
                    confirmButtonColor: '#f59e0b',
                    background: '#ffffff',
                    color: '#1f2937',
                    position: 'bottom-end'
                });
            </script>
        {% endif %}
    {% endfor %}
{% endif %}

{% endblock %}