"use client";

import { useAtom } from "jotai";
import { MessageSquare } from "lucide-react";
import { currentUserAtom } from "@/atoms/user/user-query.atoms";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { CommentComposer } from "../comment-composer/comment-composer";
import { CommentActions } from "./comment-actions";
import type { CommentItemProps } from "./types";

function getInitials(name: string | null, email: string): string {
	if (name) {
		return name
			.split(" ")
			.map((part) => part[0])
			.join("")
			.toUpperCase()
			.slice(0, 2);
	}
	return email[0].toUpperCase();
}

function formatTimestamp(dateString: string): string {
	const date = new Date(dateString);
	const now = new Date();
	const diffMs = now.getTime() - date.getTime();
	const diffMins = Math.floor(diffMs / 60000);
	const diffHours = Math.floor(diffMs / 3600000);
	const diffDays = Math.floor(diffMs / 86400000);

	const timeStr = date.toLocaleTimeString("en-US", {
		hour: "numeric",
		minute: "2-digit",
		hour12: true,
	});

	if (diffMins < 1) {
		return "Just now";
	}

	if (diffMins < 60) {
		return `${diffMins}m ago`;
	}

	if (diffHours < 24 && date.getDate() === now.getDate()) {
		return `Today at ${timeStr}`;
	}

	const yesterday = new Date(now);
	yesterday.setDate(yesterday.getDate() - 1);
	if (date.getDate() === yesterday.getDate() && diffDays < 2) {
		return `Yesterday at ${timeStr}`;
	}

	if (diffDays < 7) {
		const dayName = date.toLocaleDateString("en-US", { weekday: "long" });
		return `${dayName} at ${timeStr}`;
	}

	return (
		date.toLocaleDateString("en-US", {
			month: "short",
			day: "numeric",
			year: date.getFullYear() !== now.getFullYear() ? "numeric" : undefined,
		}) + ` at ${timeStr}`
	);
}

export function convertRenderedToDisplay(contentRendered: string): string {
	// Convert @{DisplayName} format to @DisplayName for editing
	return contentRendered.replace(/@\{([^}]+)\}/g, "@$1");
}

function renderMentions(content: string): React.ReactNode {
	// Match @{DisplayName} format from backend
	const mentionPattern = /@\{([^}]+)\}/g;
	const parts: React.ReactNode[] = [];
	let lastIndex = 0;
	let match: RegExpExecArray | null;

	while ((match = mentionPattern.exec(content)) !== null) {
		if (match.index > lastIndex) {
			parts.push(content.slice(lastIndex, match.index));
		}

		// Display as @DisplayName (without curly braces)
		parts.push(
			<span key={match.index} className="rounded bg-primary/10 px-1 font-medium text-primary">
				@{match[1]}
			</span>
		);

		lastIndex = match.index + match[0].length;
	}

	if (lastIndex < content.length) {
		parts.push(content.slice(lastIndex));
	}

	return parts.length > 0 ? parts : content;
}

export function CommentItem({
	comment,
	onEdit,
	onEditSubmit,
	onEditCancel,
	onDelete,
	onReply,
	isReply = false,
	isEditing = false,
	isSubmitting = false,
	members = [],
	membersLoading = false,
}: CommentItemProps) {
	const [{ data: currentUser }] = useAtom(currentUserAtom);

	const isCurrentUser = currentUser?.id === comment.author?.id;
	const displayName = isCurrentUser
		? "Me"
		: comment.author?.displayName || comment.author?.email.split("@")[0] || "Unknown";
	const email = comment.author?.email || "";

	const handleEditSubmit = (content: string) => {
		onEditSubmit?.(comment.id, content);
	};

	return (
		<div className={cn("group flex gap-3")} data-comment-id={comment.id}>
			<Avatar className="size-8 shrink-0">
				{comment.author?.avatarUrl && (
					<AvatarImage src={comment.author.avatarUrl} alt={displayName} />
				)}
				<AvatarFallback className="text-xs">
					{getInitials(comment.author?.displayName ?? null, email || "U")}
				</AvatarFallback>
			</Avatar>

			<div className="flex min-w-0 flex-1 flex-col">
				<div className="flex items-center gap-2">
					<span className="truncate text-sm font-medium">{displayName}</span>
					<span className="shrink-0 text-xs text-muted-foreground">
						{formatTimestamp(comment.createdAt)}
					</span>
					{comment.isEdited && (
						<span className="shrink-0 text-xs text-muted-foreground">(edited)</span>
					)}
					{!isEditing && (
						<div className="ml-auto">
							<CommentActions
								canEdit={comment.canEdit}
								canDelete={comment.canDelete}
								onEdit={() => onEdit?.(comment.id)}
								onDelete={() => onDelete?.(comment.id)}
							/>
						</div>
					)}
				</div>

				{isEditing ? (
					<div className="mt-1">
						<CommentComposer
							members={members}
							membersLoading={membersLoading}
							placeholder="Edit your comment..."
							submitLabel="Save"
							isSubmitting={isSubmitting}
							onSubmit={handleEditSubmit}
							onCancel={onEditCancel}
							initialValue={convertRenderedToDisplay(comment.contentRendered)}
							autoFocus
						/>
					</div>
				) : (
					<div className="mt-1 text-sm text-foreground whitespace-pre-wrap wrap-break-word">
						{renderMentions(comment.contentRendered)}
					</div>
				)}

				{!isReply && onReply && !isEditing && (
					<Button
						variant="ghost"
						size="sm"
						className="mt-1 h-7 w-fit px-2 text-xs text-muted-foreground hover:text-foreground"
						onClick={() => onReply(comment.id)}
					>
						<MessageSquare className="mr-1 size-3" />
						Reply
					</Button>
				)}
			</div>
		</div>
	);
}