<script setup lang="ts">
import { computed, onMounted } from 'vue';
import AppLayout from '@/layouts/AppLayout.vue';
import { type BreadcrumbItem } from '@/types';
import { Head, Link, usePage } from '@inertiajs/vue3';

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';

import { Button } from '@/components/ui/button';
import { Plus, Trash2 } from 'lucide-vue-next';

onMounted(() => {
    console.log(isAdmin);
});

interface Category {
  id: number;
  category: string;
}

interface PageProps {
  [key: string]: any

  isAdmin: boolean;
  categories: Category[];
}

const page = usePage<PageProps>();

const isAdmin = computed(() => page.props.isAdmin);
const categories = computed(() => page.props.categories);

const breadcrumbs: BreadcrumbItem[] = [
  { title: 'Dashbord', href: '/dashboard' },
];
</script>

<template>
  <Head title="Dashbord" />

  <AppLayout :breadcrumbs="breadcrumbs">
    <!-- Header + “Add” if admin -->
    <div class="mb-6 flex items-center justify-between p-6">
      <div>
          <h3 class="scroll-m-20 text-2xl font-extrabold tracking-tight lg:text-3xl">
            Registrerte API tjenester
          </h3>
          <p class="mt-4 text-gray-700 dark:text-gray-400">
            Her vises en liste over eksterne API tjenester denne mellomvaren er registrert mot. Hvis du er registrert som en API administrator, kan du fjerne eller legge til flere tjenester her
          </p>
      </div>
      <!-- Show “Add” only if admin -->
      <Link
        v-if="isAdmin"
        :href="route('apikeys.create')"
      >
        <Button variant="outline" class="flex items-center space-x-2">
          <Plus class="h-4 w-4" />
          <span>Legg til ny tjeneste</span>
        </Button>
      </Link>
    </div>

    <!-- Table of categories -->
    <div class="px-6 overflow-auto">
      <Table>
        <TableCaption>Liste over registrerte API tjenester</TableCaption>
        <TableHeader>
          <TableRow>
            <TableHead>Tjeneste</TableHead>
            <TableHead class="text-right">Handlinger</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow v-for="c in categories" :key="c.id">
            <TableCell class="font-medium">{{ c.category }}</TableCell>
            <TableCell class="text-right">
              <!-- If admin, show a Delete link; otherwise leave blank -->
              <Link
                v-if="isAdmin"
                :href="route('apikeys.destroy', c.id)"
                method="delete"
                as="button"
                class="inline-flex"
              >
                <Button variant="destructive" size="sm" class="flex items-center space-x-1">
                  <Trash2 class="h-4 w-4" />
                  <span>Slett</span>
                </Button>
              </Link>
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  </AppLayout>
</template>
