<script setup lang="ts">
  import { computed } 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 } from 'lucide-vue-next';

  import UserProfileDropdown from './UserProfileDropdown.vue';

  interface Profile {
    id: string
    username: string
    name: string
  };

  const page = usePage<{
    profiles: {
      data: Profile[]
      current_page: number
      last_page: number
      per_page: number
      total: number
    }
  }>();

  // Reactive list of profiles
  const profiles = computed(() => page.props.profiles.data);

  const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Dashbord', href: '/dashboard' },
    { title: 'Brukere', href: '/smartdok/profiles' },
  ];

  // pagination meta
  const currentPage = computed(() => page.props.profiles.current_page);
  const lastPage    = computed(() => page.props.profiles.last_page);

  const prevPage = computed(() => currentPage.value > 1 ? currentPage.value - 1 : 1);
  const nextPage = computed(() => currentPage.value < lastPage.value ? currentPage.value + 1 : lastPage.value);
</script>

<template>
  <Head title="Brukere" />  
  <AppLayout :breadcrumbs="breadcrumbs">
    <div class="mb-6 flex items-center justify-between p-6">
      <h3 class="scroll-m-20 text-2xl font-extrabold tracking-tight lg:text-3xl">
        Brukere
      </h3>
      <Link :href="route('smartdok.profiles.create')">
        <Button variant="outline">
          <Plus class="mr-2 h-4 w-4" />
          Opprett
        </Button>
      </Link>
    </div>  
    <div class="px-6 overflow-auto">
      <Table>
        <TableCaption>En liste over brukere.</TableCaption>
        <TableHeader>
          <TableRow>
            <TableHead>Brukernavn</TableHead>
            <TableHead>Navn</TableHead>
            <TableHead class="text-right">Handlinger</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow v-for="profile in profiles" :key="profile.id">
            <TableCell class="font-medium">{{ profile.username }}</TableCell>
            <TableCell>{{ profile.name }}</TableCell>
            <TableCell class="text-right">
              <UserProfileDropdown :profile="profile" />
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>

    
    <!-- Pagination controls -->
    <div class="flex items-center justify-between p-6">
      <div class="text-sm text-gray-600">
        Side {{ currentPage }} av {{ lastPage }} &middot;
        Totalt {{ page.props.profiles.total }} brukere
      </div>
      <div class="space-x-2">
        <Link :href="route('smartdok.profiles.index', { page: prevPage })">
          <Button variant="outline" :disabled="currentPage === 1">
            Forrige
          </Button>
        </Link>
        <Link :href="route('smartdok.profiles.index', { page: nextPage })">
          <Button variant="outline" :disabled="currentPage === lastPage">
            Neste
          </Button>
        </Link>
      </div>
    </div>
  </AppLayout>
</template>
