---
// src/pages/kupci/svi.astro
import Layout from "../../layouts/Layout.astro";
import AkcijePanel from "../../components/AkcijePanel.astro";
import WelcomeHeader from "../../components/WelcomeHeader.astro";

// Importiranje nove funkcije
import { fetchKupciData } from "../../lib/api";
import { getStatusColorClass } from "../../utils/ui";

// 1. DOHVAT PODATAKA (Koristimo novu funkciju)
const { kupci } = await fetchKupciData();

// 2. LOGIKA STATISTIKE
const aktivniKupci = kupci.filter(k => k.aktivno === true).length;
const brojPravnih = kupci.filter(k => k.tip === 'pravno').length;
---

<Layout title="Partneri i Kupci | Servislog">
  <div class="w-full space-y-10">

    <WelcomeHeader textH1="Baza" textH1dodatno="Partnera" podnaslov="Pregled klijenata, kontakata i strojne flote" />

    <div class="grid md:grid-cols-10 gap-8 items-start mb-10 px-2">
      
      <div class="md:col-span-7 space-y-6">
        <div class="flex justify-between items-center px-4">
          <h2 class="text-xl font-black text-gray-900 dark:text-white uppercase tracking-tight italic">Popis klijenata</h2>
          <div class="flex items-center gap-4">
            <span class="text-[10px] font-bold uppercase text-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 px-2 py-1 rounded border border-emerald-200/50 italic">Aktivni: {aktivniKupci}</span>
            <span class="text-[10px] font-bold uppercase text-blue-600 bg-blue-50 dark:bg-blue-900/20 px-2 py-1 rounded border border-blue-200/50 italic">Tvrtke: {brojPravnih}</span>
          </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-[3rem] border border-gray-100 dark:border-gray-700 shadow-2xl shadow-blue-500/5 overflow-hidden">
          <div id="kupci-list">
            {kupci.length > 0 ? kupci.map((k) => (
              <a 
                href={`/kupci/${k.id}`}
                class="kupac-item flex items-center justify-between p-8 hover:bg-blue-50/30 dark:hover:bg-gray-700/30 border-b border-gray-50 dark:border-gray-700 last:border-0 group transition-all"
              >
                <div class="flex items-center gap-6 text-left">
                  <div class="w-14 h-14 rounded-2xl bg-gray-50 dark:bg-gray-900 flex items-center justify-center text-gray-400 group-hover:bg-blue-600 group-hover:text-white transition-all shadow-sm">
                    <i class={`fa-solid ${k.tip === 'pravno' ? 'fa-building-shield' : 'fa-user-gear'} text-xl`}></i>
                  </div>
                  
                  <div class="flex flex-col">
                    <div class="flex items-center gap-3">
                      <span class="font-black text-gray-900 dark:text-white text-xl uppercase tracking-tighter italic group-hover:text-blue-600 transition-colors leading-none">
                        {k.naziv}
                      </span>
                      <span class="text-[10px] font-black bg-gray-100 dark:bg-gray-900 px-2 py-0.5 rounded border border-gray-200 dark:border-gray-700 uppercase tracking-widest text-gray-500">
                        {k.grad}
                      </span>
                    </div>
                    
                    <span class="text-gray-400 text-[10px] font-black uppercase tracking-widest mt-2">
                        OIB: <span class="text-gray-900 dark:text-gray-200">{k.oib}</span>
                        <span class="text-blue-600/30 mx-1">•</span> 
                        Kontakt: {k.telefon}
                    </span>
                  </div>
                </div>
                
                <div class="flex items-center gap-8">
                  <div class="hidden lg:flex flex-col items-end text-right">
                    <span class="text-[8px] font-black uppercase text-gray-400 tracking-[0.2em]">Oprema u sustavu</span>
                    <span class="text-xs font-black uppercase italic dark:text-gray-300">
                        {k.broj_strojeva} Jedinica
                    </span>
                  </div>
                  <i class="fa-solid fa-arrow-right-long text-gray-200 group-hover:text-blue-600 group-hover:translate-x-2 transition-all"></i>
                </div>
              </a>
            )) : (
              <div class="p-24 text-center">
                <i class="fa-solid fa-users-viewfinder text-4xl text-gray-100 dark:text-gray-700 mb-4 block"></i>
                <p class="italic text-gray-400 text-[10px] uppercase tracking-widest">Nema kupaca u bazi</p>
              </div>
            )}
          </div>
        </div>
      </div>

      <div class="md:col-span-3">
        <AkcijePanel tip="dashboard" />
      </div>

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

<script>
  import { initFilters } from "../../scripts/filters";
  initFilters();
  document.addEventListener('astro:after-swap', initFilters);
</script>