<script setup lang="ts">
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Switch } from '@/components/ui/switch'
import AssignDevice from '@/customcompometns/AssignDevice.vue'
import { useColorMode } from '@vueuse/core'
import Navbar from '@/customcompometns/Navbar.vue';
import type { PropType } from 'vue';
import { defineProps, defineEmits, reactive, watch, ref, computed } from 'vue';
import { v4 as uuidv4 } from 'uuid'
import { useRouter } from 'vue-router'
import { api } from '@/lib/api'

const mode = useColorMode()

type CreateDevicePayload = {
    guid: string
    name: string
    userIds: number[]
}

type CreateUserPayload = {
    username: string
    password: string
    role: string // 'admin' | 'user'
}

type CreateTrackerPayload = {
    guid: string
    name: string
    userIds: number[]
}

const router = useRouter()

const props = defineProps({
    modelValue: {
        type: Boolean as PropType<boolean>,
        required: true,
    },
})

// local form state
const device_form = reactive({
    guid: uuidv4(), // default fresh UUID
    name: '',
})

const user_form = reactive({
    username: '',
    password: '',
    isAdmin: false,
})

const tracker_form = reactive({
    guid: uuidv4(),
    name: '',
})

// userIds from AssignDevice (expects v-model of string[] ids)
const selectedUserIds = ref<string[]>([])

watch(
    () => props.modelValue,
    (val) => {
        if (val) {
            device_form.guid = uuidv4()
            device_form.name = ''
            selectedUserIds.value = []
            user_form.username = ''
            user_form.password = ''
            user_form.isAdmin = false
            userError.value = null
            userSubmitting.value = false
            userSuccess.value = null
            // tracker_form.guid = uuidv4()
            // tracker_form.name = ''
        }
    }
)

// simple UUIDv4 check (best-effort)
const uuidV4Re = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i
const submitting = ref(false)
const errorMsg = ref<string | null>(null)

const userSubmitting = ref(false)
const userError = ref<string | null>(null)
const userSuccess = ref<string | null>(null)
const userRole = computed<string>(() => (user_form.isAdmin ? 'admin' : 'user'))

const canSubmit = computed(() => {
    return (
        !!device_form.guid &&
        uuidV4Re.test(device_form.guid) &&
        !!device_form.name.trim() &&
        !submitting.value
    )
})

async function submitDevice() {
    errorMsg.value = null
    if (!canSubmit.value) {
        errorMsg.value = 'Please provide a valid GUID and name.'
        return
    }

    const userIds: number[] = selectedUserIds.value
        .map((s) => Number(s))
        .filter((n) => Number.isFinite(n) && n >= 0)

    const payload: CreateDevicePayload = {
        guid: device_form.guid,
        name: device_form.name.trim(),
        userIds,
    }

    submitting.value = true
    try {
        await api.post('/devices/create', payload)
        router.replace('/admin')
    } catch (e: any) {
        // keep client error generic
        errorMsg.value = e?.response?.status === 403 ? 'Access denied.' : 'Failed to create device.'
    } finally {
        submitting.value = false
    }
}

const canSubmitUser = computed(() => {
    return (
        user_form.username.trim().length >= 3 &&
        user_form.password.length >= 8 && // basic client-side check; real policy enforced server-side
        !userSubmitting.value
    )
})

async function submitUser() {
    userError.value = null
    userSuccess.value = null

    if (!canSubmitUser.value) {
        userError.value = 'Username must be at least 3 chars; password at least 8.'
        return
    }

    const payload: CreateUserPayload = {
        username: user_form.username.trim(),
        password: user_form.password, // do not trim passwords
        role: userRole.value,
    }

    userSubmitting.value = true
    try {
        await api.post('/users/create', payload)
        userSuccess.value = 'User created.'
        router.replace('/admin')
    } catch (e: any) {
        userError.value = e?.response?.status === 403 ? 'Access denied.' : 'Failed to create user.'
    } finally {
        userSubmitting.value = false
    }
}

async function submitTracker() {
    errorMsg.value = null
    if (!canSubmit.value) {
        errorMsg.value = 'Please provide a valid GUID and name.'
        return
    }

    const userIds: number[] = selectedUserIds.value
        .map((s) => Number(s))
        .filter((n) => Number.isFinite(n) && n >= 0)

    const payload: CreateDevicePayload = {
        guid: device_form.guid,
        name: device_form.name.trim(),
        userIds,
    }

    submitting.value = true
    try {
        await api.post('/trackers/create', payload)
        router.replace('/admin')
    } catch (e: any) {
        // keep client error generic
        errorMsg.value = e?.response?.status === 403 ? 'Access denied.' : 'Failed to create device.'
    } finally {
        submitting.value = false
    }
}
</script>

<template>
    <Navbar>
        <div class="w-full py-8">
            <div class="mx-auto">
                <!-- Horizontal cards with gap -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-stretch">
                    <!-- Create device -->
                    <Card class="h-full flex flex-col">
                        <CardHeader>
                            <CardTitle>Create device</CardTitle>
                        </CardHeader>

                        <CardContent class="flex-1">
                            <!-- add vertical spacing between rows -->
                            <div class="grid gap-5">
                                <div class="grid grid-cols-4 items-center gap-4">
                                    <Label for="guid" class="text-right">GUID</Label>
                                    <Input id="guid" class="col-span-3 w-full" v-model="device_form.guid" />
                                </div>

                                <div class="grid grid-cols-4 items-center gap-4">
                                    <Label for="name" class="text-right">Name</Label>
                                    <Input id="name" class="col-span-3 w-full" v-model="device_form.name" />
                                </div>

                                <div class="grid grid-cols-4 items-center gap-4">
                                    <Label for="users" class="text-right">Allowed users</Label>
                                    <!-- make the component span and fill -->
                                    <AssignDevice id="users" class="col-span-3 w-full" v-model="selectedUserIds" />
                                </div>
                                <p v-if="errorMsg" class="text-sm text-red-600" aria-live="assertive">
                                    {{ errorMsg }}
                                </p>
                            </div>
                        </CardContent>

                        <CardFooter>
                            <Button :disabled="!canSubmit" @click="submitDevice">
                                {{ submitting ? 'Saving…' : 'Save' }}
                            </Button>
                        </CardFooter>
                    </Card>

                    <!-- Create user -->
                    <Card class="h-full flex flex-col">
                        <CardHeader>
                            <CardTitle>Create user</CardTitle>
                        </CardHeader>

                        <CardContent class="flex-1">
                            <div class="grid gap-5">
                                <div class="grid grid-cols-4 items-center gap-4">
                                    <Label for="username" class="text-right">Username</Label>
                                    <Input id="username" class="col-span-3 w-full" v-model="user_form.username" />
                                </div>

                                <div class="grid grid-cols-4 items-center gap-4">
                                    <Label for="password" class="text-right">Password</Label>
                                    <Input id="password" type="password" class="col-span-3 w-full"
                                        v-model="user_form.password" />
                                </div>

                                <div class="grid grid-cols-4 items-center gap-4">
                                    <Label for="isAdmin" class="text-right">Make admin</Label>
                                    <div class="col-span-3">
                                        <Switch id="isAdmin" v-model:checked="user_form.isAdmin" 
                                        v-model="user_form.isAdmin" 
                                        @update:checked="(v: any) => user_form.isAdmin = !!v"
                                        @update:modelValue="(v: any) => user_form.isAdmin = !!v"/>
                                    </div>
                                </div>
                                <p v-if="userError" class="text-sm text-red-600" aria-live="assertive">
                                    {{ userError }}
                                </p>
                                <p v-if="userSuccess" class="text-sm text-green-600" aria-live="polite">
                                    {{ userSuccess }}
                                </p>
                            </div>
                        </CardContent>

                        <CardFooter>
                            <Button :disabled="!canSubmitUser" @click="submitUser">
                                {{ userSubmitting ? 'Saving…' : 'Save changes' }}
                            </Button>
                        </CardFooter>
                    </Card>
                    
                    <Card class="h-full flex flex-col">
                        <CardHeader>
                            <CardTitle>Create tracker</CardTitle>
                        </CardHeader>

                        <CardContent class="flex-1">
                            <!-- add vertical spacing between rows -->
                            <div class="grid gap-5">
                                <div class="grid grid-cols-4 items-center gap-4">
                                    <Label for="guid" class="text-right">GUID</Label>
                                    <Input id="guid" class="col-span-3 w-full" v-model="device_form.guid" />
                                </div>

                                <div class="grid grid-cols-4 items-center gap-4">
                                    <Label for="name" class="text-right">Name</Label>
                                    <Input id="name" class="col-span-3 w-full" v-model="device_form.name" />
                                </div>

                                <div class="grid grid-cols-4 items-center gap-4">
                                    <Label for="users" class="text-right">Allowed users</Label>
                                    <!-- make the component span and fill -->
                                    <AssignDevice id="users" class="col-span-3 w-full" v-model="selectedUserIds" />
                                </div>
                                <p v-if="errorMsg" class="text-sm text-red-600" aria-live="assertive">
                                    {{ errorMsg }}
                                </p>
                            </div>
                        </CardContent>

                        <CardFooter>
                            <Button :disabled="!canSubmit" @click="submitTracker">
                                {{ submitting ? 'Saving…' : 'Save' }}
                            </Button>
                        </CardFooter>
                    </Card>

                </div>
            </div>
        </div>
    </Navbar>
</template>