import React, { useState, useRef, useCallback, memo, useMemo } from "react";
import { useParams } from "react-router-dom";
import {
  ActionIcon,
  Center,
  Divider,
  Group,
  Paper,
  Stack,
  Tabs,
  Badge,
  Text,
  ScrollArea,
  Tooltip,
} from "@mantine/core";
import CommentListItem from "@/features/comment/components/comment-list-item";
import {
  useCommentsQuery,
  useCreateCommentMutation,
} from "@/features/comment/queries/comment-query";
import CommentEditor from "@/features/comment/components/comment-editor";
import CommentActions from "@/features/comment/components/comment-actions";
import { useFocusWithin } from "@mantine/hooks";
import { IComment } from "@/features/comment/types/comment.types.ts";
import { usePageQuery } from "@/features/page/queries/page-query.ts";
import { IPagination } from "@/lib/types.ts";
import { extractPageSlugId } from "@/lib";
import { useTranslation } from "react-i18next";
import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
import { IconArrowUp, IconMessageOff, IconX } from "@tabler/icons-react";
import { useAtom } from "jotai";
import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";

interface CommentListWithTabsProps {
  onClose?: () => void;
}

function CommentListWithTabs({ onClose }: CommentListWithTabsProps) {
  const { t } = useTranslation();
  const { pageSlug } = useParams();
  const { data: page } = usePageQuery({ pageId: extractPageSlugId(pageSlug) });
  const {
    data: comments,
    isLoading: isCommentsLoading,
    isError,
  } = useCommentsQuery({ pageId: page?.id });
  const createCommentMutation = useCreateCommentMutation();
  const [isLoading, setIsLoading] = useState(false);
  const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);

  const canComment =
    (page?.permissions?.canEdit ?? false) ||
    (space?.settings?.comments?.allowViewerComments === true);

  // Separate active and resolved comments
  const { activeComments, resolvedComments } = useMemo(() => {
    if (!comments?.items) {
      return { activeComments: [], resolvedComments: [] };
    }

    const parentComments = comments.items.filter(
      (comment: IComment) => comment.parentCommentId === null,
    );

    const active = parentComments.filter(
      (comment: IComment) => !comment.resolvedAt,
    );
    const resolved = parentComments.filter(
      (comment: IComment) => comment.resolvedAt,
    );

    return { activeComments: active, resolvedComments: resolved };
  }, [comments]);

  const [isPageCommentLoading, setIsPageCommentLoading] = useState(false);

  const handleAddPageComment = useCallback(
    async (_commentId: string, content: string) => {
      try {
        setIsPageCommentLoading(true);
        const createdComment = await createCommentMutation.mutateAsync({
          pageId: page?.id,
          content: JSON.stringify(content),
        });

        setTimeout(() => {
          const selector = `div[data-comment-id="${createdComment.id}"]`;
          const commentElement = document.querySelector(selector);
          commentElement?.scrollIntoView({
            behavior: "smooth",
            block: "center",
          });
        }, 400);
      } catch (error) {
        console.error("Failed to post comment:", error);
      } finally {
        setIsPageCommentLoading(false);
      }
    },
    [createCommentMutation, page?.id],
  );

  const handleAddReply = useCallback(
    async (commentId: string, content: string) => {
      try {
        setIsLoading(true);
        const commentData = {
          pageId: page?.id,
          parentCommentId: commentId,
          content: JSON.stringify(content),
        };

        await createCommentMutation.mutateAsync(commentData);
      } catch (error) {
        console.error("Failed to post comment:", error);
      } finally {
        setIsLoading(false);
      }
    },
    [createCommentMutation, page?.id],
  );

  const renderComments = useCallback(
    (comment: IComment) => (
      <Paper
        shadow="sm"
        radius="md"
        p="xs"
        mb="xs"
        withBorder
        key={comment.id}
        data-comment-id={comment.id}
      >
        <div>
          <CommentListItem
            comment={comment}
            pageId={page?.id}
            canComment={canComment}
            userSpaceRole={space?.membership?.role}
          />
          <MemoizedChildComments
            comments={comments}
            parentId={comment.id}
            pageId={page?.id}
            canComment={canComment}
            userSpaceRole={space?.membership?.role}
          />
        </div>

        {!comment.resolvedAt && canComment && (
          <>
            <Divider my={2} />
            <CommentEditorWithActions
              commentId={comment.id}
              onSave={handleAddReply}
              isLoading={isLoading}
            />
          </>
        )}
      </Paper>
    ),
    [comments, handleAddReply, isLoading, space?.membership?.role, canComment],
  );

  if (isCommentsLoading) {
    return <></>;
  }

  if (isError) {
    return <div>{t("Error loading comments.")}</div>;
  }

  const totalComments = activeComments.length + resolvedComments.length;

  const pageCommentInput = canComment ? (
    <PageCommentInput
      onSave={handleAddPageComment}
      isLoading={isPageCommentLoading}
    />
  ) : null;

  return (
    <div
      style={{
        flex: 1,
        minHeight: 0,
        display: "flex",
        flexDirection: "column",
      }}
    >
      <Tabs
        defaultValue="open"
        variant="default"
        style={{
          flex: "1 1 auto",
          display: "flex",
          flexDirection: "column",
          overflow: "hidden",
        }}
      >
        {/* Header row: full-width centered tab list with the close button overlaid on the right. */}
        <div style={{ position: "relative" }}>
          <Tabs.List justify="center">
            <Tabs.Tab
              value="open"
              leftSection={
                <Badge size="sm" variant="light" color="blue">
                  {activeComments.length}
                </Badge>
              }
            >
              {t("Open")}
            </Tabs.Tab>
            <Tabs.Tab
              value="resolved"
              leftSection={
                <Badge size="sm" variant="light" color="green">
                  {resolvedComments.length}
                </Badge>
              }
            >
              {t("Resolved")}
            </Tabs.Tab>
          </Tabs.List>
          {onClose && (
            <Tooltip label={t("Close")} withArrow>
              <ActionIcon
                variant="subtle"
                color="gray"
                onClick={onClose}
                aria-label={t("Close")}
                style={{
                  position: "absolute",
                  right: 0,
                  top: "50%",
                  // Nudge the close button slightly up to align with the tab labels.
                  transform: "translateY(calc(-50% - 4px))",
                }}
              >
                <IconX size={18} />
              </ActionIcon>
            </Tooltip>
          )}
        </div>

        <ScrollArea
          style={{ flex: "1 1 auto" }}
          scrollbarSize={5}
          type="scroll"
        >
          <div style={{ paddingBottom: "8px" }}>
            <Tabs.Panel value="open" pt="xs">
              {activeComments.length === 0 ? (
                <Center py="xl">
                  <Stack align="center" gap="xs">
                    <IconMessageOff
                      size={32}
                      stroke={1.5}
                      color="var(--mantine-color-dimmed)"
                    />
                    <Text size="sm" c="dimmed">
                      {t("No open comments.")}
                    </Text>
                  </Stack>
                </Center>
              ) : (
                activeComments.map(renderComments)
              )}
            </Tabs.Panel>

            <Tabs.Panel value="resolved" pt="xs">
              {resolvedComments.length === 0 ? (
                <Center py="xl">
                  <Stack align="center" gap="xs">
                    <IconMessageOff
                      size={32}
                      stroke={1.5}
                      color="var(--mantine-color-dimmed)"
                    />
                    <Text size="sm" c="dimmed">
                      {t("No resolved comments.")}
                    </Text>
                  </Stack>
                </Center>
              ) : (
                resolvedComments.map(renderComments)
              )}
            </Tabs.Panel>
          </div>
        </ScrollArea>
      </Tabs>
      {pageCommentInput}
    </div>
  );
}

interface ChildCommentsProps {
  comments: IPagination<IComment>;
  parentId: string;
  pageId: string;
  canComment: boolean;
  userSpaceRole?: string;
}
const ChildComments = ({
  comments,
  parentId,
  pageId,
  canComment,
  userSpaceRole,
}: ChildCommentsProps) => {
  const getChildComments = useCallback(
    (parentId: string) =>
      comments.items.filter(
        (comment: IComment) => comment.parentCommentId === parentId,
      ),
    [comments.items],
  );

  return (
    <div>
      {getChildComments(parentId).map((childComment) => (
        <div key={childComment.id}>
          <CommentListItem
            comment={childComment}
            pageId={pageId}
            canComment={canComment}
            userSpaceRole={userSpaceRole}
          />
          <MemoizedChildComments
            comments={comments}
            parentId={childComment.id}
            pageId={pageId}
            canComment={canComment}
            userSpaceRole={userSpaceRole}
          />
        </div>
      ))}
    </div>
  );
};

const MemoizedChildComments = memo(ChildComments);

const CommentEditorWithActions = ({
  commentId,
  onSave,
  isLoading,
  placeholder = undefined,
}) => {
  const [content, setContent] = useState("");
  const { ref, focused } = useFocusWithin();
  const commentEditorRef = useRef(null);

  const handleSave = useCallback(() => {
    onSave(commentId, content);
    setContent("");
    commentEditorRef.current?.clearContent();
  }, [commentId, content, onSave]);

  return (
    <div ref={ref}>
      <CommentEditor
        ref={commentEditorRef}
        onUpdate={setContent}
        onSave={handleSave}
        editable={true}
        placeholder={placeholder}
      />
      {focused && <CommentActions onSave={handleSave} isLoading={isLoading} />}
    </div>
  );
};

const PageCommentInput = ({ onSave, isLoading }) => {
  const { t } = useTranslation();
  const [content, setContent] = useState("");
  const { ref, focused } = useFocusWithin();
  const commentEditorRef = useRef(null);
  const [currentUser] = useAtom(currentUserAtom);

  const handleSave = useCallback(() => {
    onSave(null, content);
    setContent("");
    commentEditorRef.current?.clearContent();
  }, [content, onSave]);

  return (
    <div
      ref={ref}
      style={{
        flex: "0 0 auto",
        borderTop: "1px solid var(--mantine-color-default-border)",
        paddingTop: "var(--mantine-spacing-sm)",
        paddingBottom: 10,
        position: "relative",
      }}
    >
      <Group wrap="nowrap" align="flex-start" gap="xs">
        <CustomAvatar
          size="sm"
          avatarUrl={currentUser?.user?.avatarUrl}
          name={currentUser?.user?.name}
          style={{ flexShrink: 0, marginTop: 2 }}
        />
        <div style={{ flex: 1, minWidth: 0 }}>
          <CommentEditor
            ref={commentEditorRef}
            onUpdate={setContent}
            onSave={handleSave}
            editable={true}
            placeholder={t("Add a comment...")}
            surface="muted"
          />
        </div>
      </Group>
      {focused && (
        <ActionIcon
          variant="filled"
          radius="xl"
          size="sm"
          aria-label={t("Send comment")}
          onClick={handleSave}
          onMouseDown={(e) => e.preventDefault()}
          loading={isLoading}
          style={{ position: "absolute", right: 8, bottom: 15 }}
        >
          <IconArrowUp size={16} />
        </ActionIcon>
      )}
    </div>
  );
};

export default CommentListWithTabs;
