<script setup>
import AdminLayout from "@/Layouts/AdminLayout.vue";
import { Link, usePage } from "@inertiajs/vue3";
import { ref, computed } from "vue";
import { SearchIcon, PlusIcon, KeyRoundIcon, PencilIcon } from "lucide-vue-next";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Badge } from "@/Components/ui/badge";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/Components/ui/table";

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">
      <Card>
        <CardHeader>
          <div class="flex flex-col sm:flex-row sm:items-center gap-4 justify-between">
            <div>
              <CardTitle>Dovoljenja</CardTitle>
              <CardDescription>Pregled vseh sistemskih dovoljenj.</CardDescription>
            </div>
            <Button as-child>
              <Link :href="route('admin.permissions.create')">
                <PlusIcon class="h-4 w-4 mr-2" />
                Novo
              </Link>
            </Button>
          </div>
        </CardHeader>
        <CardContent class="space-y-4">
          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div class="relative w-full sm:max-w-xs">
              <SearchIcon class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input
                v-model="q"
                type="text"
                placeholder="Išči..."
                class="pl-9"
              />
            </div>
            <div class="text-sm text-muted-foreground">
              {{ filtered.length }} / {{ props.permissions.length }} rezultatov
            </div>
          </div>

          <div class="rounded-lg border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead class="text-left">Ime</TableHead>
                  <TableHead class="text-left">Slug</TableHead>
                  <TableHead class="text-left">Opis</TableHead>
                  <TableHead class="text-left">Ustvarjeno</TableHead>
                  <TableHead class="text-left">Akcije</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow v-for="p in filtered" :key="p.id">
                  <TableCell class="font-medium">
                    <div class="flex items-center gap-2">
                      <div class="inline-flex items-center justify-center h-8 w-8 rounded-lg bg-primary/10 text-primary">
                        <KeyRoundIcon class="h-4 w-4" />
                      </div>
                      <Link
                        :href="route('admin.permissions.edit', p.id)"
                        class="hover:underline"
                      >
                        {{ p.name }}
                      </Link>
                    </div>
                  </TableCell>
                  <TableCell class="font-mono text-xs">
                    <Badge variant="secondary">{{ p.slug }}</Badge>
                  </TableCell>
                  <TableCell class="text-sm max-w-md">
                    {{ p.description || "—" }}
                  </TableCell>
                  <TableCell class="text-sm text-muted-foreground">
                    {{ new Date(p.created_at).toLocaleDateString() }}
                  </TableCell>
                  <TableCell>
                    <Button variant="outline" size="sm" as-child>
                      <Link :href="route('admin.permissions.edit', p.id)">
                        <PencilIcon class="h-3.5 w-3.5 mr-2" />
                        Uredi
                      </Link>
                    </Button>
                  </TableCell>
                </TableRow>
                <TableRow v-if="!filtered.length">
                  <TableCell colspan="5" class="text-center text-sm text-muted-foreground py-8">
                    Ni rezultatov
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>
    </div>
  </AdminLayout>
</template>
