<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 DepartmentDropdown from './DepartmentDropdown.vue';

  interface Department {
    id: number
    name: string
  };

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

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

  // Breadcrumbs
  const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Dashbord',   href: '/dashboard' },
    { title: 'Avdelinger', href: '/smartdok/departments' },
  ];

  // Pagination meta
  const currentPage = computed(() => page.props.departments.current_page);
  const lastPage    = computed(() => page.props.departments.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="Avdelinger" /> 
  <AppLayout :breadcrumbs="breadcrumbs">
    <!-- Header + Create-button -->
    <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">
        Avdelinger
      </h3>
      <Link :href="route('smartdok.departments.create')">
        <Button variant="outline">
          <Plus class="mr-2 h-4 w-4" />
          Opprett
        </Button>
      </Link>
    </div>  
    <!-- Table -->
    <div class="px-6 overflow-auto">
      <Table>
        <TableCaption>En liste over avdelinger.</TableCaption>
        <TableHeader>
          <TableRow>
            <TableHead>Navn</TableHead>
            <TableHead class="text-right">Handlinger</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow
            v-for="dept in departments"
            :key="dept.id"
          >
            <TableCell class="font-medium">
              {{ dept.name }}
            </TableCell>
            <TableCell class="text-right">
              <DepartmentDropdown :department="dept" />
            </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.departments.total }} avdelinger
      </div>
      <div class="space-x-2">
        <Link
          :href="route('smartdok.departments.index', { page: prevPage })"
        >
          <Button variant="outline" :disabled="currentPage === 1">
            Forrige
          </Button>
        </Link>
        <Link
          :href="route('smartdok.departments.index', { page: nextPage })"
        >
          <Button variant="outline" :disabled="currentPage === lastPage">
            Neste
          </Button>
        </Link>
      </div>
    </div>
  </AppLayout>
</template>