---
// src/pages/operativa/serviseri/index.astro
import Layout from "../../../layouts/Layout.astro";
import WelcomeHeader from "../../../components/WelcomeHeader.astro";
import RadniNalogLista from "../../../components/RadniNalogLista.astro";
---

<Layout title="Evidencija Servisera | Operativa">
  <div class="w-full space-y-10">
    
    <WelcomeHeader />

    <div class="grid md:grid-cols-10 gap-8 items-start mb-10 px-2">
      
      <div id="direktorij-sekcija" class="hidden md:col-span-10 space-y-6">
        <div class="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 rounded-[2.5rem] p-6 sm:p-8 shadow-xl shadow-gray-100/40 dark:shadow-none">
          
          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6 pb-4 border-b border-gray-50 dark:border-gray-800">
            <div>
              <h2 class="text-xl font-black text-gray-900 dark:text-white uppercase tracking-tight leading-none italic">
                Registrirani <span class="text-blue-600">Serviseri</span>
              </h2>
              <p class="text-xs text-gray-400 mt-2 italic font-medium">Popis tehničara s aktivnim ovlastima za radne naloge</p>
            </div>
            
            <div>
              <div class="bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-400 border border-blue-100/30 dark:border-blue-900/30 italic font-black uppercase tracking-widest text-[11px] px-4 py-2 rounded-2xl w-max">
                Ukupno: <span id="serviseri-counter">0</span>
              </div>
            </div>
          </div>

          <div id="serviseri-loading" class="py-12 flex flex-col items-center justify-center gap-3 text-gray-400 dark:text-gray-500 italic text-sm">
            <i class="fa-solid fa-circle-notch animate-spin text-blue-600 text-2xl"></i>
            Dohvaćanje operativnih podataka s poslužitelja...
          </div>

          <div id="serviseri-grid" class="hidden grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          </div>

          <div id="serviseri-empty" class="hidden py-12 text-center text-gray-400 dark:text-gray-500 italic text-sm">
            <i class="fa-solid fa-user-slash text-2xl mb-2 text-gray-300 dark:text-gray-700 block"></i>
            Nema registriranih servisera u bazi podataka flote.
          </div>

        </div>
      </div>

      <div id="moji-nalozi-sekcija" class="hidden md:col-span-10 space-y-6">
        <RadniNalogLista 
          limit={10} 
          prikaziNaslov={true} 
        />
      </div>

    </div>
  </div>
</Layout>

<script>
  import { fetchCurrentUser, fetchServiseri } from "../../../lib/api";

  async function ucitajStranicuServisera() {
    const direktorijSekcija = document.getElementById('direktorij-sekcija');
    const loadingEl = document.getElementById('serviseri-loading');
    const gridEl = document.getElementById('serviseri-grid');
    const emptyEl = document.getElementById('serviseri-empty');
    const counterEl = document.getElementById('serviseri-counter');
    const mojiNaloziSekcija = document.getElementById('moji-nalozi-sekcija');

    try {
      const user = await fetchCurrentUser();
      const ulogaGore = user?.uloga ? String(user.uloga).toUpperCase().trim() : '';

      // 1. Ako je običan serviser, prikaži sekciju s univerzalnom listom
      if (ulogaGore === 'SERVISER') {
        if (direktorijSekcija) direktorijSekcija.classList.add('hidden');
        if (mojiNaloziSekcija) mojiNaloziSekcija.classList.remove('hidden');
        return; 
      }

      // 2. Ako je Admin / Voditelj, prikaži imenik tehničara
      if (direktorijSekcija) direktorijSekcija.classList.remove('hidden');
      if (mojiNaloziSekcija) mojiNaloziSekcija.classList.add('hidden');

      const serviseri = await fetchServiseri();
      if (loadingEl) loadingEl.classList.add('hidden');

      if (!serviseri || serviseri.length === 0) {
        if (emptyEl) emptyEl.classList.remove('hidden');
        return;
      }

      if (counterEl) counterEl.textContent = serviseri.length.toString();

      if (gridEl) {
        gridEl.innerHTML = serviseri.map((s: any) => {
          const inicijali = `${s.first_name?.[0] || ''}${s.last_name?.[0] || ''}`.toUpperCase() || 'ST';
          const imePrezime = `${s.first_name || ''} ${s.last_name || ''}`.trim() || s.email;

          return `
            <div class="bg-gray-50/50 dark:bg-gray-800/30 border border-gray-100 dark:border-gray-800/60 rounded-[1.8rem] p-5 flex items-center justify-between gap-4 hover:border-blue-500/30 dark:hover:border-blue-500/20 hover:bg-white dark:hover:bg-gray-800/60 transition-all duration-300 group">
              <div class="flex items-center gap-4">
                <div class="w-12 h-12 bg-blue-600/10 text-blue-600 dark:text-blue-400 font-black text-xs tracking-widest rounded-2xl flex items-center justify-center border border-blue-500/10 shadow-sm">
                  ${inicijali}
                </div>
                <div class="text-left">
                  <h3 class="text-sm font-black text-gray-900 dark:text-white uppercase tracking-tight leading-none group-hover:text-blue-600 transition-colors italic">
                    ${imePrezime}
                  </h3>
                  <p class="text-[10px] font-medium text-gray-400 mt-2 lowercase select-all">${s.email}</p>
                </div>
              </div>
              <a href="/operativa/serviseri/${s.id}" class="w-10 h-10 flex items-center justify-center rounded-xl bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700/80 text-gray-400 group-hover:text-white group-hover:bg-blue-600 group-hover:border-blue-500 active:scale-90 shadow-sm transition-all cursor-pointer">
                <i class="fa-solid fa-chevron-right text-xs group-hover:translate-x-0.5 transition-transform"></i>
              </a>
            </div>
          `;
        }).join('');
        gridEl.classList.remove('hidden');
        gridEl.classList.add('grid');
      }

    } catch (err) {
      console.error("Greška pri učitavanju stranice:", err);
      if (loadingEl) loadingEl.classList.add('hidden');
      
      // 🚀 TOAST OKIDAMO SAMO OVDJE NA GLAVNOJ STRANICI ZA IMENIK
      // @ts-ignore
      window.showToast?.("Sinkronizacija imenika flote neuspješna.", "error");
    }
  }

  ucitajStranicuServisera();
  document.addEventListener('astro:after-swap', ucitajStranicuServisera);
</script>