<script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Link, usePage } from "@inertiajs/vue3";
import { ref, computed } from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import {
  faMagnifyingGlass,
  faPlus,
  faKey,
  faPen,
} from "@fortawesome/free-solid-svg-icons";

const props = defineProps({
  permissions: Array,
});

const q = ref("");
const filtered = computed(() => {
  const term = q.value.toLowerCase().trim();
  if (!term) return props.permissions;
  return props.permissions.filter(
    (p) =>
      p.name.toLowerCase().includes(term) ||
      p.slug.toLowerCase().includes(term) ||
      (p.description || "").toLowerCase().includes(term)
  );
});
</script>

<template>
  <AdminLayout title="Dovoljenja">
    <div class="max-w-5xl mx-auto space-y-8">
      <div class="bg-white border rounded-xl shadow-sm p-6 space-y-6">
        <header class="flex flex-col sm:flex-row sm:items-center gap-4 justify-between">
          <div>
            <h1 class="text-xl font-semibold tracking-tight">Dovoljenja</h1>
            <p class="text-sm text-gray-500">Pregled vseh sistemskih dovoljenj.</p>
          </div>
          <Link
            :href="route('admin.permissions.create')"
            class="inline-flex items-center gap-2 px-3 py-2 rounded-md text-xs font-medium bg-indigo-600 text-white hover:bg-indigo-500"
          >
            <FontAwesomeIcon :icon="faPlus" class="w-4 h-4" /> Novo
          </Link>
        </header>

        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
          <div class="relative w-full sm:max-w-xs">
            <span class="absolute left-2 top-2 text-gray-400">
              <FontAwesomeIcon :icon="faMagnifyingGlass" class="w-4 h-4" />
            </span>
            <input
              v-model="q"
              type="text"
              placeholder="Išči..."
              class="pl-8 pr-3 py-1.5 text-sm rounded-md border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 w-full"
            />
          </div>
          <div class="text-xs text-gray-500">
            {{ filtered.length }} / {{ props.permissions.length }} rezultatov
          </div>
        </div>

        <div class="overflow-x-auto rounded-lg border border-slate-200">
          <table class="min-w-full text-sm">
            <thead class="bg-slate-50 text-slate-600">
              <tr>
                <th class="p-2 text-left text-[11px] uppercase tracking-wide font-medium">
                  Ime
                </th>
                <th class="p-2 text-left text-[11px] uppercase tracking-wide font-medium">
                  Slug
                </th>
                <th class="p-2 text-left text-[11px] uppercase tracking-wide font-medium">
                  Opis
                </th>
                <th class="p-2 text-left text-[11px] uppercase tracking-wide font-medium">
                  Ustvarjeno
                </th>
                <th class="p-2 text-left text-[11px] uppercase tracking-wide font-medium">
                  Akcije
                </th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="p in filtered"
                :key="p.id"
                class="border-t border-slate-100 hover:bg-slate-50/60"
              >
                <td class="p-2 whitespace-nowrap font-medium flex items-center gap-2">
                  <span
                    class="inline-flex items-center justify-center h-7 w-7 rounded-md bg-indigo-50 text-indigo-600"
                    ><FontAwesomeIcon :icon="faKey"
                  /></span>
                  <Link
                    :href="route('admin.permissions.edit', p.id)"
                    class="hover:underline"
                    >{{ p.name }}</Link
                  >
                </td>
                <td class="p-2 whitespace-nowrap font-mono text-xs text-gray-600">
                  {{ p.slug }}
                </td>
                <td class="p-2 text-xs text-gray-600 max-w-md">
                  {{ p.description || "—" }}
                </td>
                <td class="p-2 whitespace-nowrap text-xs text-gray-500">
                  {{ new Date(p.created_at).toLocaleDateString() }}
                </td>
                <td class="p-2 whitespace-nowrap text-xs">
                  <Link
                    :href="route('admin.permissions.edit', p.id)"
                    class="inline-flex items-center gap-1 px-2 py-1 rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50"
                  >
                    <FontAwesomeIcon :icon="faPen" class="w-3.5 h-3.5" /> Uredi
                  </Link>
                </td>
              </tr>
              <tr v-if="!filtered.length">
                <td colspan="5" class="p-6 text-center text-sm text-gray-500">
                  Ni rezultatov
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </AdminLayout>
</template>
