<script setup lang="ts">
import {
    Table,
    TableBody,
    TableCaption,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import { Badge } from '@/components/ui/badge'
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { ChevronDown, ChevronUp, Ellipsis, X } from "lucide-vue-next";
import { cancelLOA, extendLOA, getAllLOAs, getMyLOAs } from "@/api/loa";
import { onMounted, ref, computed } from "vue";
import { LOARequest } from "@shared/types/loa";
import Dialog from "../ui/dialog/Dialog.vue";
import DialogTrigger from "../ui/dialog/DialogTrigger.vue";
import DialogContent from "../ui/dialog/DialogContent.vue";
import DialogHeader from "../ui/dialog/DialogHeader.vue";
import DialogTitle from "../ui/dialog/DialogTitle.vue";
import DialogDescription from "../ui/dialog/DialogDescription.vue";
import Button from "../ui/button/Button.vue";
import Calendar from "../ui/calendar/Calendar.vue";
import {
    CalendarDate,
    getLocalTimeZone,
} from "@internationalized/date"
import { el } from "@fullcalendar/core/internal-common";
import MemberCard from "../members/MemberCard.vue";
import {
    Pagination,
    PaginationContent,
    PaginationEllipsis,
    PaginationItem,
    PaginationNext,
    PaginationPrevious,
} from '@/components/ui/pagination'
import { pagination } from "@shared/types/pagination";

const props = defineProps<{
    adminMode?: boolean
}>()

const LOAList = ref<LOARequest[]>([]);

onMounted(async () => {
    await loadLOAs();
});

async function loadLOAs() {
    if (props.adminMode) {
        let result = await getAllLOAs(pageNum.value, pageSize.value);
        LOAList.value = result.data;
        pageData.value = result.pagination;
    } else {
        let result = await getMyLOAs(pageNum.value, pageSize.value);
        LOAList.value = result.data;
        pageData.value = result.pagination;
    }
}

function formatDate(date: Date): string {
    if (!date) return "";
    date = typeof date === 'string' ? new Date(date) : date;
    return date.toLocaleDateString("en-US", {
        year: "numeric",
        month: "short",
        day: "numeric",
    });
}

function loaStatus(loa: LOARequest): "Upcoming" | "Active" | "Overdue" | "Closed" {
    if (loa.closed) return "Closed";

    const now = new Date();
    const start = new Date(loa.start_date);
    const end = new Date(loa.end_date);

    if (now < start) return "Upcoming";
    if (now >= start && now <= end) return "Active";
    if (now > end) return "Overdue";

    return "Overdue"; // fallback
}

async function cancelAndReload(id: number) {
    await cancelLOA(id, props.adminMode);
    await loadLOAs();
}

const isExtending = ref(false);
const targetLOA = ref<LOARequest | null>(null);
const extendTo = ref<CalendarDate | null>(null);

const targetEnd = computed(() => { return targetLOA.value.extended_till ? targetLOA.value.extended_till : targetLOA.value.end_date })

function toCalendarDate(date: Date): CalendarDate {
    if (typeof date === 'string')
        date = new Date(date);
    return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
}

async function commitExtend() {
    await extendLOA(targetLOA.value.id, extendTo.value.toDate(getLocalTimeZone()));
    isExtending.value = false;
    await loadLOAs();
}

const expanded = ref<number | null>(null);
const hoverID = ref<number | null>(null);

const pageNum = ref<number>(1);
const pageData = ref<pagination>();

const pageSize = ref<number>(15)
const pageSizeOptions = [10, 15, 30]

function setPageSize(size: number) {
    pageSize.value = size
    pageNum.value = 1;
    loadLOAs();
}

function setPage(pagenum: number) {
    pageNum.value = pagenum;
    loadLOAs();
}
</script>

<template>
    <div>
        <Dialog :open="isExtending" @update:open="(val) => isExtending = val">
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Extend {{ targetLOA.name }}'s Leave of Absence </DialogTitle>
                </DialogHeader>
                <div class="flex gap-5">
                    <Calendar v-model="extendTo" class="rounded-md border shadow-sm w-min" layout="month-and-year"
                        :min-value="toCalendarDate(targetEnd)"
                        :max-value="toCalendarDate(targetEnd).add({ years: 1 })" />
                    <div class="flex flex-col w-full gap-3 px-2">
                        <p>Quick Options</p>
                        <Button variant="outline" @click="extendTo = toCalendarDate(targetEnd).add({ days: 7 })">1
                            Week</Button>
                        <Button variant="outline" @click="extendTo = toCalendarDate(targetEnd).add({ months: 1 })">1
                            Month</Button>
                    </div>
                </div>
                <div class="flex justify-end gap-4">
                    <Button variant="outline" @click="isExtending = false">Cancel</Button>
                    <Button @click="commitExtend">Extend</Button>
                </div>
            </DialogContent>
        </Dialog>
        <div class="max-w-7xl w-full mx-auto">
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead>Member</TableHead>
                        <TableHead>Type</TableHead>
                        <TableHead>Start</TableHead>
                        <TableHead>End</TableHead>
                        <!-- <TableHead class="w-[500px]">Reason</TableHead> -->
                        <TableHead>Posted on</TableHead>
                        <TableHead>Status</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    <template v-for="post in LOAList" :key="post.id">
                        <TableRow class="hover:bg-muted/50 cursor-pointer" @click="expanded = post.id"
                            @mouseenter="hoverID = post.id" @mouseleave="hoverID = null" :class="{
                                'border-b-0': expanded === post.id,
                                'bg-muted/50': hoverID === post.id
                            }">
                            <TableCell class="font-medium">
                                <MemberCard :member-id="post.member_id"></MemberCard>
                            </TableCell>
                            <TableCell>{{ post.type_name }}</TableCell>
                            <TableCell>{{ formatDate(post.start_date) }}</TableCell>
                            <TableCell>{{ post.extended_till ? formatDate(post.extended_till) :
                                formatDate(post.end_date) }}
                            </TableCell>
                            <!-- <TableCell>{{ post.reason }}</TableCell> -->
                            <TableCell>{{ formatDate(post.filed_date) }}</TableCell>
                            <TableCell>
                                <Badge v-if="loaStatus(post) === 'Upcoming'" class="bg-blue-400">Upcoming</Badge>
                                <Badge v-else-if="loaStatus(post) === 'Active'" class="bg-green-500">Active</Badge>
                                <Badge v-else-if="loaStatus(post) === 'Overdue'" class="bg-yellow-400">Overdue</Badge>
                                <Badge v-else class="bg-gray-400">Ended</Badge>
                            </TableCell>
                            <TableCell @click.stop="" class="text-right">
                                <DropdownMenu>
                                    <DropdownMenuTrigger class="cursor-pointer">
                                        <Button variant="ghost">
                                            <Ellipsis class="size-6"></Ellipsis>
                                        </Button>
                                    </DropdownMenuTrigger>
                                    <DropdownMenuContent>
                                        <DropdownMenuItem v-if="!post.closed && props.adminMode"
                                            @click="isExtending = true; targetLOA = post">
                                            Extend
                                        </DropdownMenuItem>
                                        <DropdownMenuItem v-if="!post.closed" :variant="'destructive'"
                                            @click="cancelAndReload(post.id)">{{ loaStatus(post) === 'Upcoming' ?
                                                'Cancel' :
                                                'End' }}
                                        </DropdownMenuItem>
                                        <!-- Fallback: no actions available -->
                                        <p v-if="post.closed || (!props.adminMode && post.closed)"
                                            class="p-2 text-center text-sm">
                                            No actions
                                        </p>
                                    </DropdownMenuContent>
                                </DropdownMenu>
                            </TableCell>
                            <TableCell>
                                <Button v-if="expanded === post.id" @click.stop="expanded = null" variant="ghost">
                                    <ChevronUp class="size-6" />
                                </Button>
                                <Button v-else @click.stop="expanded = post.id" variant="ghost">
                                    <ChevronDown class="size-6" />
                                </Button>
                            </TableCell>
                        </TableRow>
                        <TableRow v-if="expanded === post.id" @mouseenter="hoverID = post.id"
                            @mouseleave="hoverID = null" :class="{ 'bg-muted/50 border-t-0': hoverID === post.id }">
                            <TableCell :colspan="8" class="p-0">
                                <div class="w-full p-3 mb-6 space-y-3">
                                    <div class="flex justify-between items-start gap-4">
                                        <div class="flex-1">
                                            <!-- Title -->
                                            <p class="text-md font-semibold text-foreground">
                                                Reason
                                            </p>

                                            <!-- Content -->
                                            <p
                                                class="mt-1 text-md whitespace-pre-wrap leading-relaxed text-muted-foreground">
                                                {{ post.reason }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </TableCell>
                        </TableRow>

                    </template>
                </TableBody>
            </Table>
            <div class="mt-5 flex justify-between">
                <div></div>
                <Pagination v-slot="{ page }" :items-per-page="pageData?.pageSize || 10" :total="pageData?.total || 10"
                    :default-page="2" :page="pageNum" @update:page="setPage">
                    <PaginationContent v-slot="{ items }">
                        <PaginationPrevious />
                        <template v-for="(item, index) in items" :key="index">
                            <PaginationItem v-if="item.type === 'page'" :value="item.value"
                                :is-active="item.value === page">
                                {{ item.value }}
                            </PaginationItem>
                        </template>
                        <PaginationEllipsis :index="4" />
                        <PaginationNext />
                    </PaginationContent>
                </Pagination>
                <div class="flex items-center gap-3 text-sm">
                    <p class="text-muted-foreground text-nowrap">Per page:</p>

                    <button v-for="size in pageSizeOptions" :key="size" @click="setPageSize(size)"
                        class="px-2 py-1 rounded transition-colors" :class="{
                            'bg-muted font-semibold': pageSize === size,
                            'hover:bg-muted/50': pageSize !== size
                        }">
                        {{ size }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>
