import { gregorianToHijri } from "../utils/hijri.js";
import { fetchWeather, getWeatherIcon, getWeatherDesc } from "../utils/weather.js";
import { fetchPrayerTimes } from "../utils/prayerTimes.js";

export function renderDesktop(selectedCity = "Edremit") {
  const hijri = gregorianToHijri();
  const today = new Date();
  const dateStr = today.toLocaleDateString("tr-TR", {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  const html = `
    <div class="flex justify-end w-full max-w-6xl h-full items-start pt-4">
      <!-- Windows Vista Tarzı Entegre Tek Kolon Sidebar -->
      <div class="w-full max-w-sm bg-slate-900/50 backdrop-blur-2xl border border-white/10 rounded-3xl p-6 shadow-2xl space-y-6">
        
        <!-- Header -->
        <div class="flex items-center justify-between pb-4 border-b border-white/10">
          <h2 class="text-lg font-bold text-white flex items-center gap-2">
            <span>🖥️</span> Masaüstü Araçları
          </h2>
          <span class="text-xs text-slate-400 font-medium">${selectedCity}</span>
        </div>

        <!-- Bölüm 1: Hicri Takvim -->
        <div class="space-y-1.5">
          <div class="flex items-center gap-2 text-xs font-semibold text-emerald-400">
            <span>📅</span> HİCRİ TAKVİM
          </div>
          <p class="text-white font-bold text-base">${hijri.day} ${hijri.monthName} ${hijri.year}</p>
          <p class="text-xs text-slate-400">${dateStr} / ${hijri.weekday}</p>
        </div>

        <hr class="border-white/5" />

        <!-- Bölüm 2: Hava Durumu -->
        <div class="space-y-1.5" id="weatherWidget">
          <div class="flex items-center gap-2 text-xs font-semibold text-sky-400">
            <span>Yükleniyor...</span>
          </div>
        </div>

        <hr class="border-white/5" />

        <!-- Bölüm 3: İmsakiye & Aktif Vakit -->
        <div class="space-y-3" id="imsakiyeWidget">
          <div class="text-xs font-semibold text-orange-400">İMSAKİYE</div>
          <p class="text-xs text-slate-400">Yükleniyor...</p>
        </div>

        <hr class="border-white/5" />

        <!-- Bölüm 4: Kaza Namazı Kısayolu -->
        <div id="kazaShortcut" class="bg-indigo-600/20 hover:bg-indigo-600/30 border border-indigo-500/30 p-4 rounded-2xl cursor-pointer transition-all group flex items-center justify-between">
          <div class="flex items-center gap-3">
            <span class="text-2xl group-hover:scale-110 transition-transform">📿</span>
            <div>
              <h3 class="text-sm font-bold text-white">Kaza Namazı Takibi</h3>
              <p class="text-[11px] text-indigo-300">Kaydetmeye ve takibe başla</p>
            </div>
          </div>
          <span class="text-slate-400 group-hover:translate-x-1 transition-transform">➔</span>
        </div>

      </div>
    </div>
  `;

  return {
    html,
    initEvents: (container) => {
      loadWeather(container, selectedCity);
      loadImsakiye(container, selectedCity);
      
      container.querySelector("#kazaShortcut")?.addEventListener("click", () => {
        window.dispatchEvent(new CustomEvent("navigate", { detail: "kaza" }));
      });
    },
  };
}

async function loadWeather(container, selectedCity) {
  const widget = container.querySelector("#weatherWidget");
  if (!widget) return;
  const data = await fetchWeather(selectedCity);
  if (!data) {
    widget.innerHTML = `<span class="text-xs text-rose-400">Hava durumu alınamadı</span>`;
    return;
  }
  const icon = getWeatherIcon(data.weathercode);
  const desc = getWeatherDesc(data.weathercode);
  const temp = Math.round(data.temperature);
  widget.innerHTML = `
    <div class="flex items-center justify-between">
      <div>
        <div class="flex items-center gap-2 text-xs font-semibold text-sky-400">
          <span>🌤️</span> HAVA DURUMU
        </div>
        <p class="text-xs text-slate-300 mt-1">${desc}</p>
      </div>
      <div class="flex items-center gap-2">
        <span class="text-3xl">${icon}</span>
        <span class="text-2xl font-bold text-white">${temp}°C</span>
      </div>
    </div>
  `;
}

async function loadImsakiye(container, selectedCity) {
  const widget = container.querySelector("#imsakiyeWidget");
  if (!widget) return;
  const times = await fetchPrayerTimes(selectedCity);
  if (!times) {
    widget.innerHTML = `<span class="text-xs text-rose-400">Vakitler alınamadı</span>`;
    return;
  }

  const activeKey = times.currentPrayer?.key;

  widget.innerHTML = `
    <div class="flex items-center justify-between mb-2">
      <span class="text-xs font-semibold text-orange-400">🕌 NAMAZ VAKİTLERİ</span>
      <span class="text-[10px] bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 px-2 py-0.5 rounded-full">Şu an: ${times.currentPrayer?.name}</span>
    </div>
    <div class="grid grid-cols-2 gap-2 text-xs">
      <div class="p-2 rounded-xl ${activeKey === 'fajr' ? 'bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold' : 'bg-slate-900/40 text-slate-300'}">İmsak: ${times.imsak}</div>
      <div class="p-2 rounded-xl bg-slate-900/40 text-slate-300">Güneş: ${times.sunrise}</div>
      <div class="p-2 rounded-xl ${activeKey === 'dhuhr' ? 'bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold' : 'bg-slate-900/40 text-slate-300'}">Öğle: ${times.dhuhr}</div>
      <div class="p-2 rounded-xl ${activeKey === 'asr' ? 'bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold' : 'bg-slate-900/40 text-slate-300'}">İkindi: ${times.asr}</div>
      <div class="p-2 rounded-xl ${activeKey === 'maghrib' ? 'bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold' : 'bg-slate-900/40 text-slate-300'}">Akşam: ${times.maghrib}</div>
      <div class="p-2 rounded-xl ${activeKey === 'isha' ? 'bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 font-bold' : 'bg-slate-900/40 text-slate-300'}">Yatsı: ${times.isha}</div>
    </div>
  `;
}