import './style.css'
import PocketBase from 'pocketbase'
import { renderSettings } from './pages/settings.js'
import { renderDesktop } from './pages/desktop.js'

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

let activeTab = 'desktop'

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

  if (!user) {
    renderLogin()
    return
  }

  let currentBg = localStorage.getItem('selected_bg') || 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1920'

  // Sayfayı Yükle
  let currentPage
  if (activeTab === 'settings') {
    currentPage = await renderSettings(pb, currentBg, (newBg) => {
      localStorage.setItem('selected_bg', newBg)
      render()
    })
  } else {
    currentPage = renderDesktop()
  }

  app.innerHTML = `
    <div class="relative w-full h-screen overflow-hidden bg-slate-950 text-slate-100 flex">
      <div class="absolute inset-0 z-0 bg-center bg-no-repeat transition-all duration-700" 
        style="background-image: url('${currentBg}'); background-size: 1920px 1080px;">
      </div>
      <div class="absolute inset-0 z-1 bg-slate-950/50 backdrop-blur-[2px]"></div>

      <aside class="relative z-30 w-72 h-screen bg-slate-900/80 backdrop-blur-xl border-r border-white/10 p-6 flex flex-col justify-between">
        <div>
          <h1 class="font-bold text-white mb-6 text-xl">Dashboard OS</h1>
          <nav class="space-y-2">
            <button id="navDesktop" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === 'desktop' ? 'bg-white/10 text-white' : 'text-slate-400 hover:text-white'}">🏠 Masaüstü</button>
            <button id="navSettings" class="w-full flex items-center gap-3 px-4 py-3 rounded-xl font-medium ${activeTab === 'settings' ? 'bg-white/10 text-white' : 'text-slate-400 hover:text-white'}">⚙️ Ayarlar</button>
          </nav>
        </div>
        <button id="logoutBtn" class="bg-rose-500/20 text-rose-300 py-2 rounded-xl border border-rose-500/30">🚪 Çıkış Yap</button>
      </aside>

      <main id="mainContent" class="relative z-20 flex-1 h-screen p-8 flex items-center justify-center">
        ${currentPage.html}
      </main>
    </div>
  `

  // Etkinlikleri bağla
  const mainContent = document.getElementById('mainContent')
  currentPage.initEvents(mainContent)

  document.getElementById('navDesktop').addEventListener('click', () => { activeTab = 'desktop'; render() })
  document.getElementById('navSettings').addEventListener('click', () => { activeTab = 'settings'; render() })
  document.getElementById('logoutBtn').addEventListener('click', () => { pb.authStore.clear(); render() })
}

function renderLogin() {
  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">
        <h1 class="text-2xl font-bold text-center mb-6">Giriş Yap</h1>
        <form id="loginForm" class="space-y-4">
          <input type="text" id="identity" placeholder="E-posta" required class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white" />
          <input type="password" id="password" placeholder="Şifre" required class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white" />
          <button type="submit" class="w-full bg-indigo-600 py-2 rounded-xl text-white font-medium">Giriş</button>
        </form>
      </div>
    </div>
  `
  document.getElementById('loginForm').addEventListener('submit', async (e) => {
    e.preventDefault()
    try {
      await pb.collection('users').authWithPassword(
        document.getElementById('identity').value,
        document.getElementById('password').value
      )
      render()
    } catch {
      alert('Giriş başarısız!')
    }
  })
}

render()