import { useState } from "react";
import { RiReplyFill, RiRobotFill } from "@remixicon/react";
import CommentForm, { type CommentFormSubmitValues } from "../comment-form";

interface CommentItemProps {
  data: API.Comment.ICommentDetailData;
  onSubmit: (values: CommentFormSubmitValues) => Promise<unknown>;
}

export default function CommentItem({ data, onSubmit }: CommentItemProps) {
  const [active, setActive] = useState(false);

  const onToggleCommentForm = () => setActive((prev) => !prev);

  const onReplySubmit = (values: CommentFormSubmitValues) => {
    return onSubmit(values).then(() => {
      setActive(false);
    });
  };

  return (
    <div className="scroll-mt-28 mb-8 last:mb-0" id={`c${data.uuid}`}>
      <div className="flex items-start gap-4 relative group">
        <img
          src={data.avatar || ""}
          alt={data.name || ""}
          className="w-12 h-12 rounded-xl bg-neutral-200 object-cover shrink-0"
        />
        <div className="flex-1 min-w-0">
          <a
            className="inline-block text-pink-400 font-medium mb-1 hover:underline"
            href={data.site || "#"}
            target="_blank"
            rel="nofollow noreferrer"
          >
            {data.name}
            {data.is_ai_bot && (
              <span className="ml-2 text-cyan-500" title="AI 机器人评论">
                <RiRobotFill className="size-4" />
              </span>
            )}
          </a>
          <p className="whitespace-pre-wrap text-neutral-600 leading-relaxed">
            {data.content}
            {data.status === "waiting" && (
              <span className="text-neutral-400">（审核中）</span>
            )}
          </p>
        </div>
        <button
          className="absolute right-0 top-0 opacity-0 group-hover:opacity-100 transition-opacity text-pink-400 hover:text-pink-600 cursor-pointer"
          onClick={onToggleCommentForm}
          title="回复"
        >
          <RiReplyFill className="size-4" />
        </button>
      </div>

      {active && (
        <div className="mt-4 ml-16">
          <CommentForm
            parent={data.uuid}
            root={data.root || data.uuid}
            onSubmit={onReplySubmit}
          />
        </div>
      )}

      {data.children && data.children.length > 0 && (
        <div className="mt-4 ml-4 md:ml-16 pl-4 border-l-2 border-cyan-200">
          {data.children.map((item) => (
            <CommentItem key={item.uuid} data={item} onSubmit={onSubmit} />
          ))}
        </div>
      )}
    </div>
  );
}