crewli-old/apps/app/src/composables/useTimeSlotDropdown.ts

import { type Ref, computed } from 'vue'
import type { EventItem } from '@/types/event'
import type { FestivalSection } from '@/types/section'
import type { TimeSlot } from '@/types/timeSlot'

export type DropdownScenario = 'flat' | 'sub_event_standard' | 'cross_event' | 'festival_standard'

export interface TimeSlotDropdownItem {
  id: string
  name: string
  timeRange: string
  displayLabel: string
  _isDimmed: boolean
  groupName: string
}

interface TooltipContent {
  main: string
  tip: string
}

export function useTimeSlotDropdown(
  event: Ref<EventItem | null | undefined>,
  section: Ref<FestivalSection | null | undefined>,
) {
  const scenario = computed<DropdownScenario>(() => {
    if (!event.value)
      return 'flat'

    const isSubEvent = !!event.value.parent_event_id
    const hasChildren = event.value.has_children
    const isCrossEvent = section.value?.type === 'cross_event'

    // Flat event — no hierarchy
    if (!isSubEvent && !hasChildren)
      return 'flat'

    // Cross_event section — needs all time slots
    if (isCrossEvent)
      return 'cross_event'

    // Standard section on sub-event — own + parent
    if (isSubEvent)
      return 'sub_event_standard'

    // Standard section on festival level — own only
    return 'festival_standard'
  })

  const showInfoTooltip = computed(() => scenario.value !== 'flat')

  const hasGroups = computed(() => scenario.value !== 'flat')

  const tooltipText = computed<TooltipContent | null>(() => {
    const eventName = event.value?.name ?? ''
    const sectionName = section.value?.name ?? ''
    const festivalName = event.value?.parent?.name ?? eventName

    switch (scenario.value) {
      case 'sub_event_standard':
        return {
          main: `Kies het tijdvenster voor deze dienst. Je ziet de tijdsloten van ${eventName} en de algemene tijdsloten van ${festivalName}.`,
          tip: `Voor een reguliere dienst kies je een tijdslot van ${eventName}. Voor een opbouw- of afbraakdienst kies je een festivaltijdslot.`,
        }
      case 'cross_event':
        return {
          main: `${sectionName} is een festival-brede sectie — actief bij elk programmaonderdeel. Je kunt tijdsloten kiezen van ${festivalName} en van alle programmaonderdelen.`,
          tip: 'Plan diensten per programmaonderdeel (bijv. een showavond) of festival-breed (bijv. opbouw, nachtsecurity).',
        }
      case 'festival_standard':
        return {
          main: `Kies een tijdslot van ${eventName} voor deze dienst.`,
          tip: 'Alleen tijdsloten op festivalniveau zijn beschikbaar voor deze sectie.',
        }
      default:
        return null
    }
  })

  const fetchParams = computed(() => {
    switch (scenario.value) {
      case 'flat':
      case 'festival_standard':
        return { includeParent: false, includeChildren: false }

      case 'sub_event_standard':
        return { includeParent: true, includeChildren: false }

      case 'cross_event':
        return { includeParent: false, includeChildren: true }

      default:
        return { includeParent: false, includeChildren: false }
    }
  })

  /**
   * Returns a flat array of selectable items sorted by group
   * (own event first, then others). Group boundaries are detected
   * in the template by comparing adjacent items' groupName.
   */
  function sortedItems(timeSlots: TimeSlot[]): TimeSlotDropdownItem[] {
    if (scenario.value === 'flat')
      return timeSlots.map(ts => toDropdownItem(ts, false, ''))

    // Classify each slot into a group and determine isOwn per group
    const groups = new Map<string, { slots: TimeSlot[]; isOwn: boolean }>()
    for (const ts of timeSlots) {
      const key = ts.event_name ?? 'Onbekend'
      if (!groups.has(key)) {
        const isOwn = scenario.value === 'sub_event_standard'
          ? ts.source === 'sub_event'
          : ts.source === 'own'

        groups.set(key, { slots: [], isOwn })
      }
      groups.get(key)!.slots.push(ts)
    }

    // Own group first, then others alphabetically
    const sorted = [...groups.entries()].sort(([nameA, a], [nameB, b]) => {
      if (a.isOwn && !b.isOwn)
        return -1
      if (!a.isOwn && b.isOwn)
        return 1

      return nameA.localeCompare(nameB)
    })

    const items: TimeSlotDropdownItem[] = []
    for (const [groupName, { slots, isOwn }] of sorted) {
      const isDimmed = scenario.value === 'sub_event_standard' && !isOwn
      for (const ts of slots)
        items.push(toDropdownItem(ts, isDimmed, groupName))
    }

    return items
  }

  return {
    scenario,
    showInfoTooltip,
    hasGroups,
    tooltipText,
    fetchParams,
    sortedItems,
  }
}

function toDropdownItem(ts: TimeSlot, isDimmed: boolean, groupName: string): TimeSlotDropdownItem {
  const timeRange = `${ts.start_time} – ${ts.end_time}`

  return {
    id: ts.id,
    name: ts.name,
    timeRange,
    displayLabel: ts.name,
    _isDimmed: isDimmed,
    groupName,
  }
}