const snippetDatabase = [
    {
        id: "brat-modules",
        title: "Brat Modules",
        category: "Feature",
        path: "../dokumentasi/feature/brat-modules.js",
        filename: "brat-modules.js",
        updatedAt: "2026-04-05"
    },
    {
        id: "github-dl",
        title: "GitHub Downloader",
        category: "Feature",
        path: "../dokumentasi/feature/githubDl.js",
        filename: "githubDl.js",
        updatedAt: "2026-04-06"
    },
    {
        id: "jadwal-sholat",
        title: "Jadwal Sholat",
        category: "Feature",
        path: "../dokumentasi/feature/jadwalSholat.js",
        filename: "jadwalSholat.js",
        updatedAt: "2026-04-06"
    },
    {
        id: "tourl",
        title: "To URL (Upload Image)",
        category: "Feature",
        path: "../dokumentasi/feature/tourl.js",
        filename: "tourl.js",
        updatedAt: "2026-04-07"
    },
    {
        id: "twitter-dl",
        title: "Twitter Downloader",
        category: "Feature",
        path: "../dokumentasi/feature/twitterDl.js",
        filename: "twitterDl.js",
        updatedAt: "2026-04-06"
    },
    {
        id: "youtube-play",
        title: "YouTube Play",
        category: "Feature",
        path: "../dokumentasi/feature/youtubePlay.js",
        filename: "youtubePlay.js",
        updatedAt: "2026-04-07"
    },
    {
        id: "youtube-search",
        title: "YouTube Search",
        category: "Feature",
        path: "../dokumentasi/feature/youtubeSearch.js",
        filename: "youtubeSearch.js",
        updatedAt: "2026-04-07"
    },
    {
        id: "athars-uploader",
        title: "Athars Uploader",
        category: "Scraper",
        path: "../dokumentasi/scraper/athars-uploader.js",
        filename: "athars-uploader.js",
        updatedAt: "2026-04-05"
    },
    {
        id: "flixpatrol",
        title: "FlixPatrol Data",
        category: "Scraper",
        path: "../dokumentasi/scraper/flixpatrol.js",
        filename: "flixpatrol.js",
        updatedAt: "2026-04-05"
    },
    {
        id: "search-movies",
        title: "Search Movies",
        category: "Scraper",
        path: "../dokumentasi/scraper/searchMovies.js",
        filename: "searchMovies.js",
        updatedAt: "2026-04-07",
        password: "M0v1e$"
    },
    {
        id: "soundcloud-dl",
        title: "SoundCloud Downloader",
        category: "Scraper",
        path: "../dokumentasi/scraper/souncloud-dl.js",
        filename: "souncloud-dl.js",
        updatedAt: "2026-04-06",
        password: "S0oundcloud*"
    },
    {
        id: "ssweb",
        title: "SS Web",
        category: "Scraper",
        path: "../dokumentasi/scraper/ssweb.js",
        filename: "ssweb.js",
        updatedAt: "2026-04-06"
    },
    {
        id: "steam",
        title: "Steam Search/Data",
        category: "Scraper",
        path: "../dokumentasi/scraper/steam.js",
        filename: "steam.js",
        updatedAt: "2026-04-06",
        password: "$Team%"
    },
    {
        id: "tiktok-dl",
        title: "Tiktok Downloader (No Watermark)",
        category: "Scraper",
        path: "../dokumentasi/scraper/tiktokdl.js",
        filename: "tiktokdl.js",
        updatedAt: "2026-04-05",
        password: "tiktokdl-tikwm"
    }
];

let currentCategory = "Semua";
let searchQuery = "";

document.addEventListener("DOMContentLoaded", () => {
    snippetDatabase.sort((a, b) => a.title.localeCompare(b.title));

    if (document.getElementById('snippets-container')) {
        initDocs();
    }
});

function initDocs() {
    renderSidebar();
    renderSnippets();
    
    document.addEventListener("click", handleCopyClick);

    const searchDesktop = document.getElementById('search-input');
    const searchMobile = document.getElementById('search-input-mobile');
    
    if (searchDesktop) {
        searchDesktop.addEventListener('input', (e) => {
            searchQuery = e.target.value.toLowerCase();
            if (searchMobile) searchMobile.value = e.target.value; 
            renderSnippets();
        });
    }
    if (searchMobile) {
        searchMobile.addEventListener('input', (e) => {
            searchQuery = e.target.value.toLowerCase();
            if (searchDesktop) searchDesktop.value = e.target.value;
            renderSnippets();
        });
    }
}

function setCategory(cat) {
    currentCategory = cat;
    renderSidebar();
    renderSnippets();
}

function renderSidebar() {
    const uniqueCategories = [...new Set(snippetDatabase.map(item => item.category))];
    const categoryList = document.getElementById('category-list');
    categoryList.innerHTML = ''; 

    const totalFiles = snippetDatabase.length;
    categoryList.appendChild(createSidebarItem("Semua", totalFiles));

    uniqueCategories.forEach(cat => {
        const count = snippetDatabase.filter(item => item.category === cat).length;
        categoryList.appendChild(createSidebarItem(cat, count));
    });
}

function createSidebarItem(catName, count) {
    const li = document.createElement('li');
    li.className = "flex-shrink-0 md:w-full";
    const isActive = currentCategory === catName;
    
    li.innerHTML = `
        <button onclick="setCategory('${catName}')" 
            class="w-full flex justify-between items-center px-4 py-2 md:py-2.5 rounded-xl text-xs md:text-sm font-semibold transition-all border whitespace-nowrap
            ${isActive 
                ? 'bg-sapura-border/60 text-white border-sapura-border shadow-sm' 
                : 'border-transparent text-sapura-textMuted hover:bg-sapura-bg hover:text-white hover:border-sapura-border/50'}">
            <span>${catName === "Semua" ? "Lihat Semua" : catName}</span>
            <span class="ml-2 bg-black/40 border border-sapura-border text-[10px] px-1.5 md:px-2 py-0.5 rounded-lg ${isActive ? 'text-white' : 'text-sapura-textMuted'}">${count}</span>
        </button>
    `;
    return li;
}

async function renderSnippets() {
    const titleEl = document.getElementById('current-category-title');
    const infoEl = document.getElementById('current-category-info');
    
    titleEl.textContent = currentCategory === "Semua" ? "Lihat Semua Snippet" : `Kategori: ${currentCategory}`;
    infoEl.textContent = searchQuery ? `Menampilkan pencarian untuk "${searchQuery}"` : `Koleksi kode untuk ${currentCategory}.`;

    const container = document.getElementById('snippets-container');
    container.innerHTML = `<div class="text-sapura-accent text-sm animate-pulse font-medium">Memuat data kode...</div>`;

    const filteredData = snippetDatabase.filter(item => {
        const matchCategory = currentCategory === "Semua" || item.category === currentCategory;
        const matchSearch = item.title.toLowerCase().includes(searchQuery) || item.filename.toLowerCase().includes(searchQuery);
        return matchCategory && matchSearch;
    });

    if(filteredData.length === 0) {
        container.innerHTML = `
            <div class="text-center py-10 bg-sapura-card/30 rounded-2xl border border-sapura-border border-dashed mx-1">
                <svg class="w-8 h-8 mx-auto text-sapura-border mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                <p class="text-sapura-textMuted text-xs md:text-sm">Snippet tidak ditemukan.</p>
            </div>`;
        return;
    }

    let htmlContent = '';
    
    filteredData.forEach(item => {
        let dateHtml = '';
        if(item.updatedAt) {
            const dateObj = new Date(item.updatedAt);
            const formattedDate = dateObj.toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' });
            dateHtml = `<span class="text-[10px] md:text-[11px] text-sapura-textMuted font-mono flex items-center gap-1"><svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>${formattedDate}</span>`;
        }

        const isLocked = item.password !== undefined && item.password !== "";
        
        let codeBlockArea = '';
        if (isLocked) {
            codeBlockArea = `
                <div id="lock-screen-${item.id}" class="flex flex-col items-center justify-center py-10 px-4 text-center bg-[#050505]">
                    <div class="w-12 h-12 bg-red-500/10 border border-red-500/20 text-red-500 rounded-full flex items-center justify-center mb-3">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
                    </div>
                    <h4 class="text-white font-bold text-sm md:text-base mb-1">Snippet Eksklusif</h4>
                    <p class="text-xs text-sapura-textMuted mb-5">Masukkan akses password untuk membuka kode dan fitur unduh.</p>
                    
                    <div class="flex items-center gap-2 max-w-[260px] w-full relative">
                        <input type="password" id="pw-input-${item.id}" placeholder="Ketik sandi..." class="w-full bg-sapura-card border border-sapura-border text-xs rounded-xl px-4 py-2.5 text-white focus:outline-none focus:border-sapura-accent transition-colors">
                        <button onclick="unlockFile('${item.id}')" class="bg-sapura-accent hover:bg-blue-600 text-white px-4 py-2.5 rounded-xl text-xs font-bold transition-colors shadow-lg">Buka</button>
                    </div>
                    <p id="pw-error-${item.id}" class="text-red-400 text-[11px] mt-3 font-medium hidden animate-pulse">Kunci akses tidak valid!</p>
                </div>
                
                <div id="code-wrapper-${item.id}" class="hidden relative w-full overflow-x-auto text-[13px] md:text-sm hide-scrollbar">
                    <pre class="line-numbers"><code id="code-${item.id}" class="language-javascript"></code></pre>
                </div>
            `;
        } else {
            codeBlockArea = `
                <div class="relative w-full overflow-x-auto text-[13px] md:text-sm hide-scrollbar">
                    <pre class="line-numbers"><code id="code-${item.id}" class="language-javascript">Mengambil sumber kode...</code></pre>
                </div>
            `;
        }

        htmlContent += `
            <div class="bg-sapura-card border border-sapura-border/70 rounded-2xl overflow-hidden shadow-xl shadow-black/20 w-full">
                <div class="px-4 py-3.5 border-b border-sapura-border/70 bg-sapura-card/80 flex flex-col md:flex-row justify-between items-start md:items-center gap-3">
                    <div class="flex items-center gap-2.5 w-full">
                        <h3 class="font-bold text-white text-sm md:text-base truncate flex items-center gap-2">
                            ${isLocked ? '<svg class="w-3.5 h-3.5 text-red-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path></svg>' : ''}
                            ${item.title}
                        </h3>
                        <div class="h-1 w-1 rounded-full bg-sapura-border hidden md:block"></div>
                        <div class="ml-auto md:ml-0 flex-shrink-0">${dateHtml}</div>
                    </div>
                    
                    <div id="action-btns-${item.id}" class="${isLocked ? 'hidden' : 'grid grid-cols-2 md:flex'} items-center gap-2 w-full md:w-auto">
                        <button data-id="code-${item.id}" class="copy-btn w-full bg-sapura-bg hover:bg-sapura-accent transition-colors border border-sapura-border text-white text-[11px] md:text-xs font-bold px-3 py-2 rounded-xl flex items-center justify-center gap-1.5">
                            <svg class="w-3.5 h-3.5 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
                            <span class="pointer-events-none copy-text">Salin</span>
                        </button>
                        <a href="${item.path}" download="${item.filename}" class="w-full bg-transparent border border-sapura-border hover:bg-sapura-border/50 transition-colors text-white text-[11px] md:text-xs font-bold px-3 py-2 rounded-xl flex items-center justify-center gap-1.5">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                            Unduh
                        </a>
                    </div>
                </div>
                
                ${codeBlockArea}
            </div>
        `;
    });

    container.innerHTML = htmlContent;

    for (const item of filteredData) {
        if (!item.password) {
            const codeElement = document.getElementById(`code-${item.id}`);
            try {
                const response = await fetch(item.path);
                if (!response.ok) throw new Error('Not found');
                const codeText = await response.text();
                codeElement.textContent = codeText;
            } catch (error) {
                codeElement.textContent = `// Error memuat file: ${item.filename}\n// Pastikan path benar.`;
            }
        }
    }

    Prism.highlightAll();
}

window.unlockFile = async function(id) {
    const item = snippetDatabase.find(x => x.id === id);
    if (!item) return;

    const inputPw = document.getElementById(`pw-input-${id}`);
    const errorMsg = document.getElementById(`pw-error-${id}`);

    if (inputPw.value === item.password) {
        errorMsg.classList.add('hidden');
        document.getElementById(`lock-screen-${id}`).classList.add('hidden');
        document.getElementById(`code-wrapper-${id}`).classList.remove('hidden');
        
        const actionBtnContainer = document.getElementById(`action-btns-${id}`);
        actionBtnContainer.classList.remove('hidden');
        actionBtnContainer.classList.add('grid', 'grid-cols-2', 'md:flex');

        const codeElement = document.getElementById(`code-${id}`);
        codeElement.textContent = "Membuka kode...";
        
        try {
            const response = await fetch(item.path);
            if (!response.ok) throw new Error('Not found');
            const codeText = await response.text();
            codeElement.textContent = codeText;
            Prism.highlightElement(codeElement);
        } catch (error) {
            codeElement.textContent = `// Error memuat file: ${item.filename}`;
        }
    } else {
        errorMsg.classList.remove('hidden');
        inputPw.value = ''; 
        inputPw.focus();
    }
}

function handleCopyClick(e) {
    const btn = e.target.closest('.copy-btn');
    if (!btn) return;

    const codeId = btn.getAttribute('data-id');
    const codeContent = document.getElementById(codeId).textContent;
    const textSpan = btn.querySelector('.copy-text');

    navigator.clipboard.writeText(codeContent).then(() => {
        const originalText = textSpan.textContent;
        textSpan.textContent = "Berhasil";
        btn.classList.add("bg-green-600", "border-green-500", "text-white");
        btn.classList.remove("bg-sapura-bg", "hover:bg-sapura-accent", "border-sapura-border");
        
        setTimeout(() => {
            textSpan.textContent = originalText;
            btn.classList.remove("bg-green-600", "border-green-500", "text-white");
            btn.classList.add("bg-sapura-bg", "hover:bg-sapura-accent", "border-sapura-border");
        }, 2000);
    }).catch(err => {
        alert('Gagal menyalin kode!');
    });
}