<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Dashboard - ShortLink Generator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
        /* Custom scrollbar for better aesthetics */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body class="bg-slate-50 text-slate-800">

    <!-- Mobile Overlay -->
    <div id="mobile-overlay" onclick="toggleSidebar()" class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden lg:hidden transition-opacity"></div>

    <div class="flex h-screen overflow-hidden">
        
        <!-- Sidebar -->
        <aside id="sidebar" class="fixed inset-y-0 left-0 z-30 w-64 bg-white border-r border-slate-200 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out flex flex-col">
            <!-- Logo -->
            <div class="h-16 flex items-center px-6 border-b border-slate-100">
                <div class="flex items-center gap-2 text-indigo-600 font-bold text-xl">
                    <i class="fa-solid fa-link"></i>
                    <span>Shortify<span class="text-slate-800">Admin</span></span>
                </div>
            </div>

            <!-- Nav Links -->
            <nav class="flex-1 overflow-y-auto py-4 px-3 space-y-1">
                <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium bg-indigo-50 text-indigo-600 rounded-lg">
                    <i class="fa-solid fa-plus-circle w-5"></i>
                    Buat Link Baru
                </a>
                <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium text-slate-600 hover:text-indigo-600 hover:bg-slate-50 rounded-lg transition-colors">
                    <i class="fa-solid fa-list w-5"></i>
                    Daftar Link
                </a>
                <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium text-slate-600 hover:text-indigo-600 hover:bg-slate-50 rounded-lg transition-colors">
                    <i class="fa-solid fa-chart-line w-5"></i>
                    Statistik
                </a>
                <div class="pt-4 pb-2">
                    <p class="px-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Pengaturan</p>
                </div>
                <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium text-slate-600 hover:text-indigo-600 hover:bg-slate-50 rounded-lg transition-colors">
                    <i class="fa-solid fa-user-gear w-5"></i>
                    Profil
                </a>
                <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium text-slate-600 hover:text-indigo-600 hover:bg-slate-50 rounded-lg transition-colors">
                    <i class="fa-solid fa-globe w-5"></i>
                    Custom Domain
                </a>
            </nav>

            <!-- User Profile (Bottom Sidebar) -->
            <div class="p-4 border-t border-slate-100">
                <div class="flex items-center gap-3">
                    <img src="https://ui-avatars.com/api/?name=Admin+User&background=6366f1&color=fff" alt="Admin" class="w-9 h-9 rounded-full">
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-slate-900 truncate">Administrator</p>
                        <p class="text-xs text-slate-500 truncate">admin@shortify.id</p>
                    </div>
                    <button class="text-slate-400 hover:text-red-500 transition-colors">
                        <i class="fa-solid fa-right-from-bracket"></i>
                    </button>
                </div>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 flex flex-col lg:ml-64 h-full relative">
            
            <!-- Top Navbar (Mobile only mostly) -->
            <header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-4 lg:px-8">
                <button onclick="toggleSidebar()" class="lg:hidden text-slate-500 hover:text-indigo-600 focus:outline-none">
                    <i class="fa-solid fa-bars text-xl"></i>
                </button>
                
                <h1 class="text-lg font-semibold text-slate-800 lg:hidden">Dashboard</h1>

                <!-- Right Side Tools -->
                <div class="flex items-center gap-4 ml-auto">
                    <div class="relative hidden sm:block">
                        <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i>
                        <input type="text" placeholder="Cari link..." class="pl-9 pr-4 py-2 bg-slate-100 border-none rounded-full text-sm focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-all w-64 outline-none">
                    </div>
                    <button class="relative p-2 text-slate-500 hover:text-indigo-600 transition-colors">
                        <i class="fa-regular fa-bell"></i>
                        <span class="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full border border-white"></span>
                    </button>
                </div>
            </header>

            <!-- Scrollable Content -->
            <div class="flex-1 overflow-y-auto p-4 lg:p-8">
                
                <div class="max-w-5xl mx-auto space-y-8">
                    
                    <!-- Header Text -->
                    <div>
                        <h2 class="text-2xl font-bold text-slate-900">Buat Shortlink Baru</h2>
                        <p class="text-slate-500 mt-1">Masukkan URL panjang Anda dan dapatkan tautan pendek dalam sekejap.</p>
                    </div>

                    <!-- Main Form Card -->
                    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 lg:p-8">
                        <form id="shortenForm" onsubmit="handleShorten(event)">
                            <div class="grid gap-6">
                                <!-- Input URL Asli -->
                                <div>
                                    <label for="longUrl" class="block text-sm font-medium text-slate-700 mb-2">
                                        URL Asli (Tujuan) <span class="text-red-500">*</span>
                                    </label>
                                    <div class="relative">
                                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                            <i class="fa-solid fa-link text-slate-400"></i>
                                        </div>
                                        <input type="url" id="longUrl" required 
                                            class="block w-full pl-10 pr-3 py-3 border border-slate-300 rounded-lg leading-5 bg-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-shadow" 
                                            placeholder="https://contoh-website-anda.com/halaman-yang-sangat-panjang">
                                    </div>
                                </div>

                                <!-- Input Custom Alias & Domain -->
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <!-- Domain Selector -->
                                    <div>
                                        <label class="block text-sm font-medium text-slate-700 mb-2">Domain</label>
                                        <select class="block w-full pl-3 pr-10 py-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white">
                                            <option>s.id</option>
                                            <option>bit.ly</option>
                                            <option>mysite.link</option>
                                        </select>
                                    </div>
                                    <!-- Custom Alias -->
                                    <div>
                                        <label for="customAlias" class="block text-sm font-medium text-slate-700 mb-2">
                                            Custom Alias (Opsional)
                                        </label>
                                        <div class="relative">
                                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                                <span class="text-slate-400 text-sm">/</span>
                                            </div>
                                            <input type="text" id="customAlias" 
                                                class="block w-full pl-6 pr-3 py-3 border border-slate-300 rounded-lg leading-5 bg-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" 
                                                placeholder="promo-januari">
                                        </div>
                                        <p class="mt-1 text-xs text-slate-500">Biarkan kosong untuk alias acak.</p>
                                    </div>
                                </div>

                                <!-- Submit Button -->
                                <div class="pt-2">
                                    <button type="submit" id="submitBtn" class="w-full md:w-auto px-6 py-3 bg-indigo-600 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all flex items-center justify-center gap-2">
                                        <i class="fa-solid fa-wand-magic-sparkles"></i>
                                        Singkat Link Sekarang
                                    </button>
                                </div>
                            </div>
                        </form>

                        <!-- Result Section (Hidden by default) -->
                        <div id="resultCard" class="hidden mt-8 pt-6 border-t border-slate-100 fade-in">
                            <div class="bg-green-50 rounded-lg p-4 border border-green-200 flex flex-col md:flex-row items-center justify-between gap-4">
                                <div class="flex items-center gap-3 overflow-hidden w-full md:w-auto">
                                    <div class="bg-green-100 p-2 rounded-full text-green-600 flex-shrink-0">
                                        <i class="fa-solid fa-check"></i>
                                    </div>
                                    <div class="min-w-0">
                                        <p class="text-xs text-green-700 font-semibold uppercase tracking-wide">Shortlink Berhasil Dibuat!</p>
                                        <a href="#" id="generatedLink" target="_blank" class="text-lg font-bold text-slate-800 hover:text-indigo-600 truncate block">s.id/promo-januari</a>
                                    </div>
                                </div>
                                <div class="flex items-center gap-2 w-full md:w-auto">
                                    <button onclick="copyLink()" class="flex-1 md:flex-none px-4 py-2 bg-white border border-slate-300 rounded-md text-sm font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
                                        <i class="fa-regular fa-copy mr-1"></i> Copy
                                    </button>
                                    <button class="px-4 py-2 bg-indigo-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-indigo-700 transition-colors">
                                        <i class="fa-solid fa-qrcode mr-1"></i> QR
                                    </button>
                                </div>
                            </div>
                            <div class="mt-2 text-sm text-slate-500 flex items-center gap-2">
                                <i class="fa-solid fa-share-nodes"></i>
                                <span>Mengarah ke: <span id="targetUrlDisplay" class="text-slate-700 font-medium truncate max-w-[200px] inline-block align-bottom">...</span></span>
                            </div>
                        </div>
                    </div>

                    <!-- Recent Links Table -->
                    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
                        <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
                            <h3 class="font-semibold text-slate-800">Riwayat Terakhir</h3>
                            <a href="#" class="text-sm text-indigo-600 hover:text-indigo-800 font-medium">Lihat Semua</a>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-slate-200">
                                <thead class="bg-slate-50">
                                    <tr>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Short Link</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Original URL</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Klik</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Tanggal</th>
                                        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-slate-500 uppercase tracking-wider">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-slate-200" id="recentTable">
                                    <!-- Static Example 1 -->
                                    <tr class="hover:bg-slate-50 transition-colors">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <span class="text-sm font-medium text-indigo-600">s.id/meet-team</span>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-slate-500 truncate max-w-xs">https://meet.google.com/abc-defg-hij</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                124
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
                                            Baru saja
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <button class="text-indigo-600 hover:text-indigo-900 mx-1"><i class="fa-regular fa-copy"></i></button>
                                            <button class="text-slate-400 hover:text-red-600 mx-1"><i class="fa-regular fa-trash-can"></i></button>
                                        </td>
                                    </tr>
                                    <!-- Static Example 2 -->
                                    <tr class="hover:bg-slate-50 transition-colors">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <span class="text-sm font-medium text-indigo-600">mysite.link/portfolio</span>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="text-sm text-slate-500 truncate max-w-xs">https://dribbble.com/users/myportfolio/shots</div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                892
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
                                            Kemarin
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <button class="text-indigo-600 hover:text-indigo-900 mx-1"><i class="fa-regular fa-copy"></i></button>
                                            <button class="text-slate-400 hover:text-red-600 mx-1"><i class="fa-regular fa-trash-can"></i></button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </main>
    </div>

    <!-- Toast Notification -->
    <div id="toast" class="fixed bottom-5 right-5 transform translate-y-20 opacity-0 transition-all duration-300 bg-slate-800 text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-3 z-50">
        <i class="fa-solid fa-circle-check text-green-400"></i>
        <span id="toastMessage">Berhasil disalin!</span>
    </div>

    <script>
        // Sidebar Toggle Logic for Mobile
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('mobile-overlay');

        function toggleSidebar() {
            const isClosed = sidebar.classList.contains('-translate-x-full');
            if (isClosed) {
                sidebar.classList.remove('-translate-x-full');
                overlay.classList.remove('hidden');
            } else {
                sidebar.classList.add('-translate-x-full');
                overlay.classList.add('hidden');
            }
        }

        // Form Handling Logic
        function handleShorten(e) {
            e.preventDefault();
            
            const btn = document.getElementById('submitBtn');
            const originalText = btn.innerHTML;
            const longUrl = document.getElementById('longUrl').value;
            const customAlias = document.getElementById('customAlias').value;
            
            // Loading State
            btn.disabled = true;
            btn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> Memproses...';

            // Simulate API Call delay
            setTimeout(() => {
                // Reset Button
                btn.disabled = false;
                btn.innerHTML = originalText;

                // Generate Mock Result
                const domain = "s.id/";
                const randomStr = Math.random().toString(36).substring(7);
                const finalAlias = customAlias.trim() ? customAlias : randomStr;
                const shortUrl = domain + finalAlias;

                // Show Result Card
                document.getElementById('resultCard').classList.remove('hidden');
                document.getElementById('generatedLink').textContent = shortUrl;
                document.getElementById('generatedLink').href = "https://" + shortUrl; // Mock href
                document.getElementById('targetUrlDisplay').textContent = longUrl;
                
                // Add to table (Visual only)
                addRowToTable(shortUrl, longUrl);

                showToast('Shortlink berhasil dibuat!');
            }, 1000);
        }

        function addRowToTable(short, long) {
            const tbody = document.getElementById('recentTable');
            const row = document.createElement('tr');
            row.className = "hover:bg-slate-50 transition-colors animate-pulse bg-green-50";
            
            row.innerHTML = `
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center"><span class="text-sm font-medium text-indigo-600">${short}</span></div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-slate-500 truncate max-w-xs">${long}</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-800">0</span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500">Baru saja</td>
                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                     <button class="text-indigo-600 hover:text-indigo-900 mx-1"><i class="fa-regular fa-copy"></i></button>
                     <button class="text-slate-400 hover:text-red-600 mx-1"><i class="fa-regular fa-trash-can"></i></button>
                </td>
            `;

            tbody.insertBefore(row, tbody.firstChild);
            
            // Remove animation class after a moment
            setTimeout(() => {
                row.classList.remove('animate-pulse', 'bg-green-50');
            }, 1000);
        }

        // Copy to Clipboard
        function copyLink() {
            const linkText = document.getElementById('generatedLink').textContent;
            
            // Fallback copy method for iframe environments
            const textArea = document.createElement("textarea");
            textArea.value = linkText;
            document.body.appendChild(textArea);
            textArea.select();
            try {
                document.execCommand('copy');
                showToast('Link berhasil disalin!');
            } catch (err) {
                showToast('Gagal menyalin link');
            }
            document.body.removeChild(textArea);
        }

        // Toast Notification
        function showToast(msg) {
            const toast = document.getElementById('toast');
            document.getElementById('toastMessage').textContent = msg;
            
            toast.classList.remove('translate-y-20', 'opacity-0');
            
            setTimeout(() => {
                toast.classList.add('translate-y-20', 'opacity-0');
            }, 3000);
        }
    </script>
</body>
</html>