<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from '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 RewardConfirmDialog from './RewardConfirmDialog.vue'
import ChoreConfirmDialog from './ChoreConfirmDialog.vue'
import RoutineConfirmDialog from './RoutineConfirmDialog.vue'
import ModalDialog from '../shared/ModalDialog.vue'
import { eventBus } from '@/common/eventBus'
//import '@/assets/view-shared.css'
import '@/assets/styles.css'
import type {
  Child,
  Event,
  Task,
  RewardStatus,
  ChildTask,
  ChildRoutine,
  ChildTaskTriggeredEventPayload,
  ChildRewardTriggeredEventPayload,
  ChildRewardRequestEventPayload,
  ChildTasksSetEventPayload,
  ChildRewardsSetEventPayload,
  ChildRoutinesSetEventPayload,
  TaskModifiedEventPayload,
  RewardModifiedEventPayload,
  RoutineModifiedEventPayload,
  ChildModifiedEventPayload,
  ChoreScheduleModifiedPayload,
  ChoreTimeExtendedPayload,
  RoutineScheduleModifiedPayload,
  ChildChoreConfirmationPayload,
  ChildRoutineConfirmationPayload,
  ChildOverrideSetPayload,
  ChildOverrideDeletedPayload,
} from '@/common/models'
import { confirmChore, cancelConfirmChore } from '@/common/api'
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 routines = ref<string[]>([])
const rewards = ref<string[]>([])
const loading = ref(true)
const error = ref<string | null>(null)
const childRewardListRef = ref()
const showRewardDialog = ref(false)
const showCancelDialog = ref(false)
const dialogReward = ref<RewardStatus | null>(null)
const showChoreConfirmDialog = ref(false)
const showChoreCancelDialog = ref(false)
const dialogChore = ref<ChildTask | null>(null)
const showRoutineConfirmDialog = ref(false)
const dialogRoutine = ref<ChildRoutine | null>(null)
const childRoutineListRef = ref()

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 handleChildRoutineSet(event: Event) {
  const payload = event.payload as ChildRoutinesSetEventPayload
  if (child.value && payload.child_id == child.value.id) {
    routines.value = payload.routine_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 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)
        }
        break
      default:
        console.warn(`Unknown operation: ${payload.operation}`)
    }
  }
}

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 || []
                }
              })
            } catch (err) {
              console.warn('Failed to fetch child after EDIT operation:', err)
            } finally {
              loading.value = false
            }
            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)
      }
    }
  }
}

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

const triggerTask = async (task: ChildTask) => {
  // Cancel any pending speech to avoid conflicts
  if ('speechSynthesis' in window) {
    window.speechSynthesis.cancel()

    if (task.name) {
      const utter = new window.SpeechSynthesisUtterance(task.name)
      utter.rate = 1.0
      utter.pitch = 1.0
      utter.volume = 1.0
      window.speechSynthesis.speak(utter)
    }
  }

  // For chores, handle confirmation flow
  if (task.type === 'chore') {
    if (isChoreExpired(task)) return // Expired — no action
    if (isChoreCompletedToday(task)) return // Already completed — no action
    if (task.pending_status === 'pending') {
      // Show cancel dialog
      dialogChore.value = task
      setTimeout(() => {
        showChoreCancelDialog.value = true
      }, 150)
      return
    }
    // Available — show confirm dialog
    dialogChore.value = task
    setTimeout(() => {
      showChoreConfirmDialog.value = true
    }, 150)
    return
  }

  // Kindness / Penalty: speech-only in child mode; point changes are handled in parent mode.
}

const handleRoutineClick = (routine: ChildRoutine) => {
  // Show routine confirmation dialog
  dialogRoutine.value = routine
  setTimeout(() => {
    showRoutineConfirmDialog.value = true
  }, 150)
}

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()
  return (
    approvedDate.getFullYear() === today.getFullYear() &&
    approvedDate.getMonth() === today.getMonth() &&
    approvedDate.getDate() === today.getDate()
  )
}

async function doConfirmChore() {
  if (!child.value?.id || !dialogChore.value) return
  try {
    const resp = await confirmChore(child.value.id, dialogChore.value.id)
    if (!resp.ok) {
      console.error('Failed to confirm chore')
    }
  } catch (err) {
    console.error('Failed to confirm chore:', err)
  } finally {
    showChoreConfirmDialog.value = false
    dialogChore.value = null
  }
}

function cancelChoreConfirmDialog() {
  showChoreConfirmDialog.value = false
  dialogChore.value = null
}

async function doCancelConfirmChore() {
  if (!child.value?.id || !dialogChore.value) return
  try {
    const resp = await cancelConfirmChore(child.value.id, dialogChore.value.id)
    if (!resp.ok) {
      console.error('Failed to cancel chore confirmation')
    }
  } catch (err) {
    console.error('Failed to cancel chore confirmation:', err)
  } finally {
    showChoreCancelDialog.value = false
    dialogChore.value = null
  }
}

function closeChoreCancelDialog() {
  showChoreCancelDialog.value = false
  dialogChore.value = null
}

async function doConfirmRoutine() {
  if (!child.value?.id || !dialogRoutine.value) return
  try {
    const resp = await fetch(`/api/child/${child.value.id}/confirm-routine`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ routine_id: dialogRoutine.value.id }),
    })
    if (!resp.ok) {
      console.error('Failed to confirm routine')
    }
  } catch (err) {
    console.error('Failed to confirm routine:', err)
  } finally {
    showRoutineConfirmDialog.value = false
    dialogRoutine.value = null
  }
}

function closeRoutineConfirmDialog() {
  showRoutineConfirmDialog.value = false
  dialogRoutine.value = null
}

const triggerReward = (reward: RewardStatus) => {
  // Cancel any pending speech to avoid conflicts
  if ('speechSynthesis' in window) {
    window.speechSynthesis.cancel()

    if (reward.name) {
      const utterString =
        reward.name +
        (reward.points_needed <= 0 ? '' : `, You still need ${reward.points_needed} points.`)
      const utter = new window.SpeechSynthesisUtterance(utterString)
      utter.rate = 1.0
      utter.pitch = 1.0
      utter.volume = 1.0
      window.speechSynthesis.speak(utter)
    }
  }

  if (reward.redeeming) {
    dialogReward.value = reward
    setTimeout(() => {
      showCancelDialog.value = true
    }, 150)
    return
  }
  if (reward.points_needed <= 0) {
    dialogReward.value = reward
    setTimeout(() => {
      showRewardDialog.value = true
    }, 150)
  }
}

function cancelRedeemReward() {
  showRewardDialog.value = false
  dialogReward.value = null
}

function closeCancelDialog() {
  showCancelDialog.value = false
  dialogReward.value = null
}

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

async function cancelPendingReward() {
  if (!child.value?.id || !dialogReward.value) return
  try {
    const resp = await fetch(`/api/child/${child.value.id}/cancel-request-reward`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ reward_id: dialogReward.value.id }),
    })
    if (!resp.ok) throw new Error('Failed to cancel pending reward')
  } catch (err) {
    console.error('Failed to cancel pending reward:', err)
  } finally {
    showCancelDialog.value = false
    dialogReward.value = null
  }
}

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

let inactivityTimer: ReturnType<typeof setTimeout> | null = null

function resetInactivityTimer() {
  if (inactivityTimer) clearTimeout(inactivityTimer)
  inactivityTimer = setTimeout(() => {
    router.push({ name: 'ChildrenListView' })
  }, 60000) // 60 seconds
}

function setupInactivityListeners() {
  const events = ['mousemove', 'mousedown', 'keydown', 'touchstart']
  events.forEach((evt) => window.addEventListener(evt, resetInactivityTimer))
}

function removeInactivityListeners() {
  const events = ['mousemove', 'mousedown', 'keydown', 'touchstart']
  events.forEach((evt) => window.removeEventListener(evt, resetInactivityTimer))
  if (inactivityTimer) clearTimeout(inactivityTimer)
}

const childChoreListRef = ref()
const childKindnessListRef = ref()
const childPenaltyListRef = ref()
const readyItemId = ref<string | null>(null)
const expiryTimers = ref<number[]>([])
const lastFetchDate = ref<string>(toLocalISODate(new Date()))

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

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

function handleOverrideSet(event: Event) {
  const payload = event.payload as ChildOverrideSetPayload
  if (child.value && payload.override.child_id === child.value.id) {
    if (payload.override.entity_type === 'task') {
      childChoreListRef.value?.refresh()
      childKindnessListRef.value?.refresh()
      childPenaltyListRef.value?.refresh()
    } else if (payload.override.entity_type === 'reward') {
      childRewardListRef.value?.refresh()
    }
  }
}

function handleOverrideDeleted(event: Event) {
  const payload = event.payload as ChildOverrideDeletedPayload
  if (child.value && payload.child_id === child.value.id) {
    if (payload.entity_type === 'task') {
      childChoreListRef.value?.refresh()
      childKindnessListRef.value?.refresh()
      childPenaltyListRef.value?.refresh()
    } else if (payload.entity_type === 'reward') {
      childRewardListRef.value?.refresh()
    }
  }
}

function isChoreScheduledToday(item: ChildTask): boolean {
  if (!item.schedule) return true
  const today = new Date()
  return isScheduledToday(item.schedule, today)
}

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

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

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

function childChoreSortPriority(item: ChildTask): number {
  if (isChoreCompletedToday(item)) return 3
  if (item.pending_status === 'pending') return 2
  if (!item.schedule) return 1 // general chore
  return 0 // scheduled for today
}

function childChoreSort(a: ChildTask, b: ChildTask): number {
  const pa = childChoreSortPriority(a)
  const pb = childChoreSortPriority(b)
  if (pa !== pb) return pa - pb
  // Both scheduled: sort by earliest deadline
  if (pa === 0) {
    const now = new Date()
    const dueA = getDueTimeToday(a.schedule!, now)
    const dueB = getDueTimeToday(b.schedule!, now)
    const minsA = dueA ? dueA.hour * 60 + dueA.minute : Infinity
    const minsB = dueB ? dueB.hour * 60 + dueB.minute : Infinity
    return minsA - minsB
  }
  return 0
}

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

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

function resetExpiryTimers() {
  clearExpiryTimers()
  const items: ChildTask[] = childChoreListRef.value?.items ?? []
  const now = new Date()
  for (const item of items) {
    if (!item.schedule) continue
    const due = getDueTimeToday(item.schedule, now)
    if (!due) continue
    if (item.extension_date && isExtendedToday(item.extension_date, now)) continue
    const ms = msUntilExpiry(due.hour, due.minute, now)
    if (ms > 0) {
      const tid = window.setTimeout(() => {
        childChoreListRef.value?.refresh()
      }, ms)
      expiryTimers.value.push(tid)
    }
  }
}

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

const hasPendingRewards = computed(() =>
  childRewardListRef.value?.items.some((r: RewardStatus) => r.redeeming),
)

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('child_routines_set', handleChildRoutineSet)
    eventBus.on('task_modified', handleTaskModified)
    eventBus.on('reward_modified', handleRewardModified)
    eventBus.on('child_modified', handleChildModified)
    eventBus.on('child_reward_request', handleRewardRequest)
    eventBus.on('chore_schedule_modified', handleChoreScheduleModified)
    eventBus.on('chore_time_extended', handleChoreTimeExtended)
    eventBus.on('child_chore_confirmation', handleChoreConfirmation)
    eventBus.on('child_override_set', handleOverrideSet)
    eventBus.on('child_override_deleted', handleOverrideDeleted)
    document.addEventListener('visibilitychange', onVisibilityChange)
    if (route.params.id) {
      const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
      if (idParam !== undefined) {
        const promise = fetchChildData(idParam)
        promise.then((data) => {
          if (data) {
            child.value = data
            tasks.value = data.tasks || []
            routines.value = data.routines || []
            rewards.value = data.rewards || []
          }
          loading.value = false
          setTimeout(() => resetExpiryTimers(), 300)
        })
      }
    }
    setupInactivityListeners()
    resetInactivityTimer()
  } catch (err) {
    console.error('Error in onMounted:', err)
  }
})

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_routines_set', handleChildRoutineSet)
  eventBus.off('task_modified', handleTaskModified)
  eventBus.off('reward_modified', handleRewardModified)
  eventBus.off('child_modified', handleChildModified)
  eventBus.off('child_reward_request', handleRewardRequest)
  eventBus.off('chore_schedule_modified', handleChoreScheduleModified)
  eventBus.off('chore_time_extended', handleChoreTimeExtended)
  eventBus.off('child_chore_confirmation', handleChoreConfirmation)
  eventBus.off('child_override_set', handleOverrideSet)
  eventBus.off('child_override_deleted', handleOverrideDeleted)
  document.removeEventListener('visibilitychange', onVisibilityChange)
  clearExpiryTimers()
  removeInactivityListeners()
})
</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"
          :isParentAuthenticated="false"
          :readyItemId="readyItemId"
          @item-ready="handleItemReady"
          @trigger-item="triggerTask"
          :getItemClass="
            (item: ChildTask) => ({
              bad: item.type === 'penalty',
              good: item.type !== 'penalty',
              'chore-inactive':
                item.type === 'chore' && (isChoreExpired(item) || isChoreCompletedToday(item)),
            })
          "
          :filter-fn="(item: ChildTask) => item.type === 'chore' && isChoreScheduledToday(item)"
          :sort-fn="childChoreSort"
        >
          <template #item="{ item }: { item: ChildTask }">
            <span v-if="isChoreCompletedToday(item)" class="chore-stamp completed-stamp"
              >COMPLETED</span
            >
            <span v-else-if="isChoreExpired(item)" class="chore-stamp">TOO LATE</span>
            <span v-else-if="item.pending_status === 'pending'" 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="Rewards"
          ref="childRewardListRef"
          :fetchBaseUrl="`/api/child/${child?.id}/reward-status`"
          itemKey="reward_status"
          imageField="image_id"
          :isParentAuthenticated="false"
          :readyItemId="readyItemId"
          @item-ready="handleItemReady"
          @trigger-item="triggerReward"
          :getItemClass="
            (item) => ({ reward: true, disabled: hasPendingRewards && !item.redeeming })
          "
          :sort-fn="childRewardSort"
        >
          <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>
        <ScrollingList
          title="Kindness Acts"
          ref="childKindnessListRef"
          :fetchBaseUrl="`/api/child/${child?.id}/list-tasks`"
          :ids="tasks"
          itemKey="tasks"
          imageField="image_id"
          :isParentAuthenticated="false"
          :readyItemId="readyItemId"
          @item-ready="handleItemReady"
          @trigger-item="triggerTask"
          :getItemClass="() => ({ good: true })"
          :filter-fn="(item: ChildTask) => 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"
          :isParentAuthenticated="false"
          :readyItemId="readyItemId"
          @item-ready="handleItemReady"
          @trigger-item="triggerTask"
          :getItemClass="() => ({ bad: true })"
          :filter-fn="(item: ChildTask) => 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 bad-points">
              {{
                item.custom_value !== undefined && item.custom_value !== null
                  ? -item.custom_value
                  : -item.points
              }}
              Points
            </div>
          </template>
        </ScrollingList>
        <ScrollingList
          title="Routines"
          ref="childRoutineListRef"
          :fetchBaseUrl="`/api/child/${child?.id}/list-routines`"
          :ids="routines"
          itemKey="routines"
          imageField="image_id"
          :isParentAuthenticated="false"
          :readyItemId="readyItemId"
          @item-ready="handleItemReady"
          @trigger-item="handleRoutineClick"
          :getItemClass="
            (item: ChildRoutine) => ({
              good: true,
              'routine-pending': item.pending_status === 'pending',
              'routine-approved': item.pending_status === 'approved',
            })
          "
        >
          <template #item="{ item }: { item: ChildRoutine }">
            <span v-if="item.pending_status === 'pending'" class="chore-stamp pending-stamp"
              >PENDING</span
            >
            <span v-else-if="item.pending_status === 'approved'" class="chore-stamp completed-stamp"
              >APPROVED</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>
          </template>
        </ScrollingList>
      </div>
    </div>
  </div>

  <!-- Redeem reward dialog -->
  <RewardConfirmDialog
    v-if="showRewardDialog"
    :reward="dialogReward"
    :childName="child?.name"
    @confirm="confirmRedeemReward"
    @cancel="cancelRedeemReward"
  />

  <!-- Cancel pending reward dialog -->
  <ModalDialog
    v-if="showCancelDialog && dialogReward"
    :imageUrl="dialogReward.image_url"
    :title="dialogReward.name"
    subtitle="Reward Pending"
    @backdrop-click="closeCancelDialog"
  >
    <div class="modal-message">
      This reward is pending.<br />Would you like to cancel the request?
    </div>
    <div class="modal-actions">
      <button @click="cancelPendingReward" class="btn btn-primary">Yes</button>
      <button @click="closeCancelDialog" class="btn btn-secondary">No</button>
    </div>
  </ModalDialog>

  <!-- Chore confirm dialog -->
  <ChoreConfirmDialog
    :show="showChoreConfirmDialog"
    :choreName="dialogChore?.name ?? ''"
    :imageUrl="dialogChore?.image_url"
    @confirm="doConfirmChore"
    @cancel="cancelChoreConfirmDialog"
  />

  <!-- Cancel chore confirmation dialog -->
  <ModalDialog
    v-if="showChoreCancelDialog && dialogChore"
    :title="dialogChore.name"
    subtitle="Chore Pending"
    @backdrop-click="closeChoreCancelDialog"
  >
    <div class="modal-message">
      This chore is pending confirmation.<br />Would you like to cancel?
    </div>
    <div class="modal-actions">
      <button @click="doCancelConfirmChore" class="btn btn-primary">Yes</button>
      <button @click="closeChoreCancelDialog" class="btn btn-secondary">No</button>
    </div>
  </ModalDialog>

  <!-- Routine confirm dialog -->
  <RoutineConfirmDialog
    :show="showRoutineConfirmDialog"
    :routineName="dialogRoutine?.name ?? ''"
    :imageUrl="dialogRoutine?.image_url"
    :items="dialogRoutine?.items"
    @confirm="doConfirmRoutine"
    @cancel="closeRoutineConfirmDialog"
  />
</template>

<style scoped>
.layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}
/* Responsive Adjustments */
@media (max-width: 900px) {
  .layout {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 480px) {
  .main {
    gap: 1rem;
  }
  .modal {
    padding: 1rem;
    min-width: 0;
  }
}

.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(.disabled) {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(0.7);
}
: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;
}

.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-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-bad-color, #ef4444);
  margin-top: 0.15rem;
  letter-spacing: 0.3px;
}

.modal-message {
  margin-bottom: 1.2rem;
  font-size: 1rem;
  color: var(--modal-message-color, #333);
}

.modal-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}
</style>
