{% extends "channels/base.html" %}
{% load static %}

{% block title %}Channels Dashboard - {{ block.super }}{% endblock %}

{% block breadcrumb_items %}
    <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
{% endblock %}

{% block channels_content %}
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2"><i class="fas fa-tv me-2"></i>Channels Dashboard</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            <div class="btn-group me-2">
                {% if perms.channels.add_channel %}
                <a href="{% url 'channels:channel_create' %}" class="btn btn-primary">
                    <i class="fas fa-plus me-1"></i>Add Channel
                </a>
                {% endif %}
                {% if perms.channels.add_epgentry %}
                <a href="{% url 'channels:epg_create' %}" class="btn btn-outline-primary">
                    <i class="fas fa-calendar-plus me-1"></i>Add EPG Entry
                </a>
                {% endif %}
            </div>
            <div class="dropdown">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    <i class="fas fa-download me-1"></i>Export
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{% url 'channels:export_epg_csv' %}">Export EPG Data</a></li>
                    <li><a class="dropdown-item" href="#" onclick="exportChannelData()">Export Channel List</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Channels
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.total_channels }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-broadcast-tower fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Active Channels
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.active_channels }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                Distribution Zones
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.total_zones }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-globe fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Total Shows
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.total_shows }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-film fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row mb-4">
        <!-- Channel Types Chart -->
        <div class="col-xl-6 col-lg-7">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Channel Distribution by Type</h6>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="channelTypesChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Show Types Chart -->
        <div class="col-xl-6 col-lg-5">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Content Distribution by Type</h6>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="showTypesChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activity and Quick Actions -->
    <div class="row">
        <!-- Recent EPG Entries -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Recent EPG Entries</h6>
                    <a href="{% url 'channels:epg_list' %}" class="btn btn-sm btn-outline-primary">
                        View All <i class="fas fa-arrow-right ms-1"></i>
                    </a>
                </div>
                <div class="card-body">
                    {% if recent_epg_entries %}
                        <div class="list-group list-group-flush">
                            {% for entry in recent_epg_entries %}
                                <div class="list-group-item d-flex justify-content-between align-items-start">
                                    <div class="ms-2 me-auto">
                                        <div class="fw-bold">{{ entry.show.title }}</div>
                                        <small class="text-muted">
                                            <i class="fas fa-tv me-1"></i>{{ entry.channel.name }}
                                            <span class="mx-2">•</span>
                                            <i class="fas fa-clock me-1"></i>{{ entry.start_time|date:"M d, H:i" }}
                                        </small>
                                    </div>
                                    <span class="badge bg-{% if entry.is_currently_airing %}success{% elif entry.start_time > now %}primary{% else %}secondary{% endif %} rounded-pill">
                                        {% if entry.is_currently_airing %}Live{% elif entry.start_time > now %}Upcoming{% else %}Aired{% endif %}
                                    </span>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center text-muted py-4">
                            <i class="fas fa-calendar-times fa-3x mb-3"></i>
                            <p>No recent EPG entries found.</p>
                            {% if perms.channels.add_epgentry %}
                                <a href="{% url 'channels:epg_create' %}" class="btn btn-primary">
                                    <i class="fas fa-plus me-1"></i>Add First EPG Entry
                                </a>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="col-lg-6 mb-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Quick Actions</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        {% if perms.channels.add_channel %}
                        <div class="col-md-6">
                            <a href="{% url 'channels:channel_create' %}" class="btn btn-outline-primary w-100 py-3">
                                <i class="fas fa-plus-circle fa-2x d-block mb-2"></i>
                                <span>Add New Channel</span>
                            </a>
                        </div>
                        {% endif %}
                        
                        {% if perms.channels.add_zone %}
                        <div class="col-md-6">
                            <a href="{% url 'channels:zone_create' %}" class="btn btn-outline-success w-100 py-3">
                                <i class="fas fa-globe-americas fa-2x d-block mb-2"></i>
                                <span>Add Distribution Zone</span>
                            </a>
                        </div>
                        {% endif %}
                        
                        {% if perms.channels.add_show %}
                        <div class="col-md-6">
                            <a href="{% url 'channels:show_create' %}" class="btn btn-outline-info w-100 py-3">
                                <i class="fas fa-film fa-2x d-block mb-2"></i>
                                <span>Add New Show</span>
                            </a>
                        </div>
                        {% endif %}
                        
                        {% if perms.channels.add_epgentry %}
                        <div class="col-md-6">
                            <a href="{% url 'channels:bulk_epg_import' %}" class="btn btn-outline-warning w-100 py-3">
                                <i class="fas fa-upload fa-2x d-block mb-2"></i>
                                <span>Bulk Import EPG</span>
                            </a>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- System Status -->
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">System Status</h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-4">
                            <div class="border-end">
                                <div class="h4 font-weight-bold text-success">{{ stats.active_channels }}</div>
                                <div class="small text-muted">Active Channels</div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="border-end">
                                <div class="h4 font-weight-bold text-info">{{ stats.active_zones }}</div>
                                <div class="small text-muted">Active Zones</div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="h4 font-weight-bold text-warning">{{ stats.active_jingles }}</div>
                            <div class="small text-muted">Active Jingles</div>
                        </div>
                    </div>
                    
                    <hr class="my-3">
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="text-muted">Last Updated:</span>
                        <span class="badge bg-secondary">{{ now|date:"M d, Y H:i" }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- EPG Calendar Preview -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Today's Schedule Preview</h6>
                    <a href="{% url 'channels:epg_list' %}" class="btn btn-sm btn-outline-primary">
                        View Full Schedule <i class="fas fa-arrow-right ms-1"></i>
                    </a>
                </div>
                <div class="card-body">
                    <div id="epgCalendarPreview"></div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_footer_js %}
    <script>
        // Channel Types Chart
        const channelTypesCtx = document.getElementById('channelTypesChart').getContext('2d');
        const channelTypesChart = new Chart(channelTypesCtx, {
            type: 'doughnut',
            data: {
                labels: {{ channel_types_labels|safe }},
                datasets: [{
                    data: {{ channel_types_data|safe }},
                    backgroundColor: [
                        '#4e73df',
                        '#1cc88a',
                        '#36b9cc',
                        '#f6c23e',
                        '#e74a3b'
                    ],
                    hoverBackgroundColor: [
                        '#2e59d9',
                        '#17a673',
                        '#2c9faf',
                        '#f4b619',
                        '#e02d1b'
                    ],
                    hoverBorderColor: "rgba(234, 236, 244, 1)",
                }],
            },
            options: {
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                    }
                },
                cutout: '60%',
            },
        });

        // Show Types Chart
        const showTypesCtx = document.getElementById('showTypesChart').getContext('2d');
        const showTypesChart = new Chart(showTypesCtx, {
            type: 'pie',
            data: {
                labels: {{ show_types_labels|safe }},
                datasets: [{
                    data: {{ show_types_data|safe }},
                    backgroundColor: [
                        '#4e73df',
                        '#1cc88a',
                        '#36b9cc',
                        '#f6c23e',
                        '#e74a3b',
                        '#858796'
                    ],
                    hoverBackgroundColor: [
                        '#2e59d9',
                        '#17a673',
                        '#2c9faf',
                        '#f4b619',
                        '#e02d1b',
                        '#6c757d'
                    ],
                    hoverBorderColor: "rgba(234, 236, 244, 1)",
                }],
            },
            options: {
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                    }
                }
            },
        });

        // Initialize EPG Calendar Preview
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('epgCalendarPreview');
            if (calendarEl) {
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'timeGridDay',
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'timeGridDay,timeGridWeek'
                    },
                    height: 400,
                    events: {
                        url: '{% url "channels:epg_calendar_api" %}',
                        method: 'GET',
                        extraParams: function() {
                            return {
                                start: new Date().toISOString().split('T')[0],
                                end: new Date(Date.now() + 24*60*60*1000).toISOString().split('T')[0]
                            };
                        }
                    },
                    eventClick: function(info) {
                        // Show event details in modal or navigate to EPG entry
                        alert('Event: ' + info.event.title);
                    }
                });
                calendar.render();
            }
        });

        // Export functions
        function exportChannelData() {
            // Implement channel data export
            window.location.href = '/api/channels/export/';
        }

        // Auto-refresh statistics every 5 minutes
        setInterval(function() {
            fetch('{% url "channels:dashboard" %}', {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                // Update statistics if needed
                console.log('Statistics refreshed');
            })
            .catch(error => console.error('Error refreshing statistics:', error));
        }, 300000); // 5 minutes
    </script>
{% endblock %}