import { customElement, noShadowDOM } from "solid-element";
import { createSignal, onCleanup } from "solid-js";
import { render } from "solid-js/web";
import { Article } from "./Article";

customElement("md-link", {}, (props, { element }) => {
  noShadowDOM();

  const [showArticle, setShowArticle] = createSignal(false);
  let articleContainer: HTMLDivElement | undefined;
  let disposeArticle: (() => void) | null = null;

  // 从 element 的 textContent 获取链接目标
  const linkSrc = element?.textContent?.trim() || "";

  // 查找包含此元素的 p 标签
  const parentP = element?.closest("p");

  const toggleArticle = () => {
    if (!parentP) return;

    if (showArticle()) {
      // 隐藏文章
      if (articleContainer) {
        if (disposeArticle) {
          disposeArticle();
          disposeArticle = null;
        }
        articleContainer.remove();
        articleContainer = undefined;
      }
      setShowArticle(false);
    } else {
      // 显示文章
      articleContainer = document.createElement("div");
      articleContainer.classList.add("md-link-article");
      articleContainer.classList.add("mt-4", "ml-4", "border-l-2", "border-gray-200", "pl-4");
      parentP.after(articleContainer);

      // 渲染 Article 组件
      disposeArticle = render(() => (
        <Article 
          src={linkSrc}
          onLoaded={() => console.log("Article loaded:", linkSrc)}
          onError={(err) => console.error("Article error:", err)}
        />
      ), articleContainer);

      setShowArticle(true);
    }
  };

  onCleanup(() => {
    if (disposeArticle) {
      disposeArticle();
      disposeArticle = null;
    }
  });

  return (
    <a
      href="#"
      onClick={(e) => {
        e.preventDefault();
        toggleArticle();
      }}
      class="text-blue-600 hover:text-blue-800 hover:underline"
    >
      {linkSrc}
    </a>
  );
});