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;
  }

  // Avatar resminin tam URL'ini oluşturuyoruz
  const avatarUrl = user?.avatar
    ? `https://pocketbase.iontalp.com/api/files/${user.collectionId}/${user.id}/${user.avatar}`
    : null;

  let currentBg =
    user.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) => {
      pb.authStore.model.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">
      <!-- Arka Plan Görseli -->
      <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-10 bg-slate-950/50 backdrop-blur-[2px]"></div>

      <!-- Sol Menü (Sidebar) -->
      <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>

        <!-- Profil / Çıkış Alanı -->
        <div class="space-y-3 pt-4 border-t border-white/10">
          <div id="profileBtn" class="flex items-center gap-3 p-2 rounded-xl hover:bg-white/5 cursor-pointer transition-all">
            ${
              avatarUrl
                ? `<img src="${avatarUrl}" alt="Avatar" class="w-10 h-10 rounded-full object-cover border border-white/20" />`
                : `<div class="w-10 h-10 rounded-full bg-indigo-600/30 border border-indigo-500/30 flex items-center justify-center font-bold text-indigo-400">${(user.username || user.email).charAt(0).toUpperCase()}</div>`
            }
            <div class="overflow-hidden">
              <p class="text-sm font-medium text-white truncate">${user.username || user.email}</p>
              <p class="text-xs text-slate-400">Profili Gör</p>
            </div>
          </div>

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

      <!-- Ana İçerik -->
      <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 / Kullanıcı Adı" 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();