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

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

    // Grab the Inertia page props
    const page = usePage<{ profile: Profile }>();

    // Reactive profile object
    const profile = computed(() => page.props.profile);

    // Setup the form with existing values
    const form = useForm({
        username: profile.value.username,
        name:     profile.value.name,
    });

    const breadcrumbs: BreadcrumbItem[] = [
        { title: 'Dashbord', href: '/dashboard' },
        { title: 'Brukere',  href: '/smartdok/profiles' },
        { title: 'Rediger',  href: route('smartdok.profiles.edit', profile.value.id) },
    ];

    function submit() {
        form.put(
            route('smartdok.profiles.update', profile.value.id),
            { onSuccess: () => {/* Inertia redirect back to index */} }
        );
    }
</script>

<template>
  <Head title="Rediger bruker" />

  <AppLayout :breadcrumbs="breadcrumbs">
    <div class="p-6 space-y-8">
      <!-- Header and actions -->
      <div class="flex items-center justify-between">
        <h3 class="scroll-m-20 text-2xl font-extrabold tracking-tight lg:text-3xl">
          Rediger bruker
        </h3>
      </div>

      <div class="flex justify-center items-center">
        <!-- Edit form -->
        <form @submit.prevent="submit" class="space-y-6 min-w-2xl lg:min-w-3xl xl:min-w-4xl">
            <div>
                <Label for="username">Brukernavn:</Label>
                <Input
                    id="username"
                    v-model="form.username"
                    type="text"
                    placeholder="Skriv inn brukernavn"
                    class="mt-2"
                />
                <p v-if="form.errors.username" class="mt-1 text-sm text-red-600">
                    {{ form.errors.username }}
                </p>
            </div>

            <div>
                <Label for="name">Navn:</Label>
                <Input
                    id="name"
                    v-model="form.name"
                    type="text"
                    placeholder="Skriv inn fullt navn"
                    class="mt-2"
                />
                <p v-if="form.errors.name" class="mt-1 text-sm text-red-600">
                    {{ form.errors.name }}
                </p>
            </div>
            <!-- Actions -->
            <div class="flex items-center justify-end space-x-4">
                <Link :href="route('smartdok.profiles.index')">
                    <Button variant="outline">
                        Avbryt
                    </Button>
                </Link>
                <Button type="submit" :disabled="form.processing">
                    Oppdater
                </Button>
            </div>
        </form>
      </div>
    </div>
  </AppLayout>
</template>
