<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Bujang Online 🔥 Genjutsu Mode</title>
    <link rel="stylesheet" href="/style.css">
    <style>
        .tab { display: none; }
        .tab.active { display: block; }
        .nav-btn {
            background-color: #8b0000;
            color: white;
            padding: 6px 15px;
            border-radius: 5px;
            border: none;
            margin: 10px 5px;
            cursor: pointer;
        }
        code, pre {
            background: rgba(255, 255, 255, 0.1);
            padding: 8px;
            border-radius: 5px;
            display: block;
            margin-top: 10px;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        .copy-btn {
            margin-top: 5px;
            padding: 5px 10px;
            background-color: #333;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div style="text-align:center;">
            <button class="nav-btn" onclick="showTab('paste')">📝 Paste</button>
            <button class="nav-btn" onclick="showTab('cdn')">📁 CDN</button>
            <button class="nav-btn" onclick="showTab('bcrypt')">🔐 Bcrypt</button>
            <button class="nav-btn" onclick="showTab('md5')">🔑 MD5</button>
        </div>

        <!-- 📝 Paste -->
        <div id="paste" class="tab active">
            <h2>Teruslah hidup 🩸</h2>
            <textarea id="text" placeholder="Tulis sesuatu..."></textarea><br>
            <button onclick="saveData()">Simpan Data</button>
            <div id="result"></div>
        </div>

        <!-- 📁 CDN -->
        <div id="cdn" class="tab">
            <h2>Upload ke CDN 🚀</h2>
            <input type="text" id="filename" placeholder="File Name"><br>
            <button onclick="generateCurl()">Generate CURL Command</button>
            <code id="curlResult" style="display:none;"></code>
            <button id="copyCurl" class="copy-btn" style="display:none;" onclick="copyText('curlResult')">Copy Command 📋</button>
        </div>

        <!-- 🔐 Bcrypt -->
        <div id="bcrypt" class="tab">
            <h2>Hash Generator (Bcrypt) 🔐</h2>
            <input type="text" id="bcryptInput" placeholder="Masukkan teks..."><br>
            <button onclick="getBcrypt()">Generate Bcrypt</button>
            <code id="bcryptResult" style="display:none;"></code>
            <button id="copyBcrypt" class="copy-btn" style="display:none;" onclick="copyText('bcryptResult')">Copy Hash 📋</button>
        </div>

        <!-- 🔑 MD5 -->
        <div id="md5" class="tab">
            <h2>Hash Generator (MD5) 🔑</h2>
            <input type="text" id="md5Input" placeholder="Masukkan teks..."><br>
            <button onclick="getMd5()">Generate MD5</button>
            <code id="md5Result" style="display:none;"></code>
            <button id="copyMd5" class="copy-btn" style="display:none;" onclick="copyText('md5Result')">Copy Hash 📋</button>
        </div>
    </div>

    <script>
        function showTab(id) {
            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
            document.getElementById(id).classList.add('active');
        }

        async function saveData() {
            const text = document.getElementById('text').value;
            const resultDiv = document.getElementById('result');
            if (!text.trim()) {
                resultDiv.style.display = 'block';
                resultDiv.style.color = 'red';
                resultDiv.innerText = 'Teks tidak boleh kosong!';
                return;
            }
            resultDiv.style.display = 'block';
            resultDiv.style.color = 'blue';
            resultDiv.innerHTML = '🌀 Sedang menyimpan data... Masuk Genjutsu...';
            try {
                const response = await fetch('/save', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ text })
                });
                const data = await response.json();
                if (response.ok) {
                    resultDiv.style.color = 'green';
                    resultDiv.innerHTML = `
                        <strong>Berhasil!!</strong><br>
                        Link raw kamu:<br>
                        <a href="${data.url}" target="_blank">${data.url}</a><br>
                        <button class="copy-button" onclick="copyToClipboard('${data.url}')">Copy Link 📋</button>
                    `;
                } else {
                    resultDiv.style.color = 'red';
                    resultDiv.innerText = data.error || 'Gagal menyimpan data.';
                }
            } catch (error) {
                resultDiv.style.color = 'red';
                resultDiv.innerText = 'Terjadi kesalahan saat mengirim data.';
            }
        }

        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(() => {
                alert('📋 Link berhasil di-copy ke clipboard!');
            });
        }

        function generateCurl() {
            const filename = document.getElementById("filename").value;
            const output = document.getElementById("curlResult");
            const copyBtn = document.getElementById("copyCurl");

            if (!filename.trim()) {
                output.style.display = "block";
                output.textContent = "❌ Masukkan nama file dulu.";
                copyBtn.style.display = "none";
                return;
            }

            const cmd = `curl -F "bujang=@${filename}" https://bujang.online/upload`;
            output.textContent = cmd;
            output.style.display = "block";
            copyBtn.style.display = "inline-block";
        }

        async function getBcrypt() {
            const input = document.getElementById("bcryptInput").value;
            const output = document.getElementById("bcryptResult");
            const copyBtn = document.getElementById("copyBcrypt");

            if (!input.trim()) {
                output.textContent = "❌ Teks kosong.";
                output.style.display = "block";
                copyBtn.style.display = "none";
                return;
            }

            try {
                const res = await fetch(`/v1/bcrypt?text=${encodeURIComponent(input)}`);
                const data = await res.json();
                output.textContent = data.hash || data.error || "Gagal hashing.";
                output.style.display = "block";
                copyBtn.style.display = "inline-block";
            } catch {
                output.textContent = "❌ Gagal konek ke server.";
                output.style.display = "block";
                copyBtn.style.display = "none";
            }
        }

        async function getMd5() {
            const input = document.getElementById("md5Input").value;
            const output = document.getElementById("md5Result");
            const copyBtn = document.getElementById("copyMd5");

            if (!input.trim()) {
                output.textContent = "❌ Teks kosong.";
                output.style.display = "block";
                copyBtn.style.display = "none";
                return;
            }

            try {
                const res = await fetch(`/v1/md5?text=${encodeURIComponent(input)}`);
                const data = await res.json();
                output.textContent = data.hash || data.error || "Gagal hashing.";
                output.style.display = "block";
                copyBtn.style.display = "inline-block";
            } catch {
                output.textContent = "❌ Gagal konek ke server.";
                output.style.display = "block";
                copyBtn.style.display = "none";
            }
        }

        function copyText(id) {
            const text = document.getElementById(id).textContent;
            navigator.clipboard.writeText(text).then(() => {
                alert('📋 Disalin ke clipboard!');
            });
        }
    </script>
</body>
</html>
