import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import { useWorkspace } from '@/context'
import {
  usePlannedDays,
  useShowWeekNumbers,
  getLastLeaveType,
  setLastLeaveType,
  useCalendarDays,
  useLeaveWishes,
  useWorkspaceMembers,
  usePlanSync,
  usePlannedDayExclusions,
} from '@/hooks'
import type {
  PlannedLeaveDay,
  CalendarDayEntry,
  LeaveWish,
  LeaveWishCreateRequest,
  LeaveWishScope,
  LeaveWishUpdateRequest,
  PersonalData,
  PlanChange,
  PlanSyncResponse,
  WindowOutcome,
} from '@/types'
import { Layout } from '@/components/layout/Layout'
import { PageSkeleton } from '@/components/common/PageSkeleton'
import { CalendarWeek, computeWeekLaneCount, type BandClickInfo } from '@/components/common/CalendarWeek'
import { PlannedDayModal } from '@/components/modals/PlannedDayModal'
import { PeriodPopover, type PeriodPopoverSavePayload, type PeriodDeleteScope } from '@/components/calendar/PeriodPopover'
import { PresetRail, type SeasonPreset } from '@/components/calendar/PresetRail'
import { getColorForType, getTypeModifier } from '@/utils/leaveTypes'
import { resolveWishName, resolveWishNameFromData } from '@/utils/wishName'
import { datesInRange, formatDateForDisplay, formatDateLocalISO, isValidDate, parseInputDate } 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 }
}

const ISO_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/

/** Reads the `?date=` search param the dashboard's "years ahead" bands
 * navigate here with (see Dashboard.tsx's `handleBandClick`) and, when it's
 * a valid ISO-8601 date, returns both the month to land on (as a local Date,
 * built from the parsed value's UTC components so the calendar view — which
 * reads `currentMonth` via local getters throughout — never drifts a day in
 * timezones behind UTC) and the ISO string itself, to pre-select the day.
 * Returns `null` for a missing or invalid param, so callers fall back to
 * today. */
function parseDateParam(searchParams: URLSearchParams): { month: Date; iso: string } | null {
  const dateParam = searchParams.get('date')
  if (!dateParam || !ISO_DATE_PATTERN.test(dateParam)) return null
  const parsed = parseInputDate(dateParam)
  if (!isValidDate(parsed)) return null
  return {
    month: new Date(parsed.getUTCFullYear(), parsed.getUTCMonth(), parsed.getUTCDate()),
    iso: dateParam,
  }
}

/** 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").
 *
 * A wish row is ONE year now (see `LeaveWish.seriesId`), so this recreates
 * exactly that year as a standalone occurrence. `seriesId`, when passed,
 * re-attaches it to the series it came from instead — undoing "remove this
 * year" has to put the year back as part of the repeating wish, not as a
 * detached one-off a later "every year" edit would miss. */
function createRequestFromWish(w: LeaveWish, seriesId?: string | null): 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: 'once',
    firstYear: w.firstYear,
    seriesId: seriesId ?? null,
    priority: w.priority,
    parentMode: w.parentMode,
    parentPersonalDataUuid: w.parentPersonalDataUuid,
    windowMode: w.windowMode,
    wantsDubbeldag: w.wantsDubbeldag,
  }
}

/** The patch that restores one wish row's pre-edit fields, applied at the same
 * scope the edit used.
 *
 * `recurrence` is restored from whether the row belonged to a series, so
 * undoing "make this repeat" (or "stop repeating") really undoes it.
 * `lastYear` is series-level and only sent where the backend accepts it: when
 * the row was standalone (so the patch is what creates the series) or when the
 * undo is series-wide. */
function patchFromWish(w: LeaveWish, scope: LeaveWishScope): LeaveWishUpdateRequest {
  const seriesWide = w.seriesId === null || scope === 'series'
  return {
    ...patchFieldsFromWish(w),
    recurrence: w.seriesId !== null ? 'yearly' : 'once',
    ...(seriesWide ? { lastYear: w.lastYear } : {}),
  }
}

function patchFieldsFromWish(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,
    firstYear: w.firstYear,
    priority: w.priority,
    parentMode: w.parentMode,
    parentPersonalDataUuid: w.parentPersonalDataUuid,
    windowMode: w.windowMode,
    wantsDubbeldag: w.wantsDubbeldag,
  }
}

/** 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 [searchParams] = useSearchParams()
  // Seeded once from `?date=` on arrival (see `parseDateParam`) — later
  // in-page navigation (prev/next month, the month/year selects) only ever
  // calls `setCurrentMonth`/`setSelectedDates` directly, so it's never
  // fought by the param once mounted.
  const [currentMonth, setCurrentMonth] = useState(() => parseDateParam(searchParams)?.month ?? new Date())
  const [selectedDates, setSelectedDates] = useState<Set<string>>(() => {
    const fromParam = parseDateParam(searchParams)
    return fromParam ? new Set([fromParam.iso]) : 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)
  // §todo14 — which parent the day popover's "Advanced" (pin exactly) path
  // targets. Lifted here (rather than kept as PlannedDayModal-local state)
  // so `existingDay`/save/delete all resolve against the SAME parent the
  // modal is currently showing — see `getExistingDay`'s doc comment for the
  // bug this fixes. Reset to the logged-in parent whenever a fresh
  // date/range is selected; updated live via the modal's `onParentChange`
  // while it stays open.
  const [advancedParentId, setAdvancedParentId] = useState(personalDataUuid ?? '')

  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 wishesHook = useLeaveWishes(workspace?.id ?? null)
  const membersHook = useWorkspaceMembers(workspace?.id ?? null)
  const syncHook = usePlanSync()
  // The days the user removed by hand. Read for the calendar's badges, and
  // written by the popover's "this day" remove — see `excludeDay`.
  const exclusionsHook = usePlannedDayExclusions(workspace?.id ?? null)

  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])

  // Any parent's removal marks the date: the mark says "someone deliberately
  // took a day out here", which is what stops the hole reading as a bug. Whose
  // day it was is shown in the day popover, where there is room to say it.
  const excludedDates = useMemo(
    () => new Set(exclusionsHook.data.map((e) => e.date)),
    [exclusionsHook.data],
  )

  /** The display name for a band's owner. Used wherever the UI has to say
   * WHOSE day something is — above all the "this day" remove, which takes one
   * parent's day and leaves the partner's. Falls back the same way
   * CalendarWeek's band labels do. */
  const resolveParentName = (uuid: string): string =>
    membersHook.data.find((m) => m.uuid === uuid)?.name ??
    (uuid === personalDataUuid ? (parentName ?? t('calendar.you')) : t('calendar.partner'))

  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])

  useEffect(() => {
    const handlePointerUp = () => {
      if (isDragging && dragAnchor && dragCurrent) {
        const dates = datesInRange(dragAnchor, dragCurrent)
        if (dates.length > 0) {
          // §Task7 revision — a drag (single- or multi-day) always opens the
          // day popover on the exact dragged dates; it never creates a
          // LeaveWish/synced period on its own by itself — the default path
          // now creates a fixed one-off wish and lets the planner fund it
          // (§todo10/11); the "Advanced" disclosure still writes exact
          // pinned days, same as before.
          setSelectedDates(new Set(dates))
          setAdvancedParentId(personalDataUuid ?? '')
          setIsModalOpen(true)
        }
      }
      setIsDragging(false)
      setDragAnchor(null)
      setDragCurrent(null)
    }

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

  if (isLoading) {
    return (
      <Layout>
        <PageSkeleton rows={5} />
      </Layout>
    )
  }

  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 = []
    }
  }

  // Only pad and push a trailing week if the month's days actually left one
  // in progress — a month that ends exactly on a Sunday has `currentWeek`
  // already empty here, and pushing anyway would add a phantom row of 7
  // disabled next-month cells.
  if (currentWeek.length > 0) {
    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)
  }

  // Every week row must be the same height regardless of how many bands
  // overlap in it — see `CalendarWeek`'s `monthMaxLaneCount` doc comment.
  // Computed once here (the month's tallest week) and passed down
  // uniformly to every `CalendarWeek` below, instead of each week reserving
  // only its own bottom padding.
  const monthMaxLaneCount = weeks.reduce(
    (max, week) => Math.max(max, computeWeekLaneCount(week, plannedDaysHook.data ?? [], calendarDaysByDate)),
    0,
  )

  // These four all derive the *other* axis (year when the month changes, and
  // vice versa) from live state rather than the `year`/`month` consts closed
  // over by this render. Two selects changed in quick succession (as
  // `goToCalendarMonth` in the e2e suite does: year, then month) can each
  // fire their own native `change` event before React has committed the
  // re-render from the first one — the month `<select>`'s onChange handler
  // then still closes over the PRE-year-change `year` const, so
  // `setCurrentMonth(new Date(year, newMonth, 1))` would silently overwrite
  // the just-applied year with the stale one. The functional updater form
  // reads the true latest (possibly not-yet-committed but already queued)
  // state, which React always threads correctly regardless of how many
  // renders separate the two events — see the flaky Easter-2027 red-day e2e
  // failure this fixed (the year select's fetch would lose a race against a
  // second, stale-closured fetch for the old year, so `calendarDaysByDate`
  // never got 2027's data even though the grid itself displayed 2027).
  const handlePrevMonth = () => {
    setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1))
  }

  const handleNextMonth = () => {
    setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1))
  }

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

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

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

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

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

  // §todo14 fix — takes the parent explicitly rather than assuming the
  // logged-in one. The old version always resolved against
  // `personalDataUuid`, so saving parent B's day on a date where parent A
  // already had one found (and silently overwrote) A's row instead of
  // creating B's. Every caller below now passes the parent the save/delete
  // is actually FOR — the modal-selected one, never the logged-in default.
  const getExistingDay = (date: string, parentId: string): PlannedLeaveDay | undefined => {
    return (plannedDaysHook.data ?? []).find(
      (pd: PlannedLeaveDay) => pd.date === date && pd.parentPersonalDataUuid === parentId,
    )
  }

  // The "Advanced" escape hatch — pins an exact day type for an exact
  // parent, writing `planned_leave_day` rows directly (today's pre-existing
  // behaviour, unchanged except for the §todo14 lookup fix above).
  const handleSavePinnedDay = async (payload: {
    dayType: 'sjukpenning' | 'lagsta' | 'vacation'
    parentId: string
    isDubbeldag: boolean
  }) => {
    if (selectedDates.size === 0 || !selectedChildId || !workspace?.id) return

    try {
      setIsSaving(true)
      setModalError(null)

      setLastLeaveType(payload.dayType)

      for (const date of selectedDates) {
        const existingDay = getExistingDay(date, payload.parentId)

        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)
    }
  }

  // §todo10/11 default path — the planner decides funding. Builds a fixed,
  // one-off `LeaveWish` spanning every selected date and lets the existing
  // sync machinery place it, exactly like `handleSelectPreset` below (same
  // add-then-sync-then-undo shape).
  const handleSaveWish = async (payload: {
    parentMode: 'either' | 'both' | 'specific'
    parentPersonalDataUuid: string | null
    wantsDubbeldag: boolean
  }) => {
    if (selectedDates.size === 0 || !selectedChildId || !workspace?.id) return

    const orderedDates = Array.from(selectedDates).sort()
    const first = orderedDates[0]
    const last = orderedDates[orderedDates.length - 1]
    if (!first || !last) return
    const start = splitISODate(first)
    const end = splitISODate(last)
    const dayCount = orderedDates.length

    try {
      setIsSaving(true)
      setModalError(null)

      const created = await wishesHook.add({
        workspaceId: workspace.id,
        childId: selectedChildId,
        name: t('wishEditor.manualPeriodName'),
        nameMessageKey: 'wishEditor.manualPeriodName',
        windowStartMonth: start.month,
        windowStartDay: start.day,
        windowEndMonth: end.month,
        windowEndDay: end.day,
        targetWeeks: Math.max(1, Math.ceil(dayCount / 7)),
        targetDays: dayCount,
        recurrence: 'once',
        firstYear: start.year,
        priority: wishesHook.data.length + 1,
        parentMode: payload.parentMode,
        parentPersonalDataUuid: payload.parentMode === 'specific' ? payload.parentPersonalDataUuid : null,
        windowMode: 'fixed',
        wantsDubbeldag: payload.parentMode === 'both' ? payload.wantsDubbeldag : false,
      })

      setIsModalOpen(false)
      setSelectedDates(new Set())

      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) {
      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, advancedParentId)
      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)

    // One wish row is one year, so the edited dates ARE this row's window —
    // year included. The old shape had to keep the wish's anchor year and
    // rewrite the shared month/day pattern for every year, because writing
    // the clicked year into `firstYear` would have dropped the earlier
    // occurrences; there is nothing to preserve now.
    const patch: LeaveWishUpdateRequest = {
      name: payload.name,
      nameMessageKey: null,
      windowStartMonth: start.month,
      windowStartDay: start.day,
      windowEndMonth: end.month,
      windowEndDay: end.day,
      firstYear: start.year,
      recurrence: payload.recurrence,
      parentMode: payload.parentMode,
      parentPersonalDataUuid: payload.parentMode === 'specific' ? payload.parentPersonalDataUuid : null,
      wantsDubbeldag: payload.wantsDubbeldag,
    }
    // `lastYear` belongs to the whole series, so only send it where the
    // backend will take it: when this occurrence is becoming a series, or
    // when the user explicitly chose "every year".
    const isSeries = previousWish.seriesId !== null
    if (payload.recurrence === 'yearly' && (!isSeries || payload.scope === 'series')) {
      patch.lastYear = payload.lastYear
    }

    try {
      setIsPeriodSaving(true)
      setPeriodError(null)
      await wishesHook.update(previousWish.id, patch, payload.scope)
      closePeriodPopover()
      await runSync(workspace.id, {
        watchWishId: previousWish.id,
        undo: {
          label: t('calendar.undoButton'),
          run: async () => {
            // Restores this row's own fields at the same scope the edit used.
            // A series-wide edit's undo re-projects the siblings from these
            // values, which is as faithful as the shape allows: per-year
            // divergence the user had before an "every year" save is gone
            // once that save lands.
            await wishesHook.update(
              previousWish.id,
              patchFromWish(previousWish, payload.scope),
              payload.scope,
            )
            await runSync(workspace.id, { silent: true })
          },
        },
      })
    } catch (err) {
      setPeriodError(err instanceof Error ? err.message : t('calendar.periodCreateError'))
    } finally {
      setIsPeriodSaving(false)
    }
  }

  // §todo9 "this period, every year" — removes every row of the series (or
  // just the one row, when the period does not repeat). Undo recreates the
  // repeating wish from the clicked occurrence's fields; the rows get fresh
  // ids, exactly as before.
  const deleteWishSeries = async (wishId: string, workspaceId: string) => {
    const previousWish = wishesHook.data.find((w) => w.id === wishId)
    const siblingYears = previousWish?.seriesId
      ? wishesHook.data.filter((w) => w.seriesId === previousWish.seriesId).map((w) => w.firstYear)
      : []
    await wishesHook.remove(wishId, 'series')
    closePeriodPopover()
    await runSync(workspaceId, {
      undo: previousWish
        ? {
            label: t('calendar.undoButton'),
            run: async () => {
              const restore = createRequestFromWish(previousWish)
              if (siblingYears.length > 0) {
                restore.recurrence = 'yearly'
                restore.firstYear = Math.min(...siblingYears)
                restore.lastYear = previousWish.lastYear ?? Math.max(...siblingYears)
              }
              await wishesHook.add(restore)
              await runSync(workspaceId, { silent: true })
            },
          }
        : null,
    })
  }

  // §todo9 — the ad-hoc "this period" delete (unchanged behaviour, and also
  // what ad-hoc's "this day" falls back to for a single-day band).
  const deleteAdhocRange = async (start: string, end: string, parentUuid: string) => {
    const bandDates = new Set(datesInRange(start, end))
    const toDelete = (plannedDaysHook.data ?? []).filter(
      (pd) => pd.parentPersonalDataUuid === parentUuid && 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,
            })
          }
        },
      })
    }
  }

  // §todo9 "this period" (this year only). A year of a repeating wish is a
  // real row now, so this is one plain delete — no narrowing `firstYear`/
  // `lastYear`, and no splitting the wish in two around a middle year.
  const deleteWishOccurrence = async (wish: LeaveWish, workspaceId: string) => {
    await wishesHook.remove(wish.id, 'occurrence')
    closePeriodPopover()
    await runSync(workspaceId, {
      undo: {
        label: t('calendar.undoButton'),
        run: async () => {
          // `seriesId` puts the year back INTO its repeating wish rather than
          // beside it, so a later "every year" edit still reaches it.
          await wishesHook.add(createRequestFromWish(wish, wish.seriesId))
          await runSync(workspaceId, { silent: true })
        },
      },
    })
  }

  /** §"removing a single day should stay permanent" — the planner-placed
   * counterpart of `deleteAdhocRange`. An auto-placed day cannot simply be
   * deleted: the wish behind it still asks for the whole window, so the next
   * sync would re-derive it. Recording a `PlannedDayExclusion` is what makes
   * the removal outlive the sync.
   *
   * Keyed on the band's own parent, so a both-parents period loses only the
   * band that was clicked and the partner keeps their day — the toast names
   * the parent so that choice is never a silent one. Undo deletes the
   * exclusion and re-syncs, which puts the day back where it was.
   */
  const excludeDay = async (
    workspaceId: string,
    band: BandClickInfo,
    parentLabel: string,
  ) => {
    const childId =
      (plannedDaysHook.data ?? []).find(
        (pd) => pd.date === band.clickedDate && pd.parentPersonalDataUuid === band.parentPersonalDataUuid,
      )?.childId ?? selectedChildId
    if (!childId) {
      closePeriodPopover()
      return
    }

    const created = await exclusionsHook.exclude({
      workspaceId,
      childId,
      parentPersonalDataUuid: band.parentPersonalDataUuid,
      date: band.clickedDate,
    })
    closePeriodPopover()
    await runSync(workspaceId, { silent: true })

    const dateLabel = formatDateForDisplay(band.clickedDate, locale)
    showToast(t('calendar.toastDayExcluded', { date: dateLabel, parent: parentLabel }), {
      label: t('calendar.undoButton'),
      run: async () => {
        await exclusionsHook.restore(created.id)
        await runSync(workspaceId, { silent: true })
        showToast(t('calendar.toastDayRestored', { date: dateLabel, parent: parentLabel }), null)
      },
    })
  }

  /** The day cell's way back, for when the undo toast is long gone: the day
   * popover lists this date's removals (one per parent) with a restore
   * button. See `excludeDay` for the other direction. */
  const handleRestoreExcluded = async (exclusionId: string) => {
    if (!workspace?.id) return
    const entry = exclusionsHook.data.find((e) => e.id === exclusionId)
    await exclusionsHook.restore(exclusionId)
    setIsModalOpen(false)
    setSelectedDates(new Set())
    await runSync(workspace.id, { silent: true })
    if (entry) {
      showToast(
        t('calendar.toastDayRestored', {
          date: formatDateForDisplay(entry.date, locale),
          parent: resolveParentName(entry.parentPersonalDataUuid),
        }),
        null,
      )
    }
  }

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

    try {
      setIsPeriodSaving(true)
      setPeriodError(null)

      if (scope === 'allYears') {
        if (activeBand.wishId) await deleteWishSeries(activeBand.wishId, workspace.id)
        else closePeriodPopover() // disabled in the UI for ad-hoc bands
        return
      }

      if (scope === 'day') {
        if (activeBand.wishId) {
          // A planner-placed day: deleting the row would not survive the next
          // sync, so record the removal instead.
          await excludeDay(
            workspace.id,
            activeBand,
            resolveParentName(activeBand.parentPersonalDataUuid),
          )
          return
        }
        await deleteAdhocRange(
          activeBand.clickedDate,
          activeBand.clickedDate,
          activeBand.parentPersonalDataUuid,
        )
        return
      }

      // scope === 'year'
      if (activeBand.wishId) {
        const previousWish = wishesHook.data.find((w) => w.id === activeBand.wishId)
        if (!previousWish) {
          closePeriodPopover()
          return
        }
        await deleteWishOccurrence(previousWish, workspace.id)
      } else {
        await deleteAdhocRange(activeBand.startDate, activeBand.endDate, activeBand.parentPersonalDataUuid)
      }
    } 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: membersHook.data.length >= 2 ? 'both' : 'either',
        windowMode: 'flexible',
      })

      const result = await runSync(workspace.id, {
        watchWishId: created.id,
        watchWish: created,
        undo: {
          label: t('calendar.undoButton'),
          run: async () => {
            // The preset is a repeating wish, so `created` is only its first
            // year — undo has to take the whole series with it.
            await wishesHook.remove(created.id, 'series')
            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') }]

  // Same members, keyed for CalendarWeek's band labels — a band owned by a
  // partner must show their actual name, not the generic "Partner" string.
  const parentNamesByUuid = new Map(parentsForModals.map((p) => [p.id, p.name]))

  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
            type="button"
            className="btn btn--icon"
            onClick={handlePrevMonth}
            aria-label={t('calendar.prevMonthAria')}
          >
            ←
          </button>
          <h2 className="calendar__title">
            <button
              type="button"
              className="btn btn--ghost calendar__today-button"
              onClick={() => setCurrentMonth(new Date())}
            >
              {t('calendar.today')}
            </button>
            <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
            type="button"
            className="btn btn--icon"
            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) => (
                <CalendarWeek
                  key={weekIdx}
                  weekDates={week}
                  plannedDays={plannedDaysHook.data ?? []}
                  selectedDates={highlightedDates}
                  parentName={parentName ?? t('calendar.you')}
                  personalDataUuid={personalDataUuid ?? ''}
                  parentNames={parentNamesByUuid}
                  displayedYear={year}
                  displayedMonth={month}
                  showWeekNumbers={showWeekNumbers}
                  onDayClick={handleDayClick}
                  onPointerDown={handlePointerDown}
                  onPointerEnter={handlePointerEnter}
                  calendarDaysByDate={calendarDaysByDate}
                  excludedDates={excludedDates}
                  onBandClick={handleBandClick}
                  flashWishId={flashWishId}
                  monthMaxLaneCount={monthMaxLaneCount}
                />
              ))}
            </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 calendar__legend-swatch--${getTypeModifier('lagsta')}`} 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, advancedParentId) ?? null}
            parents={parentsForModals}
            selectedParentId={advancedParentId}
            onParentChange={setAdvancedParentId}
            onSaveWish={handleSaveWish}
            onSavePinned={handleSavePinnedDay}
            onDelete={getExistingDay(firstSelectedDate, advancedParentId) ? handleDeletePlannedDay : undefined}
            excludedEntries={exclusionsHook.data
              .filter((e) => e.date === firstSelectedDate)
              .map((e) => ({ id: e.id, parentName: resolveParentName(e.parentPersonalDataUuid) }))}
            onRestoreExcluded={handleRestoreExcluded}
            onClose={() => {
              setIsModalOpen(false)
              setSelectedDates(new Set())
            }}
            isSaving={isSaving}
            error={modalError}
            defaultDayType={defaultLeaveType}
            isRangeMode={selectedDates.size > 1}
            dayCount={selectedDates.size}
          />
        )}

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