import { createReactBlockSpec } from "@blocknote/react";
import { RiFileTextFill } from "react-icons/ri";
import { useRouter } from "next/navigation";
import type { PropSchema } from "@blocknote/core";

type PageReferenceProps = PropSchema & {
  pageId: { default: string };
  title: { default: string };
};

const pageReferenceConfig = {
  type: "pageReference" as const,
  propSchema: {
    pageId: { default: "" },
    title: { default: "未命名页面" },
  },
  content: "none" as const,
};

export const pageReferenceBlock = createReactBlockSpec(
  pageReferenceConfig,
  () => ({
    render: ({ block }) => {
      const router = useRouter();
      const { pageId, title } = block.props;

      return (
        <div
          role="button"
          tabIndex={0}
          onClick={() => {
            if (pageId) {
              router.push(`/documents/${pageId}`);
            }
          }}
          onKeyDown={(event) => {
            if ((event.key === "Enter" || event.key === " ") && pageId) {
              event.preventDefault();
              router.push(`/documents/${pageId}`);
            }
          }}
          className="group mt-2 flex items-center gap-3 rounded-[4px] px-4 py-3 text-[#2563eb] hover:bg-[#f5f5f5]"
          style={{ fontFamily: "Inter, system-ui, sans-serif" }}
        >
          <RiFileTextFill className="text-xl" aria-hidden />
          <span className="text-base font-medium leading-none">
            {title || "未命名页面"}
          </span>
          <span className="ml-auto text-sm opacity-0 transition-opacity duration-150 group-hover:opacity-100">
            点击进入 →
          </span>
        </div>
      );
    },
  }),
);

export const pageReferencePropSchema = pageReferenceConfig.propSchema;