import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { Button } from "../../components/ui/button";
import { useEditContext } from "../../editor/client/editContext";
import { MentionText } from "../../editor/reviews/MentionText";
import { get } from "../../editor/services/serviceHelper";
import { deleteComment } from "../services/taskService";
import { Clock3, MessageSquare, RefreshCw, User } from "lucide-react";
import { DeleteIcon } from "../../components/ui/delete-icon";
function normalizeUserName(value) {
    return (value || "").trim().toLowerCase();
}
export function CommentsList(props) {
    const { taskId, refreshKey = 0, currentUsername } = props;
    const editContext = useEditContext();
    const [comments, setComments] = useState([]);
    const [loading, setLoading] = useState(false);
    const [deletingCommentId, setDeletingCommentId] = useState(null);
    const refresh = async () => {
        setLoading(true);
        try {
            const result = await get(`/parhelia/tasks/comments?taskId=${encodeURIComponent(taskId)}`);
            if (result.type === "success") {
                setComments(result.data || []);
            }
            else if (result.type !== "unauthorized") {
                if (result.summary)
                    toast.error(result.summary);
            }
        }
        finally {
            setLoading(false);
        }
    };
    const handleDeleteComment = async (comment) => {
        const confirmed = await new Promise((resolve) => {
            if (!editContext) {
                resolve(window.confirm("Delete this comment? This action cannot be undone."));
                return;
            }
            editContext.confirm({
                header: "Delete comment",
                message: "Delete this comment? This action cannot be undone.",
                acceptLabel: "Delete",
                showCancel: true,
                accept: () => resolve(true),
                reject: () => resolve(false),
            });
        });
        if (!confirmed)
            return;
        setDeletingCommentId(comment.commentId);
        try {
            const result = await deleteComment({ commentId: comment.commentId });
            if (result.type !== "success") {
                toast.error(result.summary || "Failed to delete comment");
                return;
            }
            setComments((prev) => prev.filter((c) => c.commentId !== comment.commentId));
            toast.success("Comment deleted");
        }
        finally {
            setDeletingCommentId(null);
        }
    };
    const normalizedCurrentUser = normalizeUserName(currentUsername);
    useEffect(() => {
        void refresh();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [taskId, refreshKey]);
    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(MessageSquare, { className: "text-neutral-grey-50 h-4 w-4" }), _jsx("span", { className: "text-neutral-grey-50 text-xs font-bold tracking-wider", children: "Comments" }), _jsx("span", { className: "rounded-badge badge-pad-sm text-2xs border-border-default text-neutral-grey-50 border bg-white font-semibold", children: comments.length })] }), _jsxs(Button, { size: "sm", variant: "ghost", onClick: refresh, disabled: loading, className: "text-neutral-grey-50 hover:text-neutral-grey-50 h-7 px-2 text-xs", children: [_jsx(RefreshCw, { className: `mr-1.5 h-3 w-3 ${loading ? "animate-spin" : ""}` }), "Refresh"] })] }), _jsx("div", { className: "space-y-4", children: comments.length === 0 ? (_jsxs("div", { className: "border-border-default flex flex-col items-center justify-center rounded-xl border border-dashed bg-white/70 py-8 text-center", children: [_jsx("div", { className: "bg-neutral-grey-5 mb-2 rounded-full p-3 shadow-inner", children: _jsx(MessageSquare, { className: "text-neutral-grey-50 h-5 w-5" }) }), _jsx("p", { className: "text-neutral-grey-50 text-xs italic", children: loading ? "Loading comments..." : "No comments yet." })] })) : (_jsx("div", { className: "relative space-y-3 before:absolute before:top-4 before:bottom-4 before:left-[17px] before:w-[2px] before:bg-gradient-to-b before:from-neutral-grey-10 before:via-neutral-grey-5 before:to-transparent before:content-['']", children: comments.map((c) => (_jsxs("article", { className: "group relative pl-11", children: [_jsx("div", { className: "border-border-default to-neutral-grey-5 absolute top-0.5 left-0 flex h-9 w-9 items-center justify-center rounded-full border bg-gradient-to-b from-white shadow-sm", children: _jsx(User, { className: "text-neutral-grey-50 h-4 w-4" }) }), _jsxs("div", { className: "border-border-default group-hover:border-border-default rounded-2xl border bg-white p-3 shadow-sm transition-all group-hover:shadow-md", children: [_jsxs("div", { className: "mb-2 flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-neutral-grey-100 truncate text-[13px] font-semibold", children: normalizedCurrentUser &&
                                                            normalizeUserName(c.author) === normalizedCurrentUser
                                                            ? "You"
                                                            : ((c.authorDisplayName || c.author) ?? "Unknown") }), _jsxs("div", { className: "text-neutral-grey-50 mt-0.5 flex items-center gap-1 text-[11px]", children: [_jsx(Clock3, { className: "h-3 w-3" }), _jsx("span", { children: new Date(c.createdAt).toLocaleString(undefined, {
                                                                    dateStyle: "medium",
                                                                    timeStyle: "short",
                                                                }) })] })] }), normalizedCurrentUser &&
                                                normalizeUserName(c.author) === normalizedCurrentUser && (_jsxs(Button, { size: "sm", variant: "ghost", onClick: () => void handleDeleteComment(c), disabled: deletingCommentId === c.commentId, className: "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-50 h-7 px-2 text-[11px]", "data-testid": `taskboard-comment-delete-${c.commentId}`, title: "Delete comment", children: [_jsx(DeleteIcon, { size: "sm", className: "mr-1" }), "Delete"] }))] }), _jsx("div", { className: "border-border-default bg-neutral-grey-5/80 rounded-xl border p-2.5", children: _jsx("div", { className: "text-neutral-grey-100 text-[13px] leading-relaxed whitespace-pre-wrap", children: _jsx(MentionText, { text: c.text }) }) })] })] }, c.commentId))) })) })] }));
}
//# sourceMappingURL=CommentsList.js.map