<script setup lang="ts">
import { Head, Link, useForm } from '@inertiajs/vue3';
import { ArrowLeft } from '@lucide/vue';
import Heading from '@/components/Heading.vue';
import InputError from '@/components/InputError.vue';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Checkbox } from '@/components/ui/checkbox';
import { dashboard } from '@/routes';
import type { BreadcrumbItem } from '@/types';

interface Group {
    id: number;
    name: string;
    description: string | null;
}

defineProps<{
    groups: Group[];
}>();

defineOptions({
    layout: {
        breadcrumbs: [
            { title: 'Dashboard', href: dashboard() },
            { title: 'Pengguna', href: '/users' },
            { title: 'Baru', href: '/users/create' },
        ] as BreadcrumbItem[],
    },
});

const form = useForm({
    name: '',
    first_name: '',
    last_name: '',
    company: '',
    phone: '',
    email: '',
    username: '',
    password: '',
    credit: 0,
    status: 'active',
    groups: [] as string[],
});

const toggleGroup = (name: string, checked: boolean | string) => {
    if (checked) {
        if (!form.groups.includes(name)) form.groups.push(name);
    } else {
        form.groups = form.groups.filter((g) => g !== name);
    }
};

const submit = () => form.post('/users');
</script>

<template>
    <Head title="Pengguna Baru" />

    <div class="flex flex-col space-y-6">
        <div>
            <Button as-child variant="ghost" size="sm" class="mb-2">
                <Link href="/users"><ArrowLeft class="size-4" /> Kembali</Link>
            </Button>
            <Heading title="Pengguna Baru" description="Buat akun pengguna & tetapkan grup" />
        </div>

        <form @submit.prevent="submit" class="max-w-2xl space-y-6">
            <div class="grid gap-4 sm:grid-cols-2">
                <div class="grid gap-2">
                    <Label for="name">Nama <span class="text-destructive">*</span></Label>
                    <Input id="name" v-model="form.name" required />
                    <InputError :message="form.errors.name" />
                </div>
                <div class="grid gap-2">
                    <Label for="email">Email <span class="text-destructive">*</span></Label>
                    <Input id="email" type="email" v-model="form.email" required />
                    <InputError :message="form.errors.email" />
                </div>
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <div class="grid gap-2">
                    <Label for="first_name">Nama Depan</Label>
                    <Input id="first_name" v-model="form.first_name" />
                </div>
                <div class="grid gap-2">
                    <Label for="last_name">Nama Belakang</Label>
                    <Input id="last_name" v-model="form.last_name" />
                </div>
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <div class="grid gap-2">
                    <Label for="company">Perusahaan</Label>
                    <Input id="company" v-model="form.company" />
                </div>
                <div class="grid gap-2">
                    <Label for="phone">Telepon</Label>
                    <Input id="phone" v-model="form.phone" />
                </div>
            </div>

            <div class="grid gap-4 sm:grid-cols-2">
                <div class="grid gap-2">
                    <Label for="username">Username</Label>
                    <Input id="username" v-model="form.username" />
                    <InputError :message="form.errors.username" />
                </div>
                <div class="grid gap-2">
                    <Label for="password">Password <span class="text-destructive">*</span></Label>
                    <Input id="password" type="password" v-model="form.password" required />
                    <InputError :message="form.errors.password" />
                </div>
            </div>

            <div class="grid gap-2">
                <Label for="credit">Saldo Kredit</Label>
                <Input id="credit" type="number" v-model="form.credit" min="0" />
            </div>

            <div class="grid gap-2">
                <Label for="status">Status Akun</Label>
                <select id="status" v-model="form.status" class="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
                    <option value="active">Aktif</option>
                    <option value="suspended">Diskors</option>
                    <option value="deactivated">Dinonaktifkan</option>
                </select>
            </div>

            <div class="space-y-3">
                <Label>Grup</Label>
                <div class="flex flex-wrap gap-4">
                    <label v-for="g in groups" :key="g.id" class="flex items-center gap-2 text-sm">
                        <Checkbox
                            :model-value="form.groups.includes(g.name)"
                            @update:model-value="(v) => toggleGroup(g.name, v)"
                        />
                        <span class="capitalize">{{ g.name }}</span>
                    </label>
                </div>
                <InputError :message="form.errors.groups" />
            </div>

            <div class="flex justify-end gap-2">
                <Button as-child variant="outline" type="button">
                    <Link href="/users">Batal</Link>
                </Button>
                <Button type="submit" :disabled="form.processing">Simpan</Button>
            </div>
        </form>
    </div>
</template>
