import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useWorkspace } from '@/context'
import {
  usePlannedDays,
  useShowWeekNumbers,
  getLastLeaveType,
  setLastLeaveType,
  useCalendarDays,
  useDayOverrides,
  useLeaveWishes,
  useWorkspaceMembers,
  usePlanSync,
} from '@/hooks'
import type {
  PlannedLeaveDay,
  CalendarDayEntry,
  LeaveWish,
  LeaveWishCreateRequest,
  LeaveWishUpdateRequest,
  PersonalData,
  PlanChange,
  PlanSyncResponse,
  WindowOutcome,
} from '@/types'
import { Layout } from '@/components/layout/Layout'
import { LoadingSpinner } from '@/components/common/LoadingSpinner'
import { CalendarWeek, type BandClickInfo } from '@/components/common/CalendarWeek'
import { PlannedDayModal } from '@/components/modals/PlannedDayModal'
import { PeriodPopover, type PeriodPopoverSavePayload } from '@/components/calendar/PeriodPopover'
import { PresetRail, type SeasonPreset } from '@/components/calendar/PresetRail'
import { getColorForType } from '@/utils/leaveTypes'
import { resolveWishName, resolveWishNameFromData } from '@/utils/wishName'
import { datesInRange, formatDateForDisplay, formatDateLocalISO } from '@/utils/dates'
import { renderRejection, type Translate } from '@/utils/rejectionMessages'
import { useTranslation } from '@/i18n'
import './calendar.css'

const WEEKDAY_KEYS = [
  'calendar.weekdayMon',
  'calendar.weekdayTue',
  'calendar.weekdayWed',
  'calendar.weekdayThu',
  'calendar.weekdayFri',
  'calendar.weekdaySat',
  'calendar.weekdaySun',
] as const

/** Small "what changed" toast + optional undo — see Calendar.tsx's usage. */
interface CalendarToast {
  message: string
  undo: { label: string; run: () => Promise<void> } | null
}

function splitISODate(date: string): { year: number; month: number; day: number } {
  const [year, month, day] = date.split('-').map(Number)
  return { year: year ?? 1970, month: month ?? 1, day: day ?? 1 }
}

/** Builds the full `LeaveWishCreateRequest` a wish's current fields would
 * recreate — used both to "undo" a period delete (recreate the wish) and,
 * minus `workspaceId`/`childId`, as the patch that "undoes" a period edit
 * (restore every field to its pre-edit value; §Task7 "undo reverts the
 * wish edit, not the days"). */
function createRequestFromWish(w: LeaveWish): LeaveWishCreateRequest {
  return {
    workspaceId: w.workspaceId,
    childId: w.childId,
    name: w.name,
    nameMessageKey: w.nameMessageKey,
    windowStartMonth: w.windowStartMonth,
    windowStartDay: w.windowStartDay,
    windowEndMonth: w.windowEndMonth,
    windowEndDay: w.windowEndDay,
    targetWeeks: w.targetWeeks,
    targetDays: w.targetDays ?? null,
    recurrence: w.recurrence,
    firstYear: w.firstYear,
    lastYear: w.lastYear,
    priority: w.priority,
    parentMode: w.parentMode,
    parentPersonalDataUuid: w.parentPersonalDataUuid,
    windowMode: w.windowMode,
  }
}

function patchFromWish(w: LeaveWish): LeaveWishUpdateRequest {
  return {
    name: w.name,
    nameMessageKey: w.nameMessageKey,
    windowStartMonth: w.windowStartMonth,
    windowStartDay: w.windowStartDay,
    windowEndMonth: w.windowEndMonth,
    windowEndDay: w.windowEndDay,
    targetWeeks: w.targetWeeks,
    targetDays: w.targetDays ?? null,
    recurrence: w.recurrence,
    firstYear: w.firstYear,
    lastYear: w.lastYear,
    priority: w.priority,
    parentMode: w.parentMode,
    parentPersonalDataUuid: w.parentPersonalDataUuid,
    windowMode: w.windowMode,
  }
}

/** Groups a sync's `changes` by the wish (or "adhoc") they belong to and
 * renders one "{name}: N dagar ändrades" fragment per group — house style
 * is structured data in, composed copy out; the backend never sends prose. */
function summarizeChanges(changes: PlanChange[], wishes: LeaveWish[], t: Translate): string | null {
  if (changes.length === 0) return null
  const counts = new Map<string, number>()
  for (const change of changes) {
    const key = change.newWishId ?? change.oldWishId ?? 'adhoc'
    counts.set(key, (counts.get(key) ?? 0) + 1)
  }
  const parts: string[] = []
  for (const [wishId, count] of counts) {
    const wish = wishes.find((w) => w.id === wishId)
    const name = wish ? resolveWishName(wish, t) : t('calendar.toastGenericPeriod')
    parts.push(t('calendar.toastChangedDays', { name, count }))
  }
  return parts.join(' · ')
}

/** Renders a `WindowOutcome`'s shortfall for the touched wish, from
 * `outcome.messageKey`/`data` (today always `planOutcomes.windowExplanation`,
 * carrying `wish_name`/`wish_name_message_key`) — falling back to the plain
 * `shortfallDays` count when there's nothing richer to say. `funded`
 * distinguishes "nothing could be placed" from "only part of it fit", the
 * two phrasings the "sync that changes nothing must say why" fix needs.
 *
 * `wish` is the touched wish itself (not just the outcome), because the
 * outcome only ever carries `weeksWished`/`weeksFunded` — the backend's
 * week-rounded view. A calendar-drawn period sets `targetDays` (an exact
 * day count); `targetWeeks` on that same wish is just `Math.ceil(days / 7)`,
 * a leftover the API still requires, never what the user actually asked
 * for. Reporting `weeksWished` for those wishes says "3 week(s)" for a
 * 7-day drag. When `targetDays` is set, report days instead — the figure
 * the user actually asked for — and only fall back to weeks for wishes that
 * never had a day-granular target (e.g. the preset rail, which only ever
 * sends `targetWeeks`). */
function summarizeOutcomeShortfall(
  outcome: WindowOutcome,
  funded: boolean,
  wish: LeaveWish | undefined,
  t: Translate,
): string {
  const name = resolveWishNameFromData(outcome.data, t) || t('calendar.toastGenericPeriod')
  const base = {
    name,
    start: formatDateForDisplay(outcome.startDate),
    end: formatDateForDisplay(outcome.endDate),
    shortfallDays: outcome.shortfallDays,
  }
  if (wish?.targetDays != null) {
    const params = {
      ...base,
      daysWished: wish.targetDays,
      daysFunded: wish.targetDays - outcome.shortfallDays,
    }
    return t(funded ? 'calendar.toastShortfallPartialDays' : 'calendar.toastShortfallNoneDays', params)
  }
  const params = {
    ...base,
    weeksWished: outcome.weeksWished,
    weeksFunded: outcome.weeksFunded,
  }
  return t(funded ? 'calendar.toastShortfallPartial' : 'calendar.toastShortfallNone', params)
}

/** Builds the full sync toast message: what changed (existing summary), why
 * the wish just touched (if any) fell short of what was wished, and any
 * rejections the apply step returned — a genuine no-op sync (nothing to
 * report on any of the three) still renders `null`, so it stays silent.
 *
 * `watchWish`, when given, is used in place of looking `watchWishId` up in
 * `wishes` — needed right after creating a wish, where `wishes` is whatever
 * `wishesHook.data` was as of this closure's own render (captured before
 * the create's background refetch lands) and so never actually contains a
 * wish created moments ago. Passing the just-created wish object directly
 * sidesteps that; every other caller (editing/re-syncing an *existing*
 * wish) can leave it out and rely on the `wishes` lookup as before. */
function buildSyncToastMessage(
  result: PlanSyncResponse,
  wishes: LeaveWish[],
  members: PersonalData[],
  watchWishId: string | undefined,
  t: Translate,
  watchWish?: LeaveWish,
): string | null {
  const parts: string[] = []

  const changesMessage = summarizeChanges(result.changes, wishes, t)
  if (changesMessage) parts.push(changesMessage)

  if (watchWishId) {
    const outcome = result.proposal.outcomes.find((o) => o.wishId === watchWishId)
    if (outcome && outcome.shortfallDays > 0) {
      const funded = result.changes.some((c) => c.newWishId === watchWishId || c.oldWishId === watchWishId)
      const wish = watchWish ?? wishes.find((w) => w.id === watchWishId)
      parts.push(summarizeOutcomeShortfall(outcome, funded, wish, t))
    }
  }

  for (const rejection of result.applyResult.rejections) {
    parts.push(renderRejection(rejection, t, members))
  }

  return parts.length > 0 ? parts.join(' · ') : null
}

export function Calendar(): ReactNode {
  const { t, locale } = useTranslation()
  const { isLoading: wsLoading, selectedChildId, workspace, personalDataUuid, parentName } = useWorkspace()
  const plannedDaysHook = usePlannedDays(selectedChildId ?? undefined)
  const [showWeekNumbers] = useShowWeekNumbers()
  const [currentMonth, setCurrentMonth] = useState(new Date())
  const [selectedDates, setSelectedDates] = useState<Set<string>>(new Set())
  const [dragAnchor, setDragAnchor] = useState<string | null>(null)
  const [dragCurrent, setDragCurrent] = useState<string | null>(null)
  const [isDragging, setIsDragging] = useState(false)
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [isSaving, setIsSaving] = useState(false)
  const [modalError, setModalError] = useState<string | null>(null)
  const [overrideError, setOverrideError] = useState<string | null>(null)

  const [activeBand, setActiveBand] = useState<BandClickInfo | null>(null)
  const [isPeriodOpen, setIsPeriodOpen] = useState(false)
  const [isPeriodSaving, setIsPeriodSaving] = useState(false)
  const [periodError, setPeriodError] = useState<string | null>(null)
  const [isCreatingPeriod, setIsCreatingPeriod] = useState(false)
  const [flashWishId, setFlashWishId] = useState<string | null>(null)
  const [toast, setToast] = useState<CalendarToast | null>(null)
  const [isUndoing, setIsUndoing] = useState(false)

  const isLoading = wsLoading || plannedDaysHook.isLoading

  // §3.4/§3.6 — the visible grid can spill into the previous year (January's
  // leading days) or the next year (December's trailing days), so fetch
  // whichever 1-2 calendar years the current month view actually touches.
  const viewYear = currentMonth.getFullYear()
  const viewMonth = currentMonth.getMonth()
  const calendarMinYear = viewMonth === 0 ? viewYear - 1 : viewYear
  const calendarMaxYear = viewMonth === 11 ? viewYear + 1 : viewYear
  const calendarYearsSpan = calendarMaxYear - calendarMinYear + 1

  const calendarHook = useCalendarDays(workspace?.id ?? '', calendarMinYear, calendarYearsSpan)
  const dayOverridesHook = useDayOverrides(workspace?.id ?? '')
  const wishesHook = useLeaveWishes(workspace?.id ?? null)
  const membersHook = useWorkspaceMembers(workspace?.id ?? null)
  const syncHook = usePlanSync()

  const calendarDaysByDate = useMemo(() => {
    const map = new Map<string, CalendarDayEntry>()
    for (const day of calendarHook.data?.days ?? []) {
      map.set(day.date, day)
    }
    return map
  }, [calendarHook.data])

  const showToast = useCallback((message: string, undo: CalendarToast['undo']) => {
    setToast({ message, undo })
  }, [])

  // Auto-dismiss the toast after a while so it never lingers indefinitely.
  useEffect(() => {
    if (!toast) return
    const timer = setTimeout(() => setToast(null), 8000)
    return () => clearTimeout(timer)
  }, [toast])

  // Clear a flashed band's highlight shortly after it's applied.
  useEffect(() => {
    if (!flashWishId) return
    const timer = setTimeout(() => setFlashWishId(null), 1600)
    return () => clearTimeout(timer)
  }, [flashWishId])

  // §Task7 — the calendar IS the plan: recompute + persist from the
  // workspace's LeaveWishes in one call, then refresh the two views that
  // depend on the result (planned days for the bands, calendar metadata for
  // shading). `silent` suppresses the "what changed" toast (used for the
  // initial load and for undo's re-sync) without suppressing error
  // reporting — a broken sync should always be visible.
  const runSync = useCallback(
    async (
      workspaceId: string,
      options?: {
        silent?: boolean
        undo?: CalendarToast['undo']
        watchWishId?: string
        // Used right after creating a wish, where `wishesHook.data` is
        // whatever it was as of this closure's own render (captured before
        // the create's background refetch lands) and so never actually
        // contains a wish created moments ago. Passing the just-created
        // wish object directly sidesteps that — see `buildSyncToastMessage`.
        watchWish?: LeaveWish
      },
    ): Promise<PlanSyncResponse | undefined> => {
      try {
        const result = await syncHook.sync(workspaceId)
        await Promise.all([plannedDaysHook.refresh(), calendarHook.refetch()])
        if (!options?.silent) {
          const message = buildSyncToastMessage(
            result,
            wishesHook.data,
            membersHook.data,
            options?.watchWishId,
            t,
            options?.watchWish,
          )
          if (message) showToast(message, options?.undo ?? null)
        }
        return result
      } catch (err) {
        showToast(err instanceof Error ? err.message : t('calendar.syncError'), null)
        return undefined
      }
    },
    [syncHook, plannedDaysHook, calendarHook, wishesHook.data, membersHook.data, t, showToast],
  )

  // Sync once per workspace as soon as it's known, so wishes seeded/created
  // elsewhere show up as bands without requiring a manual edit first.
  const didAutoSyncRef = useRef<string | null>(null)
  useEffect(() => {
    if (!workspace?.id) return
    if (didAutoSyncRef.current === workspace.id) return
    didAutoSyncRef.current = workspace.id
    void runSync(workspace.id, { silent: true })
  }, [workspace?.id, runSync])

  const handleCreatePeriodFromDrag = useCallback(
    async (dates: string[]) => {
      setSelectedDates(new Set())
      if (!workspace?.id || !selectedChildId || !personalDataUuid) return
      const sorted = [...dates].sort()
      const start = sorted[0]
      const end = sorted[sorted.length - 1]
      if (!start || !end) return

      const { year: startYear, month: startMonth, day: startDay } = splitISODate(start)
      const { month: endMonth, day: endDay } = splitISODate(end)
      const dayCount = sorted.length
      const targetWeeks = Math.min(52, Math.max(1, Math.ceil(dayCount / 7)))

      try {
        setIsCreatingPeriod(true)
        const created = await wishesHook.add({
          workspaceId: workspace.id,
          childId: selectedChildId,
          name: t('calendar.newPeriodName'),
          nameMessageKey: 'calendar.newPeriodName',
          windowStartMonth: startMonth,
          windowStartDay: startDay,
          windowEndMonth: endMonth,
          windowEndDay: endDay,
          targetWeeks,
          targetDays: dayCount,
          recurrence: 'once',
          firstYear: startYear,
          priority: wishesHook.data.length + 1,
          parentMode: 'specific',
          parentPersonalDataUuid: personalDataUuid,
          windowMode: 'fixed',
        })
        // Undo is just "delete the wish, re-sync": the backend deletes every
        // `planned_leave_day` row the wish produced as part of deleting the
        // wish (`LeaveWishService.delete()`), so there is nothing left here
        // for the frontend to individually track or clean up.
        await runSync(workspace.id, {
          watchWishId: created.id,
          watchWish: created,
          undo: {
            label: t('calendar.undoButton'),
            run: async () => {
              await wishesHook.remove(created.id)
              await runSync(workspace.id, { silent: true })
            },
          },
        })
      } catch (err) {
        showToast(err instanceof Error ? err.message : t('calendar.periodCreateError'), null)
      } finally {
        setIsCreatingPeriod(false)
      }
    },
    [
      workspace?.id,
      selectedChildId,
      personalDataUuid,
      wishesHook,
      t,
      runSync,
      showToast,
    ],
  )

  useEffect(() => {
    const handlePointerUp = () => {
      if (isDragging && dragAnchor && dragCurrent) {
        const dates = datesInRange(dragAnchor, dragCurrent)
        if (dates.length === 1) {
          setSelectedDates(new Set(dates))
          setIsModalOpen(true)
        } else if (dates.length > 1) {
          void handleCreatePeriodFromDrag(dates)
        }
      }
      setIsDragging(false)
      setDragAnchor(null)
      setDragCurrent(null)
    }

    if (isDragging) {
      window.addEventListener('pointerup', handlePointerUp)
      return () => window.removeEventListener('pointerup', handlePointerUp)
    }
  }, [isDragging, dragAnchor, dragCurrent, handleCreatePeriodFromDrag])

  if (isLoading) {
    return <LoadingSpinner message={t('calendar.loading')} />
  }

  const year = currentMonth.getFullYear()
  const month = currentMonth.getMonth()

  // The year <select> must cover the API's real supported range (from
  // `CalendarWindow.minYear`/`maxYear`, not a hardcoded literal), while
  // always including the currently-selected year even before the window has
  // loaded (or if it somehow falls outside the reported bounds).
  const yearRangeMin = Math.min(calendarHook.data?.minYear ?? year, year)
  const yearRangeMax = Math.max(calendarHook.data?.maxYear ?? year, year)
  const yearOptions = Array.from(
    { length: yearRangeMax - yearRangeMin + 1 },
    (_, i) => yearRangeMin + i,
  )

  const firstDay = new Date(year, month, 1)
  const lastDay = new Date(year, month + 1, 0)
  const daysInMonth = lastDay.getDate()
  const startOffset = (firstDay.getDay() + 6) % 7

  const weeks: string[][] = []
  let currentWeek: string[] = []

  for (let i = 0; i < startOffset; i++) {
    const prevDate = new Date(year, month, -startOffset + i + 1)
    currentWeek.push(formatDateLocalISO(prevDate))
  }

  for (let day = 1; day <= daysInMonth; day++) {
    currentWeek.push(formatDateLocalISO(new Date(year, month, day)))
    if (currentWeek.length === 7) {
      weeks.push(currentWeek)
      currentWeek = []
    }
  }

  const remaining = 7 - currentWeek.length
  for (let i = 0; i < remaining; i++) {
    currentWeek.push(formatDateLocalISO(new Date(year, month + 1, i + 1)))
  }
  weeks.push(currentWeek)

  const handlePrevMonth = () => {
    setCurrentMonth(new Date(year, month - 1, 1))
  }

  const handleNextMonth = () => {
    setCurrentMonth(new Date(year, month + 1, 1))
  }

  const handleMonthChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const newMonth = Number(e.target.value)
    setCurrentMonth(new Date(year, newMonth, 1))
  }

  const handleYearChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const newYear = Number(e.target.value)
    setCurrentMonth(new Date(newYear, month, 1))
  }

  const handlePointerDown = (date: string) => {
    setDragAnchor(date)
    setDragCurrent(date)
    setIsDragging(true)
  }

  const handlePointerEnter = (date: string) => {
    if (isDragging) {
      setDragCurrent(date)
    }
  }

  const handleOverrideToggle = async (date: string) => {
    if (!workspace?.id) return
    const info = calendarDaysByDate.get(date)
    if (!info) return

    try {
      setOverrideError(null)
      if (info.isOverride) {
        const existing = (dayOverridesHook.data ?? []).find((o) => o.date === date)
        if (existing) {
          await dayOverridesHook.remove(existing.id)
        }
      } else {
        // Toggle the effective status: a currently-free day becomes an
        // override marking it a working day, and vice versa.
        await dayOverridesHook.upsert({
          workspaceId: workspace.id,
          date,
          isWorkingDay: info.isFree,
          note: null,
        })
      }
      // The grid's shading/badges come from GET /api/calendar/days, a
      // separate fetch from the override list above — without this
      // explicit refetch the day-overrides list would be up to date but the
      // calendar cell would keep showing the pre-mutation state until a
      // full page reload.
      await calendarHook.refetch()
    } catch (err) {
      setOverrideError(err instanceof Error ? err.message : t('calendar.overrideError'))
    }
  }

  const handleDayClick = (date: string) => {
    setSelectedDates(new Set([date]))
    setIsModalOpen(true)
  }

  const getExistingDay = (date: string): PlannedLeaveDay | undefined => {
    return (plannedDaysHook.data ?? []).find(
      (pd: PlannedLeaveDay) => pd.date === date && pd.parentPersonalDataUuid === personalDataUuid,
    )
  }

  const handleSavePlannedDay = async (payload: {
    dayType: 'sjukpenning' | 'lagsta' | 'vacation'
    parentId: string
    isDubbeldag: boolean
  }) => {
    if (selectedDates.size === 0 || !selectedChildId || !workspace?.id || !personalDataUuid) return

    try {
      setIsSaving(true)
      setModalError(null)

      setLastLeaveType(payload.dayType)

      for (const date of selectedDates) {
        const existingDay = (plannedDaysHook.data ?? []).find(
          (pd: PlannedLeaveDay) => pd.date === date && pd.parentPersonalDataUuid === personalDataUuid,
        )

        if (existingDay) {
          // §Task7 — a hand-edit through the day popover pins the day so a
          // later `POST /api/plan/sync` never silently retypes it.
          await plannedDaysHook.update(existingDay.id, {
            day_type: payload.dayType,
            is_dubbeldag: payload.isDubbeldag,
            is_pinned: true,
          })
        } else {
          await plannedDaysHook.add({
            workspace_id: workspace.id,
            child_id: selectedChildId,
            parent_personal_data_uuid: payload.parentId,
            date,
            day_type: payload.dayType,
            is_dubbeldag: payload.isDubbeldag,
            is_pinned: true,
          })
        }
      }

      setIsModalOpen(false)
      setSelectedDates(new Set())
    } catch (err) {
      setModalError(err instanceof Error ? err.message : t('calendar.saveError'))
    } finally {
      setIsSaving(false)
    }
  }

  const handleDeletePlannedDay = async () => {
    if (selectedDates.size !== 1) return

    try {
      setIsSaving(true)
      setModalError(null)

      const dates = Array.from(selectedDates)
      const date = dates[0]
      if (!date) return

      const existingDay = getExistingDay(date)
      if (existingDay) {
        await plannedDaysHook.remove(existingDay.id)
      }

      setIsModalOpen(false)
      setSelectedDates(new Set())
    } catch (err) {
      setModalError(err instanceof Error ? err.message : t('calendar.deleteError'))
    } finally {
      setIsSaving(false)
    }
  }

  const handleBandClick = (info: BandClickInfo): void => {
    setActiveBand(info)
    setIsPeriodOpen(true)
    setPeriodError(null)
  }

  const closePeriodPopover = () => {
    setIsPeriodOpen(false)
    setActiveBand(null)
    setPeriodError(null)
  }

  const handleSavePeriod = async (payload: PeriodPopoverSavePayload) => {
    if (!activeBand?.wishId || !workspace?.id) return
    const previousWish = wishesHook.data.find((w) => w.id === activeBand.wishId)
    if (!previousWish) return

    const start = splitISODate(payload.startDate)
    const end = splitISODate(payload.endDate)

    try {
      setIsPeriodSaving(true)
      setPeriodError(null)
      await wishesHook.update(previousWish.id, {
        name: payload.name,
        nameMessageKey: null,
        windowStartMonth: start.month,
        windowStartDay: start.day,
        windowEndMonth: end.month,
        windowEndDay: end.day,
        firstYear: start.year,
        recurrence: payload.recurrence,
        lastYear: payload.recurrence === 'yearly' ? payload.lastYear : null,
        parentMode: payload.parentMode,
        parentPersonalDataUuid: payload.parentMode === 'specific' ? payload.parentPersonalDataUuid : null,
      })
      closePeriodPopover()
      await runSync(workspace.id, {
        watchWishId: previousWish.id,
        undo: {
          label: t('calendar.undoButton'),
          run: async () => {
            await wishesHook.update(previousWish.id, patchFromWish(previousWish))
            await runSync(workspace.id, { silent: true })
          },
        },
      })
    } catch (err) {
      setPeriodError(err instanceof Error ? err.message : t('calendar.periodCreateError'))
    } finally {
      setIsPeriodSaving(false)
    }
  }

  const handleDeletePeriod = async () => {
    if (!workspace?.id || !activeBand) return

    try {
      setIsPeriodSaving(true)
      setPeriodError(null)

      if (activeBand.wishId) {
        const previousWish = wishesHook.data.find((w) => w.id === activeBand.wishId)
        await wishesHook.remove(activeBand.wishId)
        closePeriodPopover()
        await runSync(workspace.id, {
          undo: previousWish
            ? {
                label: t('calendar.undoButton'),
                run: async () => {
                  await wishesHook.add(createRequestFromWish(previousWish))
                  await runSync(workspace.id, { silent: true })
                },
              }
            : null,
        })
      } else {
        // Ad-hoc band (no wishId): delete the underlying planned days
        // directly — there is no wish to resync from.
        const bandDates = new Set(datesInRange(activeBand.startDate, activeBand.endDate))
        const toDelete = (plannedDaysHook.data ?? []).filter(
          (pd) =>
            pd.parentPersonalDataUuid === activeBand.parentPersonalDataUuid &&
            pd.wishId === null &&
            bandDates.has(pd.date),
        )
        const snapshot = toDelete.map((pd) => ({ ...pd }))
        for (const pd of toDelete) {
          await plannedDaysHook.remove(pd.id)
        }
        closePeriodPopover()
        if (snapshot.length > 0) {
          showToast(t('calendar.toastChangedDays', { name: t('calendar.toastGenericPeriod'), count: snapshot.length }), {
            label: t('calendar.undoButton'),
            run: async () => {
              for (const pd of snapshot) {
                await plannedDaysHook.add({
                  workspace_id: pd.workspaceId,
                  child_id: pd.childId,
                  parent_personal_data_uuid: pd.parentPersonalDataUuid,
                  date: pd.date,
                  day_type: pd.dayType,
                  is_dubbeldag: pd.isDubbeldag,
                  is_pinned: pd.isPinned,
                })
              }
            },
          })
        }
      }
    } catch (err) {
      setPeriodError(err instanceof Error ? err.message : t('calendar.periodCreateError'))
    } finally {
      setIsPeriodSaving(false)
    }
  }

  const handleSelectPreset = async (preset: SeasonPreset) => {
    if (!workspace?.id || !selectedChildId) return

    try {
      setIsCreatingPeriod(true)
      const created = await wishesHook.add({
        workspaceId: workspace.id,
        childId: selectedChildId,
        name: t(preset.labelKey),
        nameMessageKey: preset.labelKey,
        windowStartMonth: preset.startMonth,
        windowStartDay: preset.startDay,
        windowEndMonth: preset.endMonth,
        windowEndDay: preset.endDay,
        targetWeeks: preset.defaultWeeks,
        recurrence: 'yearly',
        firstYear: new Date().getFullYear(),
        priority: wishesHook.data.length + 1,
        parentMode: 'either',
        windowMode: 'flexible',
      })

      const result = await runSync(workspace.id, {
        watchWishId: created.id,
        watchWish: created,
        undo: {
          label: t('calendar.undoButton'),
          run: async () => {
            await wishesHook.remove(created.id)
            await runSync(workspace.id, { silent: true })
          },
        },
      })

      if (result) {
        const placedDates = result.changes
          .filter((c) => c.newWishId === created.id)
          .map((c) => c.date)
          .sort()
        const earliest = placedDates[0]
        if (earliest) {
          const { year: placedYear, month: placedMonth } = splitISODate(earliest)
          setCurrentMonth(new Date(placedYear, placedMonth - 1, 1))
          setFlashWishId(created.id)
          const calendarEl = document.querySelector('[data-testid="calendar"]')
          if (calendarEl && typeof calendarEl.scrollIntoView === 'function') {
            calendarEl.scrollIntoView({ behavior: 'smooth', block: 'start' })
          }
        }
      }
    } catch (err) {
      showToast(err instanceof Error ? err.message : t('calendar.periodCreateError'), null)
    } finally {
      setIsCreatingPeriod(false)
    }
  }

  const handleUndoClick = async () => {
    const undo = toast?.undo
    if (!undo) return
    try {
      setIsUndoing(true)
      await undo.run()
      setToast(null)
    } catch (err) {
      showToast(err instanceof Error ? err.message : t('calendar.undoError'), null)
    } finally {
      setIsUndoing(false)
    }
  }

  const defaultLeaveType = getLastLeaveType() ?? 'vacation'
  const firstSelectedDate = Array.from(selectedDates).sort()[0]

  // Dates to highlight in the grid. While dragging, show a live preview of the
  // range under the cursor; otherwise show the committed selection.
  const highlightedDates =
    isDragging && dragAnchor && dragCurrent
      ? new Set(datesInRange(dragAnchor, dragCurrent))
      : selectedDates

  // §Task7 — feed every workspace member, not just the logged-in parent, so
  // couple mode can plan for either parent from the calendar's popovers.
  // Falls back to the logged-in parent alone while members haven't loaded
  // yet (or in solo mode, where there is only one).
  const parentsForModals =
    membersHook.data.length > 0
      ? membersHook.data.map((m) => ({ id: m.uuid, name: m.name }))
      : [{ id: personalDataUuid ?? '', name: parentName ?? t('calendar.you') }]

  const activeWish = activeBand?.wishId
    ? wishesHook.data.find((w) => w.id === activeBand.wishId) ?? null
    : null

  return (
    <Layout>
      <div data-testid="calendar" className="calendar">
        <div className="calendar__header">
          <button onClick={handlePrevMonth} aria-label={t('calendar.prevMonthAria')}>
            ←
          </button>
          <h2 className="calendar__title">
            <select
              value={month}
              onChange={handleMonthChange}
              className="calendar__month-select"
              aria-label={t('calendar.selectMonthAria')}
            >
              {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((m) => {
                const date = new Date(year, m, 1)
                const monthName = date.toLocaleDateString(locale === 'sv' ? 'sv-SE' : 'en-US', { month: 'long' })
                return (
                  <option key={m} value={m}>
                    {monthName}
                  </option>
                )
              })}
            </select>
            <select
              value={year}
              onChange={handleYearChange}
              className="calendar__year-select"
              aria-label={t('calendar.selectYearAria')}
            >
              {yearOptions.map((y) => (
                <option key={y} value={y}>
                  {y}
                </option>
              ))}
            </select>
          </h2>
          <button onClick={handleNextMonth} aria-label={t('calendar.nextMonthAria')}>
            →
          </button>
        </div>

        {(syncHook.isSyncing || isCreatingPeriod) && (
          <p className="calendar__sync-indicator" data-testid="calendar-sync-indicator">
            {t('calendar.syncingLabel')}
          </p>
        )}

        {toast && (
          <div className="calendar__toast" role="status" data-testid="calendar-toast">
            <span className="calendar__toast-message">{toast.message}</span>
            {toast.undo && (
              <button
                type="button"
                className="calendar__toast-undo"
                onClick={() => void handleUndoClick()}
                disabled={isUndoing}
                data-testid="calendar-toast-undo"
              >
                {toast.undo.label}
              </button>
            )}
            <button
              type="button"
              className="calendar__toast-dismiss"
              aria-label={t('calendar.dismissToastAria')}
              onClick={() => setToast(null)}
              data-testid="calendar-toast-dismiss"
            >
              ×
            </button>
          </div>
        )}

        <div className="calendar__layout">
          <div className="calendar__main">
            <div className={`calendar__grid${showWeekNumbers ? ' calendar__grid--with-week-numbers' : ''}`}>
              {showWeekNumbers && <div className="calendar__week-number-header" />}
              {WEEKDAY_KEYS.map((key) => (
                <div key={key} className="calendar__weekday">
                  {t(key)}
                </div>
              ))}
            </div>

            {/* Each week is its own small CSS Grid (see CalendarWeek.tsx/
                calendar.css) so a multi-day band can span several day columns as
                one element — that only works if each week is a separate grid,
                not a flat row of the header grid above. */}
            <div className="calendar__weeks">
              {weeks.map((week, weekIdx) => {
                const firstDate = week[0]
                const weekMonth = firstDate ? new Date(firstDate + 'T00:00:00Z').getMonth() : month
                return (
                  <CalendarWeek
                    key={weekIdx}
                    weekDates={week}
                    plannedDays={plannedDaysHook.data ?? []}
                    selectedDates={highlightedDates}
                    parentName={parentName ?? t('calendar.you')}
                    personalDataUuid={personalDataUuid ?? ''}
                    isCurrentMonth={weekMonth === month}
                    showWeekNumbers={showWeekNumbers}
                    onDayClick={handleDayClick}
                    onPointerDown={handlePointerDown}
                    onPointerEnter={handlePointerEnter}
                    calendarDaysByDate={calendarDaysByDate}
                    onBandClick={handleBandClick}
                    flashWishId={flashWishId}
                  />
                )
              })}
            </div>

            <div className="calendar__legend">
              <h3>{t('calendar.legendTitle')}</h3>
              <div className="calendar__legend-items">
                <div className="calendar__legend-item">
                  <span className="calendar__legend-swatch" style={{ backgroundColor: getColorForType('vacation') }} />
                  <span>{t('calendar.legendVacation')}</span>
                </div>
                <div className="calendar__legend-item">
                  <span className="calendar__legend-swatch" style={{ backgroundColor: getColorForType('sjukpenning') }} />
                  <span>{t('calendar.legendIncomeBased')}</span>
                </div>
                <div className="calendar__legend-item">
                  <span className="calendar__legend-swatch" style={{ backgroundColor: getColorForType('lagsta') }} />
                  <span>{t('calendar.legendMinimumRate')}</span>
                </div>
                <div className="calendar__legend-item">
                  <span className="calendar__legend-swatch calendar__legend-swatch--red-day" />
                  <span>{t('calendar.legendRedDay')}</span>
                </div>
                <div className="calendar__legend-item">
                  <span className="calendar__legend-swatch calendar__legend-swatch--klamdag" />
                  <span>{t('calendar.legendKlamdag')}</span>
                </div>
                <div className="calendar__legend-item">
                  <span className="calendar__legend-swatch calendar__legend-swatch--override" />
                  <span>{t('calendar.legendOverride')}</span>
                </div>
                <div className="calendar__legend-item">
                  <span className="calendar__legend-swatch calendar__legend-swatch--dubbeldag">2×</span>
                  <span>{t('calendar.legendDoubleDay')}</span>
                </div>
              </div>
            </div>
          </div>

          <PresetRail isBusy={isCreatingPeriod || syncHook.isSyncing} onSelectPreset={handleSelectPreset} />
        </div>

        {firstSelectedDate && (
          <PlannedDayModal
            date={firstSelectedDate}
            isOpen={isModalOpen}
            existingDay={getExistingDay(firstSelectedDate) ?? null}
            parents={parentsForModals}
            selectedParentId={personalDataUuid ?? ''}
            onSave={handleSavePlannedDay}
            onDelete={getExistingDay(firstSelectedDate) ? handleDeletePlannedDay : undefined}
            onClose={() => {
              setIsModalOpen(false)
              setSelectedDates(new Set())
            }}
            isSaving={isSaving}
            error={modalError}
            defaultDayType={defaultLeaveType}
            dayInfo={calendarDaysByDate.get(firstSelectedDate) ?? null}
            onToggleOverride={() => handleOverrideToggle(firstSelectedDate)}
            overrideError={overrideError}
          />
        )}

        {activeBand && (
          <PeriodPopover
            isOpen={isPeriodOpen}
            wish={activeWish}
            startDate={activeBand.startDate}
            endDate={activeBand.endDate}
            parents={parentsForModals}
            isSaving={isPeriodSaving}
            error={periodError}
            onSave={handleSavePeriod}
            onDelete={handleDeletePeriod}
            onClose={closePeriodPopover}
          />
        )}
      </div>
    </Layout>
  )
}