<script setup lang="ts">
import { getTrainingReport, getTrainingReports } from '@/api/trainingReport';
import { CourseAttendee, CourseEventDetails, CourseEventSummary } from '@shared/types/course';
import { computed, onMounted, ref, watch } from 'vue';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table'
import { ArrowUpDown, Funnel, Plus, Search, X } from 'lucide-vue-next';
import Button from '@/components/ui/button/Button.vue';
import TrainingReportForm from '@/components/trainingReport/trainingReportForm.vue';
import Checkbox from '@/components/ui/checkbox/Checkbox.vue';
import { useRoute, useRouter } from 'vue-router';
import Select from '@/components/ui/select/Select.vue';
import SelectTrigger from '@/components/ui/select/SelectTrigger.vue';
import SelectValue from '@/components/ui/select/SelectValue.vue';
import SelectContent from '@/components/ui/select/SelectContent.vue';
import SelectItem from '@/components/ui/select/SelectItem.vue';
import Input from '@/components/ui/input/Input.vue';

enum sidePanelState { view, create, closed };

const trainingReports = ref<CourseEventSummary[] | null>(null);
const loaded = ref(false);

const route = useRoute();
const router = useRouter();

const sidePanel = computed<sidePanelState>(() => {
    if (route.path.endsWith('/new')) return sidePanelState.create;
    if (route.params.id) return sidePanelState.view;
    return sidePanelState.closed;
})

watch(() => route.params.id, async (newID) => {
    if (!newID) {
        focusedTrainingReport.value = null;
        return;
    }
    viewTrainingReport(Number(route.params.id));
})

const focusedTrainingReport = ref<CourseEventDetails | null>(null);
const focusedTrainingTrainees = computed<CourseAttendee[] | null>(() => {
    if (focusedTrainingReport.value == null) return null;
    return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name == 'Trainee');
})
const focusedNoShows = computed<CourseAttendee[] | null>(() => {
    if (focusedTrainingReport.value == null) return null;
    return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name == 'No-Show');
})
const focusedTrainingTrainers = computed<CourseAttendee[] | null>(() => {
    if (focusedTrainingReport.value == null) return null;
    return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name != 'Trainee' && attendee.role.name != 'No-Show');
})
async function viewTrainingReport(id: number) {
    focusedTrainingReport.value = await getTrainingReport(id);
}

async function closeTrainingReport() {
    router.push(`/trainingReport`)
    focusedTrainingReport.value = null;
}

const sortMode = ref<string>("descending");
const searchString = ref<string>("");
let debounceTimer: ReturnType<typeof setTimeout> | null = null;

watch(searchString, (newValue) => {
    if (debounceTimer) clearTimeout(debounceTimer);

    debounceTimer = setTimeout(() => {
        loadTrainingReports();
    }, 300); // 300ms debounce
});

watch(() => sortMode.value, async (newSortMode) => {
    loadTrainingReports();
})

async function loadTrainingReports() {
    trainingReports.value = await getTrainingReports(sortMode.value, searchString.value);
}

onMounted(async () => {
    loadTrainingReports();
    if (route.params.id)
        viewTrainingReport(Number(route.params.id))
    loaded.value = true;
})
</script>

<template>
    <div class="px-20 mx-auto max-w-[100rem] w-full flex mt-5">
        <!-- training report list -->
        <div class="px-4 my-3" :class="sidePanel == sidePanelState.closed ? 'w-full' : 'w-2/5'">
            <div class="flex justify-between mb-4">
                <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Reports</p>
                <Button @click="router.push('/trainingReport/new')">
                    <Plus></Plus> New Training Report
                </Button>
            </div>
            <!-- search/filter -->
            <div class="flex justify-between">
                <!-- <Search></Search>
                <Funnel></Funnel> -->
                <div></div>
                <div class="flex flex-row gap-5">
                    <div>
                        <label class="text-muted-foreground">Search</label>
                        <Input v-model="searchString"></Input>
                    </div>
                    <div class="flex flex-col">
                        <label class="text-muted-foreground">Sort By</label>
                        <Select v-model="sortMode">
                            <SelectTrigger>
                                <SelectValue placeholder="Sort By" />
                                <!-- <ArrowUpDown></ArrowUpDown> -->
                            </SelectTrigger>
                            <SelectContent>
                                <SelectItem value="ascending">
                                    Date (Ascending)
                                </SelectItem>
                                <SelectItem value="descending">
                                    Date (Descending)
                                </SelectItem>
                            </SelectContent>
                        </Select>
                    </div>
                </div>
            </div>
            <div class="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed">
                <Table>
                    <TableHeader class="">
                        <TableRow>
                            <TableHead class="w-[100px]">
                                Training
                            </TableHead>
                            <TableHead>Date</TableHead>
                            <TableHead class="text-right">
                                Posted By
                            </TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody v-if="loaded">
                        <TableRow class="cursor-pointer" v-for="report in trainingReports" :key="report.event_id"
                            @click="router.push(`/trainingReport/${report.event_id}`)">
                            <TableCell class="font-medium">{{ report.course_name.length > 30 ? report.course_shortname :
                                report.course_name }}</TableCell>
                            <TableCell>{{ report.date.split('T')[0] }}</TableCell>
                            <TableCell class="text-right">{{ report.created_by_name === null ? "Unknown User" :
                                report.created_by_name
                                }}</TableCell>
                        </TableRow>
                    </TableBody>
                </Table>
            </div>
        </div>
        <!-- view training report section -->
        <div v-if="focusedTrainingReport != null && sidePanel == sidePanelState.view" class="pl-9 my-3 border-l w-3/5">
            <div class="flex justify-between">
                <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Report Details</p>
                <button @click="closeTrainingReport" class="cursor-pointer">
                    <X></X>
                </button>
            </div>
            <div class="max-h-[70vh] overflow-auto scrollbar-themed my-5">
                <div class="flex flex-col mb-5 border rounded-lg bg-muted/70 p-2 py-3 px-4">
                    <p class="scroll-m-20 text-xl font-semibold tracking-tight">{{ focusedTrainingReport.course_name }}
                    </p>
                    <div class="flex gap-10">
                        <p class="text-muted-foreground">{{ focusedTrainingReport.event_date.split('T')[0] }}</p>
                        <p class="">Created by {{ focusedTrainingReport.created_by_name === null ? "Unknown User" :
                            focusedTrainingReport.created_by_name
                        }}
                        </p>
                    </div>
                </div>
                <div class="flex flex-col gap-8 ">
                    <!-- Trainers -->
                    <div>
                        <label class="scroll-m-20 text-xl font-semibold tracking-tight">Trainers</label>
                        <div class="grid grid-cols-4 py-2 text-sm font-medium text-muted-foreground border-b">
                            <span>Name</span>
                            <span class="">Role</span>
                            <span class="text-right col-span-2">Remarks</span>
                        </div>
                        <div v-for="person in focusedTrainingTrainers"
                            class="grid grid-cols-4 py-2 items-center border-b last:border-none">
                            <p>{{ person.attendee_name }}</p>
                            <p class="">{{ person.role.name }}</p>
                            <p class="col-span-2 text-right px-2"
                                :class="person.remarks == '' ? 'text-muted-foreground' : ''">
                                {{ person.remarks == "" ?
                                    '--'
                                    : person.remarks }}</p>
                        </div>
                    </div>
                    <!-- trainees -->
                    <div>
                        <div class="flex flex-col">
                            <label class="scroll-m-20 text-xl font-semibold tracking-tight">Trainees</label>
                            <div class="grid grid-cols-5 py-2 text-sm font-medium text-muted-foreground border-b">
                                <span>Name</span>
                                <span class="">Bookwork</span>
                                <span class="">Qual</span>
                                <span class="text-right col-span-2">Remarks</span>
                            </div>
                        </div>
                        <div v-for="person in focusedTrainingTrainees"
                            class="grid grid-cols-5 py-2 items-center border-b last:border-none">
                            <p>{{ person.attendee_name }}</p>
                            <Checkbox :disabled="!focusedTrainingReport.course.hasQual"
                                :model-value="person.passed_bookwork" class="pointer-events-none ml-5">
                            </Checkbox>
                            <Checkbox :disabled="!focusedTrainingReport.course.hasQual"
                                :model-value="person.passed_qual" class="pointer-events-none ml-1">
                            </Checkbox>
                            <p class="col-span-2 text-right px-2"
                                :class="person.remarks == '' ? 'text-muted-foreground' : ''">
                                {{ person.remarks == "" ?
                                    '--'
                                    : person.remarks }}</p>
                        </div>
                    </div>
                    <!-- No Shows -->
                    <div v-if="focusedNoShows.length != 0">
                        <div class="flex flex-col">
                            <label class="scroll-m-20 text-xl font-semibold tracking-tight">No Shows</label>
                            <div class="grid grid-cols-5 py-2 text-sm font-medium text-muted-foreground border-b">
                                <span>Name</span>
                                <!-- <span class="">Role</span>
                                <span class="">Role</span> -->
                                <div></div>
                                <div></div>
                                <span class="text-right col-span-2">Remarks</span>
                            </div>
                        </div>
                        <div v-for="person in focusedNoShows"
                            class="grid grid-cols-5 py-2 items-center border-b last:border-none">
                            <p>{{ person.attendee_name }}</p>
                            <!-- <Checkbox :default-value="person.passed_bookwork ? true : false" class="pointer-events-none">
                            </Checkbox>
                            <Checkbox :default-value="person.passed_qual ? true : false" class="pointer-events-none">
                            </Checkbox> -->
                            <div></div>
                            <div></div>
                            <p class="col-span-2 text-right px-2"
                                :class="person.remarks == '' ? 'text-muted-foreground' : ''">
                                {{ person.remarks == "" ?
                                    '--'
                                    : person.remarks }}</p>
                        </div>
                    </div>
                    <div>
                        <label class="scroll-m-20 text-xl font-semibold tracking-tight">Remarks</label>
                        <p class="border bg-muted/50 px-3 py-2 rounded-lg min-h-24 my-2"
                            :class="focusedTrainingReport.remarks == '' ? 'text-muted-foreground' : ''"> {{
                                focusedTrainingReport.remarks == "" ? 'None' : focusedTrainingReport.remarks }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="sidePanel == sidePanelState.create" class="pl-7 border-l w-3/5 max-w-5xl">
            <div class="flex justify-between my-3">
                <div class="flex pl-2 gap-5">
                    <p class="scroll-m-20 text-2xl font-semibold tracking-tight">New Training Report</p>
                </div>
                <button @click="closeTrainingReport" class="cursor-pointer">
                    <X></X>
                </button>
            </div>
            <div class="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed">
                <TrainingReportForm class="w-full pl-2"
                    @submit="(newID) => { router.push(`/trainingReport/${newID}`); loadTrainingReports() }">
                </TrainingReportForm>
            </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>