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

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(`./application/${id}`)
}

onMounted(async () => {
    appList.value = await getAllApplications();
})
</script>
<template>
    <div class="mx-auto max-w-5xl">
        <h1 class="my-4">Manage Applications</h1>
        <Table>
            <!-- <TableCaption>A list of your recent invoices.</TableCaption> -->
            <TableHeader>
                <TableRow>
                    <TableHead>User</TableHead>
                    <TableHead>Date Submitted</TableHead>
                    <TableHead class="text-right">Status</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <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>
</template>