<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import { Link, useForm } from '@inertiajs/vue3';
import { ref } from 'vue';

// Non-blocking confirm modal state
const confirmOpen = ref(false);
const confirmUuid = ref(null);
const deleteForm = useForm({});

function requestDelete(uuid) {
  confirmUuid.value = uuid;
  confirmOpen.value = true;
}

function performDelete() {
  if (!confirmUuid.value) return;
  deleteForm.delete(route('importTemplates.destroy', { template: confirmUuid.value }), {
    preserveScroll: true,
    onFinish: () => {
      confirmOpen.value = false;
      confirmUuid.value = null;
    },
  });
}

function cancelDelete() {
  confirmOpen.value = false;
  confirmUuid.value = null;
}

const props = defineProps({
  templates: Array,
});
</script>

<template>
  <AppLayout title="Uvozne predloge">
    <template #header>
      <h2 class="font-semibold text-xl text-gray-800 leading-tight">Uvozne predloge</h2>
    </template>

    <div class="py-6">
      <div class="max-w-5xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white shadow sm:rounded-lg p-6">
          <div class="flex items-center justify-between mb-4">
            <div class="text-sm text-gray-600">Skupaj: {{ props.templates?.length || 0 }}</div>
            <Link :href="route('importTemplates.create')" class="px-3 py-2 bg-emerald-600 text-white rounded">Nova predloga</Link>
          </div>

          <div class="divide-y">
            <div v-for="t in props.templates" :key="t.uuid" class="py-3 flex items-center justify-between">
              <div>
                <div class="font-medium">{{ t.name }}</div>
                <div class="text-xs text-gray-500">{{ t.description }}</div>
                <div class="text-xs text-gray-400 mt-1">{{ t.client?.name || 'Global' }} • {{ t.source_type.toUpperCase() }}</div>
              </div>
              <div class="flex items-center gap-2">
                <span :class="['text-xs px-2 py-0.5 rounded', t.is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-gray-100 text-gray-500']">{{ t.is_active ? 'Active' : 'Inactive' }}</span>
                <Link :href="route('importTemplates.edit', { template: t.uuid })" class="px-3 py-1.5 border rounded text-sm">Uredi</Link>
                <button
                  class="px-3 py-1.5 border rounded text-sm text-red-700 border-red-300 hover:bg-red-50"
                  @click.prevent="requestDelete(t.uuid)"
                >Izbriši</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Confirm Delete Modal -->
    <div v-if="confirmOpen" class="fixed inset-0 z-50 flex items-center justify-center">
      <div class="absolute inset-0 bg-black/30" @click="cancelDelete"></div>
      <div class="relative bg-white rounded shadow-lg w-96 max-w-[90%] p-5">
        <div class="text-lg font-semibold mb-2">Izbrišem predlogo?</div>
        <p class="text-sm text-gray-600 mb-4">Tega dejanja ni mogoče razveljaviti. Vse preslikave te predloge bodo izbrisane.</p>
        <div class="flex items-center justify-end gap-2">
          <button class="px-3 py-1.5 border rounded" @click.prevent="cancelDelete" :disabled="deleteForm.processing">Prekliči</button>
          <button class="px-3 py-1.5 rounded text-white bg-red-600 disabled:opacity-60" @click.prevent="performDelete" :disabled="deleteForm.processing">
            <span v-if="deleteForm.processing">Brisanje…</span>
            <span v-else>Izbriši</span>
          </button>
        </div>
      </div>
    </div>
  </AppLayout>
</template>
