<script setup lang="ts">
import { Icon } from '@iconify/vue';
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import ConfirmDialog from '../components/ConfirmDialog.vue';
import FilterPanel from '../components/FilterPanel.vue';
import LifeReactionUsersModal from '../components/LifeReactionUsersModal.vue';
import LoadMoreSentinel from '../components/LoadMoreSentinel.vue';
import Modal from '../components/Modal.vue';
import PageHeader from '../components/PageHeader.vue';
import Skeleton from '../components/Skeleton.vue';
import StatusBadge from '../components/StatusBadge.vue';
import StatusMessage from '../components/StatusMessage.vue';
import Tabs, { type TabOption } from '../components/Tabs.vue';
import TagsSelect from '../components/TagsSelect.vue';
import {
  iconAdd,
  iconCancel,
  iconChevronDown,
  iconComment,
  iconDelete,
  iconEdit,
  iconExternal,
  iconLife,
  iconReactionFun,
  iconReactionHelpful,
  iconReactionLike,
  iconReactionThanks,
  iconReply,
  iconSave,
  iconSearch,
  iconUndo,
  iconVersion,
  iconWarning
} from '../icons';
import {
  api,
  moderationUpdateEvent,
  onAuthChange,
  type AiModerationStatus,
  type AuthUser,
  type CommentSort,
  type GameVersion,
  type Language,
  type LifeComment,
  type LifePost,
  type LifePostsPage,
  type LifeReactionType,
  type ModerationUpdateDetail
} from '../services/api';

type LifeCommentPageState = {
  items: LifeComment[];
  nextCursor: string | null;
  hasMore: boolean;
  total: number;
  loading: boolean;
  loadingMore: boolean;
  loaded: boolean;
  error: string;
};

type LifePostSort = 'latest' | 'oldest';
type LifeFeedScope = 'all' | 'following';
type PendingLifeDelete = { type: 'post'; post: LifePost } | { type: 'comment'; post: LifePost; comment: LifeComment };

const { locale, t } = useI18n();
const posts = ref<LifePost[]>([]);
const gameVersions = ref<GameVersion[]>([]);
const languages = ref<Language[]>([]);
const currentUser = ref<AuthUser | null>(null);
const loading = ref(true);
const loadingMore = ref(false);
const authReady = ref(false);
const busy = ref(false);
const searchDraft = ref('');
const submittedSearch = ref('');
const activeLanguageCode = ref('all');
const activeGameVersionId = ref('all');
const activeSort = ref<LifePostSort>('latest');
const activeFeedScope = ref<LifeFeedScope>('all');
const body = ref('');
const selectedGameVersionId = ref('');
const editingPostId = ref<number | null>(null);
const postModalOpen = ref(false);
const formError = ref('');
const loadError = ref('');
const commentBodies = ref<Record<number, string>>({});
const replyBodies = ref<Record<number, string>>({});
const replyTargetId = ref<number | null>(null);
const expandedComments = ref<Record<number, boolean>>({});
const commentPages = ref<Record<number, LifeCommentPageState>>({});
const commentSorts = ref<Record<number, CommentSort>>({});
const commentBusyKey = ref('');
const commentErrors = ref<Record<string, string>>({});
const reactionPickerPostId = ref<number | null>(null);
const reactionBusyPostId = ref<number | null>(null);
const reactionErrors = ref<Record<number, string>>({});
const moderationBusyPostId = ref<number | null>(null);
const moderationErrors = ref<Record<number, string>>({});
const reactionUsersModal = ref<{ postId: number; reactionType: LifeReactionType | null } | null>(null);
const pendingDelete = ref<PendingLifeDelete | null>(null);
const deleteConfirmBusy = ref(false);
const bodyInput = ref<HTMLTextAreaElement | null>(null);
const loadMoreSentinel = ref<HTMLElement | null>(null);
const lifePostPageSize = 20;
const lifeCommentPageSize = 20;
const bodyMaxLength = 2000;
const commentMaxLength = 1000;
const skeletonPostCount = 3;
const loadingMoreSkeletonCount = 2;
let removeAuthListener: (() => void) | null = null;
let feedObserver: IntersectionObserver | null = null;
let postsRequestId = 0;
const nextCursor = ref<string | null>(null);
const hasMorePosts = ref(false);
const loadMorePaused = ref(false);
const allLanguageValue = 'all';
const allGameVersionValue = 'all';
const deleteConfirmTitle = computed(() =>
  pendingDelete.value?.type === 'comment' ? t('pages.life.deleteComment') : t('pages.life.deletePost')
);
const deleteConfirmMessage = computed(() =>
  pendingDelete.value?.type === 'comment' ? t('pages.life.deleteCommentConfirm') : t('pages.life.deleteConfirm')
);

type LifeInitialData = {
  options: { gameVersions: GameVersion[] } | null;
  languages: Language[] | null;
  posts: LifePostsPage | null;
};

const { data: initialData } = await useAsyncData<LifeInitialData>(
  `life-feed-initial:${locale.value}`,
  async () => {
    const [optionsResult, languagesResult, postsResult] = await Promise.allSettled([
      api.options(),
      api.languages(),
      api.lifePosts({
        limit: lifePostPageSize,
        sort: 'latest'
      })
    ]);

    return {
      options:
        optionsResult.status === 'fulfilled'
          ? { gameVersions: optionsResult.value.gameVersions }
          : null,
      languages: languagesResult.status === 'fulfilled' ? languagesResult.value.filter((language) => language.enabled) : null,
      posts: postsResult.status === 'fulfilled' ? postsResult.value : null
    };
  },
  { default: () => ({ options: null, languages: null, posts: null }) }
);

gameVersions.value = initialData.value.options?.gameVersions ?? [];
languages.value = initialData.value.languages ?? [];
posts.value = initialData.value.posts?.items ?? [];
nextCursor.value = initialData.value.posts?.nextCursor ?? null;
hasMorePosts.value = initialData.value.posts?.hasMore ?? false;
const initialOptionsLoaded = ref(initialData.value.options !== null);
const initialLanguagesLoaded = ref(initialData.value.languages !== null);
const initialPostsLoaded = ref(initialData.value.posts !== null);
loading.value = !initialPostsLoaded.value;

const reactionOptions = [
  { type: 'like', icon: iconReactionLike, labelKey: 'pages.life.reactionLike' },
  { type: 'helpful', icon: iconReactionHelpful, labelKey: 'pages.life.reactionHelpful' },
  { type: 'fun', icon: iconReactionFun, labelKey: 'pages.life.reactionFun' },
  { type: 'thanks', icon: iconReactionThanks, labelKey: 'pages.life.reactionThanks' }
] as const satisfies ReadonlyArray<{ type: LifeReactionType; icon: string; labelKey: string }>;

function can(permissionKey: string) {
  return currentUser.value?.permissions.includes(permissionKey) === true;
}

const canPost = computed(() => can('life.posts.create'));
const canComment = computed(() => can('life.comments.create'));
const canLikeComments = computed(() => can('life.comments.like'));
const canReact = computed(() => can('life.reactions.set'));
const charactersLeft = computed(() => Math.max(0, bodyMaxLength - body.value.length));
const isEditing = computed(() => editingPostId.value !== null);
const searchQuery = computed(() => submittedSearch.value.trim());
const selectedFeedLanguageCode = computed(() =>
  activeLanguageCode.value === allLanguageValue ? undefined : activeLanguageCode.value
);
const selectedFeedGameVersionId = computed(() => {
  const gameVersionId = Number(activeGameVersionId.value);
  return activeGameVersionId.value === allGameVersionValue || !Number.isInteger(gameVersionId) || gameVersionId <= 0
    ? undefined
    : gameVersionId;
});
const languageFilterOptions = computed<TabOption[]>(() => [
  { value: allLanguageValue, label: t('pages.life.allLanguages') },
  ...languages.value.map((language) => ({ value: language.code, label: language.name }))
]);
const gameVersionFilterOptions = computed(() => [
  { value: allGameVersionValue, label: t('pages.life.allVersions') },
  ...gameVersions.value.map((version) => ({ value: String(version.id), label: version.name }))
]);
const sortOptions = computed<Array<{ value: LifePostSort; label: string }>>(() => [
  { value: 'latest', label: t('pages.life.sortLatest') },
  { value: 'oldest', label: t('pages.life.sortOldest') }
]);
const commentSortOptions = computed<Array<{ value: CommentSort; label: string }>>(() => [
  { value: 'oldest', label: t('pages.life.sortOldest') },
  { value: 'latest', label: t('pages.life.sortLatest') },
  { value: 'most-liked', label: t('pages.life.sortMostLiked') },
  { value: 'most-replied', label: t('pages.life.sortMostReplied') }
]);
const feedScopeOptions = computed<TabOption[]>(() => [
  { value: 'all', label: t('pages.life.allFeed') },
  { value: 'following', label: t('pages.life.followingFeed') }
]);
const postModalTitle = computed(() => (isEditing.value ? t('pages.life.editPost') : t('pages.life.newPost')));
const submitLabel = computed(() => {
  if (busy.value) return isEditing.value ? t('pages.life.updating') : t('pages.life.publishing');
  return isEditing.value ? t('pages.life.update') : t('pages.life.publish');
});

async function loadCurrentUser() {
  authReady.value = false;

  try {
    const response = await api.me();
    currentUser.value = response.user;
  } catch {
    currentUser.value = null;
    activeFeedScope.value = 'all';
  } finally {
    authReady.value = true;
  }
}

async function loadLifeOptions() {
  try {
    const options = await api.options();
    gameVersions.value = options.gameVersions;

    if (
      activeGameVersionId.value !== allGameVersionValue &&
      !gameVersions.value.some((gameVersion) => String(gameVersion.id) === activeGameVersionId.value)
    ) {
      activeGameVersionId.value = allGameVersionValue;
    }
    if (selectedGameVersionId.value && !gameVersions.value.some((gameVersion) => String(gameVersion.id) === selectedGameVersionId.value)) {
      selectedGameVersionId.value = '';
    }
  } catch (error) {
    loadError.value = error instanceof Error && error.message ? error.message : t('errors.loadFailed');
  }
}

async function loadLanguages() {
  try {
    languages.value = (await api.languages()).filter((language) => language.enabled);

    if (
      activeLanguageCode.value !== allLanguageValue &&
      !languages.value.some((language) => language.code === activeLanguageCode.value)
    ) {
      activeLanguageCode.value = allLanguageValue;
    }
  } catch (error) {
    loadError.value = error instanceof Error && error.message ? error.message : t('errors.loadFailed');
  }
}

async function loadPosts() {
  const requestId = ++postsRequestId;
  loading.value = true;
  loadingMore.value = false;
  loadError.value = '';
  nextCursor.value = null;
  hasMorePosts.value = false;
  loadMorePaused.value = false;

  try {
    const params = {
      limit: lifePostPageSize,
      search: searchQuery.value,
      language: selectedFeedLanguageCode.value,
      gameVersionId: selectedFeedGameVersionId.value,
      sort: activeSort.value
    };
    const page = activeFeedScope.value === 'following' ? await api.followingLifePosts(params) : await api.lifePosts(params);
    if (requestId !== postsRequestId) {
      return;
    }
    posts.value = page.items;
    expandedComments.value = {};
    commentPages.value = {};
    nextCursor.value = page.nextCursor;
    hasMorePosts.value = page.hasMore;
  } catch (error) {
    if (requestId === postsRequestId) {
      loadError.value = error instanceof Error && error.message ? error.message : t('errors.loadFailed');
    }
  } finally {
    if (requestId === postsRequestId) {
      loading.value = false;
    }
  }
}

async function loadMorePosts() {
  if (loading.value || loadingMore.value || loadMorePaused.value || !hasMorePosts.value) {
    return;
  }

  const cursor = nextCursor.value;
  if (!cursor) {
    hasMorePosts.value = false;
    return;
  }

  const requestId = postsRequestId;
  loadingMore.value = true;
  loadError.value = '';

  try {
    const params = {
      cursor,
      limit: lifePostPageSize,
      search: searchQuery.value,
      language: selectedFeedLanguageCode.value,
      gameVersionId: selectedFeedGameVersionId.value,
      sort: activeSort.value
    };
    const page = activeFeedScope.value === 'following' ? await api.followingLifePosts(params) : await api.lifePosts(params);
    if (requestId !== postsRequestId) {
      return;
    }

    const existingIds = new Set(posts.value.map((post) => post.id));
    posts.value = [...posts.value, ...page.items.filter((post) => !existingIds.has(post.id))];
    nextCursor.value = page.nextCursor;
    hasMorePosts.value = page.hasMore;
  } catch (error) {
    if (requestId === postsRequestId) {
      loadError.value = error instanceof Error && error.message ? error.message : t('errors.loadFailed');
      loadMorePaused.value = true;
    }
  } finally {
    if (requestId === postsRequestId) {
      loadingMore.value = false;
    }
  }
}

function resetForm() {
  body.value = '';
  selectedGameVersionId.value = '';
  editingPostId.value = null;
  formError.value = '';
}

function payload() {
  return {
    body: body.value.trim(),
    gameVersionId: selectedGameVersionForPost(),
    languageCode: selectedFeedLanguageCode.value ?? null
  };
}

function selectedGameVersionForPost() {
  const gameVersionId = Number(selectedGameVersionId.value);
  return Number.isInteger(gameVersionId) && gameVersionId > 0 ? gameVersionId : null;
}

function submitSearch() {
  const nextSearch = searchDraft.value.trim();
  if (nextSearch === submittedSearch.value && !loadError.value) {
    return;
  }

  submittedSearch.value = nextSearch;
  void loadPosts();
}

function clearSearch() {
  const hadSubmittedSearch = Boolean(submittedSearch.value);
  if (!searchDraft.value && !hadSubmittedSearch) {
    return;
  }

  searchDraft.value = '';
  submittedSearch.value = '';

  if (hadSubmittedSearch) {
    void loadPosts();
  }
}

function retryLoadMore() {
  loadMorePaused.value = false;
  void loadMorePosts();
}

function matchesCurrentFilters(post: LifePost) {
  const keyword = searchQuery.value.toLowerCase();
  const gameVersionId = selectedFeedGameVersionId.value;
  const matchesSearch = keyword === '' || post.body.toLowerCase().includes(keyword);
  const matchesGameVersion = gameVersionId === undefined || post.gameVersion?.id === gameVersionId;
  const matchesLanguage =
    selectedFeedLanguageCode.value === undefined || post.moderationLanguageCode === selectedFeedLanguageCode.value;
  return matchesSearch && matchesGameVersion && matchesLanguage;
}

function openCreatePostModal() {
  resetForm();
  postModalOpen.value = true;
  void nextTick(() => bodyInput.value?.focus());
}

function closePostModal() {
  if (busy.value) {
    return;
  }

  postModalOpen.value = false;
  resetForm();
}

async function submitPost() {
  if (!body.value.trim()) {
    formError.value = t('pages.life.bodyRequired');
    bodyInput.value?.focus();
    return;
  }

  busy.value = true;
  formError.value = '';

  try {
    if (editingPostId.value !== null) {
      const updated = await api.updateLifePost(editingPostId.value, payload());
      replacePost(updated);
    } else {
      const created = await api.createLifePost(payload());
      if (activeSort.value !== 'latest' || activeFeedScope.value === 'following') {
        void loadPosts();
      } else if (matchesCurrentFilters(created)) {
        posts.value = [created, ...posts.value];
      }
    }
    resetForm();
    postModalOpen.value = false;
  } catch (error) {
    formError.value =
      error instanceof Error && error.message
        ? error.message
        : isEditing.value
          ? t('pages.life.saveFailed')
          : t('pages.life.postFailed');
  } finally {
    busy.value = false;
  }
}

function canManage(post: LifePost) {
  return (currentUser.value?.id === post.author?.id && can('life.posts.update')) || can('life.posts.update-any');
}

function canDeletePost(post: LifePost) {
  return (currentUser.value?.id === post.author?.id && can('life.posts.delete')) || can('life.posts.delete-any');
}

function canManageComment(comment: LifeComment) {
  return !comment.deleted && ((currentUser.value?.id === comment.author?.id && can('life.comments.delete')) || can('life.comments.delete-any'));
}

function canRestoreComment(comment: LifeComment) {
  return comment.deleted && currentUser.value?.id === comment.author?.id && can('life.comments.delete');
}

function canSeeCommentModeration(comment: LifeComment) {
  return moderationStatusVisible(comment.moderationStatus) && (currentUser.value?.id === comment.author?.id || can('life.comments.delete-any'));
}

function commentKey(postId: number) {
  return `post-${postId}`;
}

function replyKey(commentId: number) {
  return `reply-${commentId}`;
}

function likeKey(commentId: number) {
  return `like-${commentId}`;
}

function commentSort(postId: number): CommentSort {
  return commentSorts.value[postId] ?? 'oldest';
}

function setCommentSort(post: LifePost, sort: CommentSort) {
  commentSorts.value = {
    ...commentSorts.value,
    [post.id]: sort
  };
  void loadComments(post, true);
}

function handleCommentSortChange(post: LifePost, event: Event) {
  if (event.target instanceof HTMLSelectElement) {
    setCommentSort(post, event.target.value as CommentSort);
  }
}

function initialCommentPage(post: LifePost): LifeCommentPageState {
  return {
    items: post.commentPreview,
    nextCursor: null,
    hasMore: post.commentCount > post.commentPreview.reduce((count, comment) => count + 1 + comment.replies.length, 0),
    total: post.commentCount,
    loading: false,
    loadingMore: false,
    loaded: false,
    error: ''
  };
}

function commentPage(post: LifePost) {
  return commentPages.value[post.id] ?? initialCommentPage(post);
}

function setCommentPage(postId: number, page: LifeCommentPageState) {
  commentPages.value = {
    ...commentPages.value,
    [postId]: page
  };
}

function commentsForPost(post: LifePost) {
  return commentPage(post).items;
}

function commentCount(post: LifePost) {
  return commentPage(post).total;
}

function reactionTotal(post: LifePost) {
  return reactionOptions.reduce((count, option) => count + (post.reactionCounts[option.type] ?? 0), 0);
}

function reactionLabel(type: LifeReactionType) {
  return t(reactionOptions.find((option) => option.type === type)?.labelKey ?? 'pages.life.react');
}

function reactionIcon(type: LifeReactionType | null) {
  return reactionOptions.find((option) => option.type === type)?.icon ?? iconReactionLike;
}

function reactionButtonLabel(post: LifePost) {
  return post.myReaction ? reactionLabel(post.myReaction) : t('pages.life.reactionLike');
}

function reactionOptionLabel(post: LifePost, type: LifeReactionType) {
  return post.myReaction === type ? t('pages.life.removeReaction') : reactionLabel(type);
}

function reactionCountLabel(post: LifePost, type: LifeReactionType) {
  return t('pages.life.reactionCountLabel', {
    reaction: reactionLabel(type),
    count: post.reactionCounts[type] ?? 0
  });
}

function openReactionUsersModal(postId: number, reactionType: LifeReactionType | null = null) {
  reactionUsersModal.value = { postId, reactionType };
}

function closeReactionUsersModal() {
  reactionUsersModal.value = null;
}

function moderationLabel(status: AiModerationStatus) {
  const labels: Record<AiModerationStatus, string> = {
    unreviewed: t('pages.life.moderationUnreviewed'),
    reviewing: t('pages.life.moderationReviewing'),
    approved: t('pages.life.moderationApproved'),
    rejected: t('pages.life.moderationRejected'),
    failed: t('pages.life.moderationFailed')
  };
  return labels[status];
}

function moderationTone(status: AiModerationStatus) {
  const tones: Record<AiModerationStatus, 'info' | 'success' | 'warning' | 'danger' | 'neutral'> = {
    unreviewed: 'neutral',
    reviewing: 'info',
    approved: 'success',
    rejected: 'danger',
    failed: 'warning'
  };
  return tones[status];
}

function moderationStatusVisible(status: AiModerationStatus) {
  return status !== 'approved';
}

function canRetryModeration(post: LifePost) {
  return post.moderationStatus !== 'approved' && post.moderationStatus !== 'reviewing' && canManage(post);
}

function moderationReasonVisible(status: AiModerationStatus, reason: string | null) {
  return (status === 'rejected' || status === 'failed') && reason !== null && reason.trim() !== '';
}

function updateLifeCommentModeration(
  items: LifeComment[],
  commentId: number,
  status: AiModerationStatus,
  languageCode: string | null,
  reason: string | null
): boolean {
  for (const comment of items) {
    if (comment.id === commentId) {
      comment.moderationStatus = status;
      comment.moderationLanguageCode = languageCode;
      comment.moderationReason = reason;
      return true;
    }

    if (updateLifeCommentModeration(comment.replies, commentId, status, languageCode, reason)) {
      return true;
    }
  }

  return false;
}

function isModerationUpdateEvent(event: Event): event is CustomEvent<ModerationUpdateDetail> {
  return event instanceof CustomEvent && event.detail?.type === 'moderation.updated';
}

function handleModerationUpdate(event: Event) {
  if (!isModerationUpdateEvent(event)) {
    return;
  }

  const { target, moderationStatus, moderationLanguageCode, moderationReason } = event.detail;
  if (target.type === 'life-post' && target.lifePostId !== null) {
    const currentPost = posts.value.find((post) => post.id === target.lifePostId);
    if (!currentPost) {
      return;
    }

    const updatedPost = {
      ...currentPost,
      moderationStatus,
      moderationLanguageCode,
      moderationReason
    };
    if (!matchesCurrentFilters(updatedPost)) {
      posts.value = posts.value.filter((post) => post.id !== updatedPost.id);
      return;
    }
    posts.value = posts.value.map((post) => (post.id === updatedPost.id ? updatedPost : post));
    return;
  }

  if (target.type !== 'life-comment' || target.lifePostId === null || target.lifeCommentId === null) {
    return;
  }

  const currentPost = posts.value.find((post) => post.id === target.lifePostId);
  if (!currentPost) {
    return;
  }

  const page = commentPage(currentPost);
  const updated = updateLifeCommentModeration(
    page.items,
    target.lifeCommentId,
    moderationStatus,
    moderationLanguageCode,
    moderationReason
  );
  if (updated) {
    setCommentPage(currentPost.id, { ...page, items: [...page.items] });
  } else if (moderationStatus === 'approved' && areCommentsExpanded(currentPost.id)) {
    void loadComments(currentPost, true);
  }
}

async function retryPostModeration(post: LifePost) {
  moderationBusyPostId.value = post.id;
  const nextErrors = { ...moderationErrors.value };
  delete nextErrors[post.id];
  moderationErrors.value = nextErrors;

  try {
    replacePost(await api.retryLifePostModeration(post.id));
  } catch (error) {
    moderationErrors.value = {
      ...moderationErrors.value,
      [post.id]: error instanceof Error && error.message ? error.message : t('pages.life.moderationRetryFailed')
    };
  } finally {
    moderationBusyPostId.value = null;
  }
}

function replacePost(updatedPost: LifePost) {
  if (!matchesCurrentFilters(updatedPost)) {
    posts.value = posts.value.filter((post) => post.id !== updatedPost.id);
    return;
  }

  const existingComments = commentPages.value[updatedPost.id];
  if (existingComments) {
    setCommentPage(updatedPost.id, {
      ...existingComments,
      total: updatedPost.commentCount
    });
  }
  posts.value = posts.value.map((post) => (post.id === updatedPost.id ? updatedPost : post));
}

function areCommentsExpanded(postId: number) {
  return expandedComments.value[postId] === true;
}

function setCommentsExpanded(postId: number, expanded: boolean) {
  expandedComments.value = {
    ...expandedComments.value,
    [postId]: expanded
  };
}

function mergeComments(existing: LifeComment[], incoming: LifeComment[]) {
  const ids = new Set(existing.map((comment) => comment.id));
  return [...existing, ...incoming.filter((comment) => !ids.has(comment.id))];
}

function replaceCommentInTree(comments: LifeComment[], updated: LifeComment): boolean {
  for (let index = 0; index < comments.length; index += 1) {
    const comment = comments[index];
    if (!comment) {
      continue;
    }
    if (comment.id === updated.id) {
      comments[index] = { ...updated, replies: comment.replies };
      return true;
    }

    if (replaceCommentInTree(comment.replies, updated)) {
      return true;
    }
  }

  return false;
}

async function loadComments(post: LifePost, reset = false) {
  const existing = commentPage(post);
  if (existing.loading || existing.loadingMore || (!reset && existing.loaded && !existing.hasMore)) {
    return;
  }

  const cursor = reset || !existing.loaded ? null : existing.nextCursor;
  setCommentPage(post.id, {
    ...existing,
    items: reset || !existing.loaded ? [] : existing.items,
    loading: reset || !existing.loaded,
    loadingMore: !reset && existing.loaded,
    error: ''
  });

  try {
    const page = await api.lifeComments(post.id, {
      limit: lifeCommentPageSize,
      cursor,
      language: selectedFeedLanguageCode.value,
      sort: commentSort(post.id)
    });
    const nextItems = reset || !existing.loaded ? page.items : mergeComments(existing.items, page.items);
    setCommentPage(post.id, {
      items: nextItems,
      nextCursor: page.nextCursor,
      hasMore: page.hasMore,
      total: page.total,
      loading: false,
      loadingMore: false,
      loaded: true,
      error: ''
    });
    post.commentCount = page.total;
  } catch (error) {
    setCommentPage(post.id, {
      ...existing,
      loading: false,
      loadingMore: false,
      error: error instanceof Error && error.message ? error.message : t('errors.loadFailed')
    });
  }
}

function toggleComments(post: LifePost) {
  const expanded = !areCommentsExpanded(post.id);
  setCommentsExpanded(post.id, expanded);
  if (expanded) {
    void loadComments(post);
  }
}

function isCommentBusy(key: string) {
  return commentBusyKey.value === key;
}

function isReactionBusy(postId: number) {
  return reactionBusyPostId.value === postId;
}

function commentAuthorName(comment: LifeComment) {
  return comment.author?.displayName ?? t('pages.life.byUnknown');
}

function commentInitial(comment: LifeComment) {
  const name = commentAuthorName(comment);
  return name.slice(0, 1).toUpperCase();
}

function setCommentError(key: string, message: string) {
  commentErrors.value = { ...commentErrors.value, [key]: message };
}

function clearCommentError(key: string) {
  const nextErrors = { ...commentErrors.value };
  delete nextErrors[key];
  commentErrors.value = nextErrors;
}

function updateCommentPage(post: LifePost, updater: (page: LifeCommentPageState) => LifeCommentPageState) {
  setCommentPage(post.id, updater(commentPage(post)));
}

function setReactionError(postId: number, message: string) {
  reactionErrors.value = { ...reactionErrors.value, [postId]: message };
}

function clearReactionError(postId: number) {
  const nextErrors = { ...reactionErrors.value };
  delete nextErrors[postId];
  reactionErrors.value = nextErrors;
}

function canUseReactions() {
  return canReact.value && reactionBusyPostId.value === null;
}

function canLikeComment(comment: LifeComment) {
  return canLikeComments.value && !comment.deleted && comment.moderationStatus === 'approved';
}

function canRetryCommentModeration(comment: LifeComment) {
  return (
    !comment.deleted &&
    comment.moderationStatus !== 'approved' &&
    comment.moderationStatus !== 'reviewing' &&
    (currentUser.value?.id === comment.author?.id || can('life.comments.delete-any'))
  );
}

function commentLikeLabel(comment: LifeComment) {
  return comment.myLiked ? t('pages.life.unlikeComment') : t('pages.life.likeComment');
}

function closeReactionPicker() {
  reactionPickerPostId.value = null;
}

function toggleReactionPicker(postId: number) {
  if (!canUseReactions()) {
    return;
  }

  clearReactionError(postId);
  reactionPickerPostId.value = reactionPickerPostId.value === postId ? null : postId;
}

function closeReactionPickerFromDocument(event: MouseEvent) {
  if (reactionPickerPostId.value === null || !(event.target instanceof Element)) {
    return;
  }

  if (!event.target.closest('.life-reactions')) {
    closeReactionPicker();
  }
}

function closeReactionPickerFromKeyboard(event: KeyboardEvent) {
  if (event.key === 'Escape' && reactionPickerPostId.value !== null) {
    closeReactionPicker();
  }
}

function handleReactionContextMenu(event: MouseEvent, postId: number) {
  event.preventDefault();
  toggleReactionPicker(postId);
}

function handleReactionKeydown(event: KeyboardEvent, postId: number) {
  if (event.key !== 'ContextMenu' && !(event.shiftKey && event.key === 'F10')) {
    return;
  }

  event.preventDefault();
  toggleReactionPicker(postId);
}

async function toggleDefaultReaction(post: LifePost) {
  await toggleReaction(post, 'like');
}

async function toggleReaction(post: LifePost, reactionType: LifeReactionType) {
  if (!canUseReactions() || post.moderationStatus !== 'approved') {
    return;
  }

  reactionBusyPostId.value = post.id;
  clearReactionError(post.id);

  try {
    const updatedPost =
      post.myReaction === reactionType
        ? await api.deleteLifeReaction(post.id)
        : await api.setLifeReaction(post.id, reactionType);
    replacePost(updatedPost);
    reactionPickerPostId.value = null;
  } catch (error) {
    setReactionError(post.id, error instanceof Error && error.message ? error.message : t('pages.life.reactionFailed'));
  } finally {
    reactionBusyPostId.value = null;
  }
}

function startEdit(post: LifePost) {
  editingPostId.value = post.id;
  body.value = post.body;
  selectedGameVersionId.value = post.gameVersion ? String(post.gameVersion.id) : '';
  formError.value = '';
  postModalOpen.value = true;
  void nextTick(() => bodyInput.value?.focus());
}

async function deletePost(post: LifePost) {
  loadError.value = '';

  try {
    await api.deleteLifePost(post.id);
    posts.value = posts.value.filter((item) => item.id !== post.id);
    if (editingPostId.value === post.id) {
      resetForm();
      postModalOpen.value = false;
    }
  } catch (error) {
    loadError.value = error instanceof Error && error.message ? error.message : t('pages.life.deleteFailed');
  }
}

function requestDeletePost(post: LifePost) {
  pendingDelete.value = { type: 'post', post };
}

function startReply(comment: LifeComment) {
  replyTargetId.value = comment.id;
  clearCommentError(replyKey(comment.id));
}

function cancelReply(commentId: number) {
  replyTargetId.value = null;
  replyBodies.value[commentId] = '';
  clearCommentError(replyKey(commentId));
}

async function submitComment(post: LifePost) {
  const key = commentKey(post.id);
  const nextBody = (commentBodies.value[post.id] ?? '').trim();
  if (!nextBody) {
    setCommentError(key, t('pages.life.commentRequired'));
    return;
  }

  commentBusyKey.value = key;
  clearCommentError(key);

  try {
    const comment = await api.createLifeComment(post.id, {
      body: nextBody,
      languageCode: selectedFeedLanguageCode.value ?? post.moderationLanguageCode
    });
    const nextTotal = commentCount(post) + 1;
    post.commentCount = nextTotal;
    updateCommentPage(post, (page) => ({
      ...page,
      items: mergeComments(page.items, [comment]),
      total: nextTotal,
      loaded: page.loaded || areCommentsExpanded(post.id)
    }));
    commentBodies.value[post.id] = '';
    setCommentsExpanded(post.id, true);
    if (commentSort(post.id) !== 'oldest') {
      void loadComments(post, true);
    }
  } catch (error) {
    setCommentError(key, error instanceof Error && error.message ? error.message : t('pages.life.commentFailed'));
  } finally {
    commentBusyKey.value = '';
  }
}

async function submitReply(post: LifePost, comment: LifeComment) {
  const key = replyKey(comment.id);
  const nextBody = (replyBodies.value[comment.id] ?? '').trim();
  if (!nextBody) {
    setCommentError(key, t('pages.life.commentRequired'));
    return;
  }

  commentBusyKey.value = key;
  clearCommentError(key);

  try {
    const reply = await api.createLifeCommentReply(post.id, comment.id, {
      body: nextBody,
      languageCode: selectedFeedLanguageCode.value ?? comment.moderationLanguageCode ?? post.moderationLanguageCode
    });
    const nextTotal = commentCount(post) + 1;
    post.commentCount = nextTotal;
    comment.replies.push(reply);
    comment.replyCount += 1;
    updateCommentPage(post, (page) => ({
      ...page,
      total: nextTotal
    }));
    setCommentsExpanded(post.id, true);
    cancelReply(comment.id);
    if (commentSort(post.id) === 'most-replied') {
      void loadComments(post, true);
    }
  } catch (error) {
    setCommentError(key, error instanceof Error && error.message ? error.message : t('pages.life.replyFailed'));
  } finally {
    commentBusyKey.value = '';
  }
}

function countCommentTree(comment: LifeComment): number {
  return 1 + comment.replies.reduce((total, reply) => total + countCommentTree(reply), 0);
}

function removeCommentFromTree(comments: LifeComment[], id: number): number {
  for (let index = 0; index < comments.length; index += 1) {
    const comment = comments[index];
    if (!comment) {
      continue;
    }
    if (comment.id === id) {
      const removedCount = countCommentTree(comment);
      comments.splice(index, 1);
      return removedCount;
    }

    const removedCount = removeCommentFromTree(comment.replies, id);
    if (removedCount > 0) {
      return removedCount;
    }
  }

  return 0;
}

function markOwnCommentDeleted(comments: LifeComment[], id: number): boolean {
  for (const comment of comments) {
    if (comment.id === id) {
      comment.deleted = true;
      return true;
    }

    if (markOwnCommentDeleted(comment.replies, id)) {
      return true;
    }
  }

  return false;
}

async function deleteComment(post: LifePost, comment: LifeComment) {
  const key = replyKey(comment.id);
  clearCommentError(key);

  try {
    await api.deleteLifeComment(comment.id);
    if (currentUser.value?.id === comment.author?.id) {
      markOwnCommentDeleted(commentsForPost(post), comment.id);
      updateCommentPage(post, (page) => ({
        ...page,
        items: [...page.items]
      }));
    } else {
      const removedCount = removeCommentFromTree(commentsForPost(post), comment.id);
      if (removedCount > 0) {
        const nextTotal = Math.max(0, commentCount(post) - removedCount);
        post.commentCount = nextTotal;
        updateCommentPage(post, (page) => ({
          ...page,
          items: [...page.items],
          total: nextTotal
        }));
      }
    }
    if (replyTargetId.value === comment.id) {
      cancelReply(comment.id);
    }
  } catch (error) {
    setCommentError(key, error instanceof Error && error.message ? error.message : t('pages.life.deleteCommentFailed'));
  }
}

function requestDeleteComment(post: LifePost, comment: LifeComment) {
  pendingDelete.value = { type: 'comment', post, comment };
}

function closeDeleteConfirm() {
  if (deleteConfirmBusy.value) {
    return;
  }

  pendingDelete.value = null;
}

async function confirmDelete() {
  const target = pendingDelete.value;
  if (!target) {
    return;
  }

  deleteConfirmBusy.value = true;
  try {
    if (target.type === 'post') {
      await deletePost(target.post);
    } else {
      await deleteComment(target.post, target.comment);
    }
    pendingDelete.value = null;
  } finally {
    deleteConfirmBusy.value = false;
  }
}

async function restoreComment(post: LifePost, comment: LifeComment) {
  const key = replyKey(comment.id);
  commentBusyKey.value = key;
  clearCommentError(key);

  try {
    const restored = await api.restoreLifeComment(comment.id);
    replaceCommentInTree(commentsForPost(post), restored);
    updateCommentPage(post, (page) => ({
      ...page,
      items: [...page.items]
    }));
  } catch (error) {
    setCommentError(key, error instanceof Error && error.message ? error.message : t('pages.life.restoreCommentFailed'));
  } finally {
    commentBusyKey.value = '';
  }
}

async function retryCommentModeration(post: LifePost, comment: LifeComment) {
  const key = replyKey(comment.id);
  commentBusyKey.value = key;
  clearCommentError(key);

  try {
    const updated = await api.retryLifeCommentModeration(comment.id);
    replaceCommentInTree(commentsForPost(post), updated);
    updateCommentPage(post, (page) => ({
      ...page,
      items: [...page.items]
    }));
  } catch (error) {
    setCommentError(key, error instanceof Error && error.message ? error.message : t('pages.life.moderationRetryFailed'));
  } finally {
    commentBusyKey.value = '';
  }
}

async function toggleCommentLike(post: LifePost, comment: LifeComment) {
  if (!canLikeComment(comment)) {
    return;
  }

  const key = likeKey(comment.id);
  commentBusyKey.value = key;
  clearCommentError(key);

  try {
    const updated = comment.myLiked ? await api.deleteLifeCommentLike(comment.id) : await api.setLifeCommentLike(comment.id);
    replaceCommentInTree(commentsForPost(post), updated);
    updateCommentPage(post, (page) => ({
      ...page,
      items: [...page.items]
    }));
    if (commentSort(post.id) === 'most-liked') {
      void loadComments(post, true);
    }
  } catch (error) {
    setCommentError(key, error instanceof Error && error.message ? error.message : t('pages.life.commentLikeFailed'));
  } finally {
    commentBusyKey.value = '';
  }
}

function formatPostTime(value: string) {
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) {
    return '';
  }

  return new Intl.DateTimeFormat(locale.value, {
    dateStyle: 'medium',
    timeStyle: 'short'
  }).format(date);
}

function authorInitial(post: LifePost) {
  const name = post.author?.displayName.trim() || t('pages.life.byUnknown');
  return name.slice(0, 1).toUpperCase();
}

function disconnectFeedObserver() {
  feedObserver?.disconnect();
  feedObserver = null;
}

function observeLoadMore() {
  disconnectFeedObserver();

  if (loading.value || loadingMore.value || loadMorePaused.value || !hasMorePosts.value || !loadMoreSentinel.value) {
    return;
  }

  if (typeof IntersectionObserver === 'undefined') {
    void loadMorePosts();
    return;
  }

  feedObserver = new IntersectionObserver(
    (entries) => {
      if (entries.some((entry) => entry.isIntersecting)) {
        void loadMorePosts();
      }
    },
    { rootMargin: '360px 0px' }
  );
  feedObserver.observe(loadMoreSentinel.value);
}

watch([loadMoreSentinel, hasMorePosts, loading, loadingMore, loadMorePaused], observeLoadMore, { flush: 'post' });
watch(activeLanguageCode, () => {
  expandedComments.value = {};
  commentPages.value = {};
  void loadPosts();
});
watch(activeGameVersionId, () => {
  void loadPosts();
});
watch(activeSort, () => {
  void loadPosts();
});
watch(activeFeedScope, () => {
  void loadPosts();
});
watch(locale, () => {
  void loadLanguages();
  void loadLifeOptions();
  void loadPosts();
});

onMounted(() => {
  document.addEventListener('click', closeReactionPickerFromDocument);
  document.addEventListener('keydown', closeReactionPickerFromKeyboard);
  window.addEventListener(moderationUpdateEvent, handleModerationUpdate);
  void (async () => {
    await loadCurrentUser();
    if (!initialLanguagesLoaded.value) {
      await loadLanguages();
      initialLanguagesLoaded.value = true;
    }
    if (!initialOptionsLoaded.value) {
      await loadLifeOptions();
      initialOptionsLoaded.value = true;
    }
    if (!initialPostsLoaded.value || currentUser.value) {
      await loadPosts();
      initialPostsLoaded.value = true;
    }
  })();
  removeAuthListener = onAuthChange(() => {
    void (async () => {
      await loadCurrentUser();
      await loadPosts();
    })();
  });
});

onUnmounted(() => {
  document.removeEventListener('click', closeReactionPickerFromDocument);
  document.removeEventListener('keydown', closeReactionPickerFromKeyboard);
  window.removeEventListener(moderationUpdateEvent, handleModerationUpdate);
  disconnectFeedObserver();
  removeAuthListener?.();
});
</script>

<template>
  <section class="page-stack life-page">
    <PageHeader :title="t('pages.life.title')" :subtitle="t('pages.life.subtitle')">
      <template #kicker>{{ t('pages.life.kicker') }}</template>
    </PageHeader>

    <FilterPanel class="life-toolbar">
      <form class="life-toolbar__search" role="search" @submit.prevent="submitSearch">
        <div class="field life-toolbar__field">
          <label for="life-search">{{ t('pages.life.search') }}</label>
          <div class="life-search-control">
            <input id="life-search" v-model="searchDraft" type="search" :placeholder="t('pages.life.searchPlaceholder')" />
            <button
              v-if="searchDraft || submittedSearch"
              class="life-search-control__clear"
              type="button"
              :aria-label="t('pages.life.clearSearch')"
              @click="clearSearch"
            >
              <Icon :icon="iconCancel" class="ui-icon" aria-hidden="true" />
            </button>
          </div>
        </div>
        <button class="ui-button ui-button--ghost" type="submit">
          <Icon :icon="iconSearch" class="ui-icon" aria-hidden="true" />
          {{ t('common.search') }}
        </button>
      </form>

      <div class="life-toolbar__filters">
        <div class="field life-toolbar__select">
          <label for="life-version-filter">{{ t('pages.life.versionFilter') }}</label>
          <select id="life-version-filter" v-model="activeGameVersionId">
            <option v-for="option in gameVersionFilterOptions" :key="option.value" :value="option.value">
              {{ option.label }}
            </option>
          </select>
        </div>
        <div class="field life-toolbar__select">
          <label for="life-sort">{{ t('pages.life.sort') }}</label>
          <select id="life-sort" v-model="activeSort">
            <option v-for="option in sortOptions" :key="option.value" :value="option.value">
              {{ option.label }}
            </option>
          </select>
        </div>
      </div>

      <div class="life-toolbar__actions">
        <button class="ui-button ui-button--primary" :disabled="!authReady" type="button" @click="openCreatePostModal">
          <Icon :icon="iconAdd" class="ui-icon" aria-hidden="true" />
          {{ t('pages.life.newPost') }}
        </button>
      </div>
    </FilterPanel>

    <StatusMessage v-if="loadError" variant="danger" :duration="0">{{ loadError }}</StatusMessage>

    <Modal
      :open="postModalOpen"
      :title="postModalTitle"
      :subtitle="t('pages.life.composerPrompt')"
      :close-label="t('common.close')"
      size="wide"
      @close="closePostModal"
    >
      <div v-if="!authReady" class="life-composer__auth-skeleton" aria-hidden="true">
        <Skeleton variant="box" height="112px" />
        <Skeleton width="42%" />
      </div>

      <form v-else-if="canPost" class="life-form" @submit.prevent="submitPost">
        <div class="field">
          <label for="life-post-body">{{ t('pages.life.bodyLabel') }}</label>
          <textarea
            id="life-post-body"
            ref="bodyInput"
            v-model="body"
            :maxlength="bodyMaxLength"
            :placeholder="t('pages.life.bodyPlaceholder')"
            required
          ></textarea>
          <span class="life-form__counter">{{ t('pages.life.charactersLeft', { count: charactersLeft }) }}</span>
        </div>

        <div class="field">
          <label for="life-post-version">{{ t('pages.life.gameVersion') }}</label>
          <TagsSelect
            id="life-post-version"
            v-model="selectedGameVersionId"
            :options="gameVersions"
            :multiple="false"
            :placeholder="t('pages.life.versionPlaceholder')"
            :search-placeholder="t('pages.life.searchVersions')"
            dropdown-strategy="fixed"
          />
        </div>

        <p v-if="formError" class="life-form__error" role="alert">{{ formError }}</p>

        <div class="life-form__actions">
          <button class="ui-button ui-button--primary" :disabled="busy || !body.trim()" type="submit">
            <Icon :icon="isEditing ? iconSave : iconLife" class="ui-icon" aria-hidden="true" />
            {{ submitLabel }}
          </button>
          <button class="ui-button ui-button--ghost" :disabled="busy" type="button" @click="closePostModal">
            <Icon :icon="iconCancel" class="ui-icon" aria-hidden="true" />
            {{ t('common.cancel') }}
          </button>
        </div>
      </form>

      <div v-else class="life-auth-note">
        <p>{{ currentUser ? t('pages.life.verifyPrompt') : t('pages.life.loginPrompt') }}</p>
        <RouterLink v-if="!currentUser" class="ui-button ui-button--primary" :to="{ path: '/login', query: { redirect: '/life' } }">
          {{ t('nav.login') }}
        </RouterLink>
      </div>
    </Modal>

    <LifeReactionUsersModal
      v-if="reactionUsersModal"
      :post-id="reactionUsersModal.postId"
      :initial-reaction-type="reactionUsersModal.reactionType"
      @close="closeReactionUsersModal"
    />

    <Tabs
      v-if="currentUser"
      id="life-feed-scope"
      v-model="activeFeedScope"
      :tabs="feedScopeOptions"
      :label="t('pages.life.feedScope')"
    />
    <Tabs id="life-language-filter" v-model="activeLanguageCode" :tabs="languageFilterOptions" :label="t('pages.life.languages')" />

    <section class="life-feed" :aria-busy="loading || loadingMore" :aria-label="t('pages.life.kicker')">
        <div v-if="loading" class="life-feed__list" :aria-label="t('pages.life.loading')">
          <article v-for="index in skeletonPostCount" :key="index" class="life-post life-post--skeleton">
            <div class="life-post__header">
              <Skeleton variant="box" width="46px" height="46px" />
              <div class="life-post__byline">
                <Skeleton width="138px" />
                <Skeleton width="96px" />
              </div>
            </div>
            <Skeleton width="94%" />
            <Skeleton width="76%" />
            <Skeleton width="52%" />
          </article>
        </div>

        <div v-else-if="posts.length" class="life-feed__list">
          <article v-for="post in posts" :key="post.id" class="life-post">
            <header class="life-post__header">
              <div class="life-post__avatar" aria-hidden="true">{{ authorInitial(post) }}</div>
              <div class="life-post__byline">
                <RouterLink v-if="post.author" class="user-profile-link" :to="`/profile/${post.author.id}`">
                  {{ post.author.displayName }}
                </RouterLink>
                <strong v-else>{{ t('pages.life.byUnknown') }}</strong>
                <span>
                  <time :datetime="post.createdAt">{{ formatPostTime(post.createdAt) }}</time>
                  <template v-if="post.updatedAt !== post.createdAt"> - {{ t('pages.life.edited') }}</template>
                </span>
              </div>

              <div class="life-post__actions">
                <RouterLink class="life-icon-button" :to="`/life/${post.id}`" :aria-label="t('pages.life.viewPost')">
                  <Icon :icon="iconExternal" class="ui-icon" aria-hidden="true" />
                  <span class="life-action-tooltip" role="tooltip">{{ t('pages.life.viewPost') }}</span>
                </RouterLink>
                <button v-if="canManage(post)" class="life-icon-button" type="button" :aria-label="t('pages.life.editPost')" @click="startEdit(post)">
                  <Icon :icon="iconEdit" class="ui-icon" aria-hidden="true" />
                  <span class="life-action-tooltip" role="tooltip">{{ t('pages.life.editPost') }}</span>
                </button>
                <button
                  v-if="canDeletePost(post)"
                  class="life-icon-button life-icon-button--danger"
                  type="button"
                  :aria-label="t('pages.life.deletePost')"
                  @click="requestDeletePost(post)"
                >
                  <Icon :icon="iconDelete" class="ui-icon" aria-hidden="true" />
                  <span class="life-action-tooltip" role="tooltip">{{ t('pages.life.deletePost') }}</span>
                </button>
              </div>
            </header>

            <p class="life-post__body">{{ post.body }}</p>

            <div v-if="post.gameVersion" class="life-post__tags" :aria-label="t('pages.life.postMeta')">
              <span v-if="post.gameVersion" class="life-post__tag life-post__tag--version">
                <Icon :icon="iconVersion" class="ui-icon" aria-hidden="true" />
                {{ post.gameVersion.name }}
              </span>
            </div>
            <details v-if="post.gameVersion?.changeLog" class="life-version-note">
              <summary>{{ t('pages.life.changeLog') }}</summary>
              <p>{{ post.gameVersion.changeLog }}</p>
            </details>

            <div class="life-post__engagement">
              <div class="life-post__engagement-actions">
                <div class="life-reactions">
                  <div class="life-reaction-control">
                    <button
                      class="life-icon-button life-reaction-trigger"
                      :class="{ 'is-active': post.myReaction !== null }"
                      type="button"
                      :aria-controls="`life-reactions-${post.id}`"
                      :aria-expanded="reactionPickerPostId === post.id"
                      :aria-label="reactionButtonLabel(post)"
                      :disabled="!canReact || post.moderationStatus !== 'approved' || reactionBusyPostId !== null"
                      @click="toggleDefaultReaction(post)"
                      @contextmenu="handleReactionContextMenu($event, post.id)"
                      @keydown="handleReactionKeydown($event, post.id)"
                    >
                      <Icon :icon="reactionIcon(post.myReaction)" class="ui-icon" aria-hidden="true" />
                      <span class="life-action-tooltip" role="tooltip">{{ reactionButtonLabel(post) }}</span>
                    </button>

                    <button
                      class="life-icon-button life-reaction-menu-button"
                      type="button"
                      :aria-controls="`life-reactions-${post.id}`"
                      :aria-expanded="reactionPickerPostId === post.id"
                      :aria-label="t('pages.life.chooseReaction')"
                      :disabled="!canReact || post.moderationStatus !== 'approved' || reactionBusyPostId !== null"
                      @click="toggleReactionPicker(post.id)"
                      @contextmenu="handleReactionContextMenu($event, post.id)"
                      @keydown="handleReactionKeydown($event, post.id)"
                    >
                      <Icon :icon="iconChevronDown" class="ui-icon" aria-hidden="true" />
                      <span class="life-action-tooltip" role="tooltip">{{ t('pages.life.chooseReaction') }}</span>
                    </button>
                  </div>

                  <div
                    v-if="reactionPickerPostId === post.id && canReact"
                    :id="`life-reactions-${post.id}`"
                    class="life-reaction-picker"
                    role="group"
                    :aria-label="t('pages.life.reactionMenu')"
                  >
                    <button
                      v-for="option in reactionOptions"
                      :key="option.type"
                      class="life-reaction-option"
                      :class="{ 'is-active': post.myReaction === option.type }"
                      type="button"
                      :aria-pressed="post.myReaction === option.type"
                      :aria-label="reactionOptionLabel(post, option.type)"
                      :disabled="post.moderationStatus !== 'approved' || isReactionBusy(post.id)"
                      @click="toggleReaction(post, option.type)"
                    >
                      <Icon :icon="option.icon" class="ui-icon" aria-hidden="true" />
                      <span>{{ reactionLabel(option.type) }}</span>
                    </button>
                  </div>
                </div>

                <button
                  class="life-icon-button"
                  type="button"
                  :aria-controls="`life-comments-${post.id}`"
                  :aria-expanded="areCommentsExpanded(post.id)"
                  :aria-label="areCommentsExpanded(post.id) ? t('pages.life.hideComments') : t('pages.life.comment')"
                  :disabled="post.moderationStatus !== 'approved'"
                  @click="toggleComments(post)"
                >
                  <Icon :icon="iconComment" class="ui-icon" aria-hidden="true" />
                  <span class="life-action-tooltip" role="tooltip">
                    {{ areCommentsExpanded(post.id) ? t('pages.life.hideComments') : t('pages.life.comment') }}
                  </span>
                </button>

                <div class="life-post__review-actions">
                  <StatusBadge
                    v-if="moderationStatusVisible(post.moderationStatus)"
                    :label="moderationLabel(post.moderationStatus)"
                    :tone="moderationTone(post.moderationStatus)"
                    compact
                  />
                  <button
                    v-if="canRetryModeration(post)"
                    class="life-icon-button life-review-button"
                    type="button"
                    :aria-label="moderationBusyPostId === post.id ? t('pages.life.moderationRetrying') : t('pages.life.moderationRetry')"
                    :disabled="moderationBusyPostId === post.id"
                    @click="retryPostModeration(post)"
                  >
                    <Icon :icon="iconWarning" class="ui-icon" aria-hidden="true" />
                    <span class="life-action-tooltip" role="tooltip">
                      {{ moderationBusyPostId === post.id ? t('pages.life.moderationRetrying') : t('pages.life.moderationRetry') }}
                    </span>
                  </button>
                </div>
              </div>

              <div class="life-post__metrics">
                <button
                  v-if="reactionTotal(post) > 0"
                  class="life-reaction-summary life-reaction-summary--button"
                  type="button"
                  :aria-label="t('pages.life.reactionsCount', { count: reactionTotal(post) })"
                  @click="openReactionUsersModal(post.id)"
                >
                  <template v-for="option in reactionOptions" :key="option.type">
                    <span
                      v-if="post.reactionCounts[option.type] > 0"
                      class="life-reaction-summary__item"
                      :aria-label="reactionCountLabel(post, option.type)"
                    >
                      <Icon :icon="option.icon" class="ui-icon" aria-hidden="true" />
                      {{ post.reactionCounts[option.type] }}
                      <span class="life-action-tooltip" role="tooltip">{{ reactionCountLabel(post, option.type) }}</span>
                    </span>
                  </template>
                </button>

                <button
                  class="life-metric-button"
                  type="button"
                  :aria-controls="`life-comments-${post.id}`"
                  :aria-expanded="areCommentsExpanded(post.id)"
                  :aria-label="t('pages.life.commentsCount', { count: commentCount(post) })"
                  :disabled="post.moderationStatus !== 'approved'"
                  @click="toggleComments(post)"
                >
                  <Icon :icon="iconComment" class="ui-icon" aria-hidden="true" />
                  <span>{{ commentCount(post) }}</span>
                  <span class="life-action-tooltip" role="tooltip">{{ t('pages.life.commentsCount', { count: commentCount(post) }) }}</span>
                </button>
              </div>
            </div>

            <p v-if="canManage(post) && moderationReasonVisible(post.moderationStatus, post.moderationReason)" class="life-moderation-detail">
              <strong>{{ t('pages.life.moderationReason') }}</strong>
              <span>{{ post.moderationReason }}</span>
            </p>

            <p v-if="moderationErrors[post.id]" class="life-form__error" role="alert">{{ moderationErrors[post.id] }}</p>
            <p v-if="reactionErrors[post.id]" class="life-form__error" role="alert">{{ reactionErrors[post.id] }}</p>

            <section
              v-if="areCommentsExpanded(post.id)"
              :id="`life-comments-${post.id}`"
              class="life-comments"
              :aria-label="t('pages.life.comments')"
            >
              <div class="life-comments__header">
                <div>
                  <h3>{{ t('pages.life.comments') }}</h3>
                  <span>{{ commentCount(post) }}</span>
                </div>
                <label class="life-comments__sort">
                  <span>{{ t('pages.life.sort') }}</span>
                  <select :value="commentSort(post.id)" @change="handleCommentSortChange(post, $event)">
                    <option v-for="option in commentSortOptions" :key="option.value" :value="option.value">
                      {{ option.label }}
                    </option>
                  </select>
                </label>
              </div>

              <form v-if="canComment" class="life-comment-form" @submit.prevent="submitComment(post)">
                <div class="field">
                  <label :for="`life-comment-${post.id}`">{{ t('pages.life.comment') }}</label>
                  <textarea
                    :id="`life-comment-${post.id}`"
                    v-model="commentBodies[post.id]"
                    :maxlength="commentMaxLength"
                    :placeholder="t('pages.life.commentPlaceholder')"
                  ></textarea>
                </div>
                <p v-if="commentErrors[commentKey(post.id)]" class="life-form__error" role="alert">
                  {{ commentErrors[commentKey(post.id)] }}
                </p>
                <button
                  class="ui-button ui-button--ghost ui-button--small"
                  :disabled="isCommentBusy(commentKey(post.id)) || !(commentBodies[post.id] ?? '').trim()"
                  type="submit"
                >
                  <Icon :icon="iconComment" class="ui-icon" aria-hidden="true" />
                  {{ isCommentBusy(commentKey(post.id)) ? t('pages.life.postingComment') : t('pages.life.postComment') }}
                </button>
              </form>

              <div v-if="commentPage(post).loading && !commentsForPost(post).length" class="life-comment-list" :aria-label="t('pages.life.loadingComments')">
                <article v-for="index in 2" :key="`life-comments-loading-${post.id}-${index}`" class="life-comment">
                  <div class="life-comment__main">
                    <Skeleton variant="box" width="36px" height="36px" />
                    <div class="life-comment__content">
                      <Skeleton width="132px" />
                      <Skeleton width="86%" />
                    </div>
                  </div>
                </article>
              </div>

              <p v-else-if="commentPage(post).error" class="life-form__error" role="alert">{{ commentPage(post).error }}</p>

              <div v-else-if="commentsForPost(post).length" class="life-comment-list">
                <article
                  v-for="comment in commentsForPost(post)"
                  :key="comment.id"
                  class="life-comment"
                  :class="{ 'is-deleted': comment.deleted }"
                >
                  <div class="life-comment__main">
                    <div class="life-comment__avatar" aria-hidden="true">{{ commentInitial(comment) }}</div>
                    <div class="life-comment__content">
                      <div class="life-comment__meta">
                        <RouterLink v-if="comment.author" class="user-profile-link" :to="`/profile/${comment.author.id}`">
                          {{ comment.author.displayName }}
                        </RouterLink>
                        <strong v-else>{{ commentAuthorName(comment) }}</strong>
                        <time :datetime="comment.createdAt">{{ formatPostTime(comment.createdAt) }}</time>
                        <StatusBadge
                          v-if="canSeeCommentModeration(comment)"
                          :label="moderationLabel(comment.moderationStatus)"
                          :tone="moderationTone(comment.moderationStatus)"
                          compact
                        />
                      </div>
                      <p class="life-comment__body">{{ comment.body }}</p>
                      <p
                        v-if="canSeeCommentModeration(comment) && moderationReasonVisible(comment.moderationStatus, comment.moderationReason)"
                        class="life-moderation-detail life-moderation-detail--comment"
                      >
                        <strong>{{ t('pages.life.moderationReason') }}</strong>
                        <span>{{ comment.moderationReason }}</span>
                      </p>

                      <div v-if="!comment.deleted || canRestoreComment(comment)" class="life-comment__actions">
                        <button
                          v-if="!comment.deleted"
                          class="life-icon-button life-icon-button--flat"
                          type="button"
                          :aria-label="commentLikeLabel(comment)"
                          :aria-pressed="comment.myLiked"
                          :disabled="!canLikeComment(comment) || isCommentBusy(likeKey(comment.id))"
                          @click="toggleCommentLike(post, comment)"
                        >
                          <Icon :icon="iconReactionLike" class="ui-icon" aria-hidden="true" />
                          <span class="life-comment__action-count">{{ comment.likeCount }}</span>
                          <span class="life-action-tooltip" role="tooltip">{{ t('pages.life.commentLikeCount', { count: comment.likeCount }) }}</span>
                        </button>
                        <button
                          v-if="!comment.deleted && canComment"
                          class="life-icon-button life-icon-button--flat"
                          type="button"
                          :aria-label="t('pages.life.reply')"
                          @click="startReply(comment)"
                        >
                          <Icon :icon="iconReply" class="ui-icon" aria-hidden="true" />
                          <span class="life-action-tooltip" role="tooltip">{{ t('pages.life.reply') }}</span>
                        </button>
                        <button
                          v-if="canManageComment(comment)"
                          class="life-icon-button life-icon-button--flat life-icon-button--danger"
                          type="button"
                          :aria-label="t('pages.life.deleteComment')"
                          @click="requestDeleteComment(post, comment)"
                        >
                          <Icon :icon="iconDelete" class="ui-icon" aria-hidden="true" />
                          <span class="life-action-tooltip" role="tooltip">{{ t('pages.life.deleteComment') }}</span>
                        </button>
                        <button
                          v-if="canRestoreComment(comment)"
                          class="life-icon-button life-icon-button--flat"
                          type="button"
                          :aria-label="t('pages.life.restoreComment')"
                          :disabled="isCommentBusy(replyKey(comment.id))"
                          @click="restoreComment(post, comment)"
                        >
                          <Icon :icon="iconUndo" class="ui-icon" aria-hidden="true" />
                          <span class="life-action-tooltip" role="tooltip">{{ t('pages.life.restoreComment') }}</span>
                        </button>
                        <button
                          v-if="canRetryCommentModeration(comment)"
                          class="life-icon-button life-icon-button--flat"
                          type="button"
                          :aria-label="isCommentBusy(replyKey(comment.id)) ? t('pages.life.moderationRetrying') : t('pages.life.moderationRetry')"
                          :disabled="isCommentBusy(replyKey(comment.id))"
                          @click="retryCommentModeration(post, comment)"
                        >
                          <Icon :icon="iconWarning" class="ui-icon" aria-hidden="true" />
                          <span class="life-action-tooltip" role="tooltip">
                            {{ isCommentBusy(replyKey(comment.id)) ? t('pages.life.moderationRetrying') : t('pages.life.moderationRetry') }}
                          </span>
                        </button>
                      </div>

                      <p v-if="commentErrors[likeKey(comment.id)]" class="life-form__error" role="alert">
                        {{ commentErrors[likeKey(comment.id)] }}
                      </p>
                      <p v-if="commentErrors[replyKey(comment.id)]" class="life-form__error" role="alert">
                        {{ commentErrors[replyKey(comment.id)] }}
                      </p>

                      <form
                        v-if="canComment && replyTargetId === comment.id"
                        class="life-comment-form life-comment-form--reply"
                        @submit.prevent="submitReply(post, comment)"
                      >
                        <div class="field">
                          <label :for="`life-reply-${comment.id}`">{{ t('pages.life.reply') }}</label>
                          <textarea
                            :id="`life-reply-${comment.id}`"
                            v-model="replyBodies[comment.id]"
                            :maxlength="commentMaxLength"
                            :placeholder="t('pages.life.commentReplyPlaceholder')"
                          ></textarea>
                        </div>
                        <div class="life-form__actions">
                          <button
                            class="ui-button ui-button--ghost ui-button--small"
                            :disabled="isCommentBusy(replyKey(comment.id)) || !(replyBodies[comment.id] ?? '').trim()"
                            type="submit"
                          >
                            <Icon :icon="iconReply" class="ui-icon" aria-hidden="true" />
                            {{ isCommentBusy(replyKey(comment.id)) ? t('pages.life.postingReply') : t('pages.life.postReply') }}
                          </button>
                          <button class="ui-button ui-button--ghost ui-button--small" type="button" @click="cancelReply(comment.id)">
                            <Icon :icon="iconCancel" class="ui-icon" aria-hidden="true" />
                            {{ t('pages.life.cancelReply') }}
                          </button>
                        </div>
                      </form>

                      <div v-if="comment.replies.length" class="life-comment-replies">
                        <article
                          v-for="reply in comment.replies"
                          :key="reply.id"
                          class="life-comment life-comment--reply"
                          :class="{ 'is-deleted': reply.deleted }"
                        >
                          <div class="life-comment__avatar" aria-hidden="true">{{ commentInitial(reply) }}</div>
                          <div class="life-comment__content">
                            <div class="life-comment__meta">
                              <RouterLink v-if="reply.author" class="user-profile-link" :to="`/profile/${reply.author.id}`">
                                {{ reply.author.displayName }}
                              </RouterLink>
                              <strong v-else>{{ commentAuthorName(reply) }}</strong>
                              <time :datetime="reply.createdAt">{{ formatPostTime(reply.createdAt) }}</time>
                              <StatusBadge
                                v-if="canSeeCommentModeration(reply)"
                                :label="moderationLabel(reply.moderationStatus)"
                                :tone="moderationTone(reply.moderationStatus)"
                                compact
                              />
                            </div>
                            <p class="life-comment__body">{{ reply.body }}</p>
                            <p
                              v-if="canSeeCommentModeration(reply) && moderationReasonVisible(reply.moderationStatus, reply.moderationReason)"
                              class="life-moderation-detail life-moderation-detail--comment"
                            >
                              <strong>{{ t('pages.life.moderationReason') }}</strong>
                              <span>{{ reply.moderationReason }}</span>
                            </p>
                            <div v-if="!reply.deleted || canRestoreComment(reply)" class="life-comment__actions">
                              <button
                                v-if="!reply.deleted"
                                class="life-icon-button life-icon-button--flat"
                                type="button"
                                :aria-label="commentLikeLabel(reply)"
                                :aria-pressed="reply.myLiked"
                                :disabled="!canLikeComment(reply) || isCommentBusy(likeKey(reply.id))"
                                @click="toggleCommentLike(post, reply)"
                              >
                                <Icon :icon="iconReactionLike" class="ui-icon" aria-hidden="true" />
                                <span class="life-comment__action-count">{{ reply.likeCount }}</span>
                                <span class="life-action-tooltip" role="tooltip">{{ t('pages.life.commentLikeCount', { count: reply.likeCount }) }}</span>
                              </button>
                              <button
                                v-if="canManageComment(reply)"
                                class="life-icon-button life-icon-button--flat life-icon-button--danger"
                                type="button"
                                :aria-label="t('pages.life.deleteComment')"
                                @click="requestDeleteComment(post, reply)"
                              >
                                <Icon :icon="iconDelete" class="ui-icon" aria-hidden="true" />
                                <span class="life-action-tooltip" role="tooltip">{{ t('pages.life.deleteComment') }}</span>
                              </button>
                              <button
                                v-if="canRestoreComment(reply)"
                                class="life-icon-button life-icon-button--flat"
                                type="button"
                                :aria-label="t('pages.life.restoreComment')"
                                :disabled="isCommentBusy(replyKey(reply.id))"
                                @click="restoreComment(post, reply)"
                              >
                                <Icon :icon="iconUndo" class="ui-icon" aria-hidden="true" />
                                <span class="life-action-tooltip" role="tooltip">{{ t('pages.life.restoreComment') }}</span>
                              </button>
                              <button
                                v-if="canRetryCommentModeration(reply)"
                                class="life-icon-button life-icon-button--flat"
                                type="button"
                                :aria-label="isCommentBusy(replyKey(reply.id)) ? t('pages.life.moderationRetrying') : t('pages.life.moderationRetry')"
                                :disabled="isCommentBusy(replyKey(reply.id))"
                                @click="retryCommentModeration(post, reply)"
                              >
                                <Icon :icon="iconWarning" class="ui-icon" aria-hidden="true" />
                                <span class="life-action-tooltip" role="tooltip">
                                  {{ isCommentBusy(replyKey(reply.id)) ? t('pages.life.moderationRetrying') : t('pages.life.moderationRetry') }}
                                </span>
                              </button>
                            </div>
                            <p v-if="commentErrors[likeKey(reply.id)]" class="life-form__error" role="alert">
                              {{ commentErrors[likeKey(reply.id)] }}
                            </p>
                            <p v-if="commentErrors[replyKey(reply.id)]" class="life-form__error" role="alert">
                              {{ commentErrors[replyKey(reply.id)] }}
                            </p>
                          </div>
                        </article>
                      </div>
                    </div>
                  </div>
                </article>
              </div>

              <p v-else class="life-comments__empty">{{ t('pages.life.noComments') }}</p>

              <LoadMoreSentinel
                :active="commentPage(post).hasMore && !commentPage(post).loading"
                :disabled="commentPage(post).loadingMore"
                @load="loadComments(post)"
              />
            </section>
          </article>

          <article v-for="index in loadingMore ? loadingMoreSkeletonCount : 0" :key="`life-more-${index}`" class="life-post life-post--skeleton">
            <div class="life-post__header">
              <Skeleton variant="box" width="46px" height="46px" />
              <div class="life-post__byline">
                <Skeleton width="138px" />
                <Skeleton width="96px" />
              </div>
            </div>
            <Skeleton width="94%" />
            <Skeleton width="76%" />
            <Skeleton width="52%" />
          </article>

          <div v-if="hasMorePosts" ref="loadMoreSentinel" class="life-feed__sentinel" aria-hidden="true"></div>
          <div v-if="loadMorePaused && hasMorePosts" class="life-feed__retry">
            <button class="ui-button ui-button--ghost ui-button--small" type="button" @click="retryLoadMore">
              <Icon :icon="iconWarning" class="ui-icon" aria-hidden="true" />
              {{ t('pages.life.retryFeed') }}
            </button>
          </div>
        </div>

        <div v-else class="life-empty">
          <Icon :icon="searchQuery ? iconSearch : iconLife" class="life-empty__icon" aria-hidden="true" />
          <div class="life-empty__copy">
            <h2>{{ searchQuery ? t('pages.life.searchEmpty') : t('pages.life.empty') }}</h2>
            <p>{{ searchQuery ? t('pages.life.searchEmptyHint') : t('pages.life.emptyHint') }}</p>
          </div>
          <button v-if="searchQuery" class="ui-button ui-button--ghost" type="button" @click="clearSearch">
            <Icon :icon="iconCancel" class="ui-icon" aria-hidden="true" />
            {{ t('pages.life.clearSearch') }}
          </button>
          <button v-else class="ui-button ui-button--primary" :disabled="!authReady" type="button" @click="openCreatePostModal">
            <Icon :icon="iconAdd" class="ui-icon" aria-hidden="true" />
            {{ t('pages.life.newPost') }}
          </button>
        </div>

        <ConfirmDialog
          v-if="pendingDelete"
          :title="deleteConfirmTitle"
          :message="deleteConfirmMessage"
          :confirm-label="t('common.delete')"
          :cancel-label="t('common.cancel')"
          :close-label="t('common.close')"
          :busy="deleteConfirmBusy"
          @cancel="closeDeleteConfirm"
          @confirm="confirmDelete"
        />
    </section>
  </section>
</template>
