"use client";

import { useEffect, useRef } from "react";
import type { SidebarWidgetPublic, User } from "@/lib/api";
import { scopeWidgetCss } from "@/lib/widgetCode";
import { ensureWidgetApi } from "@/lib/widgetApi";

// 站长自定义工具块：HTML/CSS 随 SSR 直出（dangerouslySetInnerHTML），
// JS 在客户端挂载时注入执行、卸载时移除。站长可信内容，不做消毒/沙箱。
// CSS 经 scopeWidgetCss 限定在 `.j13-widget-{id}` 容器内，不污染页面其他区域；
// 工具内可直接用站点主题变量（var(--accent) 等）与 window.J13 接口。
export default function CustomWidgetBlock({
  widget,
  viewer,
}: {
  widget: SidebarWidgetPublic;
  viewer?: User | null;
}) {
  const hostRef = useRef<HTMLDivElement>(null);

  // 先于站长 JS 建立站点接口（声明顺序保证本 effect 先执行）
  useEffect(() => {
    ensureWidgetApi(viewer);
  }, [viewer]);

  useEffect(() => {
    const host = hostRef.current;
    if (!host || !widget.js) return;
    const script = document.createElement("script");
    script.dataset.widgetScript = String(widget.id);
    script.textContent = widget.js;
    host.appendChild(script);
    return () => {
      script.remove();
    };
  }, [widget.id, widget.js]);

  return (
    <section
      className={`j13-widget-body j13-widget-${widget.id}`}
      data-widget-id={widget.id}
      data-widget-name={widget.name}
    >
      {widget.css ? (
        <style dangerouslySetInnerHTML={{ __html: scopeWidgetCss(widget.css, widget.id) }} />
      ) : null}
      {widget.html ? (
        <div className="j13-widget-html" dangerouslySetInnerHTML={{ __html: widget.html }} />
      ) : null}
      {/* 自定义 JS 的宿主节点：脚本由客户端创建后挂到此处执行 */}
      <div ref={hostRef} />
    </section>
  );
}