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

// PocketBase bağlantısını kur (Kendi PocketBase domain adresini yaz)
const pb = new PocketBase('https://pocketbase.iontalp.com')

const app = document.getElementById('app')

// Kullanıcı oturum durumuna göre arayüzü çizen fonksiyon
function render() {
  const user = pb.authStore.model

  if (user) {
    // KULLANICI GİRİŞ YAPMIŞSA
    app.innerHTML = `
      <div class="min-h-screen bg-slate-950 text-slate-100 flex flex-col items-center justify-center p-4">
        <div class="bg-slate-900 border border-slate-800 p-8 rounded-2xl shadow-xl w-full max-w-md text-center">
          <div class="w-16 h-16 bg-emerald-500/10 text-emerald-400 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
            ✓
          </div>
          <h2 class="text-2xl font-bold mb-2">Hayırla Geldiniz!</h2>
          <p class="text-slate-400 mb-6">${user.email}</p>
          <button id="logoutBtn" class="w-full bg-rose-600 hover:bg-rose-500 text-white font-medium py-2.5 rounded-xl transition-all">
            Çıkış Yap
          </button>
        </div>
      </div>
    `

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

  } else {
    // KULLANICI GİRİŞ YAPMAMIŞSA (LOGIN FORM)
    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 veya Kullanıcı Adı</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')
        // PocketBase Kullanıcı Doğrulama
        await pb.collection('users').authWithPassword(identity, password)
        render() // Başarılıysa arayüzü güncelle
      } catch (err) {
        errorMsg.textContent = 'Giriş başarısız! E-posta veya şifre hatalı.'
        errorMsg.classList.remove('hidden')
      }
    })
  }
}

// Uygulamayı başlat
render()