<script setup>
import { getAllApplications, approveApplication, denyApplication     } from '@/api/application';
import { ApplicationStatus } from '@shared/types/application'
import {
    Table,
    TableBody,
    TableCaption,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table'
import Button from '@/components/ui/button/Button.vue';
import { onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { CheckIcon, XIcon } from 'lucide-vue-next';
import Application from './Application.vue';

const appList = ref([]);
const now = Date.now();
// relative time formatter (uses user locale)
const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
// exact date/time for tooltip
const exactFmt = new Intl.DateTimeFormat(undefined, {
    dateStyle: 'medium', timeStyle: 'short', timeZone: 'America/Toronto'
})

function formatAgo(iso) {
    const d = new Date(iso)
    if (isNaN(d)) return ''
    let diff = (d.getTime() - now) / 1000 // seconds relative to page load
    const divisions = [
        { amount: 60, name: 'second' },
        { amount: 60, name: 'minute' },
        { amount: 24, name: 'hour' },
        { amount: 7, name: 'day' },
        { amount: 4.34524, name: 'week' }, // avg weeks per month
        { amount: 12, name: 'month' },
        { amount: Infinity, name: 'year' },
    ]
    for (const div of divisions) {
        if (Math.abs(diff) < div.amount) {
            return rtf.format(Math.round(diff), div.name)
        }
        diff /= div.amount
    }
}

function formatExact(iso) {
    const d = new Date(iso)
    return isNaN(d) ? '' : exactFmt.format(d)
}

async function handleApprove(id) {
    await approveApplication(id);
    appList.value = await getAllApplications();
}

async function handleDeny(id) {
    await denyApplication(id);
    appList.value = await getAllApplications();
}

const router = useRouter();
function openApplication(id) {
    router.push(`/administration/applications/${id}`)
    openPanel.value = true;
}

function closeApplication() {
    router.push('/administration/applications')
    openPanel.value = false;
}

const route = useRoute();

watch(() => route.params.id, (newId) => {
    if (newId === undefined) {
        openPanel.value = false;
    }
})

const openPanel = ref(false);

onMounted(async () => {
    appList.value = await getAllApplications();

    //preload application
    if (route.params.id != undefined) {
        openApplication(route.params.id)
    }
})
</script>
<template>
    <div class="px-20 mx-auto max-w-[100rem] w-full flex mt-5 h-52 min-h-0 overflow-hidden">
        <!-- application list -->
        <div :class="openPanel == false ? 'w-full' : 'w-2/5'" class="pr-9">
            <h1 class="scroll-m-20 text-2xl font-semibold tracking-tight">Manage Applications</h1>
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead>User</TableHead>
                        <TableHead>Date Submitted</TableHead>
                        <TableHead class="text-right">Status</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody class="overflow-y-auto scrollbar-themed">
                    <TableRow v-for="app in appList" :key="app.id" class="cursor-pointer"
                        :onClick="() => { openApplication(app.id) }">
                        <TableCell class="font-medium">{{ app.member_name }}</TableCell>
                        <TableCell :title="formatExact(app.submitted_at)">
                            {{ formatAgo(app.submitted_at) }}
                        </TableCell>
                        <TableCell v-if="app.app_status === ApplicationStatus.Pending"
                            class="inline-flex items-end gap-2">
                            <Button variant="success" @click.stop="() => { handleApprove(app.id) }">
                                <CheckIcon></CheckIcon>
                            </Button>
                            <Button variant="destructive" @click.stop="() => { handleDeny(app.id) }">
                                <XIcon></XIcon>
                            </Button>
                        </TableCell>
                        <TableCell class="text-right font-semibold" :class="[
                            ,
                            app.app_status === ApplicationStatus.Pending && 'text-yellow-500',
                            app.app_status === ApplicationStatus.Accepted && 'text-green-500',
                            app.app_status === ApplicationStatus.Denied && 'text-destructive'
                        ]">{{ app.app_status }}</TableCell>
                    </TableRow>
                </TableBody>
            </Table>
        </div>
        <div v-if="openPanel" class="pl-9 border-l w-3/5" :key="$route.params.id">
            <div class="mb-5 flex justify-between">
                <p class="scroll-m-20 text-2xl font-semibold tracking-tight"> Application</p>
                <button @click="closeApplication()" class="cursor-pointer">
                    <XIcon></XIcon>
                </button>
            </div>
            <div class="overflow-y-auto max-h-[80vh] h-full mt-5 scrollbar-themed">
                <Application :mode="'view-recruiter'"></Application>
            </div>
        </div>
    </div>
</template>

<style scoped>
/* Firefox */
.scrollbar-themed {
    scrollbar-width: thin;
    scrollbar-color: #555 #1f1f1f;
    padding-right: 6px;
}

/* Chrome, Edge, Safari */
.scrollbar-themed::-webkit-scrollbar {
    width: 10px;
    /* slightly wider to allow padding look */
}

.scrollbar-themed::-webkit-scrollbar-track {
    background: #1f1f1f;
    margin-left: 6px;
    /* ❗ adds space between content + scrollbar */
}

.scrollbar-themed::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 9999px;
}

.scrollbar-themed::-webkit-scrollbar-thumb:hover {
    background: #777;
}
</style>