@extends('public.layout')

@php
    // Garantir que seoData existe e tem valores padrão
    if (!isset($seoData)) {
        $seoData = [];
    }

    // Adicionar breadcrumbs para SEO
    $seoData['breadcrumbs'] = [['name' => 'Home', 'url' => url('/')]];
    $seoData['breadcrumbs'][] = [
        'name' => 'Vídeos',
        'url' => url()->current(),
    ];

    // Garantir tipo de conteúdo
    $seoData['type'] = 'website';
@endphp

@section('seo')
    @php
        // Passar dados de SEO para o layout
        // O layout já acessa $seoData diretamente
    @endphp
@endsection

@section('content')
    {{-- Banner no topo da página --}}
    <div style="margin: 15px 15px 10px 15px; text-align: center;">
        @include('components.banners', ['regionCode' => 'topo', 'isHomepage' => false])
    </div>

    <div class="jl_block_content">
        <div class="jlc-container">
            <div class="jlc-row">
                <div class="jlc-col-md-12">
                    {{-- Breadcrumbs --}}
                    <div class="jl_breadcrumbs">
                        <span class="jl_item_bread">
                            <a href="/">Home</a>
                        </span>
                        <i class="jli-right-chevron"></i>
                        <span class="jl_item_bread">
                            <a href="{{ url('/videos') }}">Vídeos</a>
                        </span>
                        @if ($searchQuery)
                            <i class="jli-right-chevron"></i>
                            <span class="jl_item_bread">
                                Busca: "{{ $searchQuery }}"
                            </span>
                        @endif
                    </div>

                    {{-- Header da página --}}
                    <div class="jl_ache_head" style="margin-bottom: 30px;">
                        <div class="jl_pc_sec_title">
                            <h1 class="jl_pc_sec_h">Biblioteca de Vídeos</h1>
                            @if ($searchQuery)
                                <div class="post_subtitle_text">
                                    <p>Buscando por: "{{ $searchQuery }}"</p>
                                </div>
                            @endif
                        </div>
                        <span class="jl_auth_numw">
                            <span class="jl_auth_num h1">{{ number_format($videos->total(), 0, ',', '.') }}</span>
                            <span class="jl_auth_txt">Vídeos</span>
                        </span>
                    </div>

                    {{-- Barra de busca --}}
                    <div class="videos-search-bar" style="margin-bottom: 40px;">
                        <form method="get" action="{{ url('/videos') }}" class="videos-search-form">
                            <div class="search-input-wrapper">
                                <input 
                                    type="text" 
                                    name="q" 
                                    value="{{ $searchQuery }}" 
                                    placeholder="Buscar vídeos por legenda, título, descrição..." 
                                    class="videos-search-input"
                                    autocomplete="off"
                                >
                                <button type="submit" class="videos-search-button">
                                    <i class="jli-search"></i>
                                    <span>Buscar</span>
                                </button>
                            </div>
                            @if ($searchQuery)
                                <a href="{{ url('/videos') }}" class="videos-clear-search">
                                    <i class="jli-close"></i> Limpar busca
                                </a>
                            @endif
                        </form>
                    </div>

                    {{-- Grid de vídeos --}}
                    <div class="videos-grid-container">
                        @if ($videos->total() > 0)
                            <div class="videos-grid" 
                                 id="videos-grid"
                                 data-search-query="{{ $searchQuery }}"
                                 data-current-page="{{ $videos->currentPage() }}"
                                 data-last-page="{{ $videos->lastPage() }}">
                                @include('components.video-cards', ['videos' => $videos->items()])
                            </div>

                            {{-- Botão Carregar Mais --}}
                            @if ($videos->hasMorePages())
                                <div class="jl-loadmore-wrapper" style="display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 30px; margin-bottom: 30px;">
                                    <button type="button" class="jl-load-link jl-loadmore-btn" 
                                        data-search-query="{{ $searchQuery }}"
                                        data-current-page="{{ $videos->currentPage() }}">
                                        <span class="jl-load-text">Carregar mais</span>
                                        <span class="jl-load-animation" style="display: none;">
                                            <i class="jli-loader"></i> Carregando...
                                        </span>
                                    </button>
                                </div>
                            @endif
                        @else
                            <div class="videos-empty" style="text-align: center; padding: 60px 20px;">
                                <i class="jli-video" style="font-size: 64px; color: #ccc; margin-bottom: 20px;"></i>
                                <h3 style="font-size: 24px; color: #666; margin-bottom: 10px;">
                                    @if ($searchQuery)
                                        Nenhum vídeo encontrado
                                    @else
                                        Nenhum vídeo disponível
                                    @endif
                                </h3>
                                <p style="color: #999; font-size: 16px;">
                                    @if ($searchQuery)
                                        Tente usar termos diferentes ou verifique a ortografia.
                                    @else
                                        A biblioteca de vídeos está vazia no momento.
                                    @endif
                                </p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* Barra de busca */
        .videos-search-bar {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
        }

        .videos-search-form {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .search-input-wrapper {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .videos-search-input {
            flex: 1;
            padding: 12px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        .videos-search-input:focus {
            outline: none;
            border-color: #007bff;
        }

        .videos-search-button {
            padding: 12px 24px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background-color 0.3s;
        }

        .videos-search-button:hover {
            background: #0056b3;
        }

        .videos-clear-search {
            color: #666;
            text-decoration: none;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: color 0.3s;
        }

        .videos-clear-search:hover {
            color: #007bff;
        }

        /* Grid de vídeos - Estilo TV Stream */
        .videos-grid-container {
            width: 100%;
        }

        .videos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 24px;
            margin-bottom: 40px;
        }

        @media (min-width: 1200px) {
            .videos-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (min-width: 768px) and (max-width: 1199px) {
            .videos-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (min-width: 480px) and (max-width: 767px) {
            .videos-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 479px) {
            .videos-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Card de vídeo */
        .video-card {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
            cursor: pointer;
        }

        .video-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        }

        .video-card-link {
            text-decoration: none;
            color: inherit;
            display: block;
            position: relative;
        }
        
        .video-card-link:hover .video-card-play-overlay {
            opacity: 1 !important;
            transform: translate(-50%, -50%) scale(1.1) !important;
        }

        .video-card-thumbnail {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 16:9 aspect ratio */
            background: #000;
            overflow: hidden;
        }

        .video-card-thumbnail img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .video-card-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #1a1a1a;
            color: #666;
            font-size: 48px;
        }

        .video-card-duration {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .video-card-play-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            display: flex !important;
            align-items: center;
            justify-content: center;
            opacity: 0 !important;
            transition: opacity 0.3s, transform 0.3s;
            pointer-events: none;
            z-index: 10;
        }

        .video-card:hover .video-card-play-overlay,
        .video-card-link:hover .video-card-play-overlay {
            opacity: 1 !important;
            transform: translate(-50%, -50%) scale(1.1);
        }

        .video-card-play-overlay i {
            color: #007bff;
            font-size: 24px;
            margin-left: 3px; /* Ajuste visual do ícone de play */
            font-family: 'jl_font' !important;
            font-style: normal;
            font-weight: normal;
            display: inline-block;
            speak: never;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        /* Definir conteúdo dos ícones que não existem no CSS padrão */
        .video-card .jli-play:before {
            content: "\e907"; /* Mesmo código do jli-playbtn */
            font-family: 'jl_font' !important;
            font-style: normal;
            font-weight: normal;
            speak: never;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        .video-card .jli-video:before {
            content: "\e90d"; /* Usando jli-image como fallback, ou criar código específico */
            font-family: 'jl_font' !important;
            font-style: normal;
            font-weight: normal;
            speak: never;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        .video-card .jli-document:before {
            content: "\e925"; /* Usando jli-book como fallback */
            font-family: 'jl_font' !important;
            font-style: normal;
            font-weight: normal;
            speak: never;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        /* Garantir que todos os ícones jli- na página usem a fonte */
        i[class*="jli-"],
        [class*=" jli-"],
        [class^="jli-"] {
            font-family: 'jl_font' !important;
            font-style: normal;
            font-weight: normal;
            speak: never;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        /* Garantir que :before seja exibido */
        i[class*="jli-"]:before,
        [class*=" jli-"]:before,
        [class^="jli-"]:before {
            display: inline-block;
        }

        .video-card-content {
            padding: 16px;
        }

        .video-card-title {
            font-size: 16px;
            font-weight: 600;
            margin: 0 0 8px 0;
            color: #333;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .video-card-caption {
            font-size: 14px;
            color: #666;
            margin: 0 0 8px 0;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .video-card-description {
            font-size: 13px;
            color: #999;
            margin: 0 0 12px 0;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .video-card-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 12px;
            color: #999;
            flex-wrap: wrap;
        }

        .video-card-provider {
            background: #f0f0f0;
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: 500;
        }

        .video-card-article {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .video-card-article i {
            font-size: 14px;
        }

        /* Botão Carregar Mais */
        .jl-loadmore-wrapper {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            width: 100% !important;
            position: relative !important;
            z-index: 10 !important;
            margin-top: 30px !important;
            margin-bottom: 30px !important;
            clear: both !important;
        }
        
        .jl-loadmore-btn,
        button.jl-loadmore-btn,
        .jl-load-link.jl-loadmore-btn {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 12px 30px !important;
            background-color: #007bff !important;
            background: #007bff !important;
            color: #fff !important;
            border: none !important;
            border-radius: 5px !important;
            cursor: pointer !important;
            font-size: 16px !important;
            font-weight: 500 !important;
            transition: background-color 0.3s ease !important;
            position: relative !important;
            z-index: 11 !important;
            min-width: 150px !important;
        }
        
        .jl-loadmore-btn:hover,
        button.jl-loadmore-btn:hover,
        .jl-load-link.jl-loadmore-btn:hover {
            background-color: #0056b3 !important;
            background: #0056b3 !important;
        }
        
        .jl-loadmore-btn:disabled,
        button.jl-loadmore-btn:disabled,
        .jl-load-link.jl-loadmore-btn:disabled {
            background-color: #6c757d !important;
            background: #6c757d !important;
            cursor: not-allowed !important;
            opacity: 0.7 !important;
        }
        
        .jl-load-animation {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* Estado vazio */
        .videos-empty {
            padding: 60px 20px;
            text-align: center;
        }

        .videos-empty i {
            font-size: 64px;
            color: #ccc;
            margin-bottom: 20px;
        }

        .videos-empty h3 {
            font-size: 24px;
            color: #666;
            margin-bottom: 10px;
        }

        .videos-empty p {
            color: #999;
            font-size: 16px;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loadMoreBtn = document.querySelector('.jl-load-link.jl-loadmore-btn');
            if (!loadMoreBtn) {
                return;
            }

            let isLoading = false;

            loadMoreBtn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                if (isLoading) {
                    return;
                }

                const searchQuery = this.getAttribute('data-search-query') || '';
                let currentPage = parseInt(this.getAttribute('data-current-page')) || 1;
                const videosGrid = document.getElementById('videos-grid');
                const lastPage = videosGrid ? parseInt(videosGrid.getAttribute('data-last-page')) || 1 : 999;
                
                // Calcular próxima página
                let nextPage = currentPage + 1;
                
                // Se chegou ao fim, recomeçar da página 1
                if (nextPage > lastPage) {
                    nextPage = 1;
                    currentPage = 0;
                }

                isLoading = true;
                const loadText = this.querySelector('.jl-load-text');
                const loadAnimation = this.querySelector('.jl-load-animation');
                const button = this;
                
                // Mostrar loading
                if (loadText) loadText.style.display = 'none';
                if (loadAnimation) loadAnimation.style.display = 'inline-flex';
                button.disabled = true;
                button.style.cursor = 'wait';

                const url = `/api/videos/load-more?q=${encodeURIComponent(searchQuery)}&page=${nextPage}`;

                fetch(url, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json'
                    },
                    credentials: 'same-origin'
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (!data) {
                        throw new Error('Resposta vazia da API');
                    }

                    // Adicionar HTML ao container
                    if (data.html && data.html.trim() !== '') {
                        const container = document.getElementById('videos-grid');
                        if (container) {
                            // Contar quantos vídeos existem antes de adicionar
                            const videosBefore = container.querySelectorAll('.video-card').length;
                            
                            container.insertAdjacentHTML('beforeend', data.html);
                            
                            // Encontrar o primeiro vídeo novo
                            const allVideos = container.querySelectorAll('.video-card');
                            const firstNewVideo = allVideos[videosBefore];
                            
                            // Mover o botão para depois dos novos vídeos
                            const wrapper = button.closest('.jl-loadmore-wrapper');
                            if (wrapper && container) {
                                wrapper.remove();
                                const parentContainer = container.parentElement;
                                if (parentContainer) {
                                    parentContainer.insertAdjacentElement('beforeend', wrapper);
                                } else {
                                    container.insertAdjacentElement('afterend', wrapper);
                                }
                            }
                            
                            // Scroll até o primeiro vídeo novo
                            if (firstNewVideo) {
                                setTimeout(() => {
                                    firstNewVideo.scrollIntoView({ behavior: 'smooth', block: 'start' });
                                }, 100);
                            }
                        }
                    }

                    // Atualizar última página se necessário
                    if (videosGrid && data.last_page) {
                        videosGrid.setAttribute('data-last-page', data.last_page);
                    }
                    
                    // Atualizar página atual
                    const newCurrentPage = data.current_page || nextPage;
                    let nextCurrentPage = newCurrentPage;
                    
                    // Verificar se há mais páginas
                    const hasMore = data.has_more === true || (newCurrentPage < (data.last_page || lastPage));
                    
                    // Se não há mais páginas, resetar para recomeçar da página 1 na próxima vez
                    if (!hasMore) {
                        nextCurrentPage = 0;
                        button.style.display = 'none';
                    }
                    
                    // Atualizar página atual no botão
                    button.setAttribute('data-current-page', nextCurrentPage);
                    if (videosGrid) {
                        videosGrid.setAttribute('data-current-page', nextCurrentPage);
                    }
                    
                    // Restaurar botão
                    if (loadText) loadText.style.display = 'inline';
                    if (loadAnimation) loadAnimation.style.display = 'none';
                    button.disabled = false;
                    button.style.cursor = 'pointer';
                })
                .catch(error => {
                    console.error('Erro ao carregar mais vídeos:', error);
                    if (loadText) loadText.style.display = 'inline';
                    if (loadAnimation) loadAnimation.style.display = 'none';
                    button.disabled = false;
                    button.style.cursor = 'pointer';
                })
                .finally(() => {
                    isLoading = false;
                });
            });
        });
    </script>
@endsection