<script setup lang="ts">
    import { computed } from 'vue';
    import AppLayout from '@/layouts/AppLayout.vue';
    import { Head, Link, usePage, useForm } from '@inertiajs/vue3';
    import type { BreadcrumbItem } from '@/types';
    import { Button } from '@/components/ui/button';
    import { Input } from '@/components/ui/input';
    import { Label } from '@/components/ui/label';
    import { Checkbox } from '@/components/ui/checkbox';

    interface Profile { id: string; name: string };
    interface Department { id: number; name: string };
    interface Project {
        id: number
        project_name: string
        project_number: string
        user_ids: string[]
        department_ids: number[]
    };

    const page = usePage<{
        project: Project
        profiles: Profile[]
        departments: Department[]
    }>();

    const project       = computed(() => page.props.project);
    const profilesList  = computed(() => page.props.profiles);
    const deptsList     = computed(() => page.props.departments);

    const form = useForm({
        project_name:   project.value.project_name,
        project_number: project.value.project_number,
        user_ids:       project.value.user_ids,
        department_ids: project.value.department_ids,
    });

    function toggleUser(id: string, checked: boolean) {
        form.user_ids = checked
            ? [...form.user_ids, id]
            : form.user_ids.filter(x => x !== id);
    }

    function toggleDept(id: number, checked: boolean) {
        form.department_ids = checked
            ? [...form.department_ids, id]
            : form.department_ids.filter(x => x !== id);
    }

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

    function submit() {
        form.put(route('smartdok.projects.update', project.value.id));
    }
</script>

<template>
    <Head title="Rediger prosjekt" />   
    <AppLayout :breadcrumbs="breadcrumbs">
      <div class="p-6 space-y-8">
        <!-- Header -->
        <div class="flex items-center justify-between">
          <h3 class="scroll-m-20 text-2xl font-extrabold tracking-tight lg:text-3xl">
            Rediger prosjekt
          </h3>
        </div>  
        <!-- Centered form -->
        <div class="flex justify-center items-center">
          <form
            @submit.prevent="submit"
            class="space-y-6 min-w-2xl lg:min-w-3xl xl:min-w-4xl"
          >
            <!-- Prosjektnavn -->
            <div>
              <Label for="project_name">Prosjektnavn</Label>
              <Input
                id="project_name"
                v-model="form.project_name"
                placeholder="Skriv inn prosjektnavn"
                class="mt-2"
              />
              <p v-if="form.errors.project_name" class="mt-1 text-sm text-red-600">
                {{ form.errors.project_name }}
              </p>
            </div>  
            <!-- Prosjektnummer -->
            <div>
              <Label for="project_number">Prosjektnummer</Label>
              <Input
                id="project_number"
                v-model="form.project_number"
                placeholder="Skriv inn prosjektnummer"
                class="mt-2"
              />
              <p v-if="form.errors.project_number" class="mt-1 text-sm text-red-600">
                {{ form.errors.project_number }}
              </p>
            </div>  
            <!-- Tilknyttede brukere -->
            <div>
              <Label>Tilknyttede brukere</Label>
              <div class="mt-2 space-y-1">
                <div
                  v-for="p in profilesList"
                  :key="p.id"
                  class="flex items-center space-x-2"
                >
                  <Checkbox
                    :model-value="form.user_ids.includes(p.id)"
                    @update:modelValue="checked => toggleUser(p.id, checked)"
                  />
                  <span>{{ p.name }}</span>
                </div>
              </div>
              <p v-if="form.errors.user_ids" class="mt-1 text-sm text-red-600">
                {{ form.errors.user_ids }}
              </p>
            </div>  
            <!-- Tilknyttede avdelinger -->
            <div>
              <Label>Tilknyttede avdelinger</Label>
              <div class="mt-2 space-y-1">
                <div
                  v-for="d in deptsList"
                  :key="d.id"
                  class="flex items-center space-x-2"
                >
                  <Checkbox
                    :model-value="form.department_ids.includes(d.id)"
                    @update:modelValue="checked => toggleDept(d.id, checked)"
                  />
                  <span>{{ d.name }}</span>
                </div>
              </div>
              <p v-if="form.errors.department_ids" class="mt-1 text-sm text-red-600">
                {{ form.errors.department_ids }}
              </p>
            </div>  
            <!-- Actions -->
            <div class="flex items-center justify-end space-x-4">
              <Link :href="route('smartdok.projects.index')">
                <Button variant="outline">Avbryt</Button>
              </Link>
              <Button type="submit" :disabled="form.processing">
                Oppdater
              </Button>
            </div>
          </form>
        </div>
      </div>
    </AppLayout>
</template>
