<%
    const getYouTubeId = (url) => {
        if (!url || typeof url !== 'string') return null;
        const match = url.match(/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/|live\/)|youtu\.be\/|youtube\.com\/v\/)([^& \?#\n]+)/);
        return match ? match[1] : null;
    };
%>

<div class="max-w-7xl mx-auto px-4 py-20">
    <div class="mb-12">
        <h1 class="text-5xl font-black text-gray-900 mb-4 tracking-tight leading-none"><%= t('musicGazal.title') %></h1>
        <p class="text-xl text-gray-500 font-medium italic"><%= t('musicGazal.subtitle') %></p>
    </div>

    <div class="grid md:grid-cols-2 lg:grid-cols-2 gap-8">
        <% if (items && items.length > 0) { %>
            <% items.forEach(item => { %>
                <% const youtubeSource = item.youtube_link || item.audio_url; %>
                <% const youtubeId = getYouTubeId(youtubeSource); %>
                <% const youtubeUrl = youtubeId ? youtubeSource : null; %>
                <% const youtubeThumb = youtubeId ? `https://img.youtube.com/vi/${youtubeId}/hqdefault.jpg` : null; %>
                <% const thumbSrc = youtubeId ? youtubeThumb : item.image_url; %>
                
                <div class="bg-white dark:bg-black rounded-3xl p-6 md:p-8 shadow-lg border border-gray-100 dark:border-gray-900 hover:shadow-xl transition-shadow flex flex-col gap-6 md:gap-8 justify-between h-full group">
                    
                    <% if (thumbSrc && !youtubeId) { %>
                        <!-- Show thumbnail only for non-YouTube items -->
                        <div class="w-full h-48 md:h-64 flex-shrink-0 rounded-2xl overflow-hidden shadow-md bg-gray-50 dark:bg-gray-900 aspect-video">
                            <img src="<%= thumbSrc %>" alt="<%= item.title %>"
                                class="w-full h-full object-cover"
                                onerror="this.onerror=null; this.src='https://cdn-icons-png.flaticon.com/512/1384/1384060.png'; this.classList.add('p-12', 'opacity-20');">
                        </div>
                    <% } %>
                    
                    <div class="flex-grow w-full flex flex-col">
                        <h3 class="text-2xl md:text-3xl font-black text-gray-900 dark:text-white mb-2 tracking-tight leading-none">
                            <%= item.title %>
                        </h3>
                        <p class="text-gray-500 dark:text-gray-400 text-xs mb-6 uppercase tracking-widest font-bold">
                            <%= item.artist || 'Nabaraj Budha' %>
                        </p>

                        <% if (youtubeId) { %>
                            <!-- YouTube embedded player (shown only once) -->
                            <div class="mt-auto mb-6 p-2 md:p-4 bg-gray-50 dark:bg-gray-900 rounded-2xl">
                                <div class="aspect-video w-full overflow-hidden rounded-xl">
                                    <iframe
                                        src="https://www.youtube.com/embed/<%= youtubeId %>?rel=0"
                                        title="<%= item.title %>"
                                        class="w-full h-full"
                                        frameborder="0"
                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                        allowfullscreen>
                                    </iframe>
                                </div>
                            </div>
                        <% } else if (item.audio_url) { %>
                            <!-- Audio player for non-YouTube items -->
                            <div class="mt-auto mb-6 p-2 md:p-4 bg-gray-50 dark:bg-gray-900 rounded-2xl">
                                <audio controls preload="metadata" src="<%= item.audio_url %>"
                                    class="w-full focus:outline-none"></audio>
                            </div>
                        <% } %>

                        <% if (item.content) { %>
                            <div class="bg-blue-50/50 rounded-2xl p-8 italic text-gray-700 leading-relaxed text-lg relative overflow-hidden">
                                <i class="fas fa-quote-left text-blue-100 absolute -top-4 -left-4 text-8xl"></i>
                                <%- item.content.replace(/\n/g, '<br>') %>
                                <i class="fas fa-quote-right text-blue-100 absolute -bottom-4 -right-4 text-8xl"></i>
                            </div>
                        <% } %>
                    </div>
                </div>
            <% }) %>
        <% } else { %>
            <div class="py-20 text-center">
                <p class="text-gray-500 italic"><%= t('musicGazal.empty') %></p>
            </div>
        <% } %>
    </div>
</div>