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

{% block title %}Channels Dashboard - Adtlas{% endblock %}

{% block extra_css %}
<!-- INTERNAL Select2 css -->
<link href="{% static 'plugins/select2/select2.min.css' %}" rel="stylesheet" />
<!-- INTERNAL File Upload css -->
<link href="{% static 'plugins/fileuploads/css/fileupload.css' %}" rel="stylesheet" type="text/css" />
<!-- INTERNAL Sumoselect css -->
<link rel="stylesheet" href="{% static 'plugins/sumoselect/sumoselect.css' %}">
<!-- DataTables CSS -->
<link href="{% static 'plugins/datatable/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
<!-- Chart.js CSS -->
<link href="{% static 'plugins/chart.js/Chart.min.css' %}" rel="stylesheet">
<style>
.modal-lg { max-width: 90%; }
.channel-logo { width: 50px; height: 50px; object-fit: cover; }
.circular-logo-upload .dropify-wrapper {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    overflow: hidden;
}
</style>
{% endblock %}

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

<!-- Statistics Cards -->
<div class="row">
    <div class="col-xl-3 col-md-6">
        <div class="card overflow-hidden">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6>Total Channels</h6>
                        <h2 class="mb-0 number-font">{{ total_channels|default:0 }}</h2>
                    </div>
                    <div class="ms-auto">
                        <canvas id="saleschart" class="h-8 w-9"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card overflow-hidden">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6>Active Channels</h6>
                        <h2 class="mb-0 number-font">{{ active_channels|default:0 }}</h2>
                    </div>
                    <div class="ms-auto">
                        <canvas id="leadschart" class="h-8 w-9"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card overflow-hidden">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6>Online Channels</h6>
                        <h2 class="mb-0 number-font">{{ online_channels|default:0 }}</h2>
                    </div>
                    <div class="ms-auto">
                        <canvas id="profitchart" class="h-8 w-9"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card overflow-hidden">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6>Total Zones</h6>
                        <h2 class="mb-0 number-font">{{ total_zones|default:0 }}</h2>
                    </div>
                    <div class="ms-auto">
                        <canvas id="costchart" class="h-8 w-9"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Channels Management -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Channel Management</h3>
                <div class="card-options">
                    <button class="btn btn-primary btn-sm" onclick="openCreateModal()">
                        <i class="fe fe-plus"></i> Add Channel
                    </button>
                    <button class="btn btn-secondary btn-sm ms-2" onclick="loadChannelsList()">
                        <i class="fe fe-list"></i> View All
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    {% if recent_channels %}
                    <table class="table table-bordered text-nowrap" id="channelsTable">
                        <thead>
                            <tr>
                                <th>Logo</th>
                                <th>Channel Name</th>
                                <th>Display Name</th>
                                <th>Type</th>
                                <th>Status</th>
                                <th>Zone</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for channel in recent_channels %}
                            <tr>
                                <td>
                                    {% if channel.logo %}
                                    <img src="{{ channel.logo.url }}" alt="{{ channel.name }}" class="avatar rounded-circle">
                                    {% else %}
                                    <span class="avatar bg-primary rounded-circle">{{ channel.name|slice:":1"|upper }}</span>
                                    {% endif %}
                                </td>
                                <td>{{ channel.name }}</td>
                                <td>{{ channel.display_name }}</td>
                                <td>{{ channel.get_channel_type_display|default:"N/A" }}</td>
                                <td>
                                    {% if channel.status == 'active' %}
                                    <span class="badge bg-success">{{ channel.get_status_display }}</span>
                                    {% else %}
                                    <span class="badge bg-secondary">{{ channel.get_status_display }}</span>
                                    {% endif %}
                                </td>
                                <td>{{ channel.zone.name|default:"N/A" }}</td>
                                <td>
                                    <div class="btn-group">
                                        <button class="btn btn-sm btn-primary" onclick="viewChannel('{{ channel.id }}')">
                                            <i class="fe fe-eye"></i>
                                        </button>
                                        <button class="btn btn-sm btn-secondary" onclick="editChannel('{{ channel.id }}')">
                                            <i class="fe fe-edit"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% else %}
                    <div class="empty">
                        <p class="empty-title">No channels found</p>
                        <p class="empty-subtitle text-muted">Create your first channel to get started.</p>
                        <button class="btn btn-primary" onclick="openCreateModal()">
                            <i class="fe fe-plus"></i> Create Channel
                        </button>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Channel Create/Edit Modal -->
<div class="modal fade" id="channelModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="channelModalLabel">Add Channel</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="channelForm" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="row mb-4">
                        <div class="col-lg-3 col-md-12">
                            <div class="form-group text-center">
                                <label class="form-label">Channel Logo</label>
                                <div class="circular-logo-upload">
                                    <input type="file" class="dropify-circular" name="logo" data-height="150" accept="image/*">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-9 col-md-12">
                            <div class="row">
                                <div class="col-lg-8 col-md-12">
                                    <div class="form-group">
                                        <label class="form-label">Channel Name <span class="text-red">*</span></label>
                                        <input type="text" class="form-control" name="name" placeholder="Enter channel name" required>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-12">
                                    <div class="form-group">
                                        <label class="form-label">Status</label>
                                        <select class="form-control select2" name="status">
                                            <option value="active">Active</option>
                                            <option value="inactive">Inactive</option>
                                            <option value="maintenance">Maintenance</option>
                                            <option value="testing">Testing</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-lg-6 col-md-12">
                            <div class="form-group">
                                <label class="form-label">Display Name <span class="text-red">*</span></label>
                                <input type="text" class="form-control" name="display_name" placeholder="Enter display name" required>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12">
                            <div class="form-group">
                                <label class="form-label">Channel Number</label>
                                <input type="text" class="form-control" name="channel_number" placeholder="Enter channel number">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-lg-6 col-md-12">
                            <div class="form-group">
                                <label class="form-label">Channel Type</label>
                                <select class="form-control select2" name="channel_type">
                                    <option value="terrestrial">Terrestrial/Over-the-Air</option>
                                    <option value="cable">Cable Channel</option>
                                    <option value="satellite" selected>Satellite Channel</option>
                                    <option value="iptv">IPTV Channel</option>
                                    <option value="streaming">Streaming Channel</option>
                                    <option value="radio">Radio Station</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12">
                            <div class="form-group">
                                <label class="form-label">Zone</label>
                                <select class="form-control select2" name="zone_id" id="zoneSelect">
                                    <option value="">Select Zone</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-lg-6 col-md-12">
                            <div class="form-group">
                                <label class="form-label">Stream URL</label>
                                <input type="url" class="form-control" name="stream_url" placeholder="https://example.com/stream">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12">
                            <div class="form-group">
                                <label class="form-label">Backup Stream URL</label>
                                <input type="url" class="form-control" name="backup_stream_url" placeholder="https://example.com/backup">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label class="form-label">Description</label>
                                <textarea class="form-control" name="description" rows="4" placeholder="Enter channel description"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Channel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Channel Detail Modal -->
<div class="modal fade" id="channelDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Channel Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="channelDetailContent">
                <!-- Content loaded via JavaScript -->
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<!-- INTERNAL Select2 js -->
<script src="{% static 'plugins/select2/select2.full.min.js' %}"></script>
<!-- INTERNAL File Upload js -->
<script src="{% static 'plugins/fileuploads/js/fileupload.js' %}"></script>
<script src="{% static 'plugins/fileuploads/js/file-upload.js' %}"></script>
<!-- INTERNAL Sumoselect js-->
<script src="{% static 'plugins/sumoselect/jquery.sumoselect.js' %}"></script>
<!-- Chart.js -->
<script src="{% static 'plugins/chart.js/Chart.bundle.min.js' %}"></script>
<!-- DataTables -->
<script src="{% static 'plugins/datatable/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/dataTables.bootstrap5.js' %}"></script>

<script>
let currentChannelId = null;

$(document).ready(function() {
    // Initialize components
    initializeComponents();
    loadZones();
    initializeCharts();
    
    // Form submission
    $('#channelForm').on('submit', function(e) {
        e.preventDefault();
        saveChannel();
    });
});

function initializeComponents() {
    // Initialize Select2
    $('.select2').select2({
        dropdownParent: $('#channelModal'),
        placeholder: 'Select an option',
        allowClear: true
    });
    
    // Initialize Dropify
    $('.dropify-circular').dropify({
        messages: {
            'default': 'Drag and drop a logo here or click',
            'replace': 'Drag and drop or click to replace logo',
            'remove': 'Remove',
            'error': 'Ooops, something wrong happened.'
        }
    });
    
    // Initialize DataTable
    $('#channelsTable').DataTable({
        responsive: true,
        pageLength: 10,
        order: [[1, 'asc']]
    });
}

function openCreateModal() {
    currentChannelId = null;
    $('#channelModalLabel').text('Add Channel');
    $('#channelForm')[0].reset();
    $('.select2').val(null).trigger('change');
    $('#channelModal').modal('show');
}

function editChannel(channelId) {
    currentChannelId = channelId;
    $('#channelModalLabel').text('Edit Channel');
    
    // Load channel data
    fetch(`/channels/api/channels/${channelId}/`)
        .then(response => response.json())
        .then(data => {
            if (data.channel) {
                populateForm(data.channel);
                $('#channelModal').modal('show');
            }
        })
        .catch(error => {
            console.error('Error loading channel:', error);
            alert('Error loading channel details');
        });
}

function populateForm(channel) {
    $('[name="name"]').val(channel.name);
    $('[name="display_name"]').val(channel.display_name);
    $('[name="channel_number"]').val(channel.channel_number);
    $('[name="channel_type"]').val(channel.channel_type).trigger('change');
    $('[name="status"]').val(channel.status).trigger('change');
    $('[name="stream_url"]').val(channel.stream_url);
    $('[name="backup_stream_url"]').val(channel.backup_stream_url);
    $('[name="description"]').val(channel.description);
    
    if (channel.zone && channel.zone.id) {
        $('[name="zone_id"]').val(channel.zone.id).trigger('change');
    }
}

function saveChannel() {
    const formData = new FormData($('#channelForm')[0]);
    const data = Object.fromEntries(formData.entries());
    
    const url = currentChannelId 
        ? `/channels/api/channels/${currentChannelId}/update/`
        : '/channels/api/channels/create/';
    
    const method = currentChannelId ? 'PUT' : 'POST';
    
    fetch(url, {
        method: method,
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': getCookie('csrftoken')
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            $('#channelModal').modal('hide');
            location.reload();
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error saving channel');
    });
}

function viewChannel(channelId) {
    fetch(`/channels/api/channels/${channelId}/`)
        .then(response => response.json())
        .then(data => {
            if (data.channel) {
                displayChannelDetails(data.channel);
                $('#channelDetailModal').modal('show');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error loading channel details');
        });
}

function displayChannelDetails(channel) {
    const logoHtml = channel.logo 
        ? `<img src="${channel.logo}" alt="${channel.name}" class="img-fluid rounded mb-3" style="max-width: 200px;">`
        : `<div class="avatar bg-primary rounded-circle mb-3" style="width: 100px; height: 100px; font-size: 2rem;">${channel.name.charAt(0).toUpperCase()}</div>`;
    
    const html = `
        <div class="row">
            <div class="col-md-4 text-center">
                ${logoHtml}
                <h5>${channel.name}</h5>
                <p class="text-muted">${channel.display_name}</p>
            </div>
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>Channel Number:</strong> ${channel.channel_number || 'N/A'}</p>
                        <p><strong>Type:</strong> ${channel.channel_type_display}</p>
                        <p><strong>Status:</strong> ${channel.status_display}</p>
                        <p><strong>Zone:</strong> ${channel.zone.name || 'N/A'}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>Stream URL:</strong> ${channel.stream_url || 'N/A'}</p>
                        <p><strong>Backup URL:</strong> ${channel.backup_stream_url || 'N/A'}</p>
                        <p><strong>Online:</strong> ${channel.is_online ? 'Yes' : 'No'}</p>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-md-12">
                        <p><strong>Description:</strong></p>
                        <p class="text-muted">${channel.description || 'No description available'}</p>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    $('#channelDetailContent').html(html);
}

function loadZones() {
    fetch('/channels/api/zones/')
        .then(response => response.json())
        .then(data => {
            const select = $('#zoneSelect');
            select.empty().append('<option value="">Select Zone</option>');
            data.zones.forEach(zone => {
                select.append(`<option value="${zone.id}">${zone.name} (${zone.code})</option>`);
            });
        })
        .catch(error => console.error('Error loading zones:', error));
}

function loadChannelsList() {
    fetch('/channels/api/channels/')
        .then(response => response.json())
        .then(data => {
            console.log('Channels loaded:', data);
            // You can implement a channels list modal here
        })
        .catch(error => console.error('Error loading channels:', error));
}

function initializeCharts() {
    const chartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: { beginAtZero: true, display: false },
            x: { display: false }
        },
        plugins: { legend: { display: false } },
        elements: { point: { radius: 0 } }
    };
    
    const chartData = {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
            data: [12, 19, 3, 17, 6, 3],
            borderColor: '#007bff',
            backgroundColor: 'rgba(0, 123, 255, 0.1)',
            borderWidth: 2,
            fill: true
        }]
    };
    
    ['saleschart', 'leadschart', 'profitchart', 'costchart'].forEach(chartId => {
        const ctx = document.getElementById(chartId);
        if (ctx) {
            new Chart(ctx, {
                type: 'line',
                data: chartData,
                options: chartOptions
            });
        }
    });
}

function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
</script>
{% endblock %}