/**
 * Vendor JS Wrapper Template
 * 
 * 這是標準的 React 封裝模板，用於包裝廠商 JavaScript 元件
 * 
 * 使用此模板的步驟：
 * 1. 複製此檔案並重命名為目標元件名稱
 * 2. 修改 @vendor-dependency 為實際的廠商 JS 路徑
 * 3. 替換 vendorFunction 為實際的廠商函數名稱
 * 4. 更新 HTML 結構以符合廠商要求
 * 5. 測試並確保 cleanup 正常運作
 */

import React, { useRef, useEffect, ReactNode } from 'react';
// @vendor-dependency 請替換為實際路徑，例如：
// import { vendorFunction } from '@vendor-web/js/components/example.js';

interface TemplateProps {
  children?: ReactNode;
  className?: string;
  // 根據廠商 JS 需求添加其他 props
}

/**
 * Template Component - React Wrapper for Vendor JS
 * 
 * @vendor-dependency @vendor-web/js/path/to/vendor.js
 * @cleanup-status ⚠️ Pending implementation
 */
export const Template: React.FC<TemplateProps> = ({ 
  children, 
  className,
  ...props 
}) => {
  const elementRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!elementRef.current) return;

    // 初始化廠商 JS
    // const cleanup = vendorFunction(elementRef.current, options);

    // Cleanup 函數：當元件卸載時清理資源
    return () => {
      // if (typeof cleanup === 'function') {
      //   cleanup();
      // } else {
      //   // @todo 如果廠商 JS 未提供 cleanup，請記錄在 VENDOR-CLEANUP-REQUEST.md
      //   console.warn('[Template] No cleanup function provided by vendor JS');
      // }
    };
  }, []);

  return (
    <div 
      ref={elementRef}
      className={className}
      {...props}
    >
      {/* 
        請替換為與廠商 HTML 完全一致的結構
        參考：web/src/index.html 中對應的 HTML
      */}
      {children}
    </div>
  );
};

/**
 * 使用範例：
 * 
 * <Template className="vendor-class">
 *   <div>Content</div>
 * </Template>
 * 
 * 重要提醒：
 * 1. HTML 結構必須與 web/src/index.html 相同
 * 2. 確保 ref 指向正確的根元素
 * 3. 如果廠商 JS 未返回 cleanup，請記錄在 VENDOR-CLEANUP-REQUEST.md
 * 4. 完成後更新 @cleanup-status 為 ✅ Implemented 或 ⚠️ Pending vendor update
 */