---
// src/components/AkcijePanel.astro

import Button from './Button.astro';

interface Props {
  tip: 'dashboard' | 'radni-nalog' | 'stroj' | 'vlasnik' | 'vozilo'; // DODANO: vozilo
  podaci: any;
}

const { tip, podaci } = Astro.props;

// Pomoćna funkcija za formatiranje datuma
const formatDate = (date: string) => 
  new Date(date).toLocaleDateString('hr-HR', { day: '2-digit', month: '2-digit', year: 'numeric' });
---

<aside class="space-y-6">
  <div class="grid gap-3">
    {tip === 'dashboard' && (
      <>
        <div class="space-y-6">
          <h2 class="text-xl font-black text-gray-900 dark:text-white uppercase tracking-tight italic px-4">
            Upravljanje
          </h2>
          
          <div class="flex flex-col gap-4">
            <a href="/operativa/radni-nalozi/novi" class="group bg-blue-600 text-white p-6 rounded-[2rem] flex items-center gap-4 hover:bg-blue-700 transition-all shadow-xl shadow-blue-500/20 active:scale-95">
              <div class="bg-white text-blue-600 w-12 h-12 rounded-2xl flex items-center justify-center shadow-lg group-hover:rotate-12 transition-transform shrink-0">
                <i class="fa-solid fa-plus text-xl"></i>
              </div>
              <div class="flex flex-col text-left">
                <span class="font-black uppercase text-xs tracking-widest leading-none">Novi nalog</span>
                <span class="text-[10px] opacity-70 mt-1 italic font-bold uppercase">Inicijaliziraj nalog</span>
              </div>
            </a>

            <a href="/fleet/vozila" class="group bg-white dark:bg-gray-800 text-gray-900 dark:text-white p-6 rounded-[2rem] flex items-center gap-4 hover:border-blue-600 border border-gray-100 dark:border-gray-700 transition-all shadow-sm active:scale-95">
              <div class="bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 w-12 h-12 rounded-2xl flex items-center justify-center group-hover:rotate-12 transition-transform shrink-0">
                <i class="fa-solid fa-truck-pickup text-xl"></i>
              </div>
              <div class="flex flex-col text-left">
                <span class="font-black uppercase text-xs tracking-widest dark:text-white leading-none">Vozni park</span>
                <span class="text-[10px] text-gray-400 mt-1 italic font-bold uppercase tracking-tighter">Status flote</span>
              </div>
            </a>

            <a href="/kupci/svi" class="group bg-white dark:bg-gray-800 text-gray-900 dark:text-white p-6 rounded-[2rem] flex items-center gap-4 hover:border-indigo-600 border border-gray-100 dark:border-gray-700 transition-all shadow-sm active:scale-95">
              <div class="bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 w-12 h-12 rounded-2xl flex items-center justify-center group-hover:rotate-12 transition-transform shrink-0">
                <i class="fa-solid fa-address-book text-xl"></i>
              </div>
              <div class="flex flex-col text-left">
                <span class="font-black uppercase text-xs tracking-widest dark:text-white leading-none">Klijenti</span>
                <span class="text-[10px] text-gray-400 mt-1 italic font-bold uppercase tracking-tighter">Baza partnera</span>
              </div>
            </a>

            <div class="mt-10 pt-6 border-t border-gray-200 dark:border-gray-700">
                <Button variant="primary" class="w-full justify-center gap-2 !rounded-2xl py-4 uppercase font-black italic tracking-widest">
                    <i class="fa-solid fa-print"></i> Ispis naloga
                </Button>
            </div>
          </div>
        </div>
      </>
    )}

    {tip === 'radni-nalog' && (
      <>
        <button class="w-full py-4 bg-blue-600 text-white rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-blue-700 transition-all shadow-lg shadow-blue-500/20">
          <i class="fa-solid fa-check-double mr-2"></i> Završi nalog
        </button>
        <button class="w-full py-4 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-gray-200 transition-all">
          <i class="fa-solid fa-print mr-2"></i> Ispis (PDF)
        </button>
      </>
    )}

    {tip === 'stroj' && (
      <>
        <button class="w-full py-4 bg-green-600 text-white rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-green-700 transition-all shadow-lg shadow-green-500/20">
          <i class="fa-solid fa-plus mr-2"></i> Novi Radni Nalog
        </button>
        <button class="w-full py-4 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-2xl font-black uppercase text-[11px] tracking-widest">
          <i class="fa-solid fa-file-contract mr-2"></i> Atesti i Dokumenti
        </button>
      </>
    )}

    {tip === 'vlasnik' && (
      <>
        <div class="bg-white dark:bg-gray-800 rounded-[2.5rem] p-6 shadow-xl border border-gray-100 dark:border-gray-700 mb-6">
          <label class="text-[9px] font-black uppercase text-indigo-600 block mb-4 tracking-[0.2em] italic">Upravljanje klijentom</label>
          <div class="grid gap-3">
            <Button class="w-full py-4 bg-indigo-600 text-white rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-indigo-700 transition-all shadow-lg shadow-indigo-500/20">
              <i class="fa-solid fa-pen-to-square mr-2"></i> Uredi podatke
            </Button>
            <a href={`tel:${podaci.telefon}`} class="w-full py-4 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-2xl font-black uppercase text-[11px] tracking-widest hover:bg-gray-200 transition-all text-center no-underline">
              <i class="fa-solid fa-phone mr-2"></i> Nazovi klijenta
            </a>
          </div>
        </div>

        <div class="bg-indigo-50/50 dark:bg-indigo-900/10 rounded-[2.5rem] p-6 border border-dashed border-indigo-200 dark:border-indigo-800">
          <label class="text-[9px] font-black uppercase text-indigo-400 block mb-4 tracking-[0.2em] italic">Podaci o tvrtki</label>
          <div class="space-y-4">
            <div class="flex flex-col border-b border-indigo-100/50 dark:border-indigo-900/30 pb-2">
              <span class="text-[9px] font-bold text-gray-400 uppercase">OIB</span>
              <span class="text-sm font-black dark:text-gray-200 tracking-tighter">{podaci.oib}</span>
            </div>
            <div class="flex flex-col border-b border-indigo-100/50 dark:border-indigo-900/30 pb-2">
              <span class="text-[9px] font-bold text-gray-400 uppercase">Adresa</span>
              <span class="text-sm font-black dark:text-gray-200 leading-tight">{podaci.adresa}, {podaci.grad}</span>
            </div>
            <div class="flex flex-col">
              <span class="text-[9px] font-bold text-gray-400 uppercase">Email</span>
              <span class="text-sm font-black text-indigo-600 truncate">{podaci.email}</span>
            </div>
          </div>
        </div>
      </>
    )}

    {tip === 'vozilo' && (
      <>
        <div class="bg-white dark:bg-gray-800 rounded-[2.5rem] p-6 shadow-xl border border-gray-100 dark:border-gray-700 mb-2">
          <label class="text-[9px] font-black uppercase text-blue-600 block mb-4 tracking-[0.2em] italic">Upravljanje vozilom</label>
          <div class="grid gap-3">
            <Button 
              id="btn-brzi-servis"
              variant="primary" 
              class="w-full justify-center py-4 rounded-2xl font-black uppercase text-[11px] tracking-widest shadow-lg shadow-blue-500/20"
              data-id={podaci.id}
            >
              <i class="fa-solid fa-screwdriver-wrench mr-2"></i> Otvori Servis
            </Button>
            
            <Button 
              href={`/operativa/radni-nalozi?vozilo=${podaci.id}`}
              variant="secondary" 
              class="w-full justify-center py-4 rounded-2xl font-black uppercase text-[11px] tracking-widest"
            >
              <i class="fa-solid fa-file-invoice mr-2 opacity-70"></i> Radni Nalozi
            </Button>
          </div>
        </div>
      </>
    )}
  </div>

  <div class="bg-gray-50 dark:bg-gray-900/40 rounded-[2.5rem] p-6 border border-dashed border-gray-200 dark:border-gray-700">
    <label class="text-[9px] font-black uppercase text-gray-400 block mb-4 tracking-[0.2em] italic">Informacije sustava</label>
    
    <div class="space-y-4">
      {tip === 'radni-nalog' && (
        <>
          <div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
            <span class="text-[10px] font-bold text-gray-400 uppercase">Status</span>
            <span class="text-xs font-black text-red-500 uppercase italic">{podaci.status}</span>
          </div>
          <div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
            <span class="text-[10px] font-bold text-gray-400 uppercase">Izradio</span>
            <span class="text-xs font-black dark:text-gray-200">{podaci.izvrsitelj_ime}</span>
          </div>
        </>
      )}

      {tip === 'stroj' && (
        <>
          <div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
            <span class="text-[10px] font-bold text-gray-400 uppercase">Zadnji Atest</span>
            <span class="text-xs font-black text-green-500 italic">{formatDate(podaci.datum_zadnjeg_atesta)}</span>
          </div>
          <div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
            <span class="text-[10px] font-bold text-gray-400 uppercase">Godina Proizv.</span>
            <span class="text-xs font-black dark:text-gray-200">{podaci.godina_proizvodnje}</span>
          </div>
          <div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
            <span class="text-[10px] font-bold text-gray-400 uppercase">Sustav ID</span>
            <span class="text-xs font-black dark:text-gray-200">#{podaci.id}</span>
          </div>
        </>
      )}

      {tip === 'vozilo' && (
        <>
          <div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
            <span class="text-[10px] font-bold text-gray-400 uppercase">Sustav ID</span>
            <span class="text-xs font-black dark:text-gray-200">#{podaci.id}</span>
          </div>
          <div class="flex justify-between items-end border-b border-gray-100 dark:border-gray-800 pb-2">
            <span class="text-[10px] font-bold text-gray-400 uppercase">DB Status</span>
            <span class="text-xs font-black text-blue-500 uppercase italic">{podaci.status}</span>
          </div>
        </>
      )}
    </div>
  </div>
</aside>