<script setup lang="ts">
import { useDeleteSection, useReorderSections, useSectionList } from '@/composables/api/useSections'
import { useDeleteShift, useShiftList } from '@/composables/api/useShifts'
import { useEventDetail } from '@/composables/api/useEvents'
import { useAuthStore } from '@/stores/useAuthStore'
import CreateSectionDialog from '@/components/sections/CreateSectionDialog.vue'
import EditSectionDialog from '@/components/sections/EditSectionDialog.vue'
import CreateShiftDialog from '@/components/sections/CreateShiftDialog.vue'
import AssignPersonDialog from '@/components/shifts/AssignPersonDialog.vue'
import ShiftDetailPanel from '@/components/shifts/ShiftDetailPanel.vue'
import { useShiftDetailStore } from '@/stores/useShiftDetailStore'
import InfoTooltip from '@/components/common/InfoTooltip.vue'
import type { FestivalSection, Shift, ShiftStatus } from '@/types/section'
import type { EventItem } from '@/types/event'

const props = defineProps<{
  eventId: string
  isSubEvent?: boolean
  parentEvent?: EventItem | null
}>()

const shiftDetailStore = useShiftDetailStore()
const authStore = useAuthStore()

const orgIdRef = computed(() => authStore.currentOrganisation?.id ?? '')
const eventIdRef = computed(() => props.eventId)

// Event detail for context banner
const { data: eventDetail } = useEventDetail(orgIdRef, eventIdRef)

const isSubEvent = computed(() => props.isSubEvent ?? false)

// --- Section list ---
const { data: sectionsQuery, isLoading: sectionsLoading } = useSectionList(orgIdRef, eventIdRef)
const { mutate: reorderSections } = useReorderSections(orgIdRef, eventIdRef)

// Local ref for draggable — synced from query but not overwritten during drag
const sections = ref<FestivalSection[]>([])

watch(sectionsQuery, newData => {
  if (newData)
    sections.value = [...newData]
}, { immediate: true })

function onDragEnd() {
  reorderSections(sections.value.map(s => s.id))
}

const activeSectionId = ref<string | null>(null)

const activeSection = computed(() =>
  sections.value?.find(s => s.id === activeSectionId.value) ?? null,
)

watch(sections, list => {
  if (list?.length && !activeSectionId.value)
    activeSectionId.value = list[0].id
}, { immediate: true })

// For cross_event sections, use the section's own event_id (parent festival)
const activeSectionEventId = computed(() => {
  if (activeSection.value?.type === 'cross_event')
    return activeSection.value.event_id

  return props.eventId
})

const activeSectionEventIdRef = computed(() => activeSectionEventId.value)

const { mutate: deleteSection } = useDeleteSection(orgIdRef, activeSectionEventIdRef)

// --- Shifts for active section ---

const activeSectionIdRef = computed(() => activeSectionId.value ?? '')

const { data: shifts, isLoading: shiftsLoading } = useShiftList(orgIdRef, activeSectionEventIdRef, activeSectionIdRef)
const { mutate: deleteShiftMutation, isPending: isDeleting } = useDeleteShift(orgIdRef, activeSectionEventIdRef, activeSectionIdRef)

// Group shifts by time_slot_id
const shiftsByTimeSlot = computed(() => {
  if (!shifts.value)
    return []

  const groups = new Map<string, { timeSlotName: string; date: string; startTime: string; endTime: string; totalSlots: number; filledSlots: number; shifts: Shift[] }>()

  for (const shift of shifts.value) {
    const tsId = shift.time_slot_id
    if (!groups.has(tsId)) {
      groups.set(tsId, {
        timeSlotName: shift.time_slot?.name ?? 'Onbekend',
        date: shift.time_slot?.date ?? '',
        startTime: shift.effective_start_time,
        endTime: shift.effective_end_time,
        totalSlots: 0,
        filledSlots: 0,
        shifts: [],
      })
    }
    const group = groups.get(tsId)!

    group.shifts.push(shift)
    group.totalSlots += shift.slots_total
    group.filledSlots += shift.filled_slots
  }

  return Array.from(groups.values())
})

// --- Dialogs ---

const isCreateSectionOpen = ref(false)
const isEditSectionOpen = ref(false)
const isCreateShiftOpen = ref(false)
const isAssignShiftOpen = ref(false)

const editingShift = ref<Shift | null>(null)
const assigningShift = ref<Shift | null>(null)

// Delete section
const isDeleteSectionOpen = ref(false)
const deletingSectionId = ref<string | null>(null)

function onDeleteSectionConfirm(section: FestivalSection) {
  deletingSectionId.value = section.id
  isDeleteSectionOpen.value = true
}

function onDeleteSectionExecute() {
  if (!deletingSectionId.value)
    return
  deleteSection(deletingSectionId.value, {
    onSuccess: () => {
      isDeleteSectionOpen.value = false
      if (activeSectionId.value === deletingSectionId.value)
        activeSectionId.value = sections.value?.[0]?.id ?? null

      deletingSectionId.value = null
    },
  })
}

// Delete shift
const isDeleteShiftOpen = ref(false)
const deletingShiftId = ref<string | null>(null)

function onDeleteShiftConfirm(shift: Shift) {
  deletingShiftId.value = shift.id
  isDeleteShiftOpen.value = true
}

function onDeleteShiftExecute() {
  if (!deletingShiftId.value)
    return
  deleteShiftMutation(deletingShiftId.value, {
    onSuccess: () => {
      isDeleteShiftOpen.value = false
      deletingShiftId.value = null
    },
  })
}

function onEditShift(shift: Shift) {
  editingShift.value = shift
  isCreateShiftOpen.value = true
}

function onAssignShift(shift: Shift) {
  assigningShift.value = shift
  isAssignShiftOpen.value = true
}

function onAddShift() {
  editingShift.value = null
  isCreateShiftOpen.value = true
}

function onEditSection() {
  isEditSectionOpen.value = true
}

// Status styling
const statusColor: Record<ShiftStatus, string> = {
  draft: 'default',
  open: 'info',
  full: 'success',
  in_progress: 'warning',
  completed: 'success',
  cancelled: 'error',
}

const statusLabel: Record<ShiftStatus, string> = {
  draft: 'Concept',
  open: 'Open',
  full: 'Vol',
  in_progress: 'Bezig',
  completed: 'Voltooid',
  cancelled: 'Geannuleerd',
}

function fillRateColor(shift: Shift): string {
  if (shift.is_overbooked)
    return 'warning'
  if (shift.fill_rate >= 80)
    return 'success'
  if (shift.fill_rate >= 40)
    return 'warning'

  return 'error'
}

// Date formatting
const dateFormatter = new Intl.DateTimeFormat('nl-NL', {
  weekday: 'short',
  day: '2-digit',
  month: '2-digit',
})

function formatDate(iso: string) {
  if (!iso)
    return ''

  return dateFormatter.format(new Date(iso))
}

// Selected shift for detail panel (resolved from store ID)
const selectedShift = computed(() => {
  if (!shiftDetailStore.selectedShiftId || !shifts.value)
    return null

  return shifts.value.find(s => s.id === shiftDetailStore.selectedShiftId) ?? null
})

// Success snackbar
const showSuccess = ref(false)
const successMessage = ref('')
const successColor = ref('success')

function onSectionUpdated() {
  successMessage.value = 'Sectie bijgewerkt.'
  successColor.value = 'success'
  showSuccess.value = true
}

function onSectionCreated(payload: { name: string; redirectedToParent: boolean; parentEventName?: string }) {
  if (payload.redirectedToParent) {
    successMessage.value = `Sectie '${payload.name}' aangemaakt op festival-niveau (${payload.parentEventName}). Zichtbaar in alle programmaonderdelen.`
    successColor.value = 'info'
  }
  else {
    successMessage.value = 'Sectie aangemaakt.'
    successColor.value = 'success'
  }
  showSuccess.value = true
}
</script>

<template>
  <!-- ═══════════════════════════════════════════════════════════ -->
  <!-- SECTIONS + SHIFTS (two-column layout)                     -->
  <!-- ═══════════════════════════════════════════════════════════ -->
  <VRow>
    <!-- LEFT COLUMN — Sections list -->
    <VCol
      cols="12"
      md="3"
      style="min-inline-size: 320px; max-inline-size: 380px;"
    >
      <VCard>
        <VCardTitle class="d-flex align-center justify-space-between">
          <div class="d-flex align-center gap-x-2">
            <span>Secties</span>

            <!-- Contextual help tooltip -->
            <InfoTooltip v-if="isSubEvent && parentEvent">
              <p>
                Sommige secties zijn <strong>festival-breed</strong>: ze zijn bij elk
                programmaonderdeel actief en worden centraal beheerd. Je herkent ze aan
                de festivalnaam achter de sectienaam.
              </p>
              <div class="mt-2 pa-2 bg-surface rounded text-caption">
                <strong>Voorbeeld:</strong> EHBO en Security zijn festival-breed — ze
                staan bij elk programmaonderdeel.
              </div>
            </InfoTooltip>
            <VTooltip
              v-else
              location="bottom"
              max-width="300"
            >
              <template #activator="{ props: tooltipProps }">
                <VIcon
                  v-bind="tooltipProps"
                  icon="tabler-info-circle"
                  size="18"
                  class="text-disabled"
                />
              </template>
              Secties zijn de operationele afdelingen van je evenement (bijv. Bar, Security, Hospitality). Elke sectie heeft eigen shifts en teamleden.
            </VTooltip>
          </div>
          <VBtn
            icon="tabler-plus"
            variant="text"
            size="small"
            @click="isCreateSectionOpen = true"
          />
        </VCardTitle>

        <!-- Loading -->
        <VSkeletonLoader
          v-if="sectionsLoading"
          type="list-item@4"
        />

        <!-- Empty -->
        <VCardText
          v-else-if="!sections?.length"
          class="text-center text-disabled"
        >
          Geen secties — maak er een aan
        </VCardText>

        <!-- Section list -->
        <Draggable
          v-else
          v-model="sections"
          item-key="id"
          ghost-class="section-ghost"
          chosen-class="section-chosen"
          drag-class="section-drag"
          :animation="200"
          :delay="100"
          delay-on-touch-only
          direction="vertical"
          class="v-list v-list--nav v-list--density-compact"
          @end="onDragEnd"
        >
          <template #item="{ element }">
            <VListItem
              :active="element.id === activeSectionId"
              color="primary"
              class="section-item"
              @click="activeSectionId = element.id"
            >
              <template #prepend>
                <VIcon
                  v-if="element.icon"
                  :icon="element.icon"
                  size="16"
                  class="me-1"
                />
              </template>
              <VListItemTitle>
                <span>{{ element.name }}</span>
                <span
                  v-if="element.type === 'cross_event' && parentEvent"
                  class="text-caption text-medium-emphasis ms-1"
                >
                  · {{ parentEvent.name }}
                </span>
              </VListItemTitle>
            </VListItem>
          </template>
        </Draggable>
      </VCard>
    </VCol>

    <!-- RIGHT COLUMN — Shifts for active section -->
    <VCol>
      <!-- No section selected -->
      <VCard
        v-if="!activeSection"
        class="text-center pa-8"
      >
        <VIcon
          icon="tabler-layout-grid"
          size="48"
          class="mb-4 text-disabled"
        />
        <p class="text-body-1 text-disabled">
          Selecteer een sectie om shifts te beheren
        </p>
      </VCard>

      <!-- Section selected -->
      <template v-else>
        <!-- Context banner for cross_event sections viewed from sub-event -->
        <VAlert
          v-if="activeSection.type === 'cross_event' && isSubEvent && parentEvent"
          type="info"
          variant="tonal"
          density="compact"
          class="mb-4"
        >
          <div class="d-flex justify-space-between align-center flex-wrap gap-2">
            <span>
              Je bekijkt {{ activeSection.name }} vanuit
              <strong>{{ eventDetail?.name }}</strong>
            </span>
            <RouterLink
              :to="{ name: 'events-id-sections', params: { id: activeSection.event_id } }"
              class="text-caption"
            >
              Bekijk alle diensten
            </RouterLink>
          </div>
        </VAlert>

        <!-- Header -->
        <VCard class="mb-4">
          <VCardTitle class="d-flex align-center justify-space-between flex-wrap gap-2">
            <div class="d-flex align-center gap-x-2">
              <VIcon
                v-if="activeSection.icon"
                :icon="activeSection.icon"
                size="20"
              />
              <span>{{ activeSection.name }}</span>
              <VChip
                v-if="activeSection.type === 'cross_event'"
                size="small"
                color="info"
                variant="tonal"
              >
                festival-breed
              </VChip>
              <span
                v-if="activeSection.crew_need"
                class="text-body-2 text-disabled"
              >
                Crew nodig: {{ activeSection.crew_need }}
              </span>
            </div>
            <div class="d-flex align-center gap-x-2">
              <!-- Contextual help tooltip on shifts -->
              <VTooltip
                location="bottom"
                max-width="300"
              >
                <template #activator="{ props: tooltipProps }">
                  <VIcon
                    v-bind="tooltipProps"
                    icon="tabler-info-circle"
                    size="18"
                    class="text-disabled"
                  />
                </template>
                Een shift is een concrete taak binnen een sectie, gekoppeld aan een time slot. Stel het aantal plekken in en bepaal hoeveel daarvan door vrijwilligers geclaimd kunnen worden.
              </VTooltip>

              <VBtn
                size="small"
                variant="tonal"
                prepend-icon="tabler-plus"
                @click="onAddShift"
              >
                Shift
              </VBtn>
              <VBtn
                size="small"
                variant="tonal"
                icon="tabler-edit"
                @click="onEditSection"
              />
              <VBtn
                size="small"
                variant="tonal"
                icon="tabler-trash"
                color="error"
                @click="onDeleteSectionConfirm(activeSection)"
              />
            </div>
          </VCardTitle>
        </VCard>

        <!-- Loading shifts -->
        <VSkeletonLoader
          v-if="shiftsLoading"
          type="card@3"
        />

        <!-- No shifts -->
        <VCard
          v-else-if="!shifts?.length"
          class="text-center pa-8"
        >
          <VIcon
            icon="tabler-calendar-time"
            size="48"
            class="mb-4 text-disabled"
          />
          <p class="text-body-1 text-disabled mb-4">
            Nog geen shifts voor deze sectie
          </p>
          <VBtn
            prepend-icon="tabler-plus"
            @click="onAddShift"
          >
            Shift toevoegen
          </VBtn>
        </VCard>

        <!-- Shifts grouped by time slot -->
        <template v-else>
          <VCard
            v-for="(group, gi) in shiftsByTimeSlot"
            :key="gi"
            class="mb-4"
          >
            <!-- Group header -->
            <VCardTitle class="d-flex align-center justify-space-between">
              <div>
                <span>{{ group.timeSlotName }}</span>
                <span class="text-body-2 text-disabled ms-2">
                  {{ formatDate(group.date) }} {{ group.startTime }}–{{ group.endTime }}
                </span>
              </div>
              <span class="text-body-2">
                {{ group.filledSlots }}/{{ group.totalSlots }} ingevuld
              </span>
            </VCardTitle>

            <VDivider />

            <!-- Shifts in group -->
            <VList density="compact">
              <VListItem
                v-for="shift in group.shifts"
                :key="shift.id"
              >
                <div class="d-flex align-center gap-x-3 py-1 flex-wrap">
                  <!-- Title + lead badge -->
                  <div
                    class="d-flex align-center gap-x-2"
                    style="min-inline-size: 160px;"
                  >
                    <span class="text-body-1 font-weight-medium">
                      {{ shift.title ?? 'Shift' }}
                    </span>
                    <VChip
                      v-if="shift.is_lead_role"
                      size="x-small"
                      color="warning"
                    >
                      Hoofdrol
                    </VChip>
                  </div>

                  <!-- Fill rate -->
                  <div
                    class="d-flex align-center gap-x-2"
                    style="min-inline-size: 160px;"
                  >
                    <VProgressLinear
                      :model-value="shift.is_overbooked ? 100 : shift.fill_rate"
                      :color="fillRateColor(shift)"
                      height="8"
                      rounded
                      style="inline-size: 80px;"
                    />
                    <span class="text-body-2 text-no-wrap">
                      {{ shift.filled_slots }}/{{ shift.slots_total }}
                    </span>
                    <VIcon
                      v-if="shift.is_overbooked"
                      icon="tabler-alert-triangle"
                      size="16"
                      color="warning"
                    />
                  </div>

                  <!-- Status -->
                  <VChip
                    :color="statusColor[shift.status]"
                    size="small"
                  >
                    {{ statusLabel[shift.status] }}
                  </VChip>
                  <VChip
                    v-if="shift.is_overbooked"
                    color="warning"
                    size="small"
                    prepend-icon="tabler-alert-triangle"
                  >
                    Overbezet
                  </VChip>

                  <VSpacer />

                  <!-- Actions -->
                  <div class="d-flex gap-x-1">
                    <VBtn
                      icon
                      variant="text"
                      size="small"
                      @click="shiftDetailStore.openPanel(shift.id, activeSection!.id)"
                    >
                      <VIcon size="18">
                        tabler-eye
                      </VIcon>
                      <VTooltip activator="parent">
                        Details bekijken
                      </VTooltip>
                    </VBtn>
                    <VBtn
                      icon="tabler-user-plus"
                      variant="text"
                      size="small"
                      title="Toewijzen"
                      @click="onAssignShift(shift)"
                    />
                    <VBtn
                      icon="tabler-edit"
                      variant="text"
                      size="small"
                      title="Bewerken"
                      @click="onEditShift(shift)"
                    />
                    <VBtn
                      icon="tabler-trash"
                      variant="text"
                      size="small"
                      color="error"
                      title="Verwijderen"
                      @click="onDeleteShiftConfirm(shift)"
                    />
                  </div>
                </div>
              </VListItem>
            </VList>
          </VCard>
        </template>
      </template>
    </VCol>
  </VRow>

  <!-- ═══════════════════════════════════════════════════════════ -->
  <!-- DIALOGS                                                   -->
  <!-- ═══════════════════════════════════════════════════════════ -->
  <CreateSectionDialog
    v-model="isCreateSectionOpen"
    :event-id="eventId"
    :is-sub-event="isSubEvent"
    :next-sort-order="sections.length"
    @created="onSectionCreated"
  />

  <EditSectionDialog
    v-model="isEditSectionOpen"
    :event-id="activeSectionEventId"
    :section="activeSection"
    @updated="onSectionUpdated"
  />

  <CreateShiftDialog
    v-if="activeSection"
    v-model="isCreateShiftOpen"
    :event-id="activeSectionEventId"
    :section-id="activeSection.id"
    :section="activeSection"
    :shift="editingShift"
    :is-sub-event="isSubEvent"
  />

  <AssignPersonDialog
    v-if="activeSection"
    v-model="isAssignShiftOpen"
    :event-id="activeSectionEventId"
    :section-id="activeSection.id"
    :shift="assigningShift"
  />

  <!-- Delete section confirmation -->
  <VDialog
    v-model="isDeleteSectionOpen"
    max-width="400"
  >
    <VCard title="Sectie verwijderen">
      <VCardText>
        Weet je zeker dat je deze sectie en alle bijbehorende shifts wilt verwijderen?
      </VCardText>
      <VCardActions>
        <VSpacer />
        <VBtn
          variant="text"
          @click="isDeleteSectionOpen = false"
        >
          Annuleren
        </VBtn>
        <VBtn
          color="error"
          @click="onDeleteSectionExecute"
        >
          Verwijderen
        </VBtn>
      </VCardActions>
    </VCard>
  </VDialog>

  <!-- Delete shift confirmation -->
  <VDialog
    v-model="isDeleteShiftOpen"
    max-width="400"
  >
    <VCard title="Shift verwijderen">
      <VCardText>
        Weet je zeker dat je deze shift wilt verwijderen?
      </VCardText>
      <VCardActions>
        <VSpacer />
        <VBtn
          variant="text"
          @click="isDeleteShiftOpen = false"
        >
          Annuleren
        </VBtn>
        <VBtn
          color="error"
          :loading="isDeleting"
          @click="onDeleteShiftExecute"
        >
          Verwijderen
        </VBtn>
      </VCardActions>
    </VCard>
  </VDialog>

  <!-- Shift detail side panel -->
  <ShiftDetailPanel
    v-model="shiftDetailStore.isOpen"
    :event-id="activeSectionEventId"
    :shift="selectedShift"
  />

  <!-- Success snackbar -->
  <VSnackbar
    v-model="showSuccess"
    :color="successColor"
    :timeout="4000"
  >
    {{ successMessage }}
  </VSnackbar>
</template>

<style scoped>
.section-item {
  cursor: grab;
}

:deep(.section-ghost) {
  opacity: 0.4;
  background: rgb(var(--v-theme-primary), 0.08);
  border-radius: 8px;
}

:deep(.section-chosen) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: scale(1.02);
  border-radius: 8px;
  background: rgb(var(--v-theme-surface));
}

:deep(.section-drag) {
  cursor: grabbing;
}
</style>
