import { TURKISH_CITIES } from "../utils/locations.js";

export async function renderSettings(pb, currentBg, onBgSelect, currentCity, onCitySelect) {
  let bgList = [];

  try {
    const records = await pb.collection("backgrounds").getFullList();
    bgList = records.map((item) => ({
      id: item.id,
      title: item.title || "Duvar Kağıdı",
      url: `https://pocketbase.iontalp.com/api/files/${item.collectionId}/${item.id}/${item.image || item.file}`,
    }));
  } catch (err) {
    console.error("Görseller yüklenemedi:", err);
  }

  const cityOptions = TURKISH_CITIES.map((c) => {
    const selected = c.name === currentCity ? "selected" : "";
    return `<option value="${c.name}" ${selected}>${c.name}</option>`;
  }).join("");

  const html = `
    <div class="bg-slate-900/60 backdrop-blur-2xl border border-white/10 p-8 rounded-3xl shadow-2xl max-w-4xl w-full h-[80vh] flex flex-col">
      <button id="closeBtn" class="absolute top-4 right-4 bg-rose-500/20 hover:bg-rose-500/40 text-rose-300 border border-rose-500/30 w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs transition-all">
        ✕
      </button>
      <h2 class="text-2xl font-bold text-white mb-2">⚙️ Sistem Ayarları</h2>
      <p class="text-slate-400 text-sm mb-6">Seçtiğin duvar kağıdı doğrudan PocketBase hesabına kaydedilir.</p>

      <div class="mb-6 p-4 rounded-2xl border border-white/10 bg-slate-900/40">
        <h3 class="text-sm font-semibold text-slate-300 mb-3">Bölge Ayarı</h3>
        <div class="flex items-center gap-3">
          <select id="citySelect" class="bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white text-sm flex-1">
            ${cityOptions}
          </select>
          <button id="saveCityBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-xl text-xs font-medium transition-all">
            Kaydet
          </button>
        </div>
        <p id="cityMsg" class="text-xs mt-2 hidden"></p>
      </div>

      <div class="mb-6 p-4 rounded-2xl border border-white/10 bg-slate-900/40">
        <h3 class="text-sm font-semibold text-slate-300 mb-3">Yeni Arka Plan Ekle</h3>
        <form id="uploadForm" class="flex items-center gap-3">
          <input type="file" id="bgFile" accept="image/*" required class="text-xs text-slate-300" />
          <input type="text" id="bgTitle" placeholder="Başlık (opsiyonel)" class="bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white text-xs flex-1" />
          <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-xl text-xs font-medium transition-all">
            Yükle
          </button>
        </form>
        <p id="uploadMsg" class="text-xs mt-2 hidden"></p>
      </div>

      <div class="flex-1 overflow-y-auto pr-2">
        <h3 class="text-sm font-semibold text-slate-300 mb-4">Arka Plan Galerisi (${bgList.length})</h3>

        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
          ${bgList
            .map(
              (bg) => `
            <div data-url="${bg.url}" class="group relative h-40 rounded-2xl overflow-hidden border-2 cursor-pointer transition-all duration-300 hover:scale-[1.02] ${currentBg === bg.url ? "border-indigo-500 ring-4 ring-indigo-500/20" : "border-white/10 hover:border-white/30"}">
              <img src="${bg.url}" alt="${bg.title}" class="w-full h-full object-cover" />
              <div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-transparent opacity-80 group-hover:opacity-100 transition-opacity flex items-end p-3">
                <span class="text-xs font-medium text-white truncate">${bg.title}</span>
              </div>
            </div>
          `,
            )
            .join("")}
        </div>
      </div>
    </div>
  `;

  return {
    html,
    initEvents: (container) => {
      setupCity(container, pb, onCitySelect);
      setupUpload(container, pb, onBgSelect);
      setupGallery(container, pb, onBgSelect);
    },
  };
}

function setupCity(container, pb, onCitySelect) {
  const saveBtn = container.querySelector("#saveCityBtn");
  const select = container.querySelector("#citySelect");
  const msg = container.querySelector("#cityMsg");

  if (!saveBtn || !select) return;

  saveBtn.addEventListener("click", async () => {
    const city = select.value;
    try {
      await pb.collection("users").update(pb.authStore.model.id, {
        selected_city: city,
      });
      if (onCitySelect) onCitySelect(city);
      showMsg(msg, "Bölge kaydedildi!", true);
    } catch (err) {
      console.error("Bölge kaydedilemedi:", err);
      showMsg(msg, "Kaydedilemedi. Varsayılan olarak kullanılacak.", false);
      if (onCitySelect) onCitySelect(city);
    }
  });
}

function setupUpload(container, pb, onBgSelect) {
  const form = container.querySelector("#uploadForm");
  const msg = container.querySelector("#uploadMsg");

  if (!form) return;

  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const fileInput = container.querySelector("#bgFile");
    const titleInput = container.querySelector("#bgTitle");

    const file = fileInput?.files?.[0];
    if (!file) {
      showMsg(msg, "Lütfen bir resim seçin.", false);
      return;
    }

    try {
      await pb.collection("backgrounds").create({
        title: titleInput?.value || "Duvar Kağıdı",
        image: file,
      });

      showMsg(msg, "Arka plan yüklendi!", true);
      fileInput.value = "";
      if (titleInput) titleInput.value = "";

      setTimeout(() => {
        window.location.reload();
      }, 800);
    } catch (err) {
      console.error("Yükleme hatası:", err);
      showMsg(msg, "Yükleme başarısız. PocketBase bağlantısını kontrol et.", false);
    }
  });
}

function setupGallery(container, pb, onBgSelect) {
  container.querySelectorAll("[data-url]").forEach((card) => {
    card.addEventListener("click", async () => {
      const selectedUrl = card.getAttribute("data-url");
      try {
        await pb.collection("users").update(pb.authStore.model.id, {
          selected_bg: selectedUrl,
        });
        onBgSelect(selectedUrl);
      } catch (err) {
        console.error("Ayar kaydedilemedi:", err);
      }
    });
  });
}

function showMsg(el, text, success) {
  el.textContent = text;
  el.className = `text-xs mt-2 ${success ? "text-emerald-400" : "text-rose-400"}`;
  el.classList.remove("hidden");
}