<script setup lang="ts">
import { getTrainingReport, getTrainingReports } from '@/api/trainingReport';
import { CourseAttendee, CourseEventDetails, CourseEventSummary } from '@shared/types/course';
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table'
import { ArrowUpDown, ChevronDown, ChevronLeft, ChevronUp, Funnel, Link, 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';
import MemberCard from '@/components/members/MemberCard.vue';
import Spinner from '@/components/ui/spinner/Spinner.vue';
import { pagination } from '@shared/types/pagination';
import {
    Pagination,
    PaginationContent,
    PaginationEllipsis,
    PaginationItem,
    PaginationNext,
    PaginationPrevious,
} from '@/components/ui/pagination'
import Tooltip from '@/components/tooltip/Tooltip.vue';
import { CopyLink } from '@/lib/copyLink';

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;
})

const isMobile = ref(false);
const mobilePanel = ref<sidePanelState>(sidePanelState.closed);
let mobileMediaQuery: MediaQueryList | null = null;

function syncMobileMode() {
    isMobile.value = mobileMediaQuery?.matches ?? window.innerWidth < 1024;
    if (!isMobile.value) {
        mobilePanel.value = sidePanelState.closed;
    }
}

const effectivePanel = computed<sidePanelState>(() => {
    return isMobile.value ? mobilePanel.value : sidePanel.value;
})

watch(() => route.params.id, async (newID) => {
    if (!newID) {
        focusedTrainingReport.value = null;
        return;
    }
    TRLoaded.value = false;
    expanded.value = null;
    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);
    TRLoaded.value = true;
}

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

async function openTrainingReport(id: number) {
    if (isMobile.value) {
        focusedTrainingReport.value = null;
        TRLoaded.value = false;
        expanded.value = null;
        mobilePanel.value = sidePanelState.view;
        await viewTrainingReport(id);
        return;
    }

    router.push(`/trainingReport/${id}`);
}

function openCreatePanel() {
    if (isMobile.value) {
        mobilePanel.value = sidePanelState.create;
        focusedTrainingReport.value = null;
        return;
    }

    router.push('/trainingReport/new');
}

async function closePanel() {
    if (isMobile.value) {
        mobilePanel.value = sidePanelState.closed;
        focusedTrainingReport.value = null;
        TRLoaded.value = false;
        expanded.value = null;
        return;
    }

    await closeTrainingReport();
}

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() {
    let data = await getTrainingReports(sortMode.value, searchString.value, pageNum.value, pageSize.value);
    trainingReports.value = data.data;
    pageData.value = data.pagination;
}

onMounted(async () => {
    mobileMediaQuery = window.matchMedia('(max-width: 1023px)');
    syncMobileMode();
    mobileMediaQuery.addEventListener('change', syncMobileMode);

    await loadTrainingReports();
    if (route.params.id)
        viewTrainingReport(Number(route.params.id))
    loaded.value = true;
})

onBeforeUnmount(() => {
    mobileMediaQuery?.removeEventListener('change', syncMobileMode);
})

const TRLoaded = ref(false);

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

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

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

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

function setPage(pagenum: number) {
    pageNum.value = pagenum;
    loadTrainingReports();
}

const expanded = ref<number>(null);
</script>

<template>
    <div class="mx-auto mt-5 flex w-full max-w-[100rem] flex-col px-3 sm:px-4 lg:flex-row lg:px-8 xl:px-20">
        <!-- training report list -->
        <div v-show="!isMobile || effectivePanel === sidePanelState.closed" class="my-3 px-0 lg:px-4"
            :class="effectivePanel == sidePanelState.closed ? 'w-full' : 'w-full lg:flex-[0_0_26rem] xl:flex-[0_0_30rem]'">
            <div class="flex justify-between mb-4">
                <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Reports</p>
                <Button @click="openCreatePanel()">
                    <Plus></Plus> New Training Report
                </Button>
            </div>
            <!-- search/filter -->
            <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
                <!-- <Search></Search>
                <Funnel></Funnel> -->
                <div></div>
                <div class="flex flex-col gap-3 sm:flex-row sm:gap-5">
                    <div>
                        <label class="text-muted-foreground">Search</label>
                        <Input v-model="searchString" placeholder="Search..."></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="mt-5">
                <div class="space-y-2 md:hidden">
                    <button v-for="report in trainingReports" :key="`mobile-report-${report.event_id}`"
                        class="w-full rounded-lg border bg-card px-3 py-2 text-left transition-colors hover:bg-muted/40"
                        @click="openTrainingReport(report.event_id)">
                        <p class="font-semibold text-foreground">
                            {{ report.course_name.length > 35 ? report.course_shortname : report.course_name }}
                        </p>
                        <p class="mt-1 text-sm text-muted-foreground">{{ formatDate(report.date) }}</p>
                        <div class="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
                            <span class="font-medium">Posted by:</span>
                            <MemberCard v-if="report.created_by" :member-id="report.created_by"></MemberCard>
                            <span v-else>Unknown User</span>
                        </div>
                    </button>
                </div>

                <div class="hidden md:block">
                <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="openTrainingReport(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">
                                <MemberCard v-if="report.created_by" :member-id="report.created_by"></MemberCard>
                                <span v-else>Unknown User</span>
                            </TableCell>
                            <!-- <TableCell class="text-right">{{ report.created_by_name === null ? "Unknown User" :
                                report.created_by_name
                            }}</TableCell> -->
                        </TableRow>
                    </TableBody>
                </Table>
                </div>
            </div>
            <div class="mt-5 flex flex-col gap-3 md:flex-row md:items-center md:justify-between"
                :class="effectivePanel !== sidePanelState.closed ? 'items-center' : ''">
                <div class="hidden md:block"></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 flex-wrap items-center justify-end gap-2 text-sm"
                    :class="effectivePanel !== sidePanelState.closed ? 'w-full justify-center md:w-auto md:justify-end' : ''">
                    <p class="text-muted-foreground">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>
        <!-- view training report section -->
        <div v-if="focusedTrainingReport != null && effectivePanel == sidePanelState.view"
            :class="isMobile ? 'fixed inset-0 z-[60] overflow-y-auto px-3 py-3' : 'my-3 mt-2 w-full min-w-0 lg:mt-0 lg:flex-1 lg:border-l lg:pl-9'"
            :style="isMobile ? { top: 'var(--app-header-height, 60px)' } : {}">
            <div class="flex justify-between items-center">
                <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Report Details</p>
                <div class="flex items-center gap-2">
                    <Button v-if="isMobile" @click="closePanel" class="cursor-pointer" variant="outline" size="sm">
                        <ChevronLeft class="size-4"></ChevronLeft> Back
                    </Button>
                    <Button v-else class="cursor-pointer" variant="ghost" size="icon" @click="CopyLink()">
                        <Link class="size-4" />
                    </Button>
                    <Button v-if="!isMobile" @click="closePanel" class="cursor-pointer" variant="ghost" size="icon">
                        <X class="size-6"></X>
                    </Button>
                </div>
            </div>
            <div v-if="TRLoaded" :class="isMobile ? 'my-3 pb-8' : 'my-5 max-h-[70vh] overflow-y-auto overflow-x-hidden scrollbar-themed'">
                <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="mt-2 flex flex-col gap-2 text-sm sm:flex-row sm:items-center sm:gap-10">
                        <p class="text-muted-foreground">{{ formatDate(focusedTrainingReport.event_date) }}</p>
                        <div class="flex gap-2 items-center">Created by:
                            <MemberCard v-if="focusedTrainingReport.created_by"
                                :member-id="focusedTrainingReport.created_by" />
                            <span v-else>Unknown User</span>
                        </div>
                    </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="mt-3 space-y-2 md:hidden">
                            <article v-for="person in focusedTrainingTrainers" :key="person.attendee_id ?? person.attendee_name"
                                class="rounded-xl border bg-card p-3 shadow-sm" :class="expanded === person.attendee_id && 'ring-1 ring-primary/30'">
                                <div class="flex items-start justify-between gap-2">
                                    <div class="min-w-0">
                                        <MemberCard v-if="person.attendee_id" :member-id="person.attendee_id"
                                            class="max-w-full whitespace-nowrap overflow-hidden text-ellipsis"></MemberCard>
                                        <p v-else class="font-medium whitespace-nowrap overflow-hidden text-ellipsis">{{ person.attendee_name }}</p>
                                    </div>
                                    <Button @click.stop="expanded === person.attendee_id ? expanded = null : expanded = person.attendee_id"
                                        variant="ghost" size="icon" class="shrink-0">
                                        <ChevronDown v-if="expanded !== person.attendee_id" class="size-5" />
                                        <ChevronUp v-else class="size-5" />
                                    </Button>
                                </div>
                                <div class="mt-3 grid grid-cols-1 gap-2 text-xs">
                                    <div class="rounded-lg bg-muted px-3 py-2">
                                        <p class="text-muted-foreground">Role</p>
                                        <p class="font-medium text-foreground">{{ person.role.name }}</p>
                                    </div>
                                    <div class="rounded-lg bg-muted px-3 py-2">
                                        <p class="text-muted-foreground">Remarks</p>
                                        <p class="font-medium text-foreground truncate">{{ person.remarks || '--' }}</p>
                                    </div>
                                </div>
                                <div v-if="expanded === person.attendee_id" class="mt-3 rounded-lg border bg-background px-3 py-2">
                                    <p class="text-sm font-medium text-foreground">Full Remarks</p>
                                    <p v-if="person.remarks"
                                        class="mt-1 text-sm text-muted-foreground leading-relaxed whitespace-pre-wrap max-h-72 overflow-y-auto">
                                        {{ person.remarks }}
                                    </p>
                                    <p v-else class="mt-1 text-sm text-muted-foreground italic">
                                        None provided
                                    </p>
                                </div>
                            </article>
                        </div>
                        <div class="mt-2 hidden md:block">
                            <div
                                class="grid grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)_minmax(0,1.4fr)_2.5rem] py-2 text-sm font-medium text-muted-foreground border-b gap-x-2">
                                <span>Name</span>
                                <span>Role</span>
                                <span class="text-right">Remarks</span>
                                <span></span>
                            </div>
                            <div v-for="person in focusedTrainingTrainers" :key="person.attendee_id ?? person.attendee_name"
                                class="items-center border-b last:border-none"
                                :class="expanded === person.attendee_id && 'bg-muted/20'">
                                <div class="grid grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)_minmax(0,1.4fr)_2.5rem] items-center py-2 gap-x-2">
                                    <div class="min-w-0">
                                        <MemberCard v-if="person.attendee_id" :member-id="person.attendee_id"
                                            class="justify-self-start max-w-full whitespace-nowrap overflow-hidden text-ellipsis"></MemberCard>
                                        <p v-else class="whitespace-nowrap overflow-hidden text-ellipsis">{{ person.attendee_name }}</p>
                                    </div>
                                    <p class="truncate">{{ person.role.name }}</p>
                                    <p class="text-right px-2 truncate"
                                        :class="person.remarks == '' ? 'text-muted-foreground' : ''">
                                        {{ person.remarks == "" ?
                                            '--'
                                            : person.remarks }}</p>
                                    <div class="w-min mx-auto">
                                        <Button v-if="expanded === person.attendee_id" @click.stop="expanded = null"
                                            variant="ghost" size="icon">
                                            <ChevronUp class="size-6" />
                                        </Button>
                                        <Button v-else @click.stop="expanded = person.attendee_id" variant="ghost"
                                            size="icon">
                                            <ChevronDown class="size-6" />
                                        </Button>
                                    </div>
                                </div>
                                <div class="col-span-full" v-if="expanded === person.attendee_id">
                                    <div class="px-6 pb-5 pt-2 space-y-2">
                                        <p class="text-sm font-medium text-foreground">
                                            Remarks
                                        </p>
                                        <p v-if="person.remarks"
                                            class="text-sm text-muted-foreground leading-relaxed whitespace-pre-wrap max-h-72 overflow-y-auto">
                                            {{ person.remarks }}
                                        </p>
                                        <p v-else class="text-sm text-muted-foreground italic">
                                            None provided
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- trainees -->
                    <div>
                        <div class="flex flex-col">
                            <label class="scroll-m-20 text-xl font-semibold tracking-tight">Trainees</label>
                            <div class="mt-3 space-y-2 md:hidden">
                                <article v-for="person in focusedTrainingTrainees" :key="person.attendee_id ?? person.attendee_name"
                                    class="rounded-xl border bg-card p-3 shadow-sm" :class="expanded === person.attendee_id && 'ring-1 ring-primary/30'">
                                    <div class="flex items-start justify-between gap-2">
                                        <div class="min-w-0">
                                            <MemberCard v-if="person.attendee_id" :member-id="person.attendee_id"
                                                class="max-w-full whitespace-nowrap overflow-hidden text-ellipsis"></MemberCard>
                                            <p v-else class="font-medium whitespace-nowrap overflow-hidden text-ellipsis">{{ person.attendee_name }}</p>
                                        </div>
                                        <Button @click.stop="expanded === person.attendee_id ? expanded = null : expanded = person.attendee_id"
                                            variant="ghost" size="icon" class="shrink-0">
                                            <ChevronDown v-if="expanded !== person.attendee_id" class="size-5" />
                                            <ChevronUp v-else class="size-5" />
                                        </Button>
                                    </div>
                                    <div class="mt-3 grid grid-cols-2 gap-2 text-xs">
                                        <div class="rounded-lg bg-muted px-3 py-2 text-center">
                                            <p class="text-muted-foreground">Bookwork</p>
                                            <p class="font-semibold text-foreground">{{ !focusedTrainingReport.course.hasBookwork ? 'N/A' : (person.passed_bookwork ? 'Pass' : 'Fail') }}</p>
                                        </div>
                                        <div class="rounded-lg bg-muted px-3 py-2 text-center">
                                            <p class="text-muted-foreground">Qual</p>
                                            <p class="font-semibold text-foreground">{{ !focusedTrainingReport.course.hasQual ? 'N/A' : (person.passed_qual ? 'Pass' : 'Fail') }}</p>
                                        </div>
                                        <div class="col-span-2 rounded-lg bg-muted px-3 py-2">
                                            <p class="text-muted-foreground">Remarks</p>
                                            <p class="font-medium text-foreground truncate">{{ person.remarks || '--' }}</p>
                                        </div>
                                    </div>
                                    <div v-if="expanded === person.attendee_id" class="mt-3 rounded-lg border bg-background px-3 py-2">
                                        <p class="text-sm font-medium text-foreground">Full Remarks</p>
                                        <p v-if="person.remarks"
                                            class="mt-1 text-sm text-muted-foreground leading-relaxed whitespace-pre-wrap max-h-72 overflow-y-auto">
                                            {{ person.remarks }}
                                        </p>
                                        <p v-else class="mt-1 text-sm text-muted-foreground italic">
                                            None provided
                                        </p>
                                    </div>
                                </article>
                            </div>
                            <div class="hidden md:block">
                                <div
                                    class="grid grid-cols-[minmax(0,1.6fr)_4.25rem_4.25rem_minmax(0,1.4fr)_2.5rem] py-2 text-sm font-medium text-muted-foreground border-b px-2 gap-x-2">
                                    <span>Name</span>
                                    <span class="text-center">Bookwork</span>
                                    <span class="text-center">Qual</span>
                                    <span class="text-right">Remarks</span>
                                    <span class="w-15"></span>
                                </div>
                                <div v-for="person in focusedTrainingTrainees" :key="person.attendee_id ?? person.attendee_name" class="border-b last:border-none"
                                    :class="expanded === person.attendee_id && 'bg-muted/20'">
                                    <div class="grid grid-cols-[minmax(0,1.6fr)_4.25rem_4.25rem_minmax(0,1.4fr)_2.5rem] py-2 items-center px-2 gap-x-2">
                                        <div class="min-w-0">
                                            <MemberCard v-if="person.attendee_id" :member-id="person.attendee_id"
                                                class="justify-self-start max-w-full whitespace-nowrap overflow-hidden text-ellipsis"></MemberCard>
                                            <p v-else class="whitespace-nowrap overflow-hidden text-ellipsis">{{ person.attendee_name }}</p>
                                        </div>
                                        <div class="flex justify-center">
                                            <Tooltip :open="!focusedTrainingReport.course.hasBookwork"
                                                message="This course does not have bookwork">
                                                <Checkbox :disabled="!focusedTrainingReport.course.hasBookwork"
                                                    :model-value="person.passed_bookwork" class="pointer-events-none">
                                                </Checkbox>
                                            </Tooltip>
                                        </div>
                                        <div class="flex justify-center">
                                            <Tooltip :open="!focusedTrainingReport.course.hasQual"
                                                message="This course does not have a qualification">
                                                <Checkbox :disabled="!focusedTrainingReport.course.hasQual"
                                                    :model-value="person.passed_qual" class="pointer-events-none">
                                                </Checkbox>
                                            </Tooltip>
                                        </div>
                                        <p class="text-right truncate"
                                            :class="person.remarks == '' ? 'text-muted-foreground' : ''">
                                            {{ person.remarks == "" ?
                                                '--'
                                                : person.remarks }}</p>
                                        <div class="w-min mx-auto">
                                            <Button v-if="expanded === person.attendee_id" @click.stop="expanded = null"
                                                variant="ghost" size="icon">
                                                <ChevronUp class="size-6" />
                                            </Button>
                                            <Button v-else @click.stop="expanded = person.attendee_id" variant="ghost"
                                                size="icon">
                                                <ChevronDown class="size-6" />
                                            </Button>
                                        </div>
                                    </div>
                                    <div class="col-span-full" v-if="expanded === person.attendee_id">
                                        <div class="px-6 pb-5 pt-2 space-y-2">
                                            <p class="text-sm font-medium text-foreground">
                                                Remarks
                                            </p>
                                            <p v-if="person.remarks"
                                                class="text-sm text-muted-foreground leading-relaxed whitespace-pre-wrap max-h-72 overflow-y-auto">
                                                {{ person.remarks }}
                                            </p>
                                            <p v-else class="text-sm text-muted-foreground italic">
                                                None provided
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </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="mt-3 space-y-2 md:hidden">
                                <article v-for="person in focusedNoShows" :key="person.attendee_id ?? person.attendee_name"
                                    class="rounded-xl border bg-card p-3 shadow-sm" :class="expanded === person.attendee_id && 'ring-1 ring-primary/30'">
                                    <div class="flex items-start justify-between gap-2">
                                        <div class="min-w-0">
                                            <MemberCard v-if="person.attendee_id" :member-id="person.attendee_id"
                                                class="max-w-full whitespace-nowrap overflow-hidden text-ellipsis" />
                                            <p v-else class="font-medium whitespace-nowrap overflow-hidden text-ellipsis">{{ person.attendee_name }}</p>
                                        </div>
                                        <Button variant="ghost" size="icon" class="shrink-0" @click.stop="expanded === person.attendee_id
                                            ? expanded = null
                                            : expanded = person.attendee_id">
                                            <ChevronDown v-if="expanded !== person.attendee_id" class="size-5" />
                                            <ChevronUp v-else class="size-5" />
                                        </Button>
                                    </div>
                                    <div class="mt-3 grid grid-cols-2 gap-2 text-xs">
                                        <div class="rounded-lg bg-muted px-3 py-2 text-center">
                                            <p class="text-muted-foreground">Bookwork</p>
                                            <p class="font-semibold text-foreground">N/A</p>
                                        </div>
                                        <div class="rounded-lg bg-muted px-3 py-2 text-center">
                                            <p class="text-muted-foreground">Qual</p>
                                            <p class="font-semibold text-foreground">N/A</p>
                                        </div>
                                        <div class="col-span-2 rounded-lg bg-muted px-3 py-2">
                                            <p class="text-muted-foreground">Remarks</p>
                                            <p class="font-medium text-foreground truncate">{{ person.remarks || '--' }}</p>
                                        </div>
                                    </div>

                                    <div v-if="expanded === person.attendee_id" class="mt-3 rounded-lg border bg-background px-3 py-2">
                                        <p class="text-sm font-medium text-foreground">
                                            Full Remarks
                                        </p>

                                        <p v-if="person.remarks"
                                            class="mt-1 text-sm text-muted-foreground leading-relaxed whitespace-pre-wrap max-h-72 overflow-y-auto">
                                            {{ person.remarks }}
                                        </p>

                                        <p v-else class="mt-1 text-sm text-muted-foreground italic">
                                            None provided
                                        </p>
                                    </div>
                                </article>
                            </div>

                            <div class="hidden md:block">
                                <div
                                    class="grid grid-cols-[minmax(0,1.6fr)_4.25rem_4.25rem_minmax(0,1.4fr)_2.5rem] py-2 text-sm font-medium text-muted-foreground border-b gap-x-2">
                                    <span>Name</span>
                                    <span class="text-center">Bookwork</span>
                                    <span class="text-center">Qual</span>
                                    <span class="text-right">Remarks</span>
                                    <span></span>
                                </div>

                                <div v-for="person in focusedNoShows" :key="person.attendee_id ?? person.attendee_name"
                                    class="border-b last:border-none transition-colors"
                                    :class="expanded === person.attendee_id && 'bg-muted/20'">
                                    <div class="grid grid-cols-[minmax(0,1.6fr)_4.25rem_4.25rem_minmax(0,1.4fr)_2.5rem] py-2 items-center gap-x-2">
                                        <div class="min-w-0">
                                            <MemberCard v-if="person.attendee_id" :member-id="person.attendee_id"
                                                class="max-w-full whitespace-nowrap overflow-hidden text-ellipsis" />
                                            <p v-else class="whitespace-nowrap overflow-hidden text-ellipsis">{{ person.attendee_name }}</p>
                                        </div>

                                        <p class="text-center text-muted-foreground">-</p>
                                        <p class="text-center text-muted-foreground">-</p>

                                        <p class="text-right px-2 truncate" :class="!person.remarks && 'text-muted-foreground'">
                                            {{ person.remarks || '--' }}
                                        </p>

                                        <Button variant="ghost" size="icon" @click.stop="expanded === person.attendee_id
                                            ? expanded = null
                                            : expanded = person.attendee_id">
                                            <ChevronDown v-if="expanded !== person.attendee_id" class="size-5" />
                                            <ChevronUp v-else class="size-5" />
                                        </Button>
                                    </div>

                                    <div v-if="expanded === person.attendee_id" class="col-span-full">
                                        <div class="px-6 py-4 space-y-2">
                                            <p class="text-sm font-medium text-foreground">
                                                Remarks
                                            </p>

                                            <p v-if="person.remarks"
                                                class="text-sm text-muted-foreground leading-relaxed whitespace-pre-wrap max-h-72 overflow-y-auto">
                                                {{ person.remarks }}
                                            </p>

                                            <p v-else class="text-sm text-muted-foreground italic">
                                                None provided
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </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 v-else class="flex w-full items-center justify-center h-[80%]">
                <Spinner class="size-8"></Spinner>
            </div>
        </div>
        <div v-if="effectivePanel == sidePanelState.create" :class="isMobile ? 'fixed inset-0 z-[60] overflow-y-auto bg-background px-3 py-3' : 'mt-2 w-full max-w-5xl lg:mt-0 lg:w-3/5 lg:border-l lg:pl-7'"
            :style="isMobile ? { top: 'var(--app-header-height, 60px)' } : {}">
            <div class="flex justify-between items-center my-3">
                <div class="flex gap-5 lg:pl-2">
                    <p class="scroll-m-20 text-2xl font-semibold tracking-tight">New Training Report</p>
                </div>
                <Button v-if="isMobile" @click="closePanel" class="cursor-pointer" variant="outline" size="sm">
                    <ChevronLeft class="size-4"></ChevronLeft> Back
                </Button>
                <Button v-else @click="closePanel" class="cursor-pointer" variant="ghost" size="icon">
                    <X class="size-6"></X>
                </Button>
            </div>
            <div :class="isMobile ? 'mt-3 pb-8' : 'overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed'">
                <TrainingReportForm class="w-full lg:pl-2"
                    @submit="async (newID) => {
                        if (isMobile) {
                            await viewTrainingReport(newID);
                            mobilePanel = sidePanelState.view;
                        } else {
                            router.push(`/trainingReport/${newID}`);
                        }
                        loadTrainingReports()
                    }">
                </TrainingReportForm>
            </div>
        </div>
    </div>
</template>
