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

  interface Project {
    id: number
    project_name: string
    project_number: string
  };

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

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

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

  // Pagination meta
  const currentPage = computed(() => page.props.projects.current_page);
  const lastPage    = computed(() => page.props.projects.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="Prosjekter" /> 
  <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">
        Prosjekter
      </h3>
      <Link :href="route('smartdok.projects.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 prosjekter.</TableCaption>
        <TableHeader>
          <TableRow>
            <TableHead>Prosjektnavn</TableHead>
            <TableHead>Prosjektnummer</TableHead>
            <TableHead class="text-right">Handlinger</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow
            v-for="project in projects"
            :key="project.id"
          >
            <TableCell class="font-medium">
              {{ project.project_name }}
            </TableCell>
            <TableCell>
              {{ project.project_number }}
            </TableCell>
            <TableCell class="text-right">
              <ProjectDropdown :project="project" />
            </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.projects.total }} prosjekter
      </div>
      <div class="space-x-2">
        <Link
          :href="route('smartdok.projects.index', { page: prevPage })"
        >
          <Button variant="outline" :disabled="currentPage === 1">
            Forrige
          </Button>
        </Link>
        <Link
          :href="route('smartdok.projects.index', { page: nextPage })"
        >
          <Button variant="outline" :disabled="currentPage === lastPage">
            Neste
          </Button>
        </Link>
      </div>
    </div>
  </AppLayout>
</template>