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

{% block title %}{{ channel.name }} - Channel Details - Adtlas{% endblock %}

{% block extra_css %}
<!-- INTERNAL Data table css -->
<link href="{% static 'plugins/datatable/css/dataTables.bootstrap5.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/datatable/responsive.bootstrap5.css' %}" rel="stylesheet" />

<!-- INTERNAL Apexchart css -->
<link href="{% static 'plugins/apexcharts/apexcharts.css' %}" rel="stylesheet" />

<style>
.info-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
.info-card h6 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 10px;
}
.status-badge {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}
.metric-card {
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.logo-display {
    max-width: 150px;
    max-height: 75px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
    background: white;
}
.stream-status {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}
.stream-status.online {
    background-color: #28a745;
    animation: pulse 2s infinite;
}
.stream-status.offline {
    background-color: #dc3545;
}
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
.feature-badge {
    display: inline-block;
    background: #e9ecef;
    color: #495057;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    margin: 0.125rem;
}
.feature-badge.enabled {
    background: #d4edda;
    color: #155724;
}
</style>
{% endblock %}

{% block content %}
<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">{{ channel.name }}</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
            <li class="breadcrumb-item"><a href="{% url 'channels:channel_list' %}">TV Channels</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ channel.name }}</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->

<!-- ROW-1 - Channel Overview -->
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Channel Information</h3>
                <div class="card-options">
                    <a href="{% url 'channels:channel_edit' channel.id %}" class="btn btn-primary btn-sm">
                        <i class="fa fa-edit"></i> Edit
                    </a>
                    {% if channel.status == 'active' %}
                    <button type="button" class="btn btn-warning btn-sm" onclick="deactivateChannel()">
                        <i class="fa fa-pause"></i> Deactivate
                    </button>
                    {% else %}
                    <button type="button" class="btn btn-success btn-sm" onclick="activateChannel()">
                        <i class="fa fa-play"></i> Activate
                    </button>
                    {% endif %}
                    <button type="button" class="btn btn-info btn-sm" onclick="testStream()">
                        <i class="fa fa-play-circle"></i> Test Stream
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="info-card">
                            <h6>Basic Information</h6>
                            <table class="table table-borderless table-sm">
                                <tr>
                                    <td><strong>Channel Name:</strong></td>
                                    <td>{{ channel.name }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Status:</strong></td>
                                    <td>
                                        <span class="badge status-badge {% if channel.status == 'active' %}bg-success{% elif channel.status == 'inactive' %}bg-secondary{% elif channel.status == 'maintenance' %}bg-warning{% else %}bg-danger{% endif %}">
                                            {{ channel.get_status_display }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Category:</strong></td>
                                    <td>{{ channel.get_category_display|default:'-' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Language:</strong></td>
                                    <td>{{ channel.get_language_display|default:'-' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Country:</strong></td>
                                    <td>{{ channel.get_country_display|default:'-' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Created:</strong></td>
                                    <td>{{ channel.created_at|date:"M d, Y" }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="info-card">
                            <h6>Stream Information</h6>
                            <table class="table table-borderless table-sm">
                                <tr>
                                    <td><strong>Stream Status:</strong></td>
                                    <td>
                                        <span class="stream-status {% if channel.is_streaming %}online{% else %}offline{% endif %}"></span>
                                        {% if channel.is_streaming %}Online{% else %}Offline{% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Primary URL:</strong></td>
                                    <td>
                                        {% if channel.stream_url %}
                                        <a href="{{ channel.stream_url }}" target="_blank">{{ channel.stream_url|truncatechars:40 }}</a>
                                        {% else %}-{% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Backup URL:</strong></td>
                                    <td>
                                        {% if channel.backup_stream_url %}
                                        <a href="{{ channel.backup_stream_url }}" target="_blank">{{ channel.backup_stream_url|truncatechars:40 }}</a>
                                        {% else %}-{% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Quality:</strong></td>
                                    <td>{{ channel.stream_quality|default:'-' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Bitrate:</strong></td>
                                    <td>{{ channel.bitrate|default:'-' }} kbps</td>
                                </tr>
                                <tr>
                                    <td><strong>Last Check:</strong></td>
                                    <td>{{ channel.last_stream_check|date:"M d, Y H:i"|default:'-' }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                
                {% if channel.description %}
                <div class="info-card">
                    <h6>Description</h6>
                    <p>{{ channel.description }}</p>
                </div>
                {% endif %}
                
                <div class="info-card">
                    <h6>Features & Settings</h6>
                    <div class="row">
                        <div class="col-lg-4">
                            <span class="feature-badge {% if channel.enable_recording %}enabled{% endif %}">
                                <i class="fa fa-record-vinyl"></i> Recording
                            </span>
                            <span class="feature-badge {% if channel.enable_advertisements %}enabled{% endif %}">
                                <i class="fa fa-ad"></i> Advertisements
                            </span>
                        </div>
                        <div class="col-lg-4">
                            <span class="feature-badge {% if channel.is_premium %}enabled{% endif %}">
                                <i class="fa fa-crown"></i> Premium
                            </span>
                            <span class="feature-badge {% if channel.enable_chat %}enabled{% endif %}">
                                <i class="fa fa-comments"></i> Chat
                            </span>
                        </div>
                        <div class="col-lg-4">
                            <span class="feature-badge {% if channel.enable_dvr %}enabled{% endif %}">
                                <i class="fa fa-clock"></i> DVR
                            </span>
                            <span class="feature-badge {% if channel.enable_subtitles %}enabled{% endif %}">
                                <i class="fa fa-closed-captioning"></i> Subtitles
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <!-- Logo and Branding -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Channel Logo</h3>
            </div>
            <div class="card-body text-center">
                {% if channel.logo %}
                <img src="{{ channel.logo.url }}" alt="{{ channel.name }} Logo" class="logo-display mb-3">
                {% else %}
                <div class="text-muted mb-3">
                    <i class="fa fa-tv fa-3x"></i>
                    <p>No logo uploaded</p>
                </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Quick Stats -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Performance Stats</h3>
            </div>
            <div class="card-body">
                <div class="metric-card mb-3">
                    <h4 class="text-primary">{{ stats.total_viewers|default:0 }}</h4>
                    <p class="mb-0">Total Viewers</p>
                </div>
                <div class="metric-card mb-3">
                    <h4 class="text-success">{{ stats.current_viewers|default:0 }}</h4>
                    <p class="mb-0">Current Viewers</p>
                </div>
                <div class="metric-card mb-3">
                    <h4 class="text-info">{{ stats.total_impressions|default:0 }}</h4>
                    <p class="mb-0">Ad Impressions</p>
                </div>
                <div class="metric-card mb-3">
                    <h4 class="text-warning">${{ stats.revenue|default:0 }}</h4>
                    <p class="mb-0">Revenue</p>
                </div>
                <div class="metric-card">
                    <h4 class="text-danger">{{ stats.uptime|default:0 }}%</h4>
                    <p class="mb-0">Uptime</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-1 END -->

<!-- ROW-2 - Performance Charts -->
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Viewership Trends</h3>
                <div class="card-options">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-sm btn-outline-primary active" data-period="24">24 Hours</button>
                        <button type="button" class="btn btn-sm btn-outline-primary" data-period="7">7 Days</button>
                        <button type="button" class="btn btn-sm btn-outline-primary" data-period="30">30 Days</button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div id="viewership-chart"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Geographic Distribution</h3>
            </div>
            <div class="card-body">
                <div id="geographic-chart"></div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-2 END -->

<!-- ROW-3 - Active Campaigns -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Active Campaigns</h3>
                <div class="card-options">
                    <a href="{% url 'campaigns:campaign_create' %}?channel={{ channel.id }}" class="btn btn-primary btn-sm">
                        <i class="fa fa-plus"></i> New Campaign
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom" id="campaigns-table">
                        <thead>
                            <tr>
                                <th>Campaign Name</th>
                                <th>Advertiser</th>
                                <th>Type</th>
                                <th>Status</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Impressions</th>
                                <th>CTR</th>
                                <th>Revenue</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for campaign in active_campaigns %}
                            <tr>
                                <td>
                                    <a href="{% url 'campaigns:campaign_detail' campaign.id %}">{{ campaign.name }}</a>
                                </td>
                                <td>
                                    <a href="{% url 'advertisers:advertiser_detail' campaign.advertiser.id %}">{{ campaign.advertiser.name }}</a>
                                </td>
                                <td>{{ campaign.get_campaign_type_display }}</td>
                                <td>
                                    <span class="badge {% if campaign.status == 'active' %}bg-success{% elif campaign.status == 'paused' %}bg-warning{% elif campaign.status == 'completed' %}bg-info{% else %}bg-secondary{% endif %}">
                                        {{ campaign.get_status_display }}
                                    </span>
                                </td>
                                <td>{{ campaign.start_date|date:"M d, Y" }}</td>
                                <td>{{ campaign.end_date|date:"M d, Y"|default:'-' }}</td>
                                <td>{{ campaign.impressions|default:0 }}</td>
                                <td>{{ campaign.ctr|default:0 }}%</td>
                                <td>${{ campaign.revenue|default:0 }}</td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{% url 'campaigns:campaign_detail' campaign.id %}" class="btn btn-sm btn-outline-primary" title="View">
                                            <i class="fa fa-eye"></i>
                                        </a>
                                        <a href="{% url 'campaigns:campaign_edit' campaign.id %}" class="btn btn-sm btn-outline-warning" title="Edit">
                                            <i class="fa fa-edit"></i>
                                        </a>
                                        {% if campaign.status == 'active' %}
                                        <button class="btn btn-sm btn-outline-secondary" onclick="pauseCampaign({{ campaign.id }})" title="Pause">
                                            <i class="fa fa-pause"></i>
                                        </button>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="10" class="text-center">No active campaigns for this channel</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-3 END -->

<!-- ROW-4 - Stream Health & Monitoring -->
<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Stream Health</h3>
                <div class="card-options">
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="refreshStreamHealth()">
                        <i class="fa fa-refresh"></i> Refresh
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <div class="metric-card mb-3">
                            <h5 class="{% if stream_health.latency < 5 %}text-success{% elif stream_health.latency < 10 %}text-warning{% else %}text-danger{% endif %}">
                                {{ stream_health.latency|default:'-' }}ms
                            </h5>
                            <p class="mb-0">Latency</p>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="metric-card mb-3">
                            <h5 class="{% if stream_health.packet_loss < 1 %}text-success{% elif stream_health.packet_loss < 5 %}text-warning{% else %}text-danger{% endif %}">
                                {{ stream_health.packet_loss|default:'-' }}%
                            </h5>
                            <p class="mb-0">Packet Loss</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <div class="metric-card mb-3">
                            <h5 class="text-info">{{ stream_health.fps|default:'-' }}</h5>
                            <p class="mb-0">FPS</p>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="metric-card mb-3">
                            <h5 class="text-info">{{ stream_health.resolution|default:'-' }}</h5>
                            <p class="mb-0">Resolution</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Recent Events</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Time</th>
                                <th>Event</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for event in recent_events %}
                            <tr>
                                <td>{{ event.timestamp|date:"H:i" }}</td>
                                <td>{{ event.description }}</td>
                                <td>
                                    <span class="badge {% if event.type == 'info' %}bg-info{% elif event.type == 'warning' %}bg-warning{% elif event.type == 'error' %}bg-danger{% else %}bg-success{% endif %}">
                                        {{ event.get_type_display }}
                                    </span>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="3" class="text-center">No recent events</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-4 END -->

<!-- ROW-5 - Technical Details -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Technical Details</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="info-card">
                            <h6>Stream Configuration</h6>
                            <table class="table table-borderless table-sm">
                                <tr>
                                    <td><strong>Protocol:</strong></td>
                                    <td>{{ channel.stream_protocol|default:'-' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Codec:</strong></td>
                                    <td>{{ channel.video_codec|default:'-' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Audio Codec:</strong></td>
                                    <td>{{ channel.audio_codec|default:'-' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Container:</strong></td>
                                    <td>{{ channel.container_format|default:'-' }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="info-card">
                            <h6>Quality Settings</h6>
                            <table class="table table-borderless table-sm">
                                <tr>
                                    <td><strong>Resolution:</strong></td>
                                    <td>{{ channel.resolution|default:'-' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Bitrate:</strong></td>
                                    <td>{{ channel.bitrate|default:'-' }} kbps</td>
                                </tr>
                                <tr>
                                    <td><strong>Frame Rate:</strong></td>
                                    <td>{{ channel.frame_rate|default:'-' }} fps</td>
                                </tr>
                                <tr>
                                    <td><strong>Aspect Ratio:</strong></td>
                                    <td>{{ channel.aspect_ratio|default:'-' }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="info-card">
                            <h6>Server Information</h6>
                            <table class="table table-borderless table-sm">
                                <tr>
                                    <td><strong>Server Location:</strong></td>
                                    <td>{{ channel.server_location|default:'-' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>CDN:</strong></td>
                                    <td>{{ channel.cdn_provider|default:'-' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Edge Servers:</strong></td>
                                    <td>{{ channel.edge_servers|default:'-' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Load Balancer:</strong></td>
                                    <td>{{ channel.load_balancer|default:'-' }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-5 END -->
{% endblock %}

{% block extra_js %}
<!-- INTERNAL Data tables js-->
<script src="{% static 'plugins/datatable/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/dataTables.bootstrap5.js' %}"></script>
<script src="{% static 'plugins/datatable/dataTables.responsive.min.js' %}"></script>

<!-- INTERNAL Apexchart js -->
<script src="{% static 'js/apexcharts.js' %}"></script>

<script>
$(document).ready(function() {
    // Initialize DataTables
    $('#campaigns-table').DataTable({
        "pageLength": 10,
        "order": [[ 4, "desc" ]]
    });
    
    // Initialize charts
    initializeCharts();
    
    // Period selector
    $('.btn-group button').on('click', function() {
        $('.btn-group button').removeClass('active');
        $(this).addClass('active');
        updateViewershipChart($(this).data('period'));
    });
    
    // Auto-refresh stream health every 30 seconds
    setInterval(refreshStreamHealth, 30000);
});

function initializeCharts() {
    // Viewership chart
    var viewershipOptions = {
        chart: {
            height: 350,
            type: 'area',
            toolbar: {
                show: false
            }
        },
        series: [{
            name: 'Viewers',
            data: {{ chart_data.viewers|default:"[]" }}
        }, {
            name: 'Ad Impressions',
            data: {{ chart_data.impressions|default:"[]" }}
        }],
        xaxis: {
            categories: {{ chart_data.timestamps|default:"[]" }}
        },
        colors: ['#6259ca', '#17a2b8'],
        fill: {
            type: 'gradient',
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.7,
                opacityTo: 0.3
            }
        }
    };
    
    var viewershipChart = new ApexCharts(document.querySelector("#viewership-chart"), viewershipOptions);
    viewershipChart.render();
    
    // Geographic distribution chart
    var geoOptions = {
        chart: {
            type: 'donut',
            height: 300
        },
        series: {{ chart_data.geographic_values|default:"[]" }},
        labels: {{ chart_data.geographic_labels|default:"[]" }},
        colors: ['#6259ca', '#17a2b8', '#28a745', '#ffc107', '#dc3545']
    };
    
    var geoChart = new ApexCharts(document.querySelector("#geographic-chart"), geoOptions);
    geoChart.render();
}

function updateViewershipChart(period) {
    $.ajax({
        url: '/channels/{{ channel.id }}/chart-data/',
        data: {
            'period': period
        },
        success: function(data) {
            // Update chart with new data
            // Implementation depends on your backend API
        }
    });
}

function activateChannel() {
    if (confirm('Are you sure you want to activate this channel?')) {
        $.ajax({
            url: '/channels/{{ channel.id }}/activate/',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function(data) {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Failed to activate channel: ' + data.error);
                }
            }
        });
    }
}

function deactivateChannel() {
    if (confirm('Are you sure you want to deactivate this channel?')) {
        $.ajax({
            url: '/channels/{{ channel.id }}/deactivate/',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function(data) {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Failed to deactivate channel: ' + data.error);
                }
            }
        });
    }
}

function testStream() {
    $.ajax({
        url: '/channels/{{ channel.id }}/test-stream/',
        method: 'POST',
        data: {
            'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
        },
        success: function(data) {
            if (data.success) {
                alert('Stream test successful! Latency: ' + data.latency + 'ms');
            } else {
                alert('Stream test failed: ' + data.error);
            }
        },
        error: function() {
            alert('Failed to test stream');
        }
    });
}

function refreshStreamHealth() {
    $.ajax({
        url: '/channels/{{ channel.id }}/stream-health/',
        success: function(data) {
            if (data.success) {
                // Update stream health metrics
                updateStreamHealthDisplay(data.health);
            }
        }
    });
}

function updateStreamHealthDisplay(health) {
    // Update the stream health metrics in the UI
    // This would update the latency, packet loss, FPS, and resolution displays
}

function pauseCampaign(campaignId) {
    if (confirm('Are you sure you want to pause this campaign?')) {
        $.ajax({
            url: '/campaigns/' + campaignId + '/pause/',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function(data) {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Failed to pause campaign: ' + data.error);
                }
            }
        });
    }
}
</script>
{% endblock %}