<script setup lang="ts">
import { computed, ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
import ModalDialog from '../shared/ModalDialog.vue'
import ScheduleModal from '../shared/ScheduleModal.vue'
import PendingRewardDialog from './PendingRewardDialog.vue'
import TaskConfirmDialog from './TaskConfirmDialog.vue'
import RewardConfirmDialog from './RewardConfirmDialog.vue'
import ChoreApproveDialog from './ChoreApproveDialog.vue'
import RoutineConfirmDialog from './RoutineConfirmDialog.vue'
import RoutineApproveDialog from './RoutineApproveDialog.vue'
import { useRoute, useRouter } from 'vue-router'
import ChildDetailCard from './ChildDetailCard.vue'
import ScrollingList from '../shared/ScrollingList.vue'
import StatusMessage from '../shared/StatusMessage.vue'
import {
  setChildOverride,
  parseErrorResponse,
  extendChoreTime,
  approveChore,
  rejectChore,
  resetChore,
  extendRoutineTime,
  setChildRoutineOverride,
  approveRoutine,
  rejectRoutine,
  resetRoutine,
  triggerRoutineAsParent,
} from '@/common/api'
import { eventBus } from '@/common/eventBus'
import {
  maybeShow as tutorialMaybeShow,
  activeStep as tutorialActiveStep,
  modalTutorialStepId,
  setHelpButtonHidden,
} from '@/tutorial/controller'
import '@/assets/styles.css'
import type {
  Task,
  Child,
  Event,
  Reward,
  RewardStatus,
  ChildTask,
  ChildRoutine,
  ChildTaskTriggeredEventPayload,
  ChildRewardTriggeredEventPayload,
  ChildRewardRequestEventPayload,
  ChildTasksSetEventPayload,
  ChildRewardsSetEventPayload,
  ChildModifiedEventPayload,
  TaskModifiedEventPayload,
  RewardModifiedEventPayload,
  ChildOverrideSetPayload,
  ChildOverrideDeletedPayload,
  ChoreScheduleModifiedPayload,
  ChoreTimeExtendedPayload,
  ChildChoreConfirmationPayload,
  RoutineScheduleModifiedPayload,
  RoutineTimeExtendedPayload,
} from '@/common/models'
import {
  isScheduledToday,
  isPastTime,
  getDueTimeToday,
  formatDueTimeLabel,
  msUntilExpiry,
  isExtendedToday,
  toLocalISODate,
} from '@/common/scheduleUtils'

const route = useRoute()
const router = useRouter()

const child = ref<Child | null>(null)
const tasks = ref<string[]>([])
const rewards = ref<string[]>([])
const loading = ref(true)
const error = ref<string | null>(null)
const showConfirm = ref(false)
const selectedTask = ref<Task | null>(null)
const showRewardConfirm = ref(false)
const selectedReward = ref<Reward | null>(null)
const childChoreListRef = ref()
const childPenaltyListRef = ref()
const childRewardListRef = ref()
const childKindnessListRef = ref()
const showPendingRewardDialog = ref(false)
const lastEditedItem = ref<{ id: string; type: 'task' | 'reward' } | null>(null)

// Chore approve/reject
const showChoreApproveDialog = ref(false)
const approveDialogChore = ref<ChildTask | null>(null)

// Routine approve/reject
const showRoutineApproveDialog = ref(false)
const approveDialogRoutine = ref<ChildRoutine | null>(null)
const showRoutineConfirmDialog = ref(false)
const confirmDialogRoutine = ref<ChildRoutine | null>(null)

// Override editing
const showOverrideModal = ref(false)
const overrideEditTarget = ref<{ entity: Task | Reward; type: 'task' | 'reward' } | null>(null)
const overrideCustomValue = ref(0)
const isOverrideValid = ref(true)
const readyItemId = ref<string | null>(null)
const pendingEditOverrideTarget = ref<{ entity: Task | Reward; type: 'task' | 'reward' } | null>(
  null,
)

// Kebab menu
const activeMenuFor = ref<string | null>(null)
const shouldIgnoreNextCardClick = ref(false)
const selectedChoreId = ref<string | null>(null)
const menuPosition = ref({ top: 0, left: 0 })
const kebabBtnRefs = ref<Map<string, HTMLElement>>(new Map())

// Tutorial auto-demo state
const tutorialHighlightedItemId = ref<string | null>(null)

// Schedule modal
const showScheduleModal = ref(false)
const scheduleTarget = ref<ChildTask | null>(null)

// Routines
const childRoutineListRef = ref()
const selectedRoutineId = ref<string | null>(null)
const activeRoutineMenuFor = ref<string | null>(null)
const routineKebabBtnRefs = ref<Map<string, HTMLElement>>(new Map())
const showRoutineScheduleModal = ref(false)
const routineScheduleTarget = ref<ChildRoutine | null>(null)

const pendingDialogReward = computed<Reward | RewardStatus | null>(() => {
  if (pendingEditOverrideTarget.value?.type === 'reward') {
    return pendingEditOverrideTarget.value.entity as Reward
  }

  return selectedReward.value
})

// Expiry timers
const expiryTimers = ref<number[]>([])

// Last fetch date (for overnight detection)
const lastFetchDate = ref<string>(toLocalISODate(new Date()))

function handleItemReady(itemId: string) {
  readyItemId.value = itemId
  selectedChoreId.value = null
  selectedRoutineId.value = null
}

function handleChoreItemReady(itemId: string) {
  readyItemId.value = itemId
  selectedChoreId.value = itemId || null
}

function handleTaskTriggered(event: Event) {
  const payload = event.payload as ChildTaskTriggeredEventPayload
  if (child.value && payload.child_id == child.value.id) {
    child.value.points = payload.points
    childRewardListRef.value?.refresh()
  }
}

function handleRewardTriggered(event: Event) {
  const payload = event.payload as ChildRewardTriggeredEventPayload
  if (child.value && payload.child_id == child.value.id) {
    child.value.points = payload.points
    childRewardListRef.value?.refresh()
  }
}

function handleChildTaskSet(event: Event) {
  const payload = event.payload as ChildTasksSetEventPayload
  if (child.value && payload.child_id == child.value.id) {
    tasks.value = payload.task_ids
  }
}

function handleChildRewardSet(event: Event) {
  const payload = event.payload as ChildRewardsSetEventPayload
  if (child.value && payload.child_id == child.value.id) {
    rewards.value = payload.reward_ids
  }
}

function handleRewardRequest(event: Event) {
  const payload = event.payload as ChildRewardRequestEventPayload
  const childId = payload.child_id
  const rewardId = payload.reward_id
  if (child.value && childId == child.value.id) {
    if (rewards.value.find((r) => r === rewardId)) {
      childRewardListRef.value?.refresh()
    }
  }
}

function handleTaskModified(event: Event) {
  const payload = event.payload as TaskModifiedEventPayload
  if (child.value) {
    const task_id = payload.task_id
    if (tasks.value.includes(task_id)) {
      try {
        switch (payload.operation) {
          case 'DELETE':
            // Remove the task from the list
            tasks.value = tasks.value.filter((t) => t !== task_id)
            return // No need to refetch

          case 'ADD':
            // A new task was added, this shouldn't affect the current task list
            console.log('ADD operation received for task_modified, no action taken.')
            return // No need to refetch

          case 'EDIT':
            try {
              const dataPromise = fetchChildData(child.value.id)
              dataPromise.then((data) => {
                if (data) {
                  tasks.value = data.tasks || []
                }
                loading.value = false
              })
            } catch (err) {
              console.warn('Failed to fetch child after EDIT operation:', err)
            }
            break

          default:
            console.warn(`Unknown operation: ${payload.operation}`)
            return // No need to refetch
        }
      } catch (err) {
        console.warn('Failed to fetch child after task modification:', err)
        loading.value = false
      }
    }
  }
}

function handleRewardModified(event: Event) {
  const payload = event.payload as RewardModifiedEventPayload
  if (child.value) {
    const reward_id = payload.reward_id
    if (rewards.value.includes(reward_id)) {
      childRewardListRef.value?.refresh()
    }
  }
}

function handleChildModified(event: Event) {
  const payload = event.payload as ChildModifiedEventPayload
  if (child.value && payload.child_id == child.value.id) {
    switch (payload.operation) {
      case 'DELETE':
        // Navigate away back to children list
        router.push({ name: 'ChildrenListView' })
        break

      case 'ADD':
        // A new child was added, this shouldn't affect the current child view
        console.log('ADD operation received for child_modified, no action taken.')
        break

      case 'EDIT':
        //our child was edited, refetch its data
        try {
          const dataPromise = fetchChildData(payload.child_id)
          dataPromise.then((data) => {
            if (data) {
              child.value = data
            }
            loading.value = false
          })
        } catch (err) {
          console.warn('Failed to fetch child after EDIT operation:', err)
          loading.value = false
        }
        break
      default:
        console.warn(`Unknown operation: ${payload.operation}`)
    }
  }
}

function handleOverrideSet(event: Event) {
  const payload = event.payload as ChildOverrideSetPayload
  if (child.value && payload.override.child_id === child.value.id) {
    const editedId = lastEditedItem.value?.id ?? null
    const scrollAfterRefresh = (listRef: typeof childChoreListRef) => {
      listRef.value?.refresh().then(() => {
        if (editedId) listRef.value?.scrollToItem(editedId)
      })
    }
    if (payload.override.entity_type === 'task') {
      scrollAfterRefresh(childChoreListRef)
      scrollAfterRefresh(childKindnessListRef)
      scrollAfterRefresh(childPenaltyListRef)
    } else if (payload.override.entity_type === 'reward') {
      scrollAfterRefresh(childRewardListRef)
    } else if (payload.override.entity_type === 'routine') {
      scrollAfterRefresh(childRoutineListRef)
    }
    lastEditedItem.value = null
  }
}

function handleOverrideDeleted(event: Event) {
  const payload = event.payload as ChildOverrideDeletedPayload
  if (child.value && payload.child_id === child.value.id) {
    // Refresh the appropriate list to remove the override badge
    if (payload.entity_type === 'task') {
      childChoreListRef.value?.refresh()
      childKindnessListRef.value?.refresh()
      childPenaltyListRef.value?.refresh()
    } else if (payload.entity_type === 'reward') {
      childRewardListRef.value?.refresh()
    }
  }
}

function handleChoreScheduleModified(event: Event) {
  const payload = event.payload as ChoreScheduleModifiedPayload
  if (child.value && payload.child_id === child.value.id) {
    childChoreListRef.value?.refresh()
    setTimeout(() => resetExpiryTimers(), 300)
  }
}

function handleChoreTimeExtended(event: Event) {
  const payload = event.payload as ChoreTimeExtendedPayload
  if (child.value && payload.child_id === child.value.id) {
    childChoreListRef.value?.refresh()
    setTimeout(() => resetExpiryTimers(), 300)
  }
}

function handleChoreConfirmation(event: Event) {
  const payload = event.payload as ChildChoreConfirmationPayload
  if (child.value && payload.child_id === child.value.id) {
    childChoreListRef.value?.refresh()
  }
}

// ── Routine SSE handlers ──────────────────────────────────────────────────────

function handleRoutineScheduleModified(event: Event) {
  const payload = event.payload as RoutineScheduleModifiedPayload
  if (child.value && payload.child_id === child.value.id) {
    childRoutineListRef.value?.refresh()
  }
}

function handleRoutineTimeExtended(event: Event) {
  const payload = event.payload as RoutineTimeExtendedPayload
  if (child.value && payload.child_id === child.value.id) {
    childRoutineListRef.value?.refresh()
  }
}

function handleRoutineModified() {
  childRoutineListRef.value?.refresh()
}

function handleChildRoutinesSet(event: Event) {
  const payload = event.payload as { child_id: string }
  if (child.value && payload.child_id === child.value.id) {
    childRoutineListRef.value?.refresh()
  }
}

function handleChildRoutineConfirmation(event: Event) {
  const payload = event.payload as { child_id: string }
  if (child.value && payload.child_id === child.value.id) {
    childRoutineListRef.value?.refresh()
  }
}

// ── Routine helpers ───────────────────────────────────────────────────────────

function isRoutineScheduledToday(item: ChildRoutine): boolean {
  if (!item.schedule) return true
  return isScheduledToday(item.schedule as any, new Date())
}

function isRoutineExpired(item: ChildRoutine): boolean {
  if (item.pending_status === 'pending') return false
  if (!item.schedule) return false
  const now = new Date()
  if (!isScheduledToday(item.schedule as any, now)) return false
  const due = getDueTimeToday(item.schedule as any, now)
  if (!due) return false
  if (isExtendedToday(item.extension_date ?? null, now)) return false
  return isPastTime(due.hour, due.minute, now)
}

function isRoutinePending(item: ChildRoutine): boolean {
  return item.pending_status === 'pending'
}

function isRoutineApprovedToday(item: ChildRoutine): boolean {
  if (item.pending_status !== 'approved' || !item.approved_at) return false
  const approvedDate = new Date(item.approved_at)
  const today = new Date()
  return (
    approvedDate.getFullYear() === today.getFullYear() &&
    approvedDate.getMonth() === today.getMonth() &&
    approvedDate.getDate() === today.getDate()
  )
}

function isRoutineInactive(item: ChildRoutine): boolean {
  return !isRoutineScheduledToday(item) || isRoutineExpired(item)
}

function routineDueLabel(item: ChildRoutine): string | null {
  if (!item.schedule) return null
  const now = new Date()
  if (!isScheduledToday(item.schedule as any, now)) return null
  const due = getDueTimeToday(item.schedule as any, now)
  if (!due) return null
  if (isExtendedToday(item.extension_date ?? null, now)) return null
  if (isPastTime(due.hour, due.minute, now)) return null
  return `Due by ${formatDueTimeLabel(due.hour, due.minute)}`
}

// ── Routine kebab menu ────────────────────────────────────────────────────────

function handleRoutineItemReady(itemId: string) {
  readyItemId.value = itemId
  selectedRoutineId.value = itemId || null
}

function openRoutineMenu(routineId: string, e: MouseEvent) {
  e.stopPropagation()
  const btn = routineKebabBtnRefs.value.get(routineId)
  if (btn) {
    btn.scrollIntoView({ block: 'center', behavior: 'auto' })
    const rect = btn.getBoundingClientRect()
    menuPosition.value = { top: rect.bottom, left: rect.right - 140 }
  }
  activeRoutineMenuFor.value = routineId
  nextTick(() => {
    tutorialMaybeShow(
      'routine-kebab-menu',
      () => document.querySelector('.kebab-menu') as HTMLElement | null,
    )
    tutorialMaybeShow(
      'kebab-edit-points-cost',
      () => document.querySelector('[data-tutorial~="kebab-edit-points-cost"]') as HTMLElement | null,
    )
    tutorialMaybeShow(
      'routine-schedule',
      () => document.querySelector('[data-tutorial="routine-schedule"]') as HTMLElement | null,
    )
  })
  const items = childRoutineListRef.value?.items ?? []
  const routine = items.find((r) => r.id === routineId)
  if (routine) {
    if (isRoutineExpired(routine)) {
      nextTick(() => {
        tutorialMaybeShow(
          'routine-extend-time',
          () => document.querySelector('[data-tutorial="routine-extend-time"]') as HTMLElement | null,
        )
      })
    }
    if (isRoutineApprovedToday(routine)) {
      nextTick(() => {
        tutorialMaybeShow(
          'routine-reset',
          () => document.querySelector('[data-tutorial="routine-reset"]') as HTMLElement | null,
        )
      })
    }
  }
}

function closeRoutineMenu() {
  activeRoutineMenuFor.value = null
}

function openRoutineScheduleModal(item: ChildRoutine, e: MouseEvent) {
  e.stopPropagation()
  closeRoutineMenu()
  routineScheduleTarget.value = item
  showRoutineScheduleModal.value = true
}

function onRoutineScheduleSaved() {
  showRoutineScheduleModal.value = false
  routineScheduleTarget.value = null
}

function editRoutine(item: ChildRoutine) {
  closeRoutineMenu()
  router.push({ name: 'EditRoutine', params: { id: item.id } })
}

function editRoutinePoints(item: ChildRoutine) {
  closeRoutineMenu()
  overrideEditTarget.value = { entity: item as any, type: 'routine' as any }
  const defaultValue = item.custom_value ?? item.points
  overrideCustomValue.value = defaultValue
  validateOverrideInput()
  showOverrideModal.value = true
}

async function doExtendRoutineTime(item: ChildRoutine, e: MouseEvent) {
  e.stopPropagation()
  closeRoutineMenu()
  if (!child.value) return
  const today = toLocalISODate(new Date())
  const res = await extendRoutineTime(child.value.id, item.id, today)
  if (!res.ok) {
    const { msg } = await parseErrorResponse(res)
    alert(`Error: ${msg}`)
  }
}

function isChoreCompletedToday(item: ChildTask): boolean {
  if (item.pending_status !== 'approved' || !item.approved_at) return false
  const approvedDate = new Date(item.approved_at)
  const today = new Date()
  const sameDay =
    approvedDate.getFullYear() === today.getFullYear() &&
    approvedDate.getMonth() === today.getMonth() &&
    approvedDate.getDate() === today.getDate()
  if (!sameDay) return false
  // If the task has a schedule and today is not a scheduled day, don't show as completed
  if (item.schedule && !isScheduledToday(item.schedule, new Date())) return false
  return true
}

function isChorePending(item: ChildTask): boolean {
  return item.pending_status === 'pending'
}

async function doApproveChore() {
  if (!child.value || !approveDialogChore.value) return
  try {
    const resp = await approveChore(child.value.id, approveDialogChore.value.id)
    if (resp.ok) {
      const data = await resp.json()
      if (child.value) child.value.points = data.points
    } else {
      const { msg } = await parseErrorResponse(resp)
      alert(`Error: ${msg}`)
    }
  } catch (err) {
    console.error('Failed to approve chore:', err)
  } finally {
    showChoreApproveDialog.value = false
    approveDialogChore.value = null
  }
}

async function doRejectChore() {
  if (!child.value || !approveDialogChore.value) return
  try {
    const resp = await rejectChore(child.value.id, approveDialogChore.value.id)
    if (!resp.ok) {
      const { msg } = await parseErrorResponse(resp)
      alert(`Error: ${msg}`)
    }
  } catch (err) {
    console.error('Failed to reject chore:', err)
  } finally {
    showChoreApproveDialog.value = false
    approveDialogChore.value = null
  }
}

function cancelChoreApproveDialog() {
  showChoreApproveDialog.value = false
  approveDialogChore.value = null
}

// ── Routine approve/reject ────────────────────────────────────────────────────

async function doApproveRoutine() {
  if (!child.value || !approveDialogRoutine.value) return
  try {
    const confirmationId = approveDialogRoutine.value.pending_confirmation_id
    if (!confirmationId) return
    const resp = await approveRoutine(child.value.id, confirmationId)
    if (resp.ok) {
      const data = await resp.json()
      if (child.value) child.value.points = data.points
    } else {
      const { msg } = await parseErrorResponse(resp)
      alert(`Error: ${msg}`)
    }
  } catch (err) {
    console.error('Failed to approve routine:', err)
  } finally {
    showRoutineApproveDialog.value = false
    approveDialogRoutine.value = null
  }
}

async function doRejectRoutine() {
  if (!child.value || !approveDialogRoutine.value) return
  const confirmationId = approveDialogRoutine.value.pending_confirmation_id
  if (!confirmationId) return
  try {
    const resp = await rejectRoutine(child.value.id, confirmationId)
    if (!resp.ok) {
      const { msg } = await parseErrorResponse(resp)
      alert(`Error: ${msg}`)
    }
  } catch (err) {
    console.error('Failed to reject routine:', err)
  } finally {
    showRoutineApproveDialog.value = false
    approveDialogRoutine.value = null
  }
}

function cancelRoutineApproveDialog() {
  showRoutineApproveDialog.value = false
  approveDialogRoutine.value = null
}

async function doConfirmRoutine() {
  if (!child.value || !confirmDialogRoutine.value) return
  try {
    const resp = await triggerRoutineAsParent(child.value.id, confirmDialogRoutine.value.id)
    if (resp.ok) {
      const data = await resp.json()
      if (child.value) child.value.points = data.points
    } else {
      const { msg } = await parseErrorResponse(resp)
      alert(`Error: ${msg}`)
    }
  } catch (err) {
    console.error('Failed to confirm routine:', err)
  } finally {
    showRoutineConfirmDialog.value = false
    confirmDialogRoutine.value = null
  }
}

function cancelRoutineConfirmDialog() {
  showRoutineConfirmDialog.value = false
  confirmDialogRoutine.value = null
}

async function doResetRoutine(item: ChildRoutine, e: MouseEvent) {
  e.stopPropagation()
  closeRoutineMenu()
  if (!child.value || !item.pending_confirmation_id) return
  try {
    const resp = await resetRoutine(child.value.id, item.pending_confirmation_id)
    if (!resp.ok) {
      const { msg } = await parseErrorResponse(resp)
      alert(`Error: ${msg}`)
    }
  } catch (err) {
    console.error('Failed to reset routine:', err)
  }
}

function triggerRoutine(item: ChildRoutine) {
  if (shouldIgnoreNextCardClick.value) {
    shouldIgnoreNextCardClick.value = false
    return
  }
  if (isRoutineApprovedToday(item)) return
  if (isRoutineExpired(item)) return
  if (isRoutinePending(item)) {
    approveDialogRoutine.value = item
    setTimeout(() => {
      showRoutineApproveDialog.value = true
    }, 150)
    return
  }
  confirmDialogRoutine.value = item
  setTimeout(() => {
    showRoutineConfirmDialog.value = true
  }, 150)
}

async function doResetChore(item: ChildTask, e: MouseEvent) {
  e.stopPropagation()
  closeChoreMenu()
  if (!child.value) return
  try {
    const resp = await resetChore(child.value.id, item.id)
    if (!resp.ok) {
      const { msg } = await parseErrorResponse(resp)
      alert(`Error: ${msg}`)
    }
  } catch (err) {
    console.error('Failed to reset chore:', err)
  }
}

// ── Kebab menu ───────────────────────────────────────────────────────────────

const onDocClick = (e: MouseEvent) => {
  if (activeMenuFor.value !== null || activeRoutineMenuFor.value !== null) {
    const path = (e.composedPath?.() ?? (e as any).path ?? []) as EventTarget[]
    const inside = path.some((node) => {
      if (!(node instanceof HTMLElement)) return false
      return (
        node.classList.contains('chore-kebab-wrap') ||
        node.classList.contains('kebab-btn') ||
        node.classList.contains('kebab-menu')
      )
    })
    const fromTutorial = path.some(
      (n) => n instanceof HTMLElement && n.classList.contains('tutorial-root'),
    )
    if (!inside && !fromTutorial) {
      activeMenuFor.value = null
      activeRoutineMenuFor.value = null
      selectedChoreId.value = null
      selectedRoutineId.value = null
      if (path.some((n) => n instanceof HTMLElement && n.classList.contains('item-card'))) {
        shouldIgnoreNextCardClick.value = true
      } else {
        readyItemId.value = null
      }
    }
  }
}

function openChoreMenu(taskId: string, e: MouseEvent) {
  e.stopPropagation()
  const btn = kebabBtnRefs.value.get(taskId)
  if (btn) {
    btn.scrollIntoView({ block: 'center', behavior: 'auto' })
    const rect = btn.getBoundingClientRect()
    menuPosition.value = { top: rect.bottom, left: rect.right - 140 }
  }
  activeMenuFor.value = taskId
  nextTick(() => {
    tutorialMaybeShow(
      'chore-kebab-menu',
      () => document.querySelector('.kebab-menu') as HTMLElement | null,
    )
    tutorialMaybeShow(
      'kebab-edit-points-cost',
      () => document.querySelector('[data-tutorial~="kebab-edit-points-cost"]') as HTMLElement | null,
    )
    tutorialMaybeShow(
      'chore-schedule',
      () => document.querySelector('[data-tutorial="chore-schedule"]') as HTMLElement | null,
    )
  })
  const items: ChildTask[] = childChoreListRef.value?.items ?? []
  const task = items.find((t) => t.id === taskId)
  if (task) {
    if (isChoreExpired(task)) {
      nextTick(() => {
        tutorialMaybeShow(
          'chore-kebab-extend-time',
          () => document.querySelector('[data-tutorial="chore-extend-time"]') as HTMLElement | null,
        )
      })
    }
    if (isChoreCompletedToday(task)) {
      nextTick(() => {
        tutorialMaybeShow(
          'chore-kebab-reset',
          () => document.querySelector('[data-tutorial="chore-reset"]') as HTMLElement | null,
        )
      })
    }
  }
}

function closeChoreMenu() {
  activeMenuFor.value = null
}

// ── Schedule modal ────────────────────────────────────────────────────────────

function openScheduleModal(item: ChildTask, e: MouseEvent) {
  e.stopPropagation()
  closeChoreMenu()
  scheduleTarget.value = item
  showScheduleModal.value = true
}

function onScheduleSaved() {
  showScheduleModal.value = false
  scheduleTarget.value = null
  setTimeout(() => resetExpiryTimers(), 300)
}

// ── Extend Time ───────────────────────────────────────────────────────────────

async function doExtendTime(item: ChildTask, e: MouseEvent) {
  e.stopPropagation()
  closeChoreMenu()
  if (!child.value) return
  const today = toLocalISODate(new Date())
  const res = await extendChoreTime(child.value.id, item.id, today)
  if (!res.ok) {
    const { msg } = await parseErrorResponse(res)
    alert(`Error: ${msg}`)
    return
  }
  // SSE event 'chore_time_extended' triggers handleChoreTimeExtended which refreshes the list
}

// ── Schedule state helpers (for item-slot use) ────────────────────────────────

function isChoreScheduledToday(item: ChildTask): boolean {
  if (!item.schedule) return true // no schedule = always active
  return isScheduledToday(item.schedule, new Date())
}

function isChoreExpired(item: ChildTask): boolean {
  if (item.pending_status === 'pending') return false
  if (!item.schedule) return false
  const now = new Date()
  if (!isScheduledToday(item.schedule, now)) return false
  const due = getDueTimeToday(item.schedule, now)
  if (!due) return false
  if (isExtendedToday(item.extension_date, now)) return false
  return isPastTime(due.hour, due.minute, now)
}

function choreDueLabel(item: ChildTask): string | null {
  if (!item.schedule) return null
  const now = new Date()
  if (!isScheduledToday(item.schedule, now)) return null
  const due = getDueTimeToday(item.schedule, now)
  if (!due) return null
  if (isExtendedToday(item.extension_date, now)) return null
  if (isPastTime(due.hour, due.minute, now)) return null
  return `Due by ${formatDueTimeLabel(due.hour, due.minute)}`
}

function isChoreInactive(item: ChildTask): boolean {
  return !isChoreScheduledToday(item) || isChoreExpired(item)
}

// ── Sorting ───────────────────────────────────────────────────────────────────

function parentChoreSortPriority(item: ChildTask): number {
  if (isChorePending(item)) return 0
  if (!isChoreScheduledToday(item)) return 4
  if (isChoreCompletedToday(item)) return 3
  if (isChoreExpired(item)) return 2
  return 1 // general / active
}

function parentChoreSort(a: ChildTask, b: ChildTask): number {
  return parentChoreSortPriority(a) - parentChoreSortPriority(b)
}

function parentRewardSort(a: RewardStatus, b: RewardStatus): number {
  if (a.redeeming !== b.redeeming) return a.redeeming ? -1 : 1
  return 0
}

// ── Expiry timers ─────────────────────────────────────────────────────────────

function clearExpiryTimers() {
  expiryTimers.value.forEach(clearTimeout)
  expiryTimers.value = []
}

function resetExpiryTimers() {
  clearExpiryTimers()
  const items: ChildTask[] = childChoreListRef.value?.items ?? []
  const now = new Date()
  for (const item of items) {
    if (!item.schedule || item.type !== 'chore') continue
    if (!isScheduledToday(item.schedule, now)) continue
    const due = getDueTimeToday(item.schedule, now)
    if (!due) continue
    if (isExtendedToday(item.extension_date, now)) continue
    if (isPastTime(due.hour, due.minute, now)) continue
    const ms = msUntilExpiry(due.hour, due.minute, now)
    const handle = setTimeout(() => {
      // trigger a reactive update by refreshing the list
      childChoreListRef.value?.refresh()
    }, ms) as unknown as number
    expiryTimers.value.push(handle)
  }
}

// ── Midnight detection (tab left open overnight) ──────────────────────────────

function onVisibilityChange() {
  if (document.visibilityState !== 'visible') return
  const today = toLocalISODate(new Date())
  if (today !== lastFetchDate.value) {
    lastFetchDate.value = today
    childChoreListRef.value?.refresh()
    resetExpiryTimers()
  }
}

function handleEditItem(item: Task | Reward, type: 'task' | 'reward') {
  // If editing a pending reward, warn first
  if (type === 'reward' && (item as any).redeeming) {
    pendingEditOverrideTarget.value = { entity: item, type }
    showPendingRewardDialog.value = true
    return
  }
  overrideEditTarget.value = { entity: item, type }
  const defaultValue = type === 'task' ? (item as Task).points : (item as Reward).cost
  overrideCustomValue.value = (item as any).custom_value ?? defaultValue
  validateOverrideInput()
  showOverrideModal.value = true
}

function editChorePoints(item: Task) {
  handleEditItem(item, 'task')
  closeChoreMenu()
}

async function confirmPendingRewardAndEdit() {
  if (!pendingEditOverrideTarget.value) return
  const item = pendingEditOverrideTarget.value.entity as any
  await cancelRewardById(item.id)
  showPendingRewardDialog.value = false
  const target = pendingEditOverrideTarget.value
  pendingEditOverrideTarget.value = null
  // Open override modal directly, bypassing the redeeming check
  overrideEditTarget.value = target
  const defaultValue =
    target.type === 'task' ? (target.entity as Task).points : (target.entity as Reward).cost
  overrideCustomValue.value = (target.entity as any).custom_value ?? defaultValue
  validateOverrideInput()
  showOverrideModal.value = true
}

function validateOverrideInput() {
  const val = overrideCustomValue.value
  isOverrideValid.value = typeof val === 'number' && val >= 0 && val <= 10000
}

watch(showOverrideModal, async (newVal) => {
  if (newVal) {
    await nextTick()
    document.getElementById('custom-value')?.focus()
    modalTutorialStepId.value = 'point-editor-help'
    tutorialMaybeShow(
      'point-editor-help',
      () => document.querySelector('input#custom-value') as HTMLElement | null,
    )
  } else {
    modalTutorialStepId.value = null
  }
})

watch(showConfirm, (newVal) => setHelpButtonHidden(newVal))
watch(showRewardConfirm, (newVal) => setHelpButtonHidden(newVal))
watch(showRoutineConfirmDialog, (newVal) => setHelpButtonHidden(newVal))

async function saveOverride() {
  if (!isOverrideValid.value || !overrideEditTarget.value || !child.value) return

  const type = overrideEditTarget.value.type as string
  let res: Response
  if (type === 'routine') {
    res = await setChildRoutineOverride(
      child.value.id,
      overrideEditTarget.value.entity.id,
      overrideCustomValue.value,
    )
  } else {
    res = await setChildOverride(
      child.value.id,
      overrideEditTarget.value.entity.id,
      overrideEditTarget.value.type,
      overrideCustomValue.value,
    )
  }

  if (res.ok) {
    lastEditedItem.value = {
      id: overrideEditTarget.value.entity.id,
      type: overrideEditTarget.value.type,
    }
    showOverrideModal.value = false
  } else {
    const { msg } = await parseErrorResponse(res)
    alert(`Error: ${msg}`)
  }
}

async function fetchChildData(id: string | number) {
  loading.value = true
  try {
    const resp = await fetch(`/api/child/${id}`)
    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
    const data = await resp.json()
    error.value = null
    return data
  } catch (err) {
    error.value = err instanceof Error ? err.message : 'Failed to fetch child'
    console.error(err)
    return null
  } finally {
  }
}

function applyHighlightPulse(itemId: string) {
  // Delay slightly so the scroll animation has time to settle
  setTimeout(() => {
    const el = document.querySelector(`[data-item-id="${itemId}"]`)
    if (!el) return
    el.classList.add('highlight-pulse')
    el.addEventListener(
      'animationend',
      () => {
        el.classList.remove('highlight-pulse')
      },
      { once: true },
    )
  }, 200)
}

// Handle digestToken appearing in route query (e.g. SW navigates to same route with new token)
watch(
  () => route.query.digestToken,
  async (token) => {
    if (typeof token !== 'string' || !token) return
    try {
      const res = await fetch(`/api/digest-action/${token}`, {
        method: 'POST',
        credentials: 'include',
      })
      const data = await res.json().catch(() => ({}))
      console.log('[ParentView] digest-action POST status=', res.status, 'body=', data)
    } catch (e) {
      console.warn('[ParentView] Digest action request failed:', e)
    }
    // Refresh chore and reward lists to reflect the action result
    childChoreListRef.value?.refresh()
    childRewardListRef.value?.refresh()
    if (child.value?.id) {
      const updated = await fetchChildData(child.value.id)
      if (updated) {
        child.value = updated
      }
    }
  },
)

onMounted(async () => {
  try {
    eventBus.on('child_task_triggered', handleTaskTriggered)
    eventBus.on('child_reward_triggered', handleRewardTriggered)
    eventBus.on('child_tasks_set', handleChildTaskSet)
    eventBus.on('child_rewards_set', handleChildRewardSet)
    eventBus.on('task_modified', handleTaskModified)
    eventBus.on('reward_modified', handleRewardModified)
    eventBus.on('child_modified', handleChildModified)
    eventBus.on('child_reward_request', handleRewardRequest)
    eventBus.on('child_override_set', handleOverrideSet)
    eventBus.on('child_override_deleted', handleOverrideDeleted)
    eventBus.on('chore_schedule_modified', handleChoreScheduleModified)
    eventBus.on('chore_time_extended', handleChoreTimeExtended)
    eventBus.on('child_chore_confirmation', handleChoreConfirmation)
    eventBus.on('routine_schedule_modified', handleRoutineScheduleModified)
    eventBus.on('routine_time_extended', handleRoutineTimeExtended)
    eventBus.on('routine_modified', handleRoutineModified)
    eventBus.on('child_routines_set', handleChildRoutinesSet)
    eventBus.on('child_routine_confirmation', handleChildRoutineConfirmation)

    document.addEventListener('click', onDocClick, true)
    document.addEventListener('visibilitychange', onVisibilityChange)

    if (route.params.id) {
      const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
      const scrollToId = typeof route.query.scrollTo === 'string' ? route.query.scrollTo : null
      const entityType = typeof route.query.entityType === 'string' ? route.query.entityType : null
      const digestToken =
        typeof route.query.digestToken === 'string' ? route.query.digestToken : null

      if (digestToken) {
        try {
          const res = await fetch(`/api/digest-action/${digestToken}`, {
            method: 'POST',
            credentials: 'include',
          })
        } catch (e) {
          console.warn('[ParentView] onMounted digest action request failed:', e)
        }
      }

      if (idParam !== undefined) {
        const promise = fetchChildData(idParam)
        promise.then((data) => {
          if (data) {
            child.value = data
            tasks.value = data.tasks || []
            rewards.value = data.rewards || []
            // Fire the per-child overview tour (chains into assign-* steps).
            // No anchor: this is a general overview so the card stays centered.
            nextTick(() => {
              tutorialMaybeShow('select-child')
            })
          }
          loading.value = false
          if (scrollToId) {
            setTimeout(() => {
              if (entityType === 'chore') {
                childChoreListRef.value?.scrollToItem(scrollToId)
                applyHighlightPulse(scrollToId)
              } else if (entityType === 'reward') {
                childRewardListRef.value?.scrollToItem(scrollToId)
                applyHighlightPulse(scrollToId)
              } else if (entityType === 'routine') {
                childRoutineListRef.value?.scrollToItem(scrollToId)
                applyHighlightPulse(scrollToId)
              }
              const { scrollTo: _s, entityType: _e, ...remainingQuery } = route.query
              router.replace({ query: remainingQuery })
            }, 500)
          }
        })
      }
    }
  } catch (err) {
    console.error('Error in onMounted:', err)
  }
})

// Fire status-badge tutorials when those badges first render for any chore.
watch(
  () => {
    const items: ChildTask[] = childChoreListRef.value?.items ?? []
    return items.map((t) => ({ id: t.id, expired: isChoreExpired(t), pending: isChorePending(t) }))
  },
  (list) => {
    if (list.some((t) => t.expired)) {
      nextTick(() => {
        tutorialMaybeShow(
          'status-too-late',
          () =>
            Array.from(document.querySelectorAll('.chore-stamp')).find(
              (el) => (el.textContent || '').trim() === 'TOO LATE',
            ) as HTMLElement | null,
        )
      })
    }
    if (list.some((t) => t.pending)) {
      nextTick(() => {
        tutorialMaybeShow(
          'status-pending',
          () => document.querySelector('.chore-stamp.pending-stamp') as HTMLElement | null,
        )
      })
    }
  },
  { deep: true },
)

// When the generic kebab-overview step fires, scroll to an assigned item
// and select it so its kebab button is visible for the user to discover.
watch(
  () => tutorialActiveStep.value?.def.id,
  async (stepId, prevStepId) => {
    if (stepId === 'item-kebab-overview') {
      const chores: ChildTask[] = childChoreListRef.value?.items ?? []
      const routines: ChildRoutine[] = childRoutineListRef.value?.items ?? []
      if (chores.length > 0 && childChoreListRef.value) {
        const first = chores[0]
        childChoreListRef.value.scrollToItem(first.id)
        selectedChoreId.value = first.id
        tutorialHighlightedItemId.value = first.id
        await nextTick()
        const btn = kebabBtnRefs.value.get(first.id)
        if (btn && tutorialActiveStep.value?.def.id === 'item-kebab-overview') {
          tutorialActiveStep.value.anchor = () => btn
        }
      } else if (routines.length > 0 && childRoutineListRef.value) {
        const first = routines[0]
        childRoutineListRef.value.scrollToItem(first.id)
        selectedRoutineId.value = first.id
        tutorialHighlightedItemId.value = first.id
        await nextTick()
        const btn = routineKebabBtnRefs.value.get(first.id)
        if (btn && tutorialActiveStep.value?.def.id === 'item-kebab-overview') {
          tutorialActiveStep.value.anchor = () => btn
        }
      }
    }

    // Clean up the highlighted selection when the tutorial leaves kebab steps
    const kebabStepIds = new Set([
      'item-kebab-overview',
      'chore-kebab-menu',
      'chore-edit-points',
      'chore-schedule',
      'chore-kebab-extend-time',
      'chore-kebab-reset',
      'routine-kebab-menu',
      'routine-edit',
      'routine-edit-points',
      'routine-schedule',
      'routine-extend-time',
      'routine-reset',
      'kebab-edit-points-cost',
    ])
    if (
      prevStepId &&
      kebabStepIds.has(prevStepId) &&
      !kebabStepIds.has(stepId ?? '') &&
      tutorialHighlightedItemId.value
    ) {
      selectedChoreId.value = null
      selectedRoutineId.value = null
      tutorialHighlightedItemId.value = null
    }
  },
)

onUnmounted(() => {
  eventBus.off('child_task_triggered', handleTaskTriggered)
  eventBus.off('child_reward_triggered', handleRewardTriggered)
  eventBus.off('child_tasks_set', handleChildTaskSet)
  eventBus.off('child_rewards_set', handleChildRewardSet)
  eventBus.off('child_modified', handleChildModified)
  eventBus.off('child_reward_request', handleRewardRequest)
  eventBus.off('task_modified', handleTaskModified)
  eventBus.off('reward_modified', handleRewardModified)
  eventBus.off('child_override_set', handleOverrideSet)
  eventBus.off('child_override_deleted', handleOverrideDeleted)
  eventBus.off('chore_schedule_modified', handleChoreScheduleModified)
  eventBus.off('chore_time_extended', handleChoreTimeExtended)
  eventBus.off('child_chore_confirmation', handleChoreConfirmation)
  eventBus.off('routine_schedule_modified', handleRoutineScheduleModified)
  eventBus.off('routine_time_extended', handleRoutineTimeExtended)
  eventBus.off('routine_modified', handleRoutineModified)
  eventBus.off('child_routines_set', handleChildRoutinesSet)
  eventBus.off('child_routine_confirmation', handleChildRoutineConfirmation)

  document.removeEventListener('click', onDocClick, true)
  document.removeEventListener('visibilitychange', onVisibilityChange)
  clearExpiryTimers()
})

function getPendingRewardIds(): string[] {
  const items = childRewardListRef.value?.items || []
  return items.filter((item: RewardStatus) => item.redeeming).map((item: RewardStatus) => item.id)
}

const triggerTask = (task: ChildTask) => {
  if (shouldIgnoreNextCardClick.value) {
    shouldIgnoreNextCardClick.value = false
    return
  }

  // For chores, handle pending/completed states
  if (task.type === 'chore') {
    // Completed chore — no tap action (use kebab menu "Reset" instead)
    if (isChoreCompletedToday(task)) return
    // Expired chore — no tap action
    if (isChoreExpired(task)) return
    // Pending chore — open approve/reject dialog
    if (isChorePending(task)) {
      approveDialogChore.value = task
      setTimeout(() => {
        showChoreApproveDialog.value = true
      }, 150)
      return
    }
  }

  // Available chore / kindness / penalty — existing trigger flow
  selectedTask.value = task
  const pendingRewardIds = getPendingRewardIds()
  if (pendingRewardIds.length > 0) {
    selectedReward.value = null
    showPendingRewardDialog.value = true
    return
  }
  setTimeout(() => {
    showConfirm.value = true
  }, 150)
}

async function cancelRewardById(rewardId: string) {
  if (!child.value?.id) {
    return
  }
  try {
    await fetch(`/api/child/${child.value.id}/cancel-request-reward`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ reward_id: rewardId }),
    })
  } catch (err) {
    console.error(`Failed to cancel reward ID ${rewardId}:`, err)
  }
}

async function cancelPendingReward() {
  if (!child.value?.id) {
    showPendingRewardDialog.value = false
    return
  }
  try {
    const pendingRewardIds = getPendingRewardIds()
    await Promise.all(pendingRewardIds.map((id: string) => cancelRewardById(id)))
    //childRewardListRef.value?.refresh()
  } catch (err) {
    console.error('Failed to cancel pending reward:', err)
  } finally {
    showPendingRewardDialog.value = false
    // After cancelling, proceed to trigger the task if one was selected
    if (selectedTask.value) {
      showConfirm.value = true
    }
  }
}

const confirmTriggerTask = async () => {
  if (!child.value?.id || !selectedTask.value) return
  try {
    const resp = await fetch(`/api/child/${child.value.id}/trigger-task`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ task_id: selectedTask.value.id }),
    })
    if (!resp.ok) return
    const data = await resp.json()
    if (child.value && child.value.id === data.id) child.value.points = data.points
  } catch (err) {
    console.error('Failed to trigger task:', err)
  } finally {
    showConfirm.value = false
    selectedTask.value = null
  }
}

const triggerReward = (reward: RewardStatus) => {
  if (reward.points_needed > 0) return
  selectedReward.value = reward
  // If there is a pending reward and it's not this one, show the pending dialog
  const pendingRewardIds = getPendingRewardIds()
  if (pendingRewardIds.length > 0 && !reward.redeeming) {
    showPendingRewardDialog.value = true
    return
  }
  setTimeout(() => {
    showRewardConfirm.value = true
  }, 150)
}

const confirmTriggerReward = async () => {
  if (!child.value?.id || !selectedReward.value) return
  try {
    const resp = await fetch(`/api/child/${child.value.id}/trigger-reward`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ reward_id: selectedReward.value.id }),
    })
    if (!resp.ok) return
    const data = await resp.json()
    if (child.value && child.value.id === data.id) child.value.points = data.points
  } catch (err) {
    console.error('Failed to trigger reward:', err)
  } finally {
    showRewardConfirm.value = false
    selectedReward.value = null
  }
}

const denyRewardRequest = async () => {
  if (!child.value?.id || !selectedReward.value) return
  try {
    await fetch(`/api/child/${child.value.id}/deny-reward-request`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ reward_id: selectedReward.value.id }),
    })
  } catch (err) {
    console.error('Failed to deny reward request:', err)
  } finally {
    showRewardConfirm.value = false
    selectedReward.value = null
  }
}

function goToAssignTasks() {
  if (child.value?.id) {
    router.push({
      name: 'ChoreAssignView',
      params: { id: child.value.id },
      query: { name: child.value.name },
    })
  }
}

function goToAssignBadHabits() {
  if (child.value?.id) {
    router.push({
      name: 'PenaltyAssignView',
      params: { id: child.value.id },
      query: { name: child.value.name },
    })
  }
}

function goToAssignKindness() {
  if (child.value?.id) {
    router.push({
      name: 'KindnessAssignView',
      params: { id: child.value.id },
      query: { name: child.value.name },
    })
  }
}

function goToAssignRewards() {
  if (child.value?.id) {
    router.push({
      name: 'RewardAssignView',
      params: { id: child.value.id },
      query: { name: child.value.name },
    })
  }
}

function goToAssignRoutines() {
  if (child.value?.id) {
    router.push({
      name: 'RoutineAssignView',
      params: { id: child.value.id },
      query: { name: child.value.name },
    })
  }
}
</script>

<template>
  <div>
    <StatusMessage :loading="loading" :error="error" />

    <div v-if="!loading && !error" class="layout">
      <div class="main">
        <ChildDetailCard :child="child" />
        <ScrollingList
          title="Chores"
          ref="childChoreListRef"
          :fetchBaseUrl="`/api/child/${child?.id}/list-tasks`"
          :ids="tasks"
          itemKey="tasks"
          imageField="image_id"
          :enableEdit="false"
          :childId="child?.id"
          :readyItemId="readyItemId"
          :isParentAuthenticated="true"
          @trigger-item="triggerTask"
          @item-ready="handleChoreItemReady"
          :getItemClass="
            (item) => ({
              bad: item.type === 'penalty',
              good: item.type !== 'penalty',
              'chore-inactive': isChoreInactive(item) || isChoreCompletedToday(item),
            })
          "
          :filter-fn="(item) => item.type === 'chore'"
          :sort-fn="parentChoreSort"
        >
          <template #item="{ item }: { item: ChildTask }">
            <!-- Kebab menu -->
            <div class="chore-kebab-wrap" @click.stop>
              <button
                v-show="selectedChoreId === item.id"
                class="kebab-btn"
                :ref="
                  (el) => {
                    if (el) kebabBtnRefs.set(item.id, el as HTMLElement)
                    else kebabBtnRefs.delete(item.id)
                  }
                "
                @mousedown.stop.prevent
                @click="openChoreMenu(item.id, $event)"
                :aria-expanded="activeMenuFor === item.id ? 'true' : 'false'"
                aria-label="Options"
              >
                ⋮
              </button>
              <Teleport to="body">
                <div
                  v-if="activeMenuFor === item.id"
                  class="kebab-menu"
                  :style="{ top: menuPosition.top + 'px', left: menuPosition.left + 'px' }"
                  @mousedown.stop.prevent
                  @click.stop
                >
                  <button class="menu-item" data-tutorial="chore-edit-points kebab-edit-points-cost" @mousedown.stop.prevent @click="editChorePoints(item)">
                    Edit Points
                  </button>
                  <button
                    class="menu-item"
                    data-tutorial="chore-schedule"
                    @mousedown.stop.prevent
                    @click="openScheduleModal(item, $event)"
                  >
                    Schedule
                  </button>
                  <button
                    v-if="isChoreExpired(item)"
                    class="menu-item"
                    data-tutorial="chore-extend-time"
                    @mousedown.stop.prevent
                    @click="doExtendTime(item, $event)"
                  >
                    Extend Time
                  </button>
                  <button
                    v-if="isChoreCompletedToday(item)"
                    class="menu-item"
                    data-tutorial="chore-reset"
                    @mousedown.stop.prevent
                    @click="doResetChore(item, $event)"
                  >
                    Reset
                  </button>
                </div>
              </Teleport>
            </div>

            <!-- COMPLETED badge -->
            <span v-if="isChoreCompletedToday(item)" class="chore-stamp completed-stamp"
              >COMPLETED</span
            >
            <!-- TOO LATE badge -->
            <span v-else-if="isChoreExpired(item)" class="chore-stamp">TOO LATE</span>
            <!-- PENDING badge -->
            <span v-else-if="isChorePending(item)" class="chore-stamp pending-stamp">PENDING</span>

            <div class="item-name">{{ item.name }}</div>
            <img v-if="item.image_url" :src="item.image_url" alt="Task Image" class="item-image" />
            <div class="item-points good-points">
              {{
                item.custom_value !== undefined && item.custom_value !== null
                  ? item.custom_value
                  : item.points
              }}
              Points
            </div>
            <div v-if="choreDueLabel(item)" class="due-label">{{ choreDueLabel(item) }}</div>
          </template>
        </ScrollingList>
        <ScrollingList
          title="Routines"
          ref="childRoutineListRef"
          :fetchBaseUrl="`/api/child/${child?.id}/list-routines`"
          itemKey="routines"
          imageField="image_id"
          :enableEdit="false"
          :childId="child?.id"
          :readyItemId="readyItemId"
          :isParentAuthenticated="true"
          @item-ready="handleRoutineItemReady"
          @trigger-item="triggerRoutine"
          :getItemClass="
            (item) => ({
              good: true,
              'chore-inactive': isRoutineInactive(item) || isRoutineApprovedToday(item),
            })
          "
          :sort-fn="
            (a: ChildRoutine, b: ChildRoutine) => {
              if (isRoutinePending(a) !== isRoutinePending(b)) return isRoutinePending(a) ? -1 : 1
              if (!isRoutineScheduledToday(a) !== !isRoutineScheduledToday(b))
                return isRoutineScheduledToday(a) ? -1 : 1
              if (isRoutineApprovedToday(a) !== isRoutineApprovedToday(b))
                return isRoutineApprovedToday(a) ? 1 : -1
              if (isRoutineExpired(a) !== isRoutineExpired(b)) return isRoutineExpired(a) ? 1 : -1
              return 0
            }
          "
        >
          <template #item="{ item }: { item: ChildRoutine }">
            <!-- Routine kebab menu -->
            <div class="chore-kebab-wrap" @click.stop>
              <button
                v-show="selectedRoutineId === item.id"
                class="kebab-btn"
                :ref="
                  (el) => {
                    if (el) routineKebabBtnRefs.set(item.id, el as HTMLElement)
                    else routineKebabBtnRefs.delete(item.id)
                  }
                "
                @mousedown.stop.prevent
                @click="openRoutineMenu(item.id, $event)"
                :aria-expanded="activeRoutineMenuFor === item.id ? 'true' : 'false'"
                aria-label="Options"
              >
                ⋮
              </button>
              <Teleport to="body">
                <div
                  v-if="activeRoutineMenuFor === item.id"
                  class="kebab-menu"
                  :style="{ top: menuPosition.top + 'px', left: menuPosition.left + 'px' }"
                  @mousedown.stop.prevent
                  @click.stop
                >
                  <button class="menu-item" data-tutorial="routine-edit" @mousedown.stop.prevent @click="editRoutine(item)">
                    Edit Routine
                  </button>
                  <button
                    class="menu-item"
                    data-tutorial="routine-edit-points kebab-edit-points-cost"
                    @mousedown.stop.prevent
                    @click="editRoutinePoints(item)"
                  >
                    Edit Points
                  </button>
                  <button
                    class="menu-item"
                    data-tutorial="routine-schedule"
                    @mousedown.stop.prevent
                    @click="openRoutineScheduleModal(item, $event)"
                  >
                    Schedule
                  </button>
                  <button
                    v-if="isRoutineExpired(item)"
                    class="menu-item"
                    data-tutorial="routine-extend-time"
                    @mousedown.stop.prevent
                    @click="doExtendRoutineTime(item, $event)"
                  >
                    Extend Time
                  </button>
                  <button
                    v-if="isRoutineApprovedToday(item)"
                    class="menu-item"
                    data-tutorial="routine-reset"
                    @mousedown.stop.prevent
                    @click="doResetRoutine(item, $event)"
                  >
                    Reset
                  </button>
                </div>
              </Teleport>
            </div>

            <!-- Status badges -->
            <span v-if="isRoutineApprovedToday(item)" class="chore-stamp completed-stamp"
              >COMPLETED</span
            >
            <span v-else-if="isRoutineExpired(item)" class="chore-stamp">TOO LATE</span>
            <span v-else-if="isRoutinePending(item)" class="chore-stamp pending-stamp"
              >PENDING</span
            >

            <div class="item-name">{{ item.name }}</div>
            <img
              v-if="item.image_url"
              :src="item.image_url"
              alt="Routine Image"
              class="item-image"
            />
            <div class="item-points good-points">
              {{
                item.custom_value !== undefined && item.custom_value !== null
                  ? item.custom_value
                  : item.points
              }}
              Points
            </div>
            <div v-if="routineDueLabel(item)" class="due-label">{{ routineDueLabel(item) }}</div>
          </template>
        </ScrollingList>
        <ScrollingList
          title="Kindness Acts"
          ref="childKindnessListRef"
          :fetchBaseUrl="`/api/child/${child?.id}/list-tasks`"
          :ids="tasks"
          itemKey="tasks"
          imageField="image_id"
          :enableEdit="true"
          :childId="child?.id"
          :readyItemId="readyItemId"
          :isParentAuthenticated="true"
          @trigger-item="triggerTask"
          @edit-item="(item) => handleEditItem(item, 'task')"
          @item-ready="handleItemReady"
          :getItemClass="() => ({ good: true })"
          :filter-fn="(item) => item.type === 'kindness'"
        >
          <template #item="{ item }">
            <div class="item-name">{{ item.name }}</div>
            <img v-if="item.image_url" :src="item.image_url" alt="Task Image" class="item-image" />
            <div class="item-points good-points">
              {{
                item.custom_value !== undefined && item.custom_value !== null
                  ? item.custom_value
                  : item.points
              }}
              Points
            </div>
          </template>
        </ScrollingList>
        <ScrollingList
          title="Penalties"
          ref="childPenaltyListRef"
          :fetchBaseUrl="`/api/child/${child?.id}/list-tasks`"
          :ids="tasks"
          itemKey="tasks"
          imageField="image_id"
          :enableEdit="true"
          :childId="child?.id"
          :readyItemId="readyItemId"
          :isParentAuthenticated="true"
          @trigger-item="triggerTask"
          @edit-item="(item) => handleEditItem(item, 'task')"
          @item-ready="handleItemReady"
          :getItemClass="
            (item) => ({ bad: item.type === 'penalty', good: item.type !== 'penalty' })
          "
          :filter-fn="
            (item) => {
              return item.type === 'penalty'
            }
          "
        >
          <template #item="{ item }">
            <div class="item-name">{{ item.name }}</div>
            <img v-if="item.image_url" :src="item.image_url" alt="Task Image" class="item-image" />
            <div
              class="item-points"
              :class="{
                'good-points': item.type !== 'penalty',
                'bad-points': item.type === 'penalty',
              }"
            >
              {{
                item.custom_value !== undefined && item.custom_value !== null
                  ? -item.custom_value
                  : -item.points
              }}
              Points
            </div>
          </template>
        </ScrollingList>
        <ScrollingList
          title="Rewards"
          ref="childRewardListRef"
          :fetchBaseUrl="`/api/child/${child?.id}/reward-status`"
          itemKey="reward_status"
          imageField="image_id"
          :ids="rewards"
          :enableEdit="true"
          :childId="child?.id"
          :readyItemId="readyItemId"
          :isParentAuthenticated="true"
          @trigger-item="triggerReward"
          @edit-item="(item) => handleEditItem(item, 'reward')"
          @item-ready="handleItemReady"
          :getItemClass="(item) => ({ reward: true })"
          :sort-fn="parentRewardSort"
        >
          <template #item="{ item }: { item: RewardStatus }">
            <div class="item-name">{{ item.name }}</div>
            <img
              v-if="item.image_url"
              :src="item.image_url"
              alt="Reward Image"
              class="item-image"
            />
            <div class="item-points">
              <span v-if="item.redeeming" class="pending">PENDING</span>
              <span v-if="item.points_needed <= 0" class="ready">REWARD READY</span>
              <span v-else>{{ item.points_needed }} more points</span>
            </div>
          </template>
        </ScrollingList>
      </div>
    </div>
    <div class="assign-buttons">
      <button v-if="child" class="btn btn-primary" @click="goToAssignTasks">Assign Chores</button>
      <button v-if="child" class="btn btn-primary" @click="goToAssignRoutines">
        Assign Routines
      </button>
      <button v-if="child" class="btn btn-green" @click="goToAssignRewards">Assign Rewards</button>
      <button v-if="child" class="btn btn-primary" @click="goToAssignKindness">
        Assign Kindness Acts
      </button>
      <button v-if="child" class="btn btn-danger" @click="goToAssignBadHabits">
        Assign Penalties
      </button>
    </div>

    <!-- Pending Reward Dialog -->
    <PendingRewardDialog
      v-if="showPendingRewardDialog"
      :reward-name="pendingDialogReward?.name"
      :child-name="pendingDialogReward ? child?.name : undefined"
      :image-url="pendingDialogReward?.image_url ?? null"
      :subtitle="
        pendingDialogReward
          ? pendingDialogReward.points_needed === 0
            ? 'Reward Ready!'
            : pendingDialogReward.points_needed + ' more points'
          : undefined
      "
      :message="
        pendingEditOverrideTarget
          ? 'This reward is currently pending. Changing its cost will cancel the pending request. Would you like to proceed?'
          : 'A reward is currently pending. It will be cancelled when a chore or penalty is triggered. Would you like to proceed?'
      "
      @confirm="pendingEditOverrideTarget ? confirmPendingRewardAndEdit() : cancelPendingReward()"
      @cancel="
        () => {
          showPendingRewardDialog = false
          pendingEditOverrideTarget = null
          selectedReward = null
        }
      "
    />

    <!-- Schedule Modal -->
    <ScheduleModal
      v-if="showScheduleModal && scheduleTarget && child"
      :entity="scheduleTarget"
      entityType="task"
      :childId="child.id"
      :schedule="scheduleTarget.schedule ?? null"
      @saved="onScheduleSaved"
      @cancelled="showScheduleModal = false"
    />

    <!-- Schedule Modal (Routines) -->
    <ScheduleModal
      v-if="showRoutineScheduleModal && routineScheduleTarget && child"
      :entity="routineScheduleTarget"
      entityType="routine"
      :childId="child.id"
      :schedule="routineScheduleTarget.schedule ?? null"
      @saved="onRoutineScheduleSaved"
      @cancelled="showRoutineScheduleModal = false"
    />

    <!-- Override Edit Modal -->
    <ModalDialog
      v-if="showOverrideModal && overrideEditTarget && child"
      :image-url="overrideEditTarget.entity.image_url"
      :title="overrideEditTarget.entity.name"
      :subtitle="`Assign ${overrideEditTarget.type === 'task' ? 'new points' : 'new cost'}`"
    >
      <div class="override-content">
        <div class="input-group">
          <label for="custom-value"
            >{{ overrideEditTarget.type === 'task' ? 'New Points' : 'New Cost' }}:</label
          >
          <input
            id="custom-value"
            v-model.number="overrideCustomValue"
            type="number"
            min="0"
            max="10000"
            :class="{ invalid: !isOverrideValid }"
            @input="validateOverrideInput"
          />
        </div>
      </div>
      <div class="modal-actions">
        <button class="btn-secondary" @click="showOverrideModal = false">Cancel</button>
        <button class="btn-primary" :disabled="!isOverrideValid" @click="saveOverride">Save</button>
      </div>
    </ModalDialog>

    <!-- Task Confirm Dialog -->
    <TaskConfirmDialog
      v-if="showConfirm"
      :task="selectedTask"
      :childName="child?.name"
      @confirm="confirmTriggerTask"
      @cancel="
        () => {
          showConfirm = false
          selectedTask = null
        }
      "
    />

    <!-- Reward Confirm Dialog -->
    <RewardConfirmDialog
      v-if="showRewardConfirm"
      :reward="selectedReward as any"
      :childName="child?.name"
      @confirm="confirmTriggerReward"
      @deny="denyRewardRequest"
      @cancel="
        () => {
          showRewardConfirm = false
          selectedReward = null
        }
      "
    />

    <!-- Chore Approve/Reject Dialog -->
    <ChoreApproveDialog
      v-if="showChoreApproveDialog && approveDialogChore"
      :show="showChoreApproveDialog"
      :childName="child?.name ?? ''"
      :choreName="approveDialogChore.name"
      :points="approveDialogChore.custom_value ?? approveDialogChore.points"
      :imageUrl="approveDialogChore.image_url"
      @approve="doApproveChore"
      @reject="doRejectChore"
      @cancel="cancelChoreApproveDialog"
    />

    <!-- Routine Approve/Reject Dialog -->
    <RoutineApproveDialog
      v-if="showRoutineApproveDialog && approveDialogRoutine"
      :show="showRoutineApproveDialog"
      :childName="child?.name ?? ''"
      :routineName="approveDialogRoutine.name"
      :points="approveDialogRoutine.custom_value ?? approveDialogRoutine.points"
      :imageUrl="approveDialogRoutine.image_url"
      @approve="doApproveRoutine"
      @reject="doRejectRoutine"
      @cancel="cancelRoutineApproveDialog"
    />

    <RoutineConfirmDialog
      :routine="confirmDialogRoutine"
      :childName="child?.name ?? ''"
      @confirm="doConfirmRoutine"
      @cancel="cancelRoutineConfirmDialog"
    />
  </div>
</template>

<style scoped>
.layout {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 2rem 0;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

.assign-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.item-points {
  color: var(--item-points-color, #ffd166);
  font-size: 1rem;
  font-weight: 900;
  text-shadow: var(--item-points-shadow);
}

.ready {
  color: var(--item-points-ready-color, #38c172);
  letter-spacing: 0.5px;
}
.pending {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  background: var(--pending-block-bg, #222b);
  color: var(--pending-block-color, #62ff7a);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  border-radius: 6px;
  padding: 0.4rem 0;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0.95;
  pointer-events: none;
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .item-points {
    font-size: 0.78rem;
  }
}

:deep(.good) {
  border-color: var(--list-item-border-good);
  background: var(--list-item-bg-good);
}
:deep(.bad) {
  border-color: var(--list-item-border-bad);
  background: var(--list-item-bg-bad);
}
:deep(.reward) {
  border-color: var(--list-item-border-reward);
  background: var(--list-item-bg-reward);
}
:deep(.chore-inactive) {
  position: relative;
}
:deep(.chore-inactive::before) {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(160, 160, 160, 0.45);
  filter: grayscale(80%);
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}
:deep(.chore-inactive) .kebab-btn {
  color: rgba(255, 255, 255, 0.85);
}

/* Chore kebab menu (inside item-card which is position:relative in ScrollingList) */
.chore-kebab-wrap {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 20;
}

.kebab-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--kebab-icon-color, #4a4a6a);
  border-radius: 6px;
  font-size: 1.4rem;
}

.kebab-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.18);
}

.kebab-menu {
  position: fixed;
  min-width: 140px;
  background: var(--kebab-menu-bg, #f7fafc);
  border: 1.5px solid var(--kebab-menu-border, #bcc1c9);
  box-shadow: var(--kebab-menu-shadow);
  backdrop-filter: blur(var(--kebab-menu-blur));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
  border-radius: 6px;
}

.menu-item {
  padding: 0.85rem 0.9rem;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-weight: 600;
  color: var(--menu-item-color, #333);
  font-size: 1rem;
}

.menu-item:hover {
  background: var(--menu-item-hover-bg, rgba(102, 126, 234, 0.08));
}

/* TOO LATE stamp on expired chores */
.chore-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  background: rgba(34, 34, 34, 0.65);
  color: var(--text-bad-color, #ef4444);
  text-shadow: var(--item-points-shadow);
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  border-radius: 6px;
  padding: 0.4rem 0;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0.95;
  pointer-events: none;
}

.pending-stamp {
  color: #fbbf24;
}

.completed-stamp {
  color: #22c55e;
}

@media (max-width: 480px) {
  .chore-stamp {
    font-size: 0.82rem;
    letter-spacing: 1px;
    padding: 0.3rem 0;
  }
}

/* Due time sub-text */
.due-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-bad-color, #ef4444);
  margin-top: 0.2rem;
  letter-spacing: 0.3px;
}

/* Override modal styles */
.override-content {
  text-align: left;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: var(--spacing-md, 1rem) 0;
}

.input-group label {
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.input-group input {
  width: 100%;
  padding: 0.6rem;
  border-radius: 7px;
  border: 1px solid var(--form-input-border, #e6e6e6);
  font-size: 1rem;
  background: var(--form-input-bg, #fff);
  box-sizing: border-box;
}

.input-group input.invalid {
  border-color: var(--error-color, #e53e3e);
}

@keyframes highlight-pulse {
  0% {
    box-shadow: 0 0 0 0 var(--accent, #4a90e2);
    outline: 2px solid var(--accent, #4a90e2);
  }
  50% {
    box-shadow: 0 0 16px 4px var(--accent, #4a90e2);
    outline: 2px solid var(--accent, #4a90e2);
  }
  100% {
    box-shadow: none;
    outline: none;
  }
}

:global(.highlight-pulse) {
  animation: highlight-pulse 1.8s ease-out forwards;
}
</style>
