<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { format, startOfDay, isEqual, isToday as isTodayDate, formatDistanceToNow, parseISO } from 'date-fns'
import { choreService } from '../services/choreService'
import { useNotificationStore } from '../stores/notifications'
import type { Chore, ChoreCreate, ChoreUpdate, ChoreFrequency, ChoreAssignmentUpdate, ChoreAssignment, ChoreHistory, ChoreWithCompletion } from '../types/chore'
import { groupService } from '../services/groupService'
import { useStorage } from '@vueuse/core'
import ChoreItem from '@/components/ChoreItem.vue';
import { useTimeEntryStore, type TimeEntry } from '../stores/timeEntryStore';
import { storeToRefs } from 'pinia';
import { useAuthStore } from '@/stores/auth';

const { t } = useI18n()

const props = defineProps<{ groupId?: number | string }>();

// Types
// ChoreWithCompletion is now imported from ../types/chore

interface ChoreFormData {
  name: string;
  description: string;
  frequency: ChoreFrequency;
  custom_interval_days: number | undefined;
  next_due_date: string;
  type: 'personal' | 'group';
  group_id: number | undefined;
  parent_chore_id?: number | null;
}

const notificationStore = useNotificationStore()

// State
const chores = ref<ChoreWithCompletion[]>([])
const groups = ref<{ id: number, name: string }[]>([])
const showChoreModal = ref(false)
const showDeleteDialog = ref(false)
const showChoreDetailModal = ref(false)
const showHistoryModal = ref(false)
const isEditing = ref(false)
const selectedChore = ref<ChoreWithCompletion | null>(null)
const selectedChoreHistory = ref<ChoreHistory[]>([])
const selectedChoreAssignments = ref<ChoreAssignment[]>([])
const loadingHistory = ref(false)
const loadingAssignments = ref(false)

const cachedChores = useStorage<ChoreWithCompletion[]>('cached-chores-v2', [])
const cachedTimestamp = useStorage<number>('cached-chores-timestamp-v2', 0)
const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes

const initialChoreFormState: ChoreFormData = {
  name: '',
  description: '',
  frequency: 'daily',
  custom_interval_days: undefined,
  next_due_date: format(new Date(), 'yyyy-MM-dd'),
  type: 'personal',
  group_id: undefined,
  parent_chore_id: null,
}

const choreForm = ref({ ...initialChoreFormState })
const isLoading = ref(true)

const authStore = useAuthStore();
const { isGuest } = storeToRefs(authStore);

const timeEntryStore = useTimeEntryStore();
const { timeEntries, loading: timeEntryLoading, error: timeEntryError } = storeToRefs(timeEntryStore);

const activeTimer = computed(() => {
  for (const assignmentId in timeEntries.value) {
    const entry = timeEntries.value[assignmentId].find(te => !te.end_time);
    if (entry) return entry;
  }
  return null;
});

const loadChores = async () => {
  const now = Date.now();
  if (cachedChores.value && cachedChores.value.length > 0 && (now - cachedTimestamp.value) < CACHE_DURATION) {
    chores.value = cachedChores.value;
    isLoading.value = false;
  } else {
    isLoading.value = true;
  }

  try {
    const fetchedChores = await choreService.getAllChores()
    const mappedChores = fetchedChores.map(c => {
      const currentAssignment = c.assignments && c.assignments.length > 0 ? c.assignments[0] : null;
      return {
        ...c,
        current_assignment_id: currentAssignment?.id ?? null,
        is_completed: currentAssignment?.is_complete ?? false,
        completed_at: currentAssignment?.completed_at ?? null,
        assigned_user_name: currentAssignment?.assigned_user?.name || currentAssignment?.assigned_user?.email || 'Unknown',
        completed_by_name: currentAssignment?.assigned_user?.name || currentAssignment?.assigned_user?.email || 'Unknown',
        updating: false,
      }
    });
    chores.value = mappedChores;
    cachedChores.value = mappedChores;
    cachedTimestamp.value = Date.now()
  } catch (error) {
    console.error(t('choresPage.consoleErrors.loadFailed'), error)
    notificationStore.addNotification({ message: t('choresPage.notifications.loadFailed', 'Failed to load chores.'), type: 'error' })
  } finally {
    isLoading.value = false
  }
}

const loadGroups = async () => {
  try {
    groups.value = await groupService.getUserGroups();
  } catch (error) {
    console.error(t('choresPage.consoleErrors.loadGroupsFailed'), error);
    notificationStore.addNotification({ message: t('choresPage.notifications.loadGroupsFailed', 'Failed to load groups.'), type: 'error' });
  }
}

const loadTimeEntries = async () => {
  chores.value.forEach(chore => {
    if (chore.current_assignment_id) {
      timeEntryStore.fetchTimeEntriesForAssignment(chore.current_assignment_id);
    }
  });
};

onMounted(() => {
  loadChores().then(loadTimeEntries);
  loadGroups()
})

const frequencyOptions = computed(() => [
  { label: t('choresPage.frequencyOptions.oneTime'), value: 'one_time' as ChoreFrequency },
  { label: t('choresPage.frequencyOptions.daily'), value: 'daily' as ChoreFrequency },
  { label: t('choresPage.frequencyOptions.weekly'), value: 'weekly' as ChoreFrequency },
  { label: t('choresPage.frequencyOptions.monthly'), value: 'monthly' as ChoreFrequency },
  { label: t('choresPage.frequencyOptions.custom'), value: 'custom' as ChoreFrequency }
]);

const getChoreSubtext = (chore: ChoreWithCompletion): string => {
  if (chore.is_completed && chore.completed_at) {
    const completedDate = new Date(chore.completed_at);
    if (isTodayDate(completedDate)) {
      return t('choresPage.completedToday') + (chore.completed_by_name ? ` by ${chore.completed_by_name}` : '');
    }
    const timeAgo = formatDistanceToNow(completedDate, { addSuffix: true });
    return `Completed ${timeAgo}` + (chore.completed_by_name ? ` by ${chore.completed_by_name}` : '');
  }

  const parts: string[] = [];

  // Show who it's assigned to if there's an assignment
  if (chore.current_assignment_id && chore.assigned_user_name) {
    parts.push(`Assigned to ${chore.assigned_user_name}`);
  }

  // Show creator info for group chores
  if (chore.type === 'group' && chore.creator) {
    parts.push(`Created by ${chore.creator.name || chore.creator.email}`);
  }

  if (chore.frequency && chore.frequency !== 'one_time') {
    const freqOption = frequencyOptions.value.find(f => f.value === chore.frequency);
    if (freqOption) {
      if (chore.frequency === 'custom' && chore.custom_interval_days) {
        parts.push(t('choresPage.frequency.customInterval', { n: chore.custom_interval_days }));
      } else {
        parts.push(freqOption.label);
      }
    }
  }

  if (chore.type === 'group' && chore.group_id) {
    const group = groups.value.find(g => g.id === chore.group_id);
    if (group) {
      parts.push(group.name);
    }
  }

  return parts.join(' · ');
};

const filteredChores = computed(() => {
  if (props.groupId) {
    return chores.value.filter(
      c => c.type === 'group' && String(c.group_id) === String(props.groupId)
    );
  }
  return chores.value;
});

const availableParentChores = computed(() => {
  return chores.value.filter(c => {
    // A chore cannot be its own parent
    if (isEditing.value && selectedChore.value && c.id === selectedChore.value.id) {
      return false;
    }
    // A chore that is already a subtask cannot be a parent
    if (c.parent_chore_id) {
      return false;
    }
    // If a group is selected, only show chores from that group or personal chores
    if (choreForm.value.group_id) {
      return c.group_id === choreForm.value.group_id || c.type === 'personal';
    }
    // If no group is selected, only show personal chores that are not in a group
    return c.type === 'personal' && !c.group_id;
  });
});

const groupedChores = computed(() => {
  if (!filteredChores.value) return [];

  const choreMap = new Map<number, ChoreWithCompletion>();
  filteredChores.value.forEach(chore => {
    choreMap.set(chore.id, { ...chore, child_chores: [] });
  });

  const rootChores: ChoreWithCompletion[] = [];
  choreMap.forEach(chore => {
    if (chore.parent_chore_id && choreMap.has(chore.parent_chore_id)) {
      choreMap.get(chore.parent_chore_id)?.child_chores?.push(chore);
    } else {
      rootChores.push(chore);
    }
  });

  const choresByDate = rootChores.reduce((acc, chore) => {
    const dueDate = format(startOfDay(new Date(chore.next_due_date)), 'yyyy-MM-dd');
    if (!acc[dueDate]) {
      acc[dueDate] = [];
    }
    acc[dueDate].push(chore);
    return acc;
  }, {} as Record<string, ChoreWithCompletion[]>);

  return Object.keys(choresByDate)
    .sort((a, b) => new Date(a).getTime() - new Date(b).getTime())
    .map(dateStr => {
      const dateParts = dateStr.split('-').map(Number);
      const date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
      return {
        date,
        chores: choresByDate[dateStr]
          .sort((a, b) => a.name.localeCompare(b.name))
          .map(chore => ({
            ...chore,
            subtext: getChoreSubtext(chore)
          }))
      };
    });
});

const formatDateHeader = (date: Date) => {
  const today = startOfDay(new Date())
  const itemDate = startOfDay(date)

  if (isEqual(itemDate, today)) {
    return `${t('choresPage.today', 'Today')}, ${format(itemDate, 'eee, d MMM')}`
  }
  return format(itemDate, 'eee, d MMM')
}

const resetChoreForm = () => {
  choreForm.value = { ...initialChoreFormState, next_due_date: format(new Date(), 'yyyy-MM-dd') };
  isEditing.value = false
  selectedChore.value = null
}

const openCreateChoreModal = () => {
  resetChoreForm()
  if (props.groupId) {
    choreForm.value.type = 'group';
    choreForm.value.group_id = typeof props.groupId === 'string' ? parseInt(props.groupId) : props.groupId;
  }
  showChoreModal.value = true
}

const openEditChoreModal = (chore: ChoreWithCompletion) => {
  isEditing.value = true
  selectedChore.value = chore
  choreForm.value = {
    name: chore.name,
    description: chore.description || '',
    frequency: chore.frequency,
    custom_interval_days: chore.custom_interval_days ?? undefined,
    next_due_date: chore.next_due_date,
    type: chore.type,
    group_id: chore.group_id ?? undefined,
    parent_chore_id: chore.parent_chore_id,
  }
  showChoreModal.value = true
}

const handleFormSubmit = async () => {
  try {
    let createdChore;
    if (isEditing.value && selectedChore.value) {
      const updateData: ChoreUpdate = { ...choreForm.value };
      createdChore = await choreService.updateChore(selectedChore.value.id, updateData);
      notificationStore.addNotification({ message: t('choresPage.notifications.updateSuccess', 'Chore updated successfully!'), type: 'success' });
    } else {
      const createData = { ...choreForm.value };
      createdChore = await choreService.createChore(createData as ChoreCreate);

      // Create an assignment for the new chore
      if (createdChore) {
        try {
          await choreService.createAssignment({
            chore_id: createdChore.id,
            assigned_to_user_id: createdChore.created_by_id,
            due_date: createdChore.next_due_date
          });
        } catch (assignmentError) {
          console.error(t('choresPage.consoleErrors.createAssignmentForNewChoreFailed'), assignmentError);
          // Continue anyway since the chore was created
        }
      }

      notificationStore.addNotification({ message: t('choresPage.notifications.createSuccess', 'Chore created successfully!'), type: 'success' });
    }
    showChoreModal.value = false;
    await loadChores();
  } catch (error) {
    console.error(t('choresPage.consoleErrors.saveFailed'), error);
    notificationStore.addNotification({ message: t('choresPage.notifications.saveFailed', 'Failed to save the chore.'), type: 'error' });
  }
}

const confirmDelete = (chore: ChoreWithCompletion) => {
  selectedChore.value = chore
  showDeleteDialog.value = true
}

const deleteChore = async () => {
  if (!selectedChore.value) return
  try {
    await choreService.deleteChore(selectedChore.value.id, selectedChore.value.type, selectedChore.value.group_id ?? undefined)
    notificationStore.addNotification({ message: t('choresPage.notifications.deleteSuccess', 'Chore deleted successfully.'), type: 'success' })
    showDeleteDialog.value = false
    await loadChores()
  } catch (error) {
    console.error(t('choresPage.consoleErrors.deleteFailed'), error)
    notificationStore.addNotification({ message: t('choresPage.notifications.deleteFailed', 'Failed to delete chore.'), type: 'error' })
  }
}

const toggleCompletion = async (chore: ChoreWithCompletion) => {
  if (chore.current_assignment_id === null) {
    // If no assignment exists, create one
    try {
      const assignment = await choreService.createAssignment({
        chore_id: chore.id,
        assigned_to_user_id: chore.created_by_id,
        due_date: chore.next_due_date
      });
      chore.current_assignment_id = assignment.id;
    } catch (error) {
      console.error(t('choresPage.consoleErrors.createAssignmentFailed'), error);
      notificationStore.addNotification({
        message: t('choresPage.notifications.createAssignmentFailed', 'Failed to create assignment for chore.'),
        type: 'error'
      });
      return;
    }
  }

  const originalCompleted = chore.is_completed;
  chore.updating = true;
  const newCompletedStatus = !chore.is_completed;
  chore.is_completed = newCompletedStatus;

  try {
    if (newCompletedStatus) {
      await choreService.completeAssignment(chore.current_assignment_id);
    } else {
      const assignmentUpdate: ChoreAssignmentUpdate = { is_complete: false };
      await choreService.updateAssignment(chore.current_assignment_id, assignmentUpdate);
    }

    notificationStore.addNotification({
      message: newCompletedStatus ? t('choresPage.notifications.completed', 'Chore marked as complete!') : t('choresPage.notifications.uncompleted', 'Chore marked as incomplete.'),
      type: 'success'
    });
    await loadChores();
  } catch (error) {
    console.error(t('choresPage.consoleErrors.updateCompletionStatusFailed'), error);
    notificationStore.addNotification({ message: t('choresPage.notifications.updateFailed', 'Failed to update chore status.'), type: 'error' });
    chore.is_completed = originalCompleted;
  } finally {
    chore.updating = false;
  }
};

const openChoreDetailModal = async (chore: ChoreWithCompletion) => {
  selectedChore.value = chore;
  showChoreDetailModal.value = true;

  // Load assignments for this chore
  loadingAssignments.value = true;
  try {
    selectedChoreAssignments.value = await choreService.getChoreAssignments(chore.id);
  } catch (error) {
    console.error('Failed to load chore assignments:', error);
    notificationStore.addNotification({
      message: 'Failed to load chore assignments.',
      type: 'error'
    });
  } finally {
    loadingAssignments.value = false;
  }
};

const openHistoryModal = async (chore: ChoreWithCompletion) => {
  selectedChore.value = chore;
  showHistoryModal.value = true;

  // Load history for this chore
  loadingHistory.value = true;
  try {
    selectedChoreHistory.value = await choreService.getChoreHistory(chore.id);
  } catch (error) {
    console.error('Failed to load chore history:', error);
    notificationStore.addNotification({
      message: 'Failed to load chore history.',
      type: 'error'
    });
  } finally {
    loadingHistory.value = false;
  }
};

const formatHistoryEntry = (entry: ChoreHistory) => {
  const timestamp = format(parseISO(entry.timestamp), 'MMM d, h:mm a');
  const user = entry.changed_by_user?.name || entry.changed_by_user?.email || 'System';

  switch (entry.event_type) {
    case 'created':
      return `${timestamp} - ${user} created this chore`;
    case 'updated':
      return `${timestamp} - ${user} updated this chore`;
    case 'deleted':
      return `${timestamp} - ${user} deleted this chore`;
    case 'assigned':
      return `${timestamp} - ${user} assigned this chore`;
    case 'completed':
      return `${timestamp} - ${user} completed this chore`;
    case 'reopened':
      return `${timestamp} - ${user} reopened this chore`;
    default:
      return `${timestamp} - ${user} performed action: ${entry.event_type}`;
  }
};

const getDueDateStatus = (chore: ChoreWithCompletion) => {
  if (chore.is_completed) return 'completed';

  const today = startOfDay(new Date());
  const dueDate = startOfDay(new Date(chore.next_due_date));

  if (dueDate < today) return 'overdue';
  if (isEqual(dueDate, today)) return 'due-today';
  return 'upcoming';
};

const startTimer = async (chore: ChoreWithCompletion) => {
  if (chore.current_assignment_id) {
    await timeEntryStore.startTimeEntry(chore.current_assignment_id);
  }
};

const stopTimer = async (chore: ChoreWithCompletion, timeEntryId: number) => {
  if (chore.current_assignment_id) {
    await timeEntryStore.stopTimeEntry(chore.current_assignment_id, timeEntryId);
  }
};
</script>

<template>
  <div class="container">
    <div v-if="isGuest" class="guest-banner">
      <p>
        You are using a guest account.
        <router-link to="/auth/signup">Sign up</router-link>
        to save your data permanently.
      </p>
    </div>
    <header v-if="!props.groupId" class="flex justify-between items-center">
      <h1 style="margin-block-start: 0;">{{ t('choresPage.title') }}</h1>
      <button class="btn btn-primary" @click="openCreateChoreModal">
        {{ t('choresPage.addChore', '+') }}
      </button>
    </header>

    <div v-if="isLoading" class="flex justify-center mt-4">
      <div class="spinner-dots">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <div v-else-if="groupedChores.length === 0" class="empty-state-card">
      <h3>{{ t('choresPage.empty.title', 'No Chores Yet') }}</h3>
      <p>{{ t('choresPage.empty.message', 'Get started by adding your first chore!') }}</p>
      <button class="btn btn-primary" @click="openCreateChoreModal">
        {{ t('choresPage.addFirstChore', 'Add First Chore') }}
      </button>
    </div>

    <div v-else class="schedule-list">
      <div v-for="group in groupedChores" :key="group.date.toISOString()" class="schedule-group">
        <h2 class="date-header">{{ formatDateHeader(group.date) }}</h2>
        <div class="neo-item-list-container">
          <ul class="neo-item-list">
            <ChoreItem v-for="chore in group.chores" :key="chore.id" :chore="chore"
              :time-entries="chore.current_assignment_id ? timeEntries[chore.current_assignment_id] || [] : []"
              :active-timer="activeTimer" @toggle-completion="toggleCompletion" @edit="openEditChoreModal"
              @delete="confirmDelete" @open-details="openChoreDetailModal" @open-history="openHistoryModal"
              @start-timer="startTimer" @stop-timer="stopTimer" />
          </ul>
        </div>
      </div>
    </div>

    <!-- Chore Form Modal -->
    <div v-if="showChoreModal" class="modal-backdrop open" @click.self="showChoreModal = false">
      <div class="modal-container">
        <form @submit.prevent="handleFormSubmit">
          <div class="modal-header">
            <h3>{{ isEditing ? t('choresPage.editChore', 'Edit Chore') : t('choresPage.createChore', 'Create Chore') }}
            </h3>
            <button type="button" @click="showChoreModal = false" class="close-button">
              &times;
            </button>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label class="form-label" for="chore-name">{{ t('choresPage.form.name', 'Name') }}</label>
              <input id="chore-name" type="text" v-model="choreForm.name" class="form-input" required>
            </div>
            <div class="form-group">
              <label class="form-label" for="chore-desc">{{ t('choresPage.form.description', 'Description') }}</label>
              <textarea id="chore-desc" v-model="choreForm.description" class="form-input"></textarea>
            </div>
            <div class="form-group">
              <label class="form-label" for="chore-date">{{ t('choresPage.form.dueDate', 'Due Date') }}</label>
              <input id="chore-date" type="date" v-model="choreForm.next_due_date" class="form-input" required>
            </div>
            <div class="form-group">
              <label class="form-label">{{ t('choresPage.form.frequency', 'Frequency') }}</label>
              <div class="radio-group">
                <label v-for="option in frequencyOptions" :key="option.value" class="radio-label">
                  <input type="radio" v-model="choreForm.frequency" :value="option.value">
                  <span class="checkmark radio-mark"></span>
                  <span>{{ option.label }}</span>
                </label>
              </div>
            </div>
            <div v-if="choreForm.frequency === 'custom'" class="form-group">
              <label class="form-label" for="chore-interval">{{ t('choresPage.form.interval', 'Interval (days)')
                }}</label>
              <input id="chore-interval" type="number" v-model.number="choreForm.custom_interval_days"
                class="form-input" :placeholder="t('choresPage.form.intervalPlaceholder')" min="1">
            </div>
            <div class="form-group">
              <label class="form-label">{{ t('choresPage.form.type', 'Type') }}</label>
              <div class="radio-group">
                <label class="radio-label">
                  <input type="radio" v-model="choreForm.type" value="personal">
                  <span class="checkmark radio-mark"></span>
                  <span>{{ t('choresPage.form.personal', 'Personal') }}</span>
                </label>
                <label class="radio-label">
                  <input type="radio" v-model="choreForm.type" value="group">
                  <span class="checkmark radio-mark"></span>
                  <span>{{ t('choresPage.form.group', 'Group') }}</span>
                </label>
              </div>
            </div>
            <div v-if="choreForm.type === 'group'" class="form-group">
              <label class="form-label" for="chore-group">{{ t('choresPage.form.assignGroup', 'Assign to Group')
                }}</label>
              <select id="chore-group" v-model="choreForm.group_id" class="form-input">
                <option v-for="group in groups" :key="group.id" :value="group.id">{{ group.name }}</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label" for="parent-chore">{{ t('choresPage.form.parentChore', 'Parent Chore')
              }}</label>
              <select id="parent-chore" v-model="choreForm.parent_chore_id" class="form-input">
                <option :value="null">None</option>
                <option v-for="parent in availableParentChores" :key="parent.id" :value="parent.id">
                  {{ parent.name }}
                </option>
              </select>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-neutral" @click="showChoreModal = false">{{
              t('choresPage.form.cancel', 'Cancel')
              }}</button>
            <button type="submit" class="btn btn-primary">{{ isEditing ? t('choresPage.form.save', 'Save Changes') :
              t('choresPage.form.create', 'Create') }}</button>
          </div>
        </form>
      </div>
    </div>

    <!-- Delete Confirmation Dialog -->
    <div v-if="showDeleteDialog" class="modal-backdrop open" @click.self="showDeleteDialog = false">
      <div class="modal-container confirm-modal">
        <div class="modal-header">
          <h3>{{ t('choresPage.deleteConfirm.title', 'Confirm Deletion') }}</h3>
          <button type="button" @click="showDeleteDialog = false" class="close-button">
            &times;
          </button>
        </div>
        <div class="modal-body">
          <p>{{ t('choresPage.deleteConfirm.message', 'Really want to delete? This action cannot be undone.') }}</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-neutral" @click="showDeleteDialog = false">{{
            t('choresPage.deleteConfirm.cancel', 'Cancel') }}</button>
          <button type="button" class="btn btn-danger" @click="deleteChore">{{
            t('choresPage.deleteConfirm.delete', 'Delete')
            }}</button>
        </div>
      </div>
    </div>

    <!-- Chore Detail Modal -->
    <div v-if="showChoreDetailModal" class="modal-backdrop open" @click.self="showChoreDetailModal = false">
      <div class="modal-container detail-modal">
        <div class="modal-header">
          <h3>{{ selectedChore?.name }}</h3>
          <button type="button" @click="showChoreDetailModal = false" class="close-button">
            &times;
          </button>
        </div>
        <div class="modal-body" v-if="selectedChore">
          <div class="detail-section">
            <h4>Details</h4>
            <div class="detail-grid">
              <div class="detail-item">
                <span class="label">Type:</span>
                <span class="value">{{ selectedChore.type === 'group' ? 'Group' : 'Personal' }}</span>
              </div>
              <div class="detail-item">
                <span class="label">Created by:</span>
                <span class="value">{{ selectedChore.creator?.name || selectedChore.creator?.email || 'Unknown'
                  }}</span>
              </div>
              <div class="detail-item">
                <span class="label">Due date:</span>
                <span class="value">{{ format(new Date(selectedChore.next_due_date), 'PPP') }}</span>
              </div>
              <div class="detail-item">
                <span class="label">Frequency:</span>
                <span class="value">
                  {{selectedChore?.frequency === 'custom' && selectedChore?.custom_interval_days
                    ? `Every ${selectedChore.custom_interval_days} days`
                    : frequencyOptions.find(f => f.value === selectedChore?.frequency)?.label || selectedChore?.frequency
                  }}
                </span>
              </div>
              <div v-if="selectedChore.description" class="detail-item full-width">
                <span class="label">Description:</span>
                <span class="value">{{ selectedChore.description }}</span>
              </div>
            </div>
          </div>

          <div class="detail-section">
            <h4>Assignments</h4>
            <div v-if="loadingAssignments" class="loading-spinner">Loading...</div>
            <div v-else-if="selectedChoreAssignments.length === 0" class="no-data">
              No assignments found for this chore.
            </div>
            <div v-else class="assignments-list">
              <div v-for="assignment in selectedChoreAssignments" :key="assignment.id" class="assignment-item">
                <div class="assignment-main">
                  <span class="assigned-user">{{ assignment.assigned_user?.name || assignment.assigned_user?.email
                    }}</span>
                  <span class="assignment-status" :class="{ completed: assignment.is_complete }">
                    {{ assignment.is_complete ? '✅ Completed' : '⏳ Pending' }}
                  </span>
                </div>
                <div class="assignment-details">
                  <span>Due: {{ format(new Date(assignment.due_date), 'PPP') }}</span>
                  <span v-if="assignment.completed_at">
                    Completed: {{ format(new Date(assignment.completed_at), 'PPP') }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-neutral" @click="showChoreDetailModal = false">Close</button>
        </div>
      </div>
    </div>

    <!-- History Modal -->
    <div v-if="showHistoryModal" class="modal-backdrop open" @click.self="showHistoryModal = false">
      <div class="modal-container history-modal">
        <div class="modal-header">
          <h3>History: {{ selectedChore?.name }}</h3>
          <button type="button" @click="showHistoryModal = false" class="close-button">
            &times;
          </button>
        </div>
        <div class="modal-body">
          <div v-if="loadingHistory" class="loading-spinner">Loading history...</div>
          <div v-else-if="selectedChoreHistory.length === 0" class="no-data">
            No history found for this chore.
          </div>
          <div v-else class="history-list">
            <div v-for="entry in selectedChoreHistory" :key="entry.id" class="history-item">
              <div class="history-content">
                <span class="history-text">{{ formatHistoryEntry(entry) }}</span>
                <div v-if="entry.event_data && Object.keys(entry.event_data).length > 0" class="history-data">
                  <details>
                    <summary>Details</summary>
                    <pre>{{ JSON.stringify(entry.event_data, null, 2) }}</pre>
                  </details>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-neutral" @click="showHistoryModal = false">Close</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.guest-banner {
  background-color: #fffbeb;
  color: #92400e;
  padding: 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid #fBBF24;
  text-align: center;
}

.guest-banner p {
  margin: 0;
}

.guest-banner a {
  color: #92400e;
  text-decoration: underline;
  font-weight: bold;
}

.schedule-group {
  margin-bottom: 2rem;
  position: relative;
}

.date-header {
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: bold;
  color: var(--dark);
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--dark);
  position: sticky;
  top: 0;
  background-color: var(--light);
  z-index: 10;

  &::after {
    display: none; // Hides the default h-tag underline from valerie-ui
  }
}

.item-time {
  font-size: 0.9rem;
  color: var(--dark);
  opacity: 0.7;
  margin-left: 1rem;
}

.neo-item-list-container {
  border: 3px solid #111;
  border-radius: 18px;
  background: var(--light);
  box-shadow: 6px 6px 0 #111;
  overflow: hidden;
}

/* Status-based styling */
.schedule-group:has(.status-overdue) .neo-item-list-container {
  box-shadow: 6px 6px 0 #c72d2d;
}

.schedule-group:has(.status-due-today) .neo-item-list-container {
  box-shadow: 6px 6px 0 #b37814;
}

.status-completed {
  opacity: 0.7;
}

/* Neo-style list items from ListDetailPage */
.neo-item-list {
  list-style: none;
  padding: 0.5rem 1rem;
  margin: 0;
}

.neo-list-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
  transition: background-color 0.2s ease;
}

.neo-list-item:hover {
  background-color: #f8f8f8;
}

.neo-list-item:last-child {
  border-bottom: none;
}

.neo-item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
}

.neo-item-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  margin-left: auto;

  .btn {
    margin-left: 0.25rem;
  }
}

.neo-list-item:hover .neo-item-actions {
  opacity: 1;
}

/* Custom Checkbox Styles from ListDetailPage */
.neo-checkbox-label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.8em;
  cursor: pointer;
  position: relative;
  width: 100%;
  font-weight: 500;
  color: #414856;
  transition: color 0.3s ease;
  margin-bottom: 0;
}

.neo-checkbox-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  height: 20px;
  width: 20px;
  outline: none;
  border: 2px solid #b8c1d1;
  margin: 0;
  cursor: pointer;
  background: transparent;
  border-radius: 6px;
  display: grid;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.neo-checkbox-label input[type="checkbox"]:hover {
  border-color: var(--secondary);
  transform: scale(1.05);
}

.neo-checkbox-label input[type="checkbox"]::before,
.neo-checkbox-label input[type="checkbox"]::after {
  content: none;
}

.neo-checkbox-label input[type="checkbox"]::after {
  content: "";
  position: absolute;
  opacity: 0;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 12px;
  border: solid var(--primary);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0);
  transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transition-property: transform, opacity;
}

.neo-checkbox-label input[type="checkbox"]:checked {
  border-color: var(--primary);
}

.neo-checkbox-label input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.checkbox-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.checkbox-text-span {
  position: relative;
  transition: color 0.4s ease, opacity 0.4s ease;
  width: fit-content;
  font-weight: 500;
  color: var(--dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Animated strikethrough line */
.checkbox-text-span::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -0.1em;
  right: -0.1em;
  height: 2px;
  background: var(--dark);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.77, 0, .18, 1);
}

.neo-checkbox-label input[type="checkbox"]:checked~.checkbox-content .checkbox-text-span {
  color: var(--dark);
  opacity: 0.6;
}

.neo-checkbox-label input[type="checkbox"]:checked~.checkbox-content .checkbox-text-span::before {
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.77, 0, .18, 1) 0.1s;
}

.neo-completed-static {
  color: var(--dark);
  opacity: 0.6;
  position: relative;
}

.neo-completed-static::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -0.1em;
  right: -0.1em;
  height: 2px;
  background: var(--dark);
  transform: scaleX(1);
  transform-origin: left;
}

/* New styles for enhanced UX */
.chore-main-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.chore-badges {
  display: flex;
  gap: 0.25rem;
}

.badge {
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.badge-group {
  background-color: #3b82f6;
  color: white;
}

.badge-overdue {
  background-color: #ef4444;
  color: white;
}

.badge-due-today {
  background-color: #f59e0b;
  color: white;
}

.chore-description {
  font-size: 0.875rem;
  color: var(--dark);
  opacity: 0.8;
  margin-top: 0.25rem;
  font-style: italic;
}

/* Modal styles */
.detail-modal .modal-container,
.history-modal .modal-container {
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 1.5rem;
}

.detail-section h4 {
  margin-bottom: 0.75rem;
  font-weight: 600;
  color: var(--dark);
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.25rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.detail-item.full-width {
  grid-column: 1 / -1;
}

.detail-item .label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--dark);
  opacity: 0.8;
}

.detail-item .value {
  font-size: 0.875rem;
  color: var(--dark);
}

.assignments-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.assignment-item {
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #f9fafb;
}

.assignment-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.assigned-user {
  font-weight: 500;
  color: var(--dark);
}

.assignment-status {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background-color: #fbbf24;
  color: white;
}

.assignment-status.completed {
  background-color: #10b981;
}

.assignment-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--dark);
  opacity: 0.8;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.history-item {
  padding: 0.75rem;
  border-left: 3px solid #e5e7eb;
  background-color: #f9fafb;
  border-radius: 0 0.25rem 0.25rem 0;
}

.history-text {
  font-size: 0.875rem;
  color: var(--dark);
}

.history-data {
  margin-top: 0.5rem;
}

.history-data details {
  font-size: 0.75rem;
}

.history-data summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 500;
}

.history-data pre {
  margin-top: 0.25rem;
  padding: 0.5rem;
  background-color: #f3f4f6;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  overflow-x: auto;
}

.loading-spinner {
  text-align: center;
  padding: 1rem;
  color: var(--dark);
  opacity: 0.7;
}

.no-data {
  text-align: center;
  padding: 1rem;
  color: var(--dark);
  opacity: 0.7;
  font-style: italic;
}
</style>
