@model List<Postall.Models.VideoViewModel>
@{
    ViewData["Title"] = "Gerenciador de Vídeos";
}

<div class="container mt-4">
    <div class="row mb-4">
        <div class="col-md-8">
            <h2>Meus Vídeos</h2>
            <p class="text-muted">Gerencie seus vídeos do YouTube</p>
        </div>
        <div class="col-md-4 text-right">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addVideosModal">
                <i class="bi bi-plus-circle"></i> Adicionar Vídeos
            </button>
        </div>
    </div>

    @if (TempData["Message"] != null)
    {
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            @TempData["Message"]
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    }

    <div class="row">
        @if (Model != null && Model.Any())
        {
            foreach (var video in Model)
            {
                <div class="col-md-6 mb-4">
                    <div class="card">
                        <div class="card-header bg-transparent">
                            <div class="d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">@video.Title</h5>
                                <button class="btn btn-sm btn-link" type="button" data-toggle="collapse"
                                        data-target="#collapse-@video.Id" aria-expanded="false">
                                    <i class="bi bi-chevron-down"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-5">
                                    <img src="@video.ThumbnailUrl" alt="@video.Title" class="img-fluid rounded">
                                </div>
                                <div class="col-md-7">
                                    <p class="card-text">@(video.Description?.Length > 100 ? video.Description.Substring(0, 100) + "..." : video.Description)</p>
                                    <p class="text-muted small">Publicado em: @video.PublishedAt.ToString("dd/MM/yyyy")</p>
                                </div>
                            </div>
                        </div>
                        <div class="collapse" id="collapse-@video.Id">
                            <div class="card-footer bg-white">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <a href="@video.VideoUrl" target="_blank" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-youtube"></i> Ver no YouTube
                                        </a>
                                    </div>
                                    <div>
                                        <button class="btn btn-sm btn-outline-secondary mr-1">
                                            <i class="bi bi-pencil"></i> Editar
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger">
                                            <i class="bi bi-trash"></i> Remover
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            }
        }
        else
        {
            <div class="col-12">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i> Você ainda não possui vídeos. Clique em "Adicionar Vídeos" para começar.
                </div>
            </div>
        }
    </div>
</div>

<!-- Modal para adicionar vídeos -->
<div class="modal fade" id="addVideosModal" tabindex="-1" role="dialog" aria-labelledby="addVideosModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addVideosModalLabel">Adicionar Vídeos do YouTube</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="channelVideosContainer">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">Carregando...</span>
                        </div>
                        <p class="mt-2">Carregando vídeos...</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="btnAddSelectedVideos">Adicionar Selecionados</button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script type="text/javascript">
        $(function () {
            // Carrega os vídeos do canal quando o modal é aberto
            $('#addVideosModal').on('shown.bs.modal', function () {
                loadChannelVideos();
            });

            // Função para carregar os vídeos do canal
            function loadChannelVideos() {
                $.ajax({
                    url: '@Url.Action("GetChannelVideos", "Videos")',
                    type: 'GET',
                    success: function (result) {
                        $('#channelVideosContainer').html(result);
                    },
                    error: function (error) {
                        $('#channelVideosContainer').html('<div class="alert alert-danger">Erro ao carregar vídeos. Tente novamente.</div>');
                        console.error('Erro:', error);
                    }
                });
            }

            // Manipula o clique no botão de adicionar vídeos selecionados
            $('#btnAddSelectedVideos').click(function () {
                var selectedVideos = [];

                // Coleta todos os checkboxes selecionados
                $('.video-checkbox:checked').each(function () {
                    selectedVideos.push($(this).val());
                });

                if (selectedVideos.length === 0) {
                    alert('Selecione pelo menos um vídeo para adicionar.');
                    return;
                }

                // Cria um formulário para enviar os IDs dos vídeos selecionados
                var form = $('<form action="@Url.Action("AddVideos", "Videos")" method="post"></form>');

                // Adiciona inputs ocultos para cada vídeo selecionado
                selectedVideos.forEach(function (videoId) {
                    form.append('<input type="hidden" name="selectedVideos" value="' + videoId + '">');
                });

                // Adiciona o formulário ao corpo do documento e o submete
                $('body').append(form);
                form.submit();
            });
        });
    </script>
}