<%- include('partials/header') %>
<div style="padding-top: 80px;"></div>

<!-- Load Facebook JS SDK only if any facebook videos exist -->
<% const hasFbVideos = videos.some(v => v.platform === 'facebook'); %>
<% if (hasFbVideos) { %>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v19.0"></script>
<% } %>

<!-- CONTENT CATEGORIES -->
<section class="section-padding" style="background:var(--bg-light);">
    <div class="container">
        <div class="section-header text-center fade-in">
            <h2><%= lang==='bn' ? 'কন্টেন্ট ক্যাটাগরি' : 'Content Categories' %></h2>
            <div class="divider center"></div>
        </div>
        <div class="categories-grid mt-4">
            <% categories.forEach(cat => { %>
                <div class="category-card slide-in-up">
                    <div class="cat-icon"><i class="fas fa-video"></i></div>
                    <h4><%= lang==='bn' ? cat.name_bn : cat.name_en %></h4>
                </div>
            <% }) %>
        </div>
    </div>
</section>

<!-- PAGE HERO BANNER -->
<section style="background: var(--bg-light); padding: 60px 0; text-align:center;">
    <div class="container">
        <h1 style="color:var(--text-dark); font-size:2.8rem; margin-bottom:12px;">
            <%= lang==='bn' ? 'আমার ভিডিওসমূহ' : 'My Videos' %>
        </h1>
        <div class="divider center" style="margin:16px auto;"></div>
        <p style="color:var(--text-light); font-size:1.1rem; max-width:600px; margin:0 auto;">
            <%= lang==='bn' ? 'ইউটিউব এবং ফেসবুকে আমার সেরা ভ্রমণ ভিডিওগুলো উপভোগ করুন' : 'Watch my best travel videos from YouTube and Facebook' %>
        </p>

        <!-- Platform filter tabs -->
        <div style="display:flex; justify-content:center; gap:12px; margin-top:32px; flex-wrap:wrap;">
            <button onclick="filterVideos('all')" id="tab-all" class="vid-tab active-tab">
                <i class="fas fa-th-large"></i> <%= lang==='bn' ? 'সকল' : 'All Videos' %>
            </button>
            <button onclick="filterVideos('youtube')" id="tab-youtube" class="vid-tab">
                <i class="fab fa-youtube"></i> YouTube
            </button>
            <button onclick="filterVideos('facebook')" id="tab-facebook" class="vid-tab">
                <i class="fab fa-facebook"></i> Facebook
            </button>
        </div>
    </div>
</section>

<!-- VIDEOS GRID -->
<section style="background:var(--bg-light); padding:60px 0;">
    <div class="container">

        <% if (videos.length === 0) { %>
            <div style="text-align:center; padding:80px 20px; color:var(--text-light);">
                <i class="fas fa-film" style="font-size:4rem; margin-bottom:20px; opacity:0.3;"></i>
                <h3><%= lang==='bn' ? 'এখনো কোনো ভিডিও নেই' : 'No videos added yet' %></h3>
            </div>
        <% } %>

        <div id="videos-container" style="display:grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap:28px;">
            <% videos.forEach(video => { %>
                <% const isFacebook = video.platform === 'facebook'; %>
                <div class="vcard" data-platform="<%= isFacebook ? 'facebook' : 'youtube' %>"
                     style="background:var(--bg-dark); border-radius:16px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,0.3); transition:transform 0.3s ease, box-shadow 0.3s ease;"
                     onmouseover="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 12px 35px rgba(0,0,0,0.5)';"
                     onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 20px rgba(0,0,0,0.3)';">

                    <!-- Platform badge -->
                    <div style="position:relative;">
                        <div style="position:absolute; top:12px; left:12px; z-index:10;
                                    background:<%= isFacebook ? '#1877F2' : '#FF0000' %>; 
                                    color:white; padding:4px 10px; border-radius:20px; font-size:0.75rem; font-weight:700;
                                    display:flex; align-items:center; gap:5px; box-shadow:0 2px 8px rgba(0,0,0,0.2);">
                            <i class="fab fa-<%= isFacebook ? 'facebook' : 'youtube' %>"></i>
                            <%= isFacebook ? 'Facebook' : 'YouTube' %>
                        </div>

                        <% if (isFacebook) { %>
                            <!-- Facebook: JS SDK embedded video player -->
                        <div class="video-embed" style="overflow:hidden; height:215px; background:black; position:relative;">
                            <div class="fb-video"
                                data-href="<%= video.youtube_url %>"
                                data-width="auto"
                                data-allowfullscreen="true"
                                data-autoplay="false"
                                data-show-text="false"
                                style="width:100%; height:100%;">
                            </div>
                        </div>
                        <% } else { %>
                            <!-- YouTube: direct embedded iframe -->
                            <div style="position:relative; overflow:hidden; height:215px; background:#000;">
                                <iframe
                                    src="https://www.youtube.com/embed/<%= video.embed_id %>?rel=0&modestbranding=1"
                                    style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                    allowfullscreen
                                    loading="lazy">
                                </iframe>
                            </div>
                        <% } %>
                    </div>

                    <!-- Card info bottom -->
                    <div style="padding:16px 20px 18px;">
                        <h3 style="font-size:1rem; font-weight:700; color:#0f172a; margin-bottom:10px; line-height:1.5;
                                   display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;">
                            <%= video.title %>
                        </h3>
                        <a href="<%= video.youtube_url %>" target="_blank" rel="noopener noreferrer"
                           style="display:inline-flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:600;
                                  color:<%= isFacebook ? '#1877F2' : '#FF0000' %>; text-decoration:none; padding:6px 14px;
                                  border:1.5px solid <%= isFacebook ? '#1877F2' : '#FF0000' %>; border-radius:20px;
                                  transition:all 0.2s ease;"
                           onmouseover="this.style.background='<%= isFacebook ? '#1877F2' : '#FF0000' %>'; this.style.color='white';"
                           onmouseout="this.style.background='transparent'; this.style.color='<%= isFacebook ? '#1877F2' : '#FF0000' %>';">
                            <i class="fab fa-<%= isFacebook ? 'facebook' : 'youtube' %>"></i>
                            <%= isFacebook ? (lang==='bn' ? 'ফেসবুকে দেখুন' : 'Open on Facebook') : (lang==='bn' ? 'ইউটিউবে দেখুন' : 'Open on YouTube') %>
                        </a>
                    </div>
                </div>
            <% }) %>
        </div>

        <!-- No results after filter -->
        <div id="no-filter-result" style="display:none; text-align:center; padding:60px 20px; color:#94a3b8;">
            <i class="fas fa-search" style="font-size:3rem; margin-bottom:16px; opacity:0.4;"></i>
            <p style="font-size:1.1rem;"><%= lang==='bn' ? 'এই ফিল্টারে কোনো ভিডিও নেই' : 'No videos match this filter' %></p>
        </div>
    </div>
</section>


<style>
.vid-tab {
    background: rgba(255,255,255,0.1);
    color: white;
    border: 1.5px solid rgba(255,255,255,0.25);
    padding: 10px 24px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.25s ease;
}
.vid-tab:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.5);
}
.vid-tab.active-tab {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #0f172a;
    box-shadow: 0 4px 15px rgba(245,158,11,0.35);
}
</style>

<script>
function filterVideos(platform) {
    // Update active tab
    document.querySelectorAll('.vid-tab').forEach(t => t.classList.remove('active-tab'));
    document.getElementById('tab-' + platform).classList.add('active-tab');

    const cards = document.querySelectorAll('.vcard');
    let visible = 0;
    cards.forEach(card => {
        if (platform === 'all' || card.dataset.platform === platform) {
            card.style.display = '';
            visible++;
        } else {
            card.style.display = 'none';
        }
    });

    document.getElementById('no-filter-result').style.display = visible === 0 ? 'block' : 'none';
}
</script>

<%- include('partials/footer') %>
