<script setup lang="ts">
import ApplicationChat from '@/components/application/ApplicationChat.vue';
import ApplicationForm from '@/components/application/ApplicationForm.vue';
import { onMounted, ref } from 'vue';
import { approveApplication, denyApplication, loadApplication, postApplication, postChatMessage, getMyApplication, postAdminChatMessage } from '@/api/application';
import { useRoute } from 'vue-router';
import Button from '@/components/ui/button/Button.vue';
import { CheckIcon, XIcon } from 'lucide-vue-next';
import Unauthorized from './Unauthorized.vue';
import { ApplicationData, ApplicationFull, ApplicationStatus, CommentRow } from '@shared/types/application';

const appData = ref<ApplicationData>(null);
const appID = ref<number | null>(null);
const chatData = ref<CommentRow[]>([])
const readOnly = ref<boolean>(false);
const newApp = ref<boolean>(null);
const status = ref<ApplicationStatus>(null);
const decisionDate = ref<Date | null>(null);
const submitDate = ref<Date | null>(null);
const loading = ref<boolean>(true);
const member_name = ref<string>();

const props = defineProps<{
    mode?: "create" | "view-self" | "view-recruiter" | "view-self-id"
}>()

const finalMode = ref<"create" | "view-self" | "view-recruiter" | "view-self-id">("create");

function loadData(raw: ApplicationFull) {

    const data = raw.application;

    appID.value = data.id;
    appData.value = data.app_data;
    chatData.value = raw.comments;
    status.value = data.app_status;
    decisionDate.value = new Date(data.decision_at);
    submitDate.value = data.submitted_at ? new Date(data.submitted_at) : null;
    member_name.value = data.member_name;
    newApp.value = false;
    readOnly.value = true;
}

const route = useRoute();
const unauthorized = ref(false);

onMounted(async () => {
    //recruiter mode
    if (props.mode === 'view-recruiter') {
        finalMode.value = 'view-recruiter';
        loadData(await loadApplication(Number(route.params.id), true))
    }

    //viewer mode
    if (props.mode === 'view-self') {
        finalMode.value = 'view-self';
        loadData(await loadApplication("me"))
    }

    //creator mode
    if (props.mode === 'create') {
        finalMode.value = 'create';
        appData.value = null
        readOnly.value = false;
        newApp.value = true;
    }

    if (props.mode === 'view-self-id') {
        finalMode.value = 'view-self-id';
        try {
            let raw = await getMyApplication(Number(route.params.id))
            loadData(raw);
            unauthorized.value = false;

        } catch (error) {
            if (error.message === "Unauthorized") {
                unauthorized.value = true;
            } else {
                console.error(error);
            }
        }
    }

    loading.value = false;
})

async function postComment(comment) {
    chatData.value.push(await postChatMessage(comment, appID.value));
}

async function postCommentInternal(comment) {
    chatData.value.push(await postAdminChatMessage(comment, appID.value));
}

const emit = defineEmits(['submit']);

async function postApp(appData) {
    const res = await postApplication(appData);
    if (res.ok) {
        readOnly.value = true;
        newApp.value = false;
        emit('submit');
    }
    // TODO: Handle fail to post    
}

async function handleApprove(id) {
    console.log("hi");
    await approveApplication(id);
}

async function handleDeny(id) {
    await denyApplication(id);
}
</script>

<template>
    <div v-if="!loading" class="w-full h-20">
        <div v-if="unauthorized" class="flex justify-center w-full my-10">
            You do not have permission to view this application.
        </div>
        <div v-else>
            <div v-if="!newApp" class="flex flex-row justify-between items-center py-2 mb-8">
                <!-- Application header -->
                <div>
                    <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">{{ member_name }}</h3>
                    <p class="text-muted-foreground">Submitted: {{ submitDate.toLocaleString("en-US", {
                        year: "numeric",
                        month: "long",
                        day: "numeric",
                        hour: "2-digit",
                        minute: "2-digit"
                    }) }}</p>
                </div>
                <div>
                    <h3 class="text-right" :class="[
                        'font-semibold',
                        status === ApplicationStatus.Pending && 'text-yellow-500',
                        status === ApplicationStatus.Accepted && 'text-green-500',
                        status === ApplicationStatus.Denied && 'text-red-500'
                    ]">{{ status }}</h3>
                    <p v-if="status != ApplicationStatus.Pending" class="text-muted-foreground">{{ status }}: {{
                        decisionDate.toLocaleString("en-US", {
                            year: "numeric",
                            month: "long",
                            day: "numeric",
                            hour: "2-digit",
                            minute: "2-digit"
                        }) }}</p>
                    <div class="mt-2" v-else-if="finalMode === 'view-recruiter'">
                        <Button variant="success" class="mr-2" :onclick="() => { handleApprove(appID) }">
                            <CheckIcon></CheckIcon>
                        </Button>
                        <Button variant="destructive" :onClick="() => { handleDeny(appID) }">
                            <XIcon></XIcon>
                        </Button>
                    </div>
                </div>
            </div>
            <div v-else class="flex flex-row justify-between items-center py-2 mb-8">
                <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">Apply to join the 17th Rangers</h3>
            </div>
            <ApplicationForm :read-only="readOnly" :data="appData" @submit="(e) => { postApp(e) }" class="mb-7">
            </ApplicationForm>
            <div v-if="!newApp" class="pb-15">
                <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight mb-4">Discussion</h3>
                <ApplicationChat :messages="chatData" @post="postComment" @post-internal="postCommentInternal" :admin-mode="finalMode === 'view-recruiter'">
                </ApplicationChat>
            </div>
        </div>

    </div>
    <!-- TODO: Implement some kinda loading screen -->
    <div v-else class="flex items-center justify-center h-full">Loading</div>
</template>