import './style.css'
import PocketBase from 'pocketbase'

const pb = new PocketBase('https://pocketbase.iontalp.com')
const app = document.getElementById('app')

async function render() {
  const user = pb.authStore.model

  if (user) {
    // 1. PocketBase'den Arka Plan Resimlerini Çek
    let bgUrl = 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1920' // Varsayılan görsel
    try {
      const records = await pb.collection('backgrounds').getFullList()
      if (records.length > 0) {
        // Rastgele bir arka plan seç
        const randomBg = records[Math.floor(Math.random() * records.length)]
        bgUrl = pb.files.getURL(randomBg, randomBg.image)
      }
    } catch (err) {
      console.log('Arka plan yüklenirken hata oluştu, varsayılan görsel kullanılıyor.', err)
    }

    // 2. Masaüstü Arayüzü (WeTransfer Tarzı Hibrit Tasarım)
    app.innerHTML = `
      <div class="relative min-h-screen w-full overflow-hidden bg-slate-950 text-slate-100 flex">
        
        <!-- Dinamik Arka Plan Görseli -->
        <div class="absolute inset-0 bg-cover bg-center transition-all duration-1000 scale-105" 
             style="background-image: url('${bgUrl}'); filter: brightness(0.75);">
        </div>
        <div class="absolute inset-0 bg-gradient-to-r from-slate-950/80 via-slate-950/30 to-transparent"></div>

        <!-- Sol Açılır / Kapanır Menü (Sidebar) -->
        <aside id="sidebar" 
               class="relative z-20 w-72 h-screen bg-slate-900/80 backdrop-blur-xl border-r border-white/10 p-6 flex flex-col justify-between transition-all duration-300 transform translate-x-0">
          
          <div>
            <!-- Header & Toggle -->
            <div class="flex items-center justify-between mb-8">
              <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-indigo-600/30 border border-indigo-500/30 flex items-center justify-center font-bold text-indigo-400">
                  OS
                </div>
                <div>
                  <h1 class="font-bold text-white leading-none">Dashboard</h1>
                  <span class="text-xs text-slate-400">v1.0.0</span>
                </div>
              </div>
              <button id="toggleSidebarBtn" class="text-slate-400 hover:text-white transition-colors p-1">
                ✕
              </button>
            </div>

            <!-- Menü Linkleri -->
            <nav class="space-y-2">
              <a href="#" class="flex items-center gap-3 px-4 py-3 bg-white/10 text-white rounded-xl font-medium transition-all">
                <span>🏠</span> Masaüstü
              </a>
              <a href="#" class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:bg-white/5 hover:text-white rounded-xl transition-all">
                <span>📁</span> Dosyalarım
              </a>
              <a href="#" class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:bg-white/5 hover:text-white rounded-xl transition-all">
                <span>⚙️</span> Ayarlar
              </a>
            </nav>
          </div>

          <!-- Alt Kullanıcı Profili & Çıkış -->
          <div class="pt-6 border-t border-white/10">
            <div class="flex items-center gap-3 mb-4">
              <div class="w-9 h-9 rounded-full bg-emerald-500/20 text-emerald-400 font-bold flex items-center justify-center border border-emerald-500/30">
                ${user.email.charAt(0).toUpperCase()}
              </div>
              <div class="overflow-hidden">
                <p class="text-sm font-medium text-white truncate">${user.email}</p>
                <p class="text-xs text-emerald-400 flex items-center gap-1">● Çevrimiçi</p>
              </div>
            </div>

            <button id="logoutBtn" class="w-full bg-rose-500/20 hover:bg-rose-500/30 text-rose-300 border border-rose-500/30 font-medium py-2 rounded-xl transition-all text-sm flex items-center justify-center gap-2">
              <span>🚪</span> Çıkış Yap
            </button>
          </div>
        </aside>

        <!-- Sidebar Kapalıyken Çıkan Açma Butonu -->
        <button id="openSidebarBtn" class="hidden absolute top-6 left-6 z-30 bg-slate-900/80 backdrop-blur-md border border-white/10 p-3 rounded-xl text-white hover:bg-slate-800 transition-all">
          ☰
        </button>

        <!-- Ana Masaüstü Alanı (WeTransfer Widget Tarzı) -->
        <main class="relative z-10 flex-1 h-screen p-8 flex items-center justify-center">
          
          <!-- WeTransfer Tarzı Ortalanmış Transparan Kart -->
          <div class="bg-slate-900/40 backdrop-blur-2xl border border-white/10 p-8 rounded-3xl shadow-2xl max-w-lg w-full text-center space-y-6">
            <div class="inline-flex p-3 bg-indigo-500/20 border border-indigo-500/30 rounded-2xl text-indigo-300 text-3xl mb-2">
              ✨
            </div>
            <h2 class="text-3xl font-bold text-white">Hayırla Geldiniz!</h2>
            <p class="text-slate-300 text-sm leading-relaxed">
              Kendi bulut sunucunda çalışan bağımsız masaüstü panelindesin. Sol menüyü kullanarak navigasyonu yönetebilir veya arka planın tadını çıkarabilirsin.
            </p>

            <div class="pt-4 flex gap-3 justify-center">
              <button onclick="location.reload()" class="bg-white/10 hover:bg-white/20 text-white border border-white/10 px-5 py-2.5 rounded-xl text-sm font-medium transition-all">
                🔄 Arka Planı Değiştir
              </button>
            </div>
          </div>

        </main>
      </div>
    `

    // Sidebar Açma / Kapama Mantığı
    const sidebar = document.getElementById('sidebar')
    const toggleBtn = document.getElementById('toggleSidebarBtn')
    const openBtn = document.getElementById('openSidebarBtn')

    toggleBtn.addEventListener('click', () => {
      sidebar.classList.add('-translate-x-full', 'absolute')
      openBtn.classList.remove('hidden')
    })

    openBtn.addEventListener('click', () => {
      sidebar.classList.remove('-translate-x-full', 'absolute')
      openBtn.classList.add('hidden')
    })

    document.getElementById('logoutBtn').addEventListener('click', () => {
      pb.authStore.clear()
      render()
    })

  } else {
    // Giriş yapılmamışsa mevcut Login ekranını göster...
    app.innerHTML = `
      <div class="min-h-screen bg-slate-950 text-slate-100 flex items-center justify-center p-4">
        <div class="bg-slate-900 border border-slate-800 p-8 rounded-2xl shadow-2xl w-full max-w-md">
          <div class="text-center mb-8">
            <h1 class="text-3xl font-bold tracking-tight text-white mb-2">Giriş Yap</h1>
            <p class="text-slate-400 text-sm">PocketBase hesabınızla oturum açın</p>
          </div>

          <form id="loginForm" class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-slate-300 mb-1.5">E-posta</label>
              <input type="text" id="identity" required
                class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-slate-100 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all placeholder-slate-600"
                placeholder="kullanici@mail.com" />
            </div>

            <div>
              <label class="block text-sm font-medium text-slate-300 mb-1.5">Şifre</label>
              <input type="password" id="password" required
                class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-slate-100 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all placeholder-slate-600"
                placeholder="••••••••" />
            </div>

            <div id="errorMsg" class="text-rose-400 text-sm hidden bg-rose-500/10 border border-rose-500/20 p-3 rounded-lg text-center"></div>

            <button type="submit"
              class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-medium py-2.5 rounded-xl transition-all shadow-lg shadow-indigo-600/20 active:scale-[0.98]">
              Giriş Yap
            </button>
          </form>
        </div>
      </div>
    `

    document.getElementById('loginForm').addEventListener('submit', async (e) => {
      e.preventDefault()
      const identity = document.getElementById('identity').value
      const password = document.getElementById('password').value
      const errorMsg = document.getElementById('errorMsg')

      try {
        errorMsg.classList.add('hidden')
        await pb.collection('users').authWithPassword(identity, password)
        render()
      } catch (err) {
        errorMsg.textContent = 'Giriş başarısız! E-posta veya şifre hatalı.'
        errorMsg.classList.remove('hidden')
      }
    })
  }
}

render()