CommentTree.jsx

import React, { useState } from "react";
import RatingComponent from "./RatingComponent.jsx";
import { model } from "../../model.js"; // Adjust the path if needed
import { addReviewForCourse } from "../../firebase"; // Adjust the path if needed

function CommentTree({ courseCode, comment, level = 0 }) {
  const [showReply, setShowReply] = useState(false);
  const [replyText, setReplyText] = useState("");

  const handleReplySubmit = async () => {
    if (replyText.trim().length === 0) return;

    const reply = {
      userName: model.user?.displayName || "Anonymous",
      text: replyText,
      timestamp: Date.now(),
      overallRating: 0,
      difficultyRating: 0,
      professorRating: 0,
      professorName: "",
      grade: "",
      recommend: null,
    };

    await addReviewForCourse(courseCode, reply, comment.id);
    window.location.reload(); // quick reload for now; optional optimization later
  };

  return (
    <div className="ml-4 mt-4 border-l pl-4 border-gray-300">
      <div className="bg-gray-50 p-3 rounded-md shadow-sm">
        <div className="flex justify-between items-center mb-1">
          <p className="font-semibold text-gray-800">{comment.userName}</p>
          <p className="text-xs text-gray-500">
            {new Date(comment.timestamp).toLocaleDateString()}
          </p>
        </div>

        <p className="text-sm text-gray-700 mb-1">{comment.text}</p>

        <button
          className="text-blue-500 text-sm hover:underline"
          onClick={() => setShowReply(!showReply)}
        >
          {showReply ? "Cancel" : "Reply"}
        </button>

        {showReply && (
          <div className="mt-2">
            <textarea
              className="w-full border border-gray-300 rounded-md p-2 text-sm"
              placeholder="Write your reply..."
              value={replyText}
              onChange={(e) => setReplyText(e.target.value)}
            />
            <button
              onClick={handleReplySubmit}
              className="mt-1 px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700"
            >
              Post Reply
            </button>
          </div>
        )}
      </div>

      {/* Recursive rendering of replies */}
      {comment.replies && comment.replies.length > 0 && (
        <div className="mt-2 space-y-2">
          {comment.replies.map((child) => (
            <CommentTree
              key={child.id}
              courseCode={courseCode}
              comment={child}
              level={level + 1}
            />
          ))}
        </div>
      )}
    </div>
  );
}

export default CommentTree;