// event-manager.js — Event creation, editing, drag/drop, and selection logic
import {
  toLocalString,
  fromLocalString,
  daysInclusive,
  addDaysStr,
  formatDateRange
} from './date-utils.js'

export class EventManager {
  constructor(calendar) {
    this.calendar = calendar
    this.events = new Map() // Map of date strings to arrays of events
    
    // Selection state
    this.selStart = null
    this.selEnd = null
    this.isDragging = false
    this.dragAnchor = null
    
    // Event drag state
  this.dragEventState = null
    this.justDragged = false
    this._eventDragMoved = false
    this._installedEventDrag = false
    
    this.setupEventDialog()
  }

  // -------- Selection Logic --------
  
  clampRange(anchorStr, otherStr) {
    if (this.calendar.config.select_days <= 1) return [otherStr, otherStr]
    const limit = this.calendar.config.select_days
    const forward = fromLocalString(otherStr) >= fromLocalString(anchorStr)
    const span = daysInclusive(anchorStr, otherStr)
    if (span <= limit) {
      const a = [anchorStr, otherStr].sort()
      return [a[0], a[1]]
    }
    if (forward) return [anchorStr, addDaysStr(anchorStr, limit - 1)]
    return [addDaysStr(anchorStr, -(limit - 1)), anchorStr]
  }

  setSelection(aStr, bStr) {
    const [start, end] = this.clampRange(aStr, bStr)
    this.selStart = start
    this.selEnd = end
    this.applySelectionToVisible()
    this.calendar.selectedDateInput.value = formatDateRange(fromLocalString(start), fromLocalString(end))
  }

  clearSelection() {
    this.selStart = null
    this.selEnd = null
    for (const [, weekEl] of this.calendar.visibleWeeks) {
      weekEl.querySelectorAll('.cell.selected').forEach(c => c.classList.remove('selected'))
    }
    this.calendar.selectedDateInput.value = ''
  }

  applySelectionToVisible() {
    for (const [, weekEl] of this.calendar.visibleWeeks) {
      const cells = weekEl.querySelectorAll('.cell[data-date]')
      for (const cell of cells) {
        if (!this.selStart || !this.selEnd) {
          cell.classList.remove('selected')
          continue
        }
        const ds = cell.dataset.date
        const inRange = ds >= this.selStart && ds <= this.selEnd
        cell.classList.toggle('selected', inRange)
      }
    }
  }

  startDrag(dateStr) {
    if (this.calendar.config.select_days === 0) return
    this.isDragging = true
    this.dragAnchor = dateStr
    this.setSelection(dateStr, dateStr)
  }

  updateDrag(dateStr) {
    if (!this.isDragging) return
    this.setSelection(this.dragAnchor, dateStr)
    document.body.style.cursor = 'default'
  }

  endDrag(dateStr) {
    if (!this.isDragging) return
    this.isDragging = false
    this.setSelection(this.dragAnchor, dateStr)
    document.body.style.cursor = 'default'
    if (this.selStart && this.selEnd) {
      setTimeout(() => this.showEventDialog('create'), 50)
    }
  }

  // -------- Event Management --------

  generateId() {
    try {
      if (window.crypto && typeof window.crypto.randomUUID === 'function') {
        return window.crypto.randomUUID()
      }
    } catch {}
    return 'e-' + Math.random().toString(36).slice(2, 10) + '-' + Date.now().toString(36)
  }

  createEvent(eventData) {
    const singleDay = eventData.startDate === eventData.endDate
    const event = {
  id: this.generateId(),
      title: eventData.title,
      startDate: eventData.startDate,
      endDate: eventData.endDate,
      colorId: eventData.colorId ?? this.selectEventColorId(eventData.startDate, eventData.endDate),
      startTime: singleDay ? (eventData.startTime || '09:00') : null,
      durationMinutes: singleDay ? (eventData.durationMinutes || 60) : null,
      // Repeat metadata
      repeat: eventData.repeat || 'none',
      repeatCount: eventData.repeatCount || 'unlimited',
      isRepeating: (eventData.repeat && eventData.repeat !== 'none')
    }

    const startDate = new Date(fromLocalString(event.startDate))
    const endDate = new Date(fromLocalString(event.endDate))

    for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
      const dateStr = toLocalString(d)
      if (!this.events.has(dateStr)) this.events.set(dateStr, [])
      this.events.get(dateStr).push({ ...event, isSpanning: startDate < endDate })
    }

  this.calendar.forceUpdateVisibleWeeks()
  return event.id
  }

  createEventWithRepeat(eventData) {
    // Just create a single event with repeat metadata
  return this.createEvent(eventData)
  }

  terminateRepeatSeriesAtIndex(baseEventId, terminateAtIndex) {
    // Find the base event and modify its repeat count to stop before the termination index
    for (const [, eventList] of this.events) {
      const baseEvent = eventList.find(e => e.id === baseEventId)
      if (baseEvent && baseEvent.isRepeating) {
        // Set the repeat count to stop just before the termination index
        baseEvent.repeatCount = terminateAtIndex.toString()
        break
      }
    }
  }

  moveRepeatSeries(baseEventId, newStartDateStr, newEndDateStr, mode) {
    // Find the base event and update its dates, which will shift the entire series
    for (const [, eventList] of this.events) {
      const baseEvent = eventList.find(e => e.id === baseEventId)
      if (baseEvent && baseEvent.isRepeating) {
        const oldStartDate = baseEvent.startDate
        const oldEndDate = baseEvent.endDate
        
        let updatedStartDate, updatedEndDate
        if (mode === 'move') {
          const spanDays = daysInclusive(oldStartDate, oldEndDate)
          updatedStartDate = newStartDateStr
          updatedEndDate = addDaysStr(newStartDateStr, spanDays - 1)
        } else {
          updatedStartDate = newStartDateStr
          updatedEndDate = newEndDateStr
        }
        
        // Update the base event with the new dates
        const updated = {
          ...baseEvent,
          startDate: updatedStartDate,
          endDate: updatedEndDate
        }
        
        this.updateEventDatesAndReindex(baseEventId, updated)
        break
      }
    }
  }

  generateRepeatOccurrences(baseEvent, targetDateStr) {
    if (!baseEvent.isRepeating || baseEvent.repeat === 'none') {
      return []
    }

    const targetDate = new Date(fromLocalString(targetDateStr))
    const baseStartDate = new Date(fromLocalString(baseEvent.startDate))
    const baseEndDate = new Date(fromLocalString(baseEvent.endDate))
    const spanDays = Math.floor((baseEndDate - baseStartDate) / (24 * 60 * 60 * 1000))
    
    const occurrences = []
    
    // Calculate how many intervals have passed since the base event
    let intervalsPassed = 0
    const timeDiff = targetDate - baseStartDate
    
    switch (baseEvent.repeat) {
      case 'daily':
        intervalsPassed = Math.floor(timeDiff / (24 * 60 * 60 * 1000))
        break
      case 'weekly':
        intervalsPassed = Math.floor(timeDiff / (7 * 24 * 60 * 60 * 1000))
        break
      case 'biweekly':
        intervalsPassed = Math.floor(timeDiff / (14 * 24 * 60 * 60 * 1000))
        break
      case 'monthly':
        intervalsPassed = Math.floor((targetDate.getFullYear() - baseStartDate.getFullYear()) * 12 + 
                                   (targetDate.getMonth() - baseStartDate.getMonth()))
        break
      case 'yearly':
        intervalsPassed = targetDate.getFullYear() - baseStartDate.getFullYear()
        break
    }
    
    // Check a few occurrences around the target date
    for (let i = Math.max(0, intervalsPassed - 2); i <= intervalsPassed + 2; i++) {
      const maxOccurrences = baseEvent.repeatCount === 'unlimited' ? Infinity : parseInt(baseEvent.repeatCount, 10)
      if (i >= maxOccurrences) break
      
      const currentStart = new Date(baseStartDate)
      
      switch (baseEvent.repeat) {
        case 'daily':
          currentStart.setDate(baseStartDate.getDate() + i)
          break
        case 'weekly':
          currentStart.setDate(baseStartDate.getDate() + i * 7)
          break
        case 'biweekly':
          currentStart.setDate(baseStartDate.getDate() + i * 14)
          break
        case 'monthly':
          currentStart.setMonth(baseStartDate.getMonth() + i)
          break
        case 'yearly':
          currentStart.setFullYear(baseStartDate.getFullYear() + i)
          break
      }
      
      const currentEnd = new Date(currentStart)
      currentEnd.setDate(currentStart.getDate() + spanDays)
      
      // Check if this occurrence intersects with the target date
      const currentStartStr = toLocalString(currentStart)
      const currentEndStr = toLocalString(currentEnd)
      
      if (currentStartStr <= targetDateStr && targetDateStr <= currentEndStr) {
        occurrences.push({
          ...baseEvent,
          id: `${baseEvent.id}_repeat_${i}`,
          startDate: currentStartStr,
          endDate: currentEndStr,
          isRepeatOccurrence: true,
          repeatIndex: i
        })
      }
    }
    
    return occurrences
  }

  getEventById(id) {
    // Check for base events first
    for (const [, list] of this.events) {
      const found = list.find(e => e.id === id)
      if (found) return found
    }
    
    // Check if it's a repeat occurrence ID (format: baseId_repeat_index)
    if (typeof id === 'string' && id.includes('_repeat_')) {
      const parts = id.split('_repeat_')
      const baseId = parts[0] // baseId is a string (UUID or similar)
      const repeatIndex = parseInt(parts[1], 10)
      
      if (isNaN(repeatIndex)) return null
      
      const baseEvent = this.getEventById(baseId)
      if (baseEvent && baseEvent.isRepeating) {
        // Generate the specific occurrence
        const baseStartDate = new Date(fromLocalString(baseEvent.startDate))
        const baseEndDate = new Date(fromLocalString(baseEvent.endDate))
        const spanDays = Math.floor((baseEndDate - baseStartDate) / (24 * 60 * 60 * 1000))
        
        const currentStart = new Date(baseStartDate)
        switch (baseEvent.repeat) {
          case 'daily':
            currentStart.setDate(baseStartDate.getDate() + repeatIndex)
            break
          case 'weekly':
            currentStart.setDate(baseStartDate.getDate() + repeatIndex * 7)
            break
          case 'biweekly':
            currentStart.setDate(baseStartDate.getDate() + repeatIndex * 14)
            break
          case 'monthly':
            currentStart.setMonth(baseStartDate.getMonth() + repeatIndex)
            break
          case 'yearly':
            currentStart.setFullYear(baseStartDate.getFullYear() + repeatIndex)
            break
        }
        
        const currentEnd = new Date(currentStart)
        currentEnd.setDate(currentStart.getDate() + spanDays)
        
        return {
          ...baseEvent,
          id: id,
          startDate: toLocalString(currentStart),
          endDate: toLocalString(currentEnd),
          isRepeatOccurrence: true,
          repeatIndex: repeatIndex,
          baseEventId: baseId
        }
      }
    }
    
    return null
  }

  selectEventColorId(startDateStr, endDateStr) {
    const colorCounts = [0, 0, 0, 0, 0, 0, 0, 0]
    const startDate = new Date(fromLocalString(startDateStr))
    const endDate = new Date(fromLocalString(endDateStr))

    for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) {
      const dateStr = toLocalString(d)
      const dayEvents = this.events.get(dateStr) || []
      for (const event of dayEvents) {
        if (event.colorId >= 0 && event.colorId < 8) {
          colorCounts[event.colorId]++
        }
      }
    }

    let minCount = colorCounts[0]
    let selectedColor = 0

    for (let colorId = 1; colorId < 8; colorId++) {
      if (colorCounts[colorId] < minCount) {
        minCount = colorCounts[colorId]
        selectedColor = colorId
      }
    }

    return selectedColor
  }

  applyEventEdit(eventId, data) {
    const current = this.getEventById(eventId)
    if (!current) return
    const newStart = data.startDate || current.startDate
    const newEnd = data.endDate || current.endDate
    const datesChanged = (newStart !== current.startDate) || (newEnd !== current.endDate)
    if (datesChanged) {
      const multi = daysInclusive(newStart, newEnd) > 1
      const payload = {
        ...current,
        title: data.title.trim(),
        colorId: data.colorId,
        startDate: newStart,
        endDate: newEnd,
        startTime: multi ? null : (data.startTime ?? current.startTime),
        durationMinutes: multi ? null : (data.duration ?? current.durationMinutes)
      }
      this.updateEventDatesAndReindex(eventId, payload)
      this.calendar.forceUpdateVisibleWeeks()
      return
    }
    // No date change: update in place across instances
    for (const [, list] of this.events) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].id === eventId) {
          const isMulti = list[i].startDate !== list[i].endDate
          list[i] = {
            ...list[i],
            title: data.title.trim(),
            colorId: data.colorId,
            startTime: isMulti ? null : data.startTime,
            durationMinutes: isMulti ? null : data.duration,
            // Update repeat metadata
            repeat: data.repeat || list[i].repeat || 'none',
            repeatCount: data.repeatCount || list[i].repeatCount || 'unlimited',
            isRepeating: (data.repeat && data.repeat !== 'none') || (list[i].repeat && list[i].repeat !== 'none')
          }
        }
      }
    }
    this.calendar.forceUpdateVisibleWeeks()
  }

  updateEventDatesAndReindex(eventId, updated) {
    // Remove old instances
    for (const [date, list] of this.events) {
      const idx = list.findIndex(e => e.id === eventId)
      if (idx !== -1) list.splice(idx, 1)
      if (list.length === 0) this.events.delete(date)
    }
    // Re-add across new range
    const start = new Date(fromLocalString(updated.startDate))
    const end = new Date(fromLocalString(updated.endDate))
    const base = {
      id: updated.id,
      title: updated.title,
      colorId: updated.colorId,
      startDate: updated.startDate,
      endDate: updated.endDate,
      startTime: updated.startTime,
      durationMinutes: updated.durationMinutes,
      // Preserve repeat metadata
      repeat: updated.repeat || 'none',
      repeatCount: updated.repeatCount || 'unlimited',
      isRepeating: updated.isRepeating || false
    }
    for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
      const ds = toLocalString(d)
      if (!this.events.has(ds)) this.events.set(ds, [])
      this.events.get(ds).push({ ...base, isSpanning: start < end })
    }
  }

  // -------- Event Dialog --------

  setupEventDialog() {
    const tpl = document.createElement('template')
    tpl.innerHTML = `
      <div class="ec-modal-backdrop" part="backdrop" hidden>
        <div class="ec-modal" role="dialog" aria-modal="true" aria-labelledby="ec-modal-title">
          <form class="ec-form" novalidate>
            <header class="ec-header">
              <h2 id="ec-modal-title">Event</h2>
            </header>
            <div class="ec-body">
              <label class="ec-field">
                <span>Title</span>
                <input type="text" name="title" autocomplete="off" required />
              </label>
              <label class="ec-field">
                <span>Repeat</span>
                <select name="repeat">
                  <option value="none">No repeat</option>
                  <option value="daily">Daily</option>
                  <option value="weekly">Weekly</option>
                  <option value="biweekly">Every 2 weeks</option>
                  <option value="monthly">Monthly</option>
                  <option value="yearly">Yearly</option>
                </select>
              </label>
              <div class="ec-color-swatches">
                ${Array.from({ length: 8 }, (_, i) => `
                    <input class="swatch event-color-${i}" type="radio" name="colorId" value="${i}">
                `).join('')}
              </div>
            </div>
            <footer class="ec-footer">
              <button type="button" class="ec-btn" data-action="delete">Delete</button>
              <button type="submit" class="ec-btn primary">Save</button>
            </footer>
          </form>
        </div>
      </div>`

    document.body.appendChild(tpl.content)
    this.eventModal = document.querySelector('.ec-modal-backdrop')
    this.eventForm = this.eventModal.querySelector('form.ec-form')
    this.eventTitleInput = this.eventForm.elements['title']
    this.eventRepeatInput = this.eventForm.elements['repeat']
    this.eventColorInputs = Array.from(this.eventForm.querySelectorAll('input[name="colorId"]'))

    // Color selection visual state
    this.eventColorInputs.forEach(radio => {
      radio.addEventListener('change', () => {
        const swatches = this.eventForm.querySelectorAll('.ec-color-swatches .swatch')
        swatches.forEach(s => s.classList.toggle('selected', s.checked))
      })
    })

    this.eventForm.addEventListener('submit', e => {
      e.preventDefault()
      const data = this.readEventForm()
      if (!data.title.trim()) return
      
      if (this._dialogMode === 'create') {
        this.createEventWithRepeat({
          title: data.title.trim(),
          startDate: this.selStart,
          endDate: this.selEnd,
          colorId: data.colorId,
          repeat: data.repeat,
          repeatCount: data.repeatCount
        })
        this.clearSelection()
      } else if (this._dialogMode === 'edit' && this._editingEventId != null) {
        const editingEvent = this.getEventById(this._editingEventId)
        
        if (editingEvent && editingEvent.isRepeatOccurrence && editingEvent.repeatIndex > 0) {
          // Editing a repeat occurrence that's not the first one
          // Terminate the original series and create a new event
          this.terminateRepeatSeriesAtIndex(editingEvent.baseEventId, editingEvent.repeatIndex)
          this.createEventWithRepeat({
            title: data.title.trim(),
            startDate: editingEvent.startDate,
            endDate: editingEvent.endDate,
            colorId: data.colorId,
            repeat: data.repeat,
            repeatCount: data.repeatCount
          })
        } else {
          // Normal event edit
          this.applyEventEdit(this._editingEventId, {
            title: data.title.trim(),
            colorId: data.colorId,
            repeat: data.repeat,
            repeatCount: data.repeatCount
          })
        }
      }
      this.hideEventDialog()
    })

    this.eventForm.querySelector('[data-action="delete"]').addEventListener('click', () => {
      if (this._dialogMode === 'edit' && this._editingEventId) {
        const editingEvent = this.getEventById(this._editingEventId)
        
        if (editingEvent && editingEvent.isRepeatOccurrence && editingEvent.repeatIndex > 0) {
          // Deleting a repeat occurrence that's not the first one
          // Terminate the original series at this point
          this.terminateRepeatSeriesAtIndex(editingEvent.baseEventId, editingEvent.repeatIndex)
          this.calendar.forceUpdateVisibleWeeks()
        } else {
          // Normal event deletion - remove from ALL dates it spans across
          const datesToCleanup = []
          for (const [dateStr, eventList] of this.events) {
            const eventIndex = eventList.findIndex(event => event.id === this._editingEventId)
            if (eventIndex !== -1) {
              eventList.splice(eventIndex, 1)
              // Mark date for cleanup if empty
              if (eventList.length === 0) {
                datesToCleanup.push(dateStr)
              }
            }
          }
          // Clean up empty date entries
          datesToCleanup.forEach(dateStr => this.events.delete(dateStr))
          this.calendar.forceUpdateVisibleWeeks()
        }
      }
      this.hideEventDialog()
      if (this._dialogMode === 'create') this.clearSelection()
    })

    this.eventModal.addEventListener('click', e => {
      if (e.target === this.eventModal) this.hideEventDialog()
    })

    document.addEventListener('keydown', e => {
      if (this.eventModal.hidden) return
      if (e.key === 'Escape') {
        this.hideEventDialog()
        if (this._dialogMode === 'create') this.clearSelection()
      }
    })
  }

  showEventDialog(mode, opts = {}) {
    this._dialogMode = mode
    this._editingEventId = null

    if (mode === 'create') {
      this.eventTitleInput.value = ''
      this.eventRepeatInput.value = 'none'
      const suggested = this.selectEventColorId(this.selStart, this.selEnd)
      this.eventColorInputs.forEach(r => r.checked = Number(r.value) === suggested)
    } else if (mode === 'edit') {
      const ev = this.getEventById(opts.id)
      if (!ev) return
      this._editingEventId = ev.id
      
      // For repeat occurrences, get the base event's repeat settings
      let displayEvent = ev
      if (ev.isRepeatOccurrence && ev.baseEventId) {
        const baseEvent = this.getEventById(ev.baseEventId)
        if (baseEvent) {
          displayEvent = { ...ev, repeat: baseEvent.repeat, repeatCount: baseEvent.repeatCount }
        }
      }
      
      this.eventTitleInput.value = displayEvent.title || ''
      this.eventRepeatInput.value = displayEvent.repeat || 'none'
      this.eventColorInputs.forEach(r => r.checked = Number(r.value) === (displayEvent.colorId ?? 0))
    }
    this.eventModal.hidden = false
    setTimeout(() => this.eventTitleInput.focus(), 0)
  }

  hideEventDialog() {
    this.eventModal.hidden = true
  }

  readEventForm() {
    const colorId = Number(this.eventForm.querySelector('input[name="colorId"]:checked')?.value ?? 0)
    return {
      title: this.eventTitleInput.value,
      repeat: this.eventRepeatInput.value,
      repeatCount: 'unlimited', // Always unlimited
      colorId
    }
  }

  // -------- Event Drag & Drop --------

  installGlobalEventDragHandlers() {
    if (this._installedEventDrag) return
    this._installedEventDrag = true
    this._onPointerMoveEventDrag = e => this.onEventDragMove(e)
    this._onPointerUpEventDrag = e => this.onEventDragEnd(e)
    this._onPointerCancelEventDrag = e => this.onEventDragEnd(e)
    window.addEventListener('pointermove', this._onPointerMoveEventDrag)
    window.addEventListener('pointerup', this._onPointerUpEventDrag)
    window.addEventListener('pointercancel', this._onPointerCancelEventDrag)
    this._onWindowBlurEventDrag = () => this.onEventDragEnd()
    window.addEventListener('blur', this._onWindowBlurEventDrag)
  }

  removeGlobalEventDragHandlers() {
    if (!this._installedEventDrag) return
    window.removeEventListener('pointermove', this._onPointerMoveEventDrag)
    window.removeEventListener('pointerup', this._onPointerUpEventDrag)
    window.removeEventListener('pointercancel', this._onPointerCancelEventDrag)
    window.removeEventListener('blur', this._onWindowBlurEventDrag)
    this._installedEventDrag = false
  }

  onEventDragMove(e) {
  if (!this.dragEventState) return
  if (this.dragEventState.usingPointer && !(e && e.type && e.type.startsWith('pointer'))) return
  const pt = e
    
    // Check if we've moved far enough to consider this a real drag
    if (!this._eventDragMoved) {
      const dx = pt.clientX - this.dragEventState.pointerStartX
      const dy = pt.clientY - this.dragEventState.pointerStartY
      const distance = Math.sqrt(dx * dx + dy * dy)
      const minDragDistance = 5 // pixels
      
  if (distance < minDragDistance) return
      // Only prevent default when we actually start dragging
      if (e && e.cancelable) e.preventDefault()
      this._eventDragMoved = true
    } else {
      // Already dragging, continue to prevent default
      if (e && e.cancelable) e.preventDefault()
    }
    
  const hit = pt ? this.calendar.getDateUnderPointer(pt.clientX, pt.clientY) : null
  if (!hit || !hit.date) return
    const [s, en] = this.computeTentativeRangeFromPointer(hit.date)

    const ev = this.getEventById(this.dragEventState.id)
    if (!ev) {
      // If we already split and created a new base series, keep moving that
      if (this.dragEventState.splitNewBaseId) {
        this.moveRepeatSeries(this.dragEventState.splitNewBaseId, s, en, this.dragEventState.mode)
        this.calendar.forceUpdateVisibleWeeks()
      }
      return
    }

    // Snapshot origin once
    if (!this.dragEventState.originSnapshot) {
      this.dragEventState.originSnapshot = {
        baseId: ev.isRepeatOccurrence ? ev.baseEventId : ev.id,
        isRepeat: !!(ev.isRepeatOccurrence || ev.isRepeating),
        repeatIndex: ev.isRepeatOccurrence ? ev.repeatIndex : 0,
        startDate: ev.startDate,
        endDate: ev.endDate
      }
    }

    if (ev.isRepeatOccurrence) {
      // Live-move: if first occurrence, shift entire series; else split once then move the new future series
      if (ev.repeatIndex === 0) {
        this.moveRepeatSeries(ev.baseEventId, s, en, this.dragEventState.mode)
      } else {
        // Split only once
        if (!this.dragEventState.splitNewBaseId) {
          this.terminateRepeatSeriesAtIndex(ev.baseEventId, ev.repeatIndex)
          const base = this.getEventById(ev.baseEventId)
          if (base) {
            const newId = this.createEventWithRepeat({
              title: base.title,
              startDate: s,
              endDate: en,
              colorId: base.colorId,
              repeat: base.repeat,
              repeatCount: base.repeatCount
            })
            this.dragEventState.splitNewBaseId = newId
          }
        } else {
          this.moveRepeatSeries(this.dragEventState.splitNewBaseId, s, en, this.dragEventState.mode)
        }
      }
    } else {
      // Non-repeating: mutate directly and repaint
      const updated = { ...ev }
      if (this.dragEventState.mode === 'move') {
        const spanDays = daysInclusive(ev.startDate, ev.endDate)
        updated.startDate = s
        updated.endDate = addDaysStr(s, spanDays - 1)
      } else {
        if (s <= en) {
          updated.startDate = s
          updated.endDate = en
        }
      }

      let [ns, ne] = this.normalizeDateOrder(updated.startDate, updated.endDate)
      updated.startDate = ns
      updated.endDate = ne
      const multi = daysInclusive(updated.startDate, updated.endDate) > 1
      if (multi) {
        updated.startTime = null
        updated.durationMinutes = null
      } else {
        if (!updated.startTime) updated.startTime = '09:00'
        if (!updated.durationMinutes) updated.durationMinutes = 60
      }
      this.updateEventDatesAndReindex(ev.id, updated)
    }

    this.calendar.forceUpdateVisibleWeeks()
  }

  onEventDragEnd(e) {
    if (!this.dragEventState) return
    if (this.dragEventState.usingPointer && e && !(e.type && e.type.startsWith('pointer'))) {
      return
    }
    
    const st = this.dragEventState
    
    // If no actual drag movement occurred, do nothing (treat as click)
    if (!this._eventDragMoved) {
      // clean up only
      try {
        if (st.usingPointer && st.element && st.element.releasePointerCapture && e && e.pointerId != null) {
          st.element.releasePointerCapture(e.pointerId)
        }
      } catch {}
      this.dragEventState = null
      this.justDragged = false
      this._eventDragMoved = false
      this.removeGlobalEventDragHandlers()
      return
    }

    try {
      if (st.usingPointer && st.element && st.element.releasePointerCapture && e && e.pointerId != null) {
        st.element.releasePointerCapture(e.pointerId)
      }
    } catch {}
    
    this.dragEventState = null
    
    // Only set justDragged if we actually moved and dragged
    this.justDragged = !!this._eventDragMoved
    
    this._eventDragMoved = false
    this.removeGlobalEventDragHandlers()
    
  // We already applied live updates during drag; ensure final repaint
  if (this.justDragged) this.calendar.forceUpdateVisibleWeeks()
    
    // Clear justDragged flag after a short delay to allow click events to process
    if (this.justDragged) {
      setTimeout(() => { 
        this.justDragged = false 
      }, 100)
    }
  // no preview state to clear
  }

  computeTentativeRangeFromPointer(dropDateStr) {
    const st = this.dragEventState
    if (!st) return [null, null]
    const anchorOffset = st.anchorOffset || 0
    const spanDays = st.originSpanDays || daysInclusive(st.startDate, st.endDate)
    let startStr = st.startDate
    let endStr = st.endDate
    if (st.mode === 'move') {
      startStr = addDaysStr(dropDateStr, -anchorOffset)
      endStr = addDaysStr(startStr, spanDays - 1)
    } else if (st.mode === 'resize-left') {
      startStr = dropDateStr
      endStr = st.originalEndDate || st.endDate
    } else if (st.mode === 'resize-right') {
      startStr = st.originalStartDate || st.startDate
      endStr = dropDateStr
    }
    const [ns, ne] = this.normalizeDateOrder(startStr, endStr)
    return [ns, ne]
  }

  normalizeDateOrder(aStr, bStr) {
    if (!aStr) return [bStr, bStr]
    if (!bStr) return [aStr, aStr]
    return aStr <= bStr ? [aStr, bStr] : [bStr, aStr]
  }

  addEventsToWeek(weekEl) {
    const daysGrid = weekEl._daysGrid || weekEl.querySelector('.days-grid')
    const overlay = weekEl._overlay || weekEl.querySelector('.week-overlay')
    if (!daysGrid || !overlay) return

    const cells = Array.from(daysGrid.querySelectorAll('.cell[data-date]'))

    while (overlay.firstChild) overlay.removeChild(overlay.firstChild)

    const weekEvents = new Map()
    
    // Collect all repeating events from the entire events map
    const allRepeatingEvents = []
    for (const [, eventList] of this.events) {
      for (const event of eventList) {
        if (event.isRepeating && !allRepeatingEvents.some(e => e.id === event.id)) {
          allRepeatingEvents.push(event)
        }
      }
    }
    
    for (const cell of cells) {
      const dateStr = cell.dataset.date
      const events = this.events.get(dateStr) || []
      
      // Add regular events
      for (const ev of events) {
        if (!weekEvents.has(ev.id)) {
          weekEvents.set(ev.id, {
            ...ev,
            startDateInWeek: dateStr,
            endDateInWeek: dateStr,
            startIdx: cells.indexOf(cell),
            endIdx: cells.indexOf(cell)
          })
        } else {
          const w = weekEvents.get(ev.id)
          w.endDateInWeek = dateStr
          w.endIdx = cells.indexOf(cell)
        }
      }
      
      // Generate repeat occurrences for this date
      for (const baseEvent of allRepeatingEvents) {
        const repeatOccurrences = this.generateRepeatOccurrences(baseEvent, dateStr)
        for (const repeatEvent of repeatOccurrences) {
          // Skip if this is the original occurrence (already added above)
          if (repeatEvent.startDate === baseEvent.startDate) continue
          
          if (!weekEvents.has(repeatEvent.id)) {
            weekEvents.set(repeatEvent.id, {
              ...repeatEvent,
              startDateInWeek: dateStr,
              endDateInWeek: dateStr,
              startIdx: cells.indexOf(cell),
              endIdx: cells.indexOf(cell)
            })
          } else {
            const w = weekEvents.get(repeatEvent.id)
            w.endDateInWeek = dateStr
            w.endIdx = cells.indexOf(cell)
          }
        }
      }
    }

  // No special preview overlay logic: we mutate events live during drag

    const timeToMin = t => {
      if (typeof t !== 'string') return 1e9
      const m = t.match(/^(\d{2}):(\d{2})/)
      if (!m) return 1e9
      return Number(m[1]) * 60 + Number(m[2])
    }

    const spans = Array.from(weekEvents.values()).sort((a, b) => {
      if (a.startIdx !== b.startIdx) return a.startIdx - b.startIdx
      // Prefer longer spans to be placed first for packing
      const aLen = a.endIdx - a.startIdx
      const bLen = b.endIdx - b.startIdx
      if (aLen !== bLen) return bLen - aLen
      // Within the same day and same span length, order by start time
      const at = timeToMin(a.startTime)
      const bt = timeToMin(b.startTime)
      if (at !== bt) return at - bt
      // Stable fallback by id
  return String(a.id).localeCompare(String(b.id))
    })

    const rowsLastEnd = []
    for (const w of spans) {
      let placedRow = 0
      while (placedRow < rowsLastEnd.length && !(w.startIdx > rowsLastEnd[placedRow])) placedRow++
      if (placedRow === rowsLastEnd.length) rowsLastEnd.push(-1)
      rowsLastEnd[placedRow] = w.endIdx
      w._row = placedRow + 1
    }

    const numRows = Math.max(1, rowsLastEnd.length)

    // Decide between "comfortable" layout (with gaps, not stretched)
    // and "compressed" layout (fractional rows, no gaps) based on fit.
    const cs = getComputedStyle(overlay)
    const overlayHeight = overlay.getBoundingClientRect().height
    const marginTopPx = parseFloat(cs.marginTop) || 0
    const available = Math.max(0, overlayHeight - marginTopPx)
    const baseEm = parseFloat(cs.fontSize) || 16
    const rowPx = 1.2 * baseEm      // preferred row height ~ 1.2em
    const gapPx = 0.2 * baseEm      // preferred gap ~ .2em
    const needed = numRows * rowPx + (numRows - 1) * gapPx

    if (needed <= available) {
      // Comfortable: keep gaps and do not stretch rows to fill
      overlay.style.gridTemplateRows = `repeat(${numRows}, ${rowPx}px)`
      overlay.style.rowGap = `${gapPx}px`
    } else {
      // Compressed: use fractional rows so everything fits; remove gaps
      overlay.style.gridTemplateRows = `repeat(${numRows}, 1fr)`
      overlay.style.rowGap = '0'
    }

    // Create the spans
    for (const w of spans) this.createOverlaySpan(overlay, w, weekEl)
  }


  createOverlaySpan(overlay, w, weekEl) {
    const span = document.createElement('div')
    span.className = `event-span event-color-${w.colorId}`
    span.style.gridColumn = `${w.startIdx + 1} / ${w.endIdx + 2}`
    span.style.gridRow = `${w._row}`
    span.textContent = w.title
    span.title = `${w.title} (${w.startDate === w.endDate ? w.startDate : w.startDate + ' - ' + w.endDate})`
    span.dataset.eventId = String(w.id)
    if (this.dragEventState && this.dragEventState.id === w.id) span.classList.add('dragging')

    // Click opens edit if not dragging
    span.addEventListener('click', e => {
      e.stopPropagation()
      
      // Only block if we actually dragged (moved the mouse)
      if (this.justDragged) return
      
      this.showEventDialog('edit', { id: w.id })
    })

    // Add resize handles
    const left = document.createElement('div')
    left.className = 'resize-handle left'
    const right = document.createElement('div')
    right.className = 'resize-handle right'
    span.appendChild(left)
    span.appendChild(right)

    // Pointer down handlers
  const onPointerDown = (mode, ev) => {
      // Prevent duplicate handling if we already have a drag state
      if (this.dragEventState) return
      
      // Don't prevent default immediately - let click events through
      ev.stopPropagation()
  const point = ev
  const hitAtStart = this.calendar.getDateUnderPointer(point.clientX, point.clientY)
      this.dragEventState = {
        mode,
        id: w.id,
        originWeek: weekEl,
        originStartIdx: w.startIdx,
        originEndIdx: w.endIdx,
        pointerStartX: point.clientX,
        pointerStartY: point.clientY,
        startDate: w.startDate,
        endDate: w.endDate,
  usingPointer: ev.type && ev.type.startsWith('pointer')
      }
      // compute anchor offset within the event based on where the pointer is
      const spanDays = daysInclusive(w.startDate, w.endDate)
      let anchorOffset = 0
      if (hitAtStart && hitAtStart.date) {
        const anchorDate = hitAtStart.date
        // clamp anchorDate to within event span
        if (anchorDate < w.startDate) anchorOffset = 0
        else if (anchorDate > w.endDate) anchorOffset = spanDays - 1
        else anchorOffset = daysInclusive(w.startDate, anchorDate) - 1
      }
      this.dragEventState.anchorOffset = anchorOffset
      this.dragEventState.originSpanDays = spanDays
      this.dragEventState.originalStartDate = w.startDate
      this.dragEventState.originalEndDate = w.endDate
      // capture pointer to ensure we receive the up even if cursor leaves element
      if (this.dragEventState.usingPointer && span.setPointerCapture && ev.pointerId != null) {
        try { span.setPointerCapture(ev.pointerId) } catch {}
      }
      this.dragEventState.element = span
      this.dragEventState.currentOverlay = overlay
      this._eventDragMoved = false
      span.classList.add('dragging')
      this.installGlobalEventDragHandlers()
    }
    
    // Use pointer events (supported by all modern browsers)
    left.addEventListener('pointerdown', e => onPointerDown('resize-left', e))
    right.addEventListener('pointerdown', e => onPointerDown('resize-right', e))
    span.addEventListener('pointerdown', e => {
      if ((e.target).classList && (e.target).classList.contains('resize-handle')) return
      onPointerDown('move', e)
    })
    
  // Pointer events cover mouse and touch
    overlay.appendChild(span)
  }
}