---
interface Props {
  apiBaseUrl: string;
  elId?: string;
  pageSize?: number;
  theme?: 'light' | 'dark';
}
const { apiBaseUrl, elId = 'comments', pageSize = 20, theme = 'light' } = Astro.props;
---

<!-- 1. الحاوية: استخدام سمات البيانات لتمرير المعلمات للسكربت -->
<div
  id={elId}
  class="cwd-comments-container"
  data-el-id={elId}
  data-api-base-url={apiBaseUrl}
  data-page-size={pageSize}
  data-theme={theme}
>
</div>
<!-- 2. استيراد المكتبة: الحفاظ على is:inline للتحميل في أي وقت -->
<script is:inline src="https://unpkg.com/cwd-widget@latest/dist/cwd.js"></script>
<!-- 3. سكربت التهيئة: استخدام الوحدة لاستيراد دوال الأدوات المساعدة -->
<script>
  import { registerPageInit } from '@/utils/page-init';
  // تحديد منطق التهيئة
  const initComments = () => {
    const containers = document.querySelectorAll('.cwd-comments-container');

    containers.forEach((container) => {
      const el = container as HTMLElement;
      // منع التهيئة المكررة
      if (el.children.length > 0 || el.dataset.cwdInitialized) return;
      const apiBaseUrl = el.dataset.apiBaseUrl;
      const theme = el.dataset.theme;
      const pageSize = Number(el.dataset.pageSize);

      // التحقق من تحميل المكتبة
      if ((window as any).CWDComments && apiBaseUrl) {
        try {
          const comments = new (window as any).CWDComments({
            el: el,
            apiBaseUrl,
            pageSize,
            theme,
          });
          comments.mount();
          // وسم كمُهيأ
          el.dataset.cwdInitialized = 'true';
        } catch (e) {
          console.error('[CWD] فشل التهيئة:', e);
        }
      } else {
        // إذا كان السكربت لا يزال يحمل، استطلاع بسرعة
        const checkTimer = setInterval(() => {
          if ((window as any).CWDComments) {
            clearInterval(checkTimer);
            // إعادة التشغيل
            initComments();
          }
        }, 100);
        // التوقف بعد 5 ثواني
        setTimeout(() => clearInterval(checkTimer), 5000);
      }
    });
    // إرجاع دالة التنظيف (اختياري)
    return () => {
      // قد لا توفر CWD طريقة destroy، فقط أفرغ الحاوية
    };
  };
  // 4. التسجيل في PageInitManager
  registerPageInit('init-cwd-comments', initComments, { immediate: true });
</script>

<CwdComments apiBaseUrl="https://cmt-api.xxx.com" />

---
import CwdComments from '../components/CwdComments.astro';
---

<CwdComments
  apiBaseUrl="https://cmt-api.xxx.com"
  elId="comments"
  theme="light"
/>