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

  interface WorkHour {
    id: string
    user_name: string
    ordinary_hours: number
    projects: { id: number; project_name: string }[]
  };

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

  // Reactive list of work hours
  const workHoursList = computed(() => page.props.workHours.data);

  // Breadcrumbs
  const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Dashbord',     href: '/dashboard' },
    { title: 'Arbeidstimer', href: '/smartdok/work-hours' },
  ];

  // Pagination meta
  const currentPage = computed(() => page.props.workHours.current_page);
  const lastPage    = computed(() => page.props.workHours.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="Arbeidstimer" /> 
  <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">
        Arbeidstimer
      </h3>
      <Link :href="route('smartdok.work-hours.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 arbeidstimer.</TableCaption>
        <TableHeader>
          <TableRow>
            <TableHead>Bruker</TableHead>
            <TableHead>Timer</TableHead>
            <TableHead>Prosjekt</TableHead>
            <TableHead class="text-right">Handlinger</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow
            v-for="wh in workHoursList"
            :key="wh.id"
          >
            <TableCell class="font-medium">
              {{ wh.user_name }}
            </TableCell>
            <TableCell>
              {{ wh.ordinary_hours }}
            </TableCell>
            <TableCell>
              <!-- list project names, comma-separated -->
              {{ wh.project_name }}
            </TableCell>
            <TableCell class="text-right">
              <WorkHourDropdown :workHour="wh" />
            </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.workHours.total }} poster
      </div>
      <div class="space-x-2">
        <Link
          :href="route('smartdok.work-hours.index', { page: prevPage })"
        >
          <Button variant="outline" :disabled="currentPage === 1">
            Forrige
          </Button>
        </Link>
        <Link
          :href="route('smartdok.work-hours.index', { page: nextPage })"
        >
          <Button variant="outline" :disabled="currentPage === lastPage">
            Neste
          </Button>
        </Link>
      </div>
    </div>
  </AppLayout>
</template>
