mnote/wolai-frontend/src/components/online-table/FullScreenTableEditor.tsx

"use client";

import React, { useEffect, useRef, useState } from "react";
import { Table, X, Zap } from "lucide-react";
import type { DocumentTable } from "@/types/online-table";
import { DEFAULT_TABLE_COLUMNS, DEFAULT_TABLE_ROWS, DEFAULT_TABLE_SCHEMA, createDefaultTableSnapshot } from "@/lib/online-table";

interface FullScreenTableEditorProps {
  tableId: string;
  onClose: () => void;
}

// Luckysheet 容器的 ID
const LUCKY_SHEET_CONTAINER_ID = "luckysheet-editor-container";

// Luckysheet 资源路径 (相对于 public 目录)
const LUCKY_SHEET_RESOURCES = {
  css: [
    "/luckysheet/css/luckysheet.css",
    "/luckysheet/plugins/plugins.css",
    "/luckysheet/plugins/css/pluginsCss.css",
    "/luckysheet/assets/iconfont/iconfont.css",
  ],
  js: [
    "/luckysheet/plugins/js/plugin.js",
    "/luckysheet/luckysheet.umd.js",
  ],
};

const FullScreenTableEditor: React.FC<FullScreenTableEditorProps> = ({ tableId, onClose }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [tableData, setTableData] = useState<DocumentTable | null>(null);
  const [isTableLoading, setIsTableLoading] = useState(true);
  const [tableError, setTableError] = useState<string | null>(null);

  const fetchTable = (id: string) => {
    setIsTableLoading(true);
    setTableError(null);
    setTableData(null);
    fetch(`/api/tables/${id}`)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`Failed to load table ${id}`);
        }
        return response.json() as Promise<DocumentTable>;
      })
      .then((data) => {
        setTableData(data);
      })
      .catch((error) => {
        console.error(error);
        setTableError("无法加载表格数据，请稍后重试。");
        setTableData(null);
      })
      .finally(() => setIsTableLoading(false));
  };

  useEffect(() => {
    fetchTable(tableId);
  }, [tableId]);

  // 动态加载 Luckysheet 资源
  useEffect(() => {
    if (window.luckysheet) {
      setIsLoaded(true);
      return;
    }

    const loadResource = (tag: "link" | "script", url: string) => {
      if (document.querySelector(`${tag}[href="${url}"]`) || document.querySelector(`${tag}[src="${url}"]`)) {
        return true;
      }
      
      if (tag === "link") {
        const link = document.createElement("link");
        link.rel = "stylesheet";
        link.href = url;
        document.head.appendChild(link);
        return true;
      } else if (tag === "script") {
        return new Promise<void>((resolve) => {
          const script = document.createElement("script");
          script.src = url;
          script.onload = () => resolve();
          document.body.appendChild(script);
        });
      }
      return false;
    };

    // 加载所有 CSS
    LUCKY_SHEET_RESOURCES.css.forEach(url => loadResource("link", url));

    // 串行加载 JS，确保顺序
    const loadJsSequentially = async () => {
      for (const url of LUCKY_SHEET_RESOURCES.js) {
        await loadResource("script", url);
      }
      setIsLoaded(true);
    };

    loadJsSequentially();

  }, []);

  const getLuckysheetSheets = () => {
    if (tableData?.snapshot?.luckysheet && Array.isArray(tableData.snapshot.luckysheet) && tableData.snapshot.luckysheet.length > 0) {
      return tableData.snapshot.luckysheet;
    }
    const snapshot = createDefaultTableSnapshot(tableData?.schema ?? DEFAULT_TABLE_SCHEMA);
    return snapshot.luckysheet ?? [];
  };

  // Luckysheet 初始化和清理
  useEffect(() => {
    if (!isLoaded || !tableData || !containerRef.current || !window.luckysheet) {
      return;
    }

    if (containerRef.current.children.length > 0) {
      window.luckysheet.destroy(LUCKY_SHEET_CONTAINER_ID);
      containerRef.current.innerHTML = "";
    }

    const options = {
      container: LUCKY_SHEET_CONTAINER_ID,
      title: tableData.title ?? tableId,
      lang: "zh",
      showinfobar: false,
      showtoolbar: true,
      showsheetbar: true,
      showstatisticBar: true,
      allowEdit: true,
      row: DEFAULT_TABLE_ROWS,
      column: DEFAULT_TABLE_COLUMNS,
      data: getLuckysheetSheets(),
    };

    window.luckysheet.create(options);

    return () => {
      if (window.luckysheet) {
        window.luckysheet.destroy(LUCKY_SHEET_CONTAINER_ID);
      }
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [tableId, isLoaded, tableData]);

  const showLoadingOverlay = !isLoaded || isTableLoading;
  const loadingMessage = !isLoaded ? "正在加载 Luckysheet 资源..." : "正在加载表格数据...";

  return (
    <div className="fixed inset-0 z-50 bg-white dark:bg-gray-900 flex flex-col">
      {/* 顶部工具栏 */}
      <header className="flex justify-between items-center p-3 border-b border-gray-200 shadow-sm">
        <div className="flex items-center space-x-3">
          <Table className="h-5 w-5 text-blue-500" />
          <h1 className="text-lg font-bold">
            在线表格编辑 - {(tableData?.title ?? tableId).slice(0, 16)}
          </h1>
          <Zap className="h-4 w-4 text-yellow-500" />
          <span className="text-xs text-yellow-600 font-medium" title="协同模式">协同模式 (单用户模式)</span>
        </div>
        <button
          onClick={onClose}
          className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
          title="退出全屏"
        >
          <X className="h-5 w-5" />
        </button>
      </header>
      
      {/* Luckysheet 容器 */}
      {/* 确保容器在加载完成后可见，并使用 ref 绑定 */}
      <div 
        id={LUCKY_SHEET_CONTAINER_ID} 
        ref={containerRef} 
        className="flex-grow w-full h-full"
        style={{ display: isLoaded && !isTableLoading && !tableError ? 'block' : 'none' }}
      >
        {/* Luckysheet 将在这个容器中初始化 */}
      </div>

      {showLoadingOverlay && (
        <div className="flex justify-center items-center h-full text-gray-500 border border-dashed">
            <p>{loadingMessage}</p>
        </div>
      )}

      {tableError && !showLoadingOverlay && (
        <div className="flex flex-col justify-center items-center h-full text-red-500 border border-dashed space-y-2">
          <p>{tableError}</p>
          <button
            type="button"
            className="px-3 py-1 rounded-md border border-red-300 text-sm"
            onClick={() => fetchTable(tableId)}
          >
            重试
          </button>
        </div>
      )}
    </div>
  );
};

export default FullScreenTableEditor;