<script lang="ts">
const mailSchema = z.object({
    to: z.string().email(),
    message: z.string(),
    subject: z.string(),
});

const schemaList: Record<string, z.ZodObject<any> | null> = {
    'pull': null,
    'push': null,
    'mail': mailSchema,
}
</script>

<script setup lang="ts">
import { z } from 'zod';

definePageMeta({
    rights: ['admin'],
})
const job = ref<string>('');

const toaster = useToast();
const payload = reactive<Record<string, any>>({});
const data = ref(), status = ref<'idle' | 'pending' | 'success' | 'error'>('idle'), success = ref(false), error = ref<Error | null>();
async function fetch()
{
    status.value = 'pending';
    data.value = null;
    error.value = null;
    success.value = false;

    try
    {
        const schema = schemaList[job.value];

        if(schema)
        {
            const parsedPayload = schema.parse(payload);
        }

        data.value = await $fetch(`/api/admin/jobs/${job.value}`, {
            method: 'POST',
            body: payload,
        });
        status.value = 'success';
        error.value = null;
        success.value = true;

        toaster.add({ duration: 10000, content: data.value ?? 'Job executé avec succès', type: 'success', timer: true, });
    }
    catch(e)
    {
        status.value = 'error';
        error.value = e as Error;
        success.value = false;

        toaster.add({ duration: 10000, content: error.value.message, type: 'error', timer: true, });
    }
}
</script>

<template>
    <Head>
        <Title>d[any] - Administration</Title>
    </Head>
    <div class="flex flex-col justify-start items-center">
        <ProseH2>Administration</ProseH2>
        <Select label="Job" v-model="job" @update:model-value="payload = {}">
            <SelectItem label="Récupérer les données d'Obsidian" value="pull" />
            <SelectItem label="Envoyer les données dans Obsidian" value="push" disabled />
            <SelectItem label="Envoyer un mail de test" value="mail" />
        </Select>
        <div v-if="job === 'mail'" class="flex justify-center items-center flex-col">
            <TextInput label="Destinataire" class="w-full" v-model="payload.to" />
            <TextInput label="Objet" class="w-full" v-model="payload.subject" />
            <TextInput label="Message" class="w-full" v-model="payload.message" />
        </div>
        <Button class="self-center" @click="() => !!job && fetch()" :loading="status === 'pending'">
            <span>Executer</span>
        </Button>
    </div>
</template>