<script setup lang="ts">
import { ref, watch, nextTick, computed, onMounted } from 'vue'
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import { ChevronLeft, ChevronRight, Plus } from 'lucide-vue-next'
import CreateCalendarEvent from '@/components/calendar/CreateCalendarEvent.vue'
import { CalendarEvent } from '@shared/types/calendar'
import ViewCalendarEvent from '@/components/calendar/ViewCalendarEvent.vue'
import { useRouter, useRoute } from 'vue-router'
import { useCalendarEvents } from '@/composables/useCalendarEvents'
import { useCalendarNavigation } from '@/composables/useCalendarNavigation'
import { useUserStore } from '@/stores/user'

const monthLabels = [
    'January', 'February', 'March', 'April', 'May', 'June',
    'July', 'August', 'September', 'October', 'November', 'December'
]

function api() {
    return calendarRef.value?.getApi()
}

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

function buildFullDate(month: number, year: number): Date {
    return new Date(year, month, 1); //default to first of month
}

const { selectedMonth, selectedYear, years, goPrev, goNext, goToday, onDatesSet, goToSelectedDate } = useCalendarNavigation(api)
const { events, loadEvents } = useCalendarEvents(selectedMonth, selectedYear);

const panelOpen = ref(false)
const activeEvent = ref<CalendarEvent | null>(null)
const calendarRef = ref<InstanceType<typeof FullCalendar> | null>(null)

async function onEventClick(arg: any) {
    const targetEvent = arg.event.id;
    router.push(`/calendar/event/${targetEvent}`)
    panelOpen.value = true
}

const currentEventID = ref<number | null>(null);

const dialogRef = ref<any>(null)

// NEW: handle day/time slot clicks to start creating an event
function onDateClick(arg: { dateStr: string }) {
    if (!userStore.isLoggedIn) return;
    dialogRef.value?.openDialog(arg.dateStr);
    // For now, just open the panel with a draft payload.
    // activeEvent.value = {
    //     id: '__draft__',
    //     title: 'New event',
    //     start: arg.dateStr,
    //     extendedProps: { draft: true }
    // }
    // panelOpen.value = true
}

const calendarOptions = ref({
    plugins: [dayGridPlugin, interactionPlugin],
    initialView: 'dayGridMonth',
    height: '100%',
    expandRows: true,
    headerToolbar: {
        left: '',
        center: '',
        right: ''
    },
    events,
    selectable: false,
    navLinks: false,
    dateClick: onDateClick,
    eventClick: onEventClick,
    editable: false,

    // force block-mode in dayGrid so we can lay it out on one line
    eventDisplay: 'block',

    // compact time like "19:00"
    eventTimeFormat: {
        hour: "numeric",
        minute: "2-digit",
        hour12: true
    } as const,

    // custom renderer -> one-line pill
    eventContent(arg) {
        //debug
        // console.log("Rendering event:", {
        //     id: arg.event.id,
        //     title: arg.event.title,
        //     extendedProps: arg.event.extendedProps,
        //     fullEvent: arg.event
        // })

        const ext = arg.event.extendedProps || {}
        const color = ext.color || arg.backgroundColor || arg.borderColor || ''
        const isCancelled = !!ext.cancelled;

        const wrap = document.createElement('div')
        wrap.className = 'ev-pill'
        if (color) wrap.style.setProperty('--ev-color', String(color)) // dot color

        if (isCancelled) {
            wrap.classList.add('is-cancelled')
        }

        const dot = document.createElement('span')
        dot.className = 'ev-dot'

        const time = document.createElement('span')
        time.className = 'ev-time'
        time.textContent = arg.timeText

        const title = document.createElement('span')
        title.className = 'ev-title'
        title.textContent = arg.event.title

        wrap.append(dot, time, title)
        return { domNodes: [wrap] }
    },
})

//@ts-ignore (shhh)
calendarOptions.value.datesSet = onDatesSet

watch(() => route.params.id, async (newID) => {
    if (newID === undefined) {
        panelOpen.value = false;
        currentEventID.value = null;
    } else {
        panelOpen.value = true;
        currentEventID.value = Number(newID);
    }
}, { immediate: true })


watch(panelOpen, async () => {
    await nextTick()
    calendarRef.value?.getApi().updateSize()
})


function onCreateEvent() {
    const iso = new Date().toISOString().slice(0, 10) // YYYY-MM-DD
    onDateClick({ dateStr: iso })
}

const eventViewRef = ref(null);

onMounted(() => {
    onDatesSet()
})

</script>

<template>
    <div>
        <CreateCalendarEvent ref="dialogRef" @reload="loadEvents(); eventViewRef.forceReload();"></CreateCalendarEvent>
        <div class="flex">
            <div class="flex-1 min-h-0 mt-5">
                <div class="h-[80vh] min-h-0">
                    <!-- calendar header -->
                    <div class="flex items-center justify-between mx-5">
                        <!-- Left: title + pickers -->
                        <div class="flex items-center gap-2">
                            <!-- <h2 class="text-xl font-semibold tracking-tight">
                                {{ monthLabels[selectedMonth] }} {{ selectedYear }}
                            </h2> -->
                            <!-- Month dropdown -->
                            <select v-model.number="selectedMonth" @change="goToSelectedDate"
                                class="ml-2 rounded-md border bg-transparent px-2 py-1 text-sm"
                                aria-label="Select month">
                                <option v-for="(m, i) in monthLabels" :key="m" :value="i" class="bg-card">
                                    {{ m }}
                                </option>
                            </select>
                            <!-- Year dropdown -->
                            <select v-model.number="selectedYear" @change="goToSelectedDate"
                                class="rounded-md border bg-transparent px-2 py-1 text-sm" aria-label="Select year">
                                <option v-for="y in years" :key="y" :value="y" class="bg-card">
                                    {{ y }}
                                </option>
                            </select>
                        </div>
                        <!-- Right: nav + today + create -->
                        <div class="flex items-center gap-2">
                            <button
                                class="cursor-pointer inline-flex h-8 w-8 items-center justify-center rounded-md border hover:bg-muted/40"
                                aria-label="Previous month" @click="goPrev">
                                <ChevronLeft class="h-4 w-4" />
                            </button>
                            <button
                                class="cursor-pointer inline-flex h-8 w-8 items-center justify-center rounded-md border hover:bg-muted/40"
                                aria-label="Next month" @click="goNext">
                                <ChevronRight class="h-4 w-4" />
                            </button>
                            <button class="cursor-pointer ml-1 rounded-md border px-3 py-1.5 text-sm hover:bg-muted/40"
                                @click="goToday">
                                Today
                            </button>
                            <button v-if="userStore.isLoggedIn"
                                class="cursor-pointer ml-1 inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:opacity-90"
                                @click="onCreateEvent">
                                <Plus class="h-4 w-4" />
                                Create
                            </button>
                        </div>
                    </div>
                    <FullCalendar ref="calendarRef" :options="calendarOptions" />
                </div>
            </div>
            <aside v-if="panelOpen"
                class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col overflow-auto scrollbar-themed"
                :style="{ height: 'calc(100vh - 61px)', position: 'sticky', top: '64px' }">
                <ViewCalendarEvent ref="eventViewRef" @close="() => { router.push('/calendar'); }"
                    @reload="loadEvents()" @edit="(val) => { dialogRef.openDialog(null, 'edit', val) }">
                </ViewCalendarEvent>
            </aside>
        </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>

<style scoped>
/* ---------- Optional container "card" around the calendar ---------- */
:global(.fc) {
    height: 100% !important;
}

:global(.ev-pill.is-cancelled) {
    opacity: 0.45;
    text-decoration: line-through;
    filter: grayscale(100%);
}

:global(.calendar-card) {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 12px;
}

@media (min-width: 640px) {
    .calendar-card {
        padding: 16px;
    }
}

/* ---------- FullCalendar base ---------- */
:global(.fc) {
    color: var(--color-foreground);
    background: transparent;
    font-family: var(--font-sans), system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 0.94rem;
    /* compact */
}

:global(.fc .fc-daygrid .fc-scroller) {
    overflow: visible !important;
    /* no internal scroll for month grid */
}

:global(.fc-daygrid:hover) {
    cursor: pointer;
}

/* Subtle borders everywhere */
:global(.fc .fc-scrollgrid),
:global(.fc .fc-scrollgrid td),
:global(.fc .fc-scrollgrid th) {
    border-color: var(--color-border);
}

/* ---------- Built-in toolbar (if you keep it) ---------- */
:global(.fc .fc-toolbar) {
    gap: 8px;
}

:global(.fc .fc-toolbar-title) {
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-foreground);
}

:global(.fc .fc-button) {
    background: transparent;
    color: var(--color-foreground);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius-lg) + 2px);
    box-shadow: none;
    padding: 6px 15px;
    line-height: 1;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

:global(.fc .fc-button:hover) {
    background: color-mix(in oklab, var(--color-foreground) 5%, transparent);
}

:global(.fc .fc-button:focus) {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-ring) 55%, transparent);
}

:global(.fc .fc-button.fc-button-active) {
    background: var(--color-primary);
    color: var(--color-primary-foreground);
    border-color: var(--color-primary);
}

/* ---------- Month header + day numbers ---------- */
:global(.fc .fc-col-header-cell-cushion) {
    color: var(--color-muted-foreground);
    font-weight: 600;
    padding: 8px 12px;
    text-decoration: none;
}

:global(.fc .fc-daygrid-day-top) {
    padding: 8px 8px 0 8px;
}

:global(.fc .fc-daygrid-day-number) {
    color: var(--color-muted-foreground);
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
    height: 26px;
}

/* Today: soft background + stronger number */
:global(.fc .fc-day-today) {
    background: color-mix(in oklab, var(--color-primary) 12%, transparent);
}

:global(.fc .fc-day-today .fc-daygrid-day-number) {
    color: var(--color-foreground);
}

/* Hover affordance inside a day cell (very subtle) */
:global(.fc .fc-daygrid-day:hover) {
    background: color-mix(in oklab, var(--color-foreground) 3%, transparent);
}

/* ---------- Event chips (dayGrid) ---------- */
:global(.fc .fc-daygrid-event) {
    display: block;
    border: none;
    background: transparent;
    color: var(--color-foreground);
    border-radius: 4px;
    margin: 2px 6px;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

:global(.fc .fc-daygrid-event:hover) {
    background: color-mix(in oklab, var(--color-foreground) 6%, transparent);
    border-color: color-mix(in oklab, var(--color-foreground) 12%, var(--color-border));
}



:global(.ev-dot) {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--ev-color, currentColor);
    margin-right: 4px;
}

:global(.ev-time) {
    font-weight: 600;
    margin-right: 4px;
    white-space: nowrap;
    flex: 0 0 auto;
}

:global(.ev-title) {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* One-line custom pill */
:global(.ev-pill) {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 4px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ev-color) 15%, transparent);
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

:global(.ev-pill:hover) {
    /* background: color-mix(in oklab, var(--color-primary) 20%, transparent);
    border-color: color-mix(in oklab, var(--color-primary) 45%, var(--color-border)); */
    cursor: pointer;
}

.ev-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.ev-time {
    font-weight: 600;
    margin-right: 4px;
    white-space: nowrap;
    flex: 0 0 auto;
}

.ev-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ev-pill.is-colored {
    color: var(--color-primary-foreground);
}

:global(.fc-daygrid-top) {
    margin-bottom: 2px;
}

/* --- Replace the default today highlight with a round badge --- */
:global(.fc .fc-daygrid-day.fc-day-today) {
    background: transparent;
}

:global(.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number) {
    border-radius: 6px;
    background: color-mix(in oklab, var(--color-primary) 100%, transparent);
    font-weight: 700;
    text-decoration: none;
    color: var(--color-primary-foreground);
}

:global(.fc .fc-daygrid-day:hover) {
    background: color-mix(in oklab, var(--color-foreground) 3%, transparent);
}
</style>
