src/components/tasks/TaskCommentSection.tsx

import React, { useState, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { MessageSquare, Send, Trash, Loader2, ArrowDownUp, Clock, Calendar, Search, X } from "lucide-react";
import { commentsApi, Comment } from "@/services/commentsApi";
import { useAuth } from "@/lib/auth-context";
import { toast } from "sonner";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { Employee, employeeApi } from "@/services/employeeApi";
import { formatDistanceToNow, format, parseISO } from "date-fns";
import { SlateRichTextEditor } from "@/components/custom/SlateRichTextEditor";

interface TaskCommentSectionProps {
  taskId: number;
  entityType?: "Task" | "Issue" | "Project";
}

const TaskCommentSection: React.FC<TaskCommentSectionProps> = ({ 
  taskId, 
  entityType = "Task" 
}) => {
  const [newComment, setNewComment] = useState("");
  const [sortOrder, setSortOrder] = useState<"desc" | "asc">("desc"); // Newest first by default
  const [searchQuery, setSearchQuery] = useState("");
  const { userData } = useAuth();
  const queryClient = useQueryClient();

  // Fetch employees for avatar display
  const { data: employees = [] } = useQuery({
    queryKey: ["employees"],
    queryFn: () => employeeApi.getAll(),
  });

  // Fetch comments for this entity
  const {
    data: comments = [],
    isLoading,
    isError,
  } = useQuery({
    queryKey: ["comments", entityType, taskId],
    queryFn: () => commentsApi.getByEntity(entityType, taskId),
  });

  // Add comment mutation
  const addCommentMutation = useMutation({
    mutationFn: (commentText: string) => 
      commentsApi.create({
        entityId: taskId,
        entityType: entityType,
        commentText,
        userId: userData?.userId || 0,
        createdBy: null,
        createdAt: new Date().toISOString(),
        updatedBy: null,
        updatedAt: null
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["comments", entityType, taskId] });
      toast.success("Comment added successfully");
      setNewComment("");
    },
    onError: (error) => {
      toast.error(`Failed to add comment: ${error}`);
    }
  });

  // Delete comment mutation
  const deleteCommentMutation = useMutation({
    mutationFn: (commentId: number) => commentsApi.delete(commentId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["comments", entityType, taskId] });
      toast.success("Comment deleted successfully");
    },
    onError: (error) => {
      toast.error(`Failed to delete comment: ${error}`);
    }
  });

  const handleSubmit = () => {
    if (!hasValidContent(newComment)) return;
    if (!userData?.userId) {
      toast.error("You must be logged in to add comments");
      return;
    }
    
    addCommentMutation.mutate(newComment);
  };

  // Helper function to check if HTML content has meaningful text
  const hasValidContent = (htmlContent: string): boolean => {
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = htmlContent;
    const textContent = tempDiv.textContent || tempDiv.innerText || '';
    return textContent.trim().length > 0;
  };

  // Handle keyboard submission with Ctrl+Enter or Cmd+Enter
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
      e.preventDefault();
      handleSubmit();
    }
  };

  const handleDeleteComment = (commentId: number) => {
    if (confirm("Are you sure you want to delete this comment?")) {
      deleteCommentMutation.mutate(commentId);
    }
  };

  // Format comment date
  const formatCommentDate = (dateString: string): string => {
    try {
      const date = parseISO(dateString);
      const now = new Date();
      const diffInHours = Math.abs(now.getTime() - date.getTime()) / 36e5;
      
      // If less than 24 hours ago, show relative time
      if (diffInHours < 24) {
        return formatDistanceToNow(date, { addSuffix: true });
      }
      
      // Otherwise show the actual date
      return format(date, 'MMM d, yyyy • h:mm a');
    } catch (error) {
      return 'Unknown date';
    }
  };

  // Utility to strip HTML tags from text
  const stripHtmlTags = (html: string): string => {
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = html;
    return tempDiv.textContent || tempDiv.innerText || '';
  };

  // Get user initials for avatar
  const getUserInitials = (userId: number): string => {
    const employee = employees.find(emp => emp.userId === userId);
    if (employee) {
      return `${employee.firstName.charAt(0)}${employee.lastName.charAt(0)}`.toUpperCase();
    }
    return "U";
  };

  // Get user name for display
  const getUserName = (userId: number): string => {
    const employee = employees.find(emp => emp.userId === userId);
    if (employee) {
      return `${employee.firstName} ${employee.lastName}`;
    }
    return `User ${userId}`;
  };

  // Filter comments based on search query
  const filteredComments = comments.filter((comment) => {
    if (!searchQuery.trim()) return true;
    
    const searchTerm = searchQuery.toLowerCase();
    
    // Extract text content from HTML for searching
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = comment.commentText;
    const commentText = (tempDiv.textContent || tempDiv.innerText || '').toLowerCase();
    
    const authorName = getUserName(comment.userId).toLowerCase();
    
    return commentText.includes(searchTerm) || authorName.includes(searchTerm);
  });

  // Sort filtered comments by date
  const sortedComments = [...filteredComments].sort((a, b) => {
    const dateA = new Date(a.createdAt).getTime();
    const dateB = new Date(b.createdAt).getTime();
    return sortOrder === "desc" ? dateB - dateA : dateA - dateB;
  });

  return (
    <Card className="border border-gray-200 shadow-sm overflow-visible">
      <div className="bg-white border-b border-gray-200 p-5 relative">
        <div className="flex flex-wrap justify-between items-center gap-3">
          <div className="flex items-center gap-2">
            <div className="bg-indigo-100 p-2 rounded-full">
              <MessageSquare className="h-4 w-4 text-indigo-600" />
            </div>
            <div>
              <CardTitle className="text-base sm:text-lg text-gray-900">
                {entityType} Discussion
              </CardTitle>
              <CardDescription className="text-sm text-gray-500 mt-0.5">
                {comments.length === 0 
                  ? "No comments yet" 
                  : searchQuery.trim() 
                    ? `${filteredComments.length} of ${comments.length} comments`
                    : comments.length === 1 
                      ? "1 comment" 
                      : `${comments.length} comments`}
              </CardDescription>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <Button 
              variant="outline" 
              size="sm" 
              className={`flex items-center gap-1 text-xs sm:text-sm h-8 ${sortOrder === "desc" ? "bg-indigo-50 text-indigo-600 border-indigo-200" : ""}`}
              onClick={() => setSortOrder(sortOrder === "desc" ? "asc" : "desc")}
            >
              <ArrowDownUp className="h-3 w-3 sm:h-3.5 sm:w-3.5 mr-1" />
              {sortOrder === "desc" ? "Newest first" : "Oldest first"}
            </Button>
            <div className="h-6 border-r border-gray-200"></div>
            <Button 
              variant="outline" 
              size="sm" 
              className="text-xs sm:text-sm h-8"
              onClick={() => setNewComment("")}
              disabled={!hasValidContent(newComment)}
            >
              Clear
            </Button>
          </div>
        </div>
      </div>
      
      {/* Search input */}
      {comments.length > 0 && (
        <div className="px-5 py-3 bg-gray-50 border-b border-gray-200">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
            <Input
              placeholder="Search comments..."
              className="pl-9 pr-9 text-sm border-gray-200 focus:border-indigo-300 bg-white"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
            {searchQuery && (
              <Button
                variant="ghost"
                size="sm"
                className="absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0 hover:bg-gray-100"
                onClick={() => setSearchQuery("")}
              >
                <X className="h-3 w-3 text-gray-400" />
              </Button>
            )}
          </div>
        </div>
      )}
      
      <CardContent className="p-0">
        {/* Comment input */}
        <div className="p-5 bg-white border-b border-gray-200">
          <div className="flex items-start gap-3">
            <Avatar className="h-8 w-8 sm:h-9 sm:w-9 mt-0.5 border-2 border-white ring-1 ring-gray-200">
              <AvatarFallback className="bg-indigo-600 text-white text-xs sm:text-sm font-medium">
                {userData?.userId ? getUserInitials(userData.userId) : "U"}
              </AvatarFallback>
            </Avatar>
            
            <div className="flex-1" onKeyDown={handleKeyDown}>
              <SlateRichTextEditor
                placeholder="Add your comment..."
                className="text-sm border-gray-200 focus:border-indigo-300 rounded-md shadow-none"
                minHeight="70px"
                initialValue={newComment}
                onChange={(htmlContent) => setNewComment(htmlContent)}
              />
              
              <div className="flex items-center justify-between mt-3">
                <p className="text-xs text-gray-500">Press Ctrl+Enter to post</p>
                <Button 
                  className="bg-indigo-600 hover:bg-indigo-700 transition-colors shadow-none text-white" 
                  size="sm"
                  onClick={handleSubmit}
                  disabled={!hasValidContent(newComment) || addCommentMutation.isPending}
                >
                  {addCommentMutation.isPending ? (
                    <div className="flex items-center gap-1.5">
                      <Loader2 className="h-3 w-3 animate-spin" />
                      <span>Posting...</span>
                    </div>
                  ) : (
                    <div className="flex items-center gap-1.5">
                      <Send className="h-3 w-3" />
                      <span>Post</span>
                    </div>
                  )}
                </Button>
              </div>
            </div>
          </div>
        </div>

        {/* Comments list */}
        <div className="p-5 bg-gray-50 max-h-[400px] overflow-y-auto relative z-0">
          {isLoading ? (
            <div className="flex items-center justify-center py-6">
              <div className="flex flex-col items-center gap-2">
                <Loader2 className="h-6 w-6 animate-spin text-indigo-600" />
                <span className="text-sm text-gray-600">Loading comments...</span>
              </div>
            </div>
          ) : isError ? (
            <div className="text-center bg-red-50 text-red-700 py-4 px-4 rounded-md border border-red-100">
              <p className="text-sm font-medium">Unable to load comments</p>
            </div>
          ) : comments.length > 0 ? (
            <div className="space-y-0.5">
              <div className="flex items-center justify-between mb-3 pb-2 border-b border-gray-200">
                <div className="flex items-center gap-2">
                  <h3 className="text-xs sm:text-sm font-medium text-gray-500">
                    {searchQuery.trim() ? "Search Results" : "Comments"}
                  </h3>
                  <span className="inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-700 font-medium text-xs px-2 py-0.5">
                    {searchQuery.trim() ? filteredComments.length : comments.length}
                  </span>
                </div>
                <div className="flex items-center gap-1.5 text-xs font-medium text-indigo-600 bg-indigo-50 px-2 py-1 rounded-full">
                  <span>{sortOrder === "desc" ? "Newest first" : "Oldest first"}</span>
                  <ArrowDownUp className="h-3 w-3" />
                </div>
              </div>
              {filteredComments.length === 0 && searchQuery.trim() ? (
                <div className="bg-white rounded-md p-6 text-center border border-gray-200">
                  <div className="mx-auto w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-3">
                    <Search className="h-6 w-6 text-gray-400" />
                  </div>
                  <h3 className="text-sm font-medium text-gray-900 mb-1">No comments found</h3>
                  <p className="text-sm text-gray-500 max-w-xs mx-auto mb-4">
                    No comments match your search for "{searchQuery}". Try adjusting your search terms.
                  </p>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setSearchQuery("")}
                    className="text-xs"
                  >
                    Clear search
                  </Button>
                </div>
              ) : (
                sortedComments.map((comment, index) => (
                  <div key={comment.commentId} className="mb-4 last:mb-0">
                    <div className="flex gap-3">
                      <Avatar className="h-8 w-8 sm:h-9 sm:w-9 mt-0.5 border-2 border-white ring-1 ring-gray-200">
                        <AvatarFallback className="bg-indigo-600 text-white text-xs sm:text-sm font-medium">
                          {getUserInitials(comment.userId)}
                        </AvatarFallback>
                      </Avatar>
                      
                      <div className="flex-1">
                        <div className="bg-white p-3 sm:p-4 rounded-md relative group shadow-sm border border-gray-200">
                          <div className="flex items-center justify-between gap-2 mb-2">
                            <span className="font-semibold text-sm text-gray-900">{getUserName(comment.userId)}</span>
                            <span className="text-xs text-gray-500">
                              {formatCommentDate(comment.createdAt)}
                            </span>
                          </div>
                          <div 
                            className="text-sm text-gray-700 leading-relaxed prose prose-sm max-w-none"
                            dangerouslySetInnerHTML={{ __html: comment.commentText }}
                          />
                          
                          {/* Delete button - only visible for the comment author */}
                          {userData?.userId === comment.userId && (
                            <Button
                              variant="ghost"
                              size="sm"
                              className="absolute top-2 right-2 h-6 w-6 p-0 opacity-0 group-hover:opacity-100 transition-opacity bg-white hover:bg-red-50 hover:text-red-600"
                              onClick={() => handleDeleteComment(comment.commentId)}
                              disabled={deleteCommentMutation.isPending}
                            >
                              <Trash className="h-3 w-3" />
                              <span className="sr-only">Delete comment</span>
                            </Button>
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                ))
              )}
            </div>
          ) : (
            <div className="bg-white rounded-md p-6 text-center border border-gray-200">
              <div className="mx-auto w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-3">
                <MessageSquare className="h-6 w-6 text-gray-400" />
              </div>
              <h3 className="text-sm font-medium text-gray-900 mb-1">No comments yet</h3>
              <p className="text-sm text-gray-500 max-w-xs mx-auto">
                Start the conversation by adding the first comment to this task.
              </p>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
};

export default TaskCommentSection;