<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 { Button } from '@/components/ui/button';
    import { Label } from '@/components/ui/label';

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

    interface Department {
        id: number
        name: string
    };

    interface Project {
        id: number
        project_name: string
        project_number: string
        profiles: Profile[]
        departments: Department[]
    };

    const page = usePage<{ project: Project }>();

    const project = computed(() => page.props.project);

    const breadcrumbs = computed<BreadcrumbItem[]>(() => [
        { title: 'Dashbord',     href: '/dashboard' },
        { title: 'Prosjekter',   href: '/smartdok/projects' },
        {
            title: project.value.project_name,
            href: route('smartdok.projects.show', project.value.id),
        },
    ]);
</script>

<template>
    <Head title="Vis prosjekt" />   
    <AppLayout :breadcrumbs="breadcrumbs">
      <div class="p-6 space-y-8">
        <!-- Heading + actions -->
        <div class="flex items-center justify-between">
          <h3 class="scroll-m-20 text-2xl font-extrabold tracking-tight lg:text-3xl">
            Vis prosjekt
          </h3>
          <div class="flex space-x-2">
            <Link :href="route('smartdok.projects.index')">
              <Button variant="outline">Tilbake</Button>
            </Link>
            <Link :href="route('smartdok.projects.edit', project.id)">
              <Button>Rediger</Button>
            </Link>
          </div>
        </div>  
        <!-- Project details -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <Label for="id" className="font-semibold">ID</Label>
            <p id="id" class="mt-1 text-base">
              {{ project.id }}
            </p>
          </div>
          <div>
            <Label for="project_name" className="font-semibold">Prosjektnavn</Label>
            <p id="project_name" class="mt-1 text-base">
              {{ project.project_name }}
            </p>
          </div>
          <div>
            <Label for="project_number" className="font-semibold">Prosjektnummer</Label>
            <p id="project_number" class="mt-1 text-base">
              {{ project.project_number }}
            </p>
          </div>
        </div>

        <!-- Tilknyttede brukere -->
        <div>
            <Label className="font-semibold">Brukere</Label>
            <ul class="list-disc list-inside mt-2">
                <li v-for="p in project.profiles" :key="p.id">
                    {{ p.name }} ({{ p.username }})
                </li>
            </ul>
        </div>

        <!-- Tilknyttede avdelinger -->
        <div>
            <Label className="font-semibold">Avdelinger</Label>
            <ul class="list-disc list-inside mt-2">
                <li v-for="d in project.departments" :key="d.id">
                    {{ d.name }}
                </li>
            </ul>
        </div>
      </div>
    </AppLayout>
</template>
