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

"use client";

import React, { useEffect, useState, useMemo, useCallback } from "react";
import { DocumentTable, TableColumn } from "@/types/online-table";
import { DEFAULT_TABLE_COLUMNS, DEFAULT_TABLE_ROWS, getDocumentTable } from "@/lib/online-table";
import { Loader2, Table, Maximize2, Plus, Minus } from "lucide-react";

interface CompactTablePreviewProps {
  tableId: string;
  onFullScreen: () => void;
}

// 模拟获取表格行数据（阶段二只关注元数据和预览结构）
// 实际应用中，这里会调用 getDocumentTable 并可能获取前N行数据
const useTableData = (tableId: string) => {
  const [table, setTable] = useState<DocumentTable | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setIsLoading(true);
    getDocumentTable(tableId)
      .then((data) => {
        setTable({ ...data, title: data.title || "未命名表格" });
      })
      .catch((err) => {
        console.error("Failed to load table:", err);
        setTable(null);
      })
      .finally(() => setIsLoading(false));
  }, [tableId]);

  return { table, isLoading };
};

// 渲染单个单元格内容的辅助函数
const renderCellContent = (column: TableColumn, value: any) => {
    if (value === undefined || value === null || value === "") {
        return "";
    }
    if (column.type === 'select') {
        const option = column.options?.find(opt => opt.value === value);
        if (option) {
            return (
                <span className="px-2 py-0.5 text-xs font-medium rounded-full" style={{ backgroundColor: option.color, color: 'white' }}>
                    {value}
                </span>
            );
        }
    }
    return String(value);
}

const CompactTablePreview: React.FC<CompactTablePreviewProps> = ({ tableId, onFullScreen }) => {
  const { table, isLoading } = useTableData(tableId);
  const [hoveredRowIndex, setHoveredRowIndex] = useState<number | null>(null);
  const [editingCell, setEditingCell] = useState<{ rowIndex: number, colId: string } | null>(null);
  const [visibleRows, setVisibleRows] = useState(5);
  const [visibleCols, setVisibleCols] = useState(5);

  const snapshotRows = table?.snapshot?.rows ?? [];
  const schemaColumns = table?.schema.columns ?? [];
  const hasData = snapshotRows.length > 0 && schemaColumns.length > 0;

  const totalRowsAvailable = hasData ? snapshotRows.length : DEFAULT_TABLE_ROWS;
  const totalColsAvailable = hasData ? schemaColumns.length : DEFAULT_TABLE_COLUMNS;

  useEffect(() => {
    const maxRows = Math.max(5, totalRowsAvailable);
    const maxCols = Math.max(5, totalColsAvailable);
    if (visibleRows > maxRows) {
      setVisibleRows(maxRows);
    } else if (visibleRows < 5) {
      setVisibleRows(5);
    }
    if (visibleCols > maxCols) {
      setVisibleCols(maxCols);
    } else if (visibleCols < 5) {
      setVisibleCols(5);
    }
  }, [totalRowsAvailable, totalColsAvailable, visibleRows, visibleCols]);

  const columns = useMemo(() => {
    if (hasData) {
      return schemaColumns.slice(0, visibleCols);
    }
    const placeholderCount = Math.max(visibleCols, 5);
    return Array.from({ length: placeholderCount }, (_, index) => ({
      id: `placeholder_col_${index}`,
      name: "",
      type: "text" as const,
      width: 100,
    }));
  }, [hasData, schemaColumns, visibleCols]);

  const rowsToDisplay = useMemo(() => {
    if (hasData) {
      return snapshotRows.slice(0, visibleRows);
    }
    const placeholderCount = Math.max(visibleRows, 5);
    return Array.from({ length: placeholderCount }, (_, index) => ({ id: `placeholder_row_${index}` }));
  }, [hasData, snapshotRows, visibleRows]);

  const headerCells = useMemo(() => {
    const cells = [
      <th key="row-actions" className="w-8" aria-label="行操作列" />,
    ];
    columns.forEach((col) => {
      cells.push(
        <th
          key={col.id}
          style={{ width: col.width ?? 100 }}
          className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap relative group"
        >
          {col.name}
        </th>,
      );
    });
    return cells;
  }, [columns]);

  const suppressEditorEvents = useCallback((event: React.MouseEvent) => {
    event.stopPropagation();
  }, []);

  if (isLoading) {
    return (
      <div className="flex justify-center items-center h-20 bg-gray-50 border border-dashed rounded-md">
        <Loader2 className="h-5 w-5 animate-spin text-gray-400" />
      </div>
    );
  }

  if (!table) {
    return (
      <div className="flex items-center justify-center h-20 bg-red-50 border border-red-300 rounded-md text-red-700">
        <Table className="h-5 w-5 mr-2" />
        表格加载失败或不存在。
      </div>
    );
  }

  // 模拟行操作：插入/删除
  // 实际应用中，这里需要调用后端或协同服务
  const handleRowOperation = (rowIndex: number, type: 'insert' | 'delete') => {
      console.log(`${type} row at index ${rowIndex} in table ${tableId}`);
  }

  return (
    <div
      className="relative w-full p-1 border border-gray-200 rounded-md transition-shadow hover:shadow-md"
      onDoubleClick={onFullScreen}
      contentEditable={false}
      onMouseDown={suppressEditorEvents}
      onMouseUp={suppressEditorEvents}
      onMouseMove={suppressEditorEvents}
    >
      {/* 表格标题 */}
      <div className="flex justify-between items-center px-2 py-1">
        <h3 className="text-sm font-semibold text-gray-700">{table.title}</h3>
        {/* 全屏按钮 (hover toolbar的一部分) */}
        <button
          onClick={onFullScreen}
          className="p-1 text-gray-400 hover:text-blue-500 transition-colors"
          title="进入全屏编辑"
        >
          <Maximize2 className="h-4 w-4" />
        </button>
      </div>

      {/* 紧凑表格视图 */}
      <div className="overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200">
          {/* 表头 */}
          <thead className="bg-gray-100">
            <tr>{headerCells}</tr>
          </thead>
          {/* 表体 */}
          <tbody className="bg-white divide-y divide-gray-200">
            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
            {rowsToDisplay.map((row: any, index: number) => {
              const rowId = row.id || index;
              return (
                <tr 
                  key={rowId} 
                  className="hover:bg-gray-50 relative group"
                  onMouseEnter={() => setHoveredRowIndex(index)}
                  onMouseLeave={() => setHoveredRowIndex(null)}
                >
                  {/* 行操作按钮 */}
                  <td className="w-8 p-0 text-center">
                      {hoveredRowIndex === index && (
                          <div className="flex items-center justify-center space-x-0.5 opacity-100 transition-opacity">
                              <button 
                                  onClick={() => handleRowOperation(index, 'insert')}
                                  className="p-0.5 text-gray-400 hover:text-green-500"
                                  title="在上方插入一行"
                              >
                                  <Plus className="h-3 w-3" />
                              </button>
                              <button 
                                  onClick={() => handleRowOperation(index, 'delete')}
                                  className="p-0.5 text-gray-400 hover:text-red-500"
                                  title="删除此行"
                              >
                                  <Minus className="h-3 w-3" />
                              </button>
                          </div>
                      )}
                  </td>
                  {columns.map((col) => {
                    const isEditing = editingCell?.rowIndex === index && editingCell?.colId === col.id;
                    const cellValue = row[col.id];

                    const handleCellClick = () => {
                        // 仅允许轻编辑文本和数字类型
                        if (col.type === 'text' || col.type === 'number') {
                            setEditingCell({ rowIndex: index, colId: col.id });
                        } else {
                            // TODO: 复杂类型（Select, Date等）引导进入全屏
                            onFullScreen();
                        }
                    }

                    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
                        // TODO: 实际更新 Supabase 数据
                        console.log(`Cell ${col.id} at row ${index} updated to: ${e.target.value}`);
                        setEditingCell(null);
                    }
                    
                    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
                        if (e.key === 'Enter' || e.key === 'Escape') {
                            // 提交或取消编辑
                            e.currentTarget.blur();
                        }
                    }

                    return (
                      <td
                        key={col.id}
                        className="px-3 py-2 whitespace-nowrap text-sm text-gray-900 border-l border-gray-100 cursor-text text-center align-middle min-w-[80px]"
                        onClick={handleCellClick}
                      >
                        {isEditing ? (
                            <input 
                                type={col.type === 'number' ? 'number' : 'text'}
                                defaultValue={cellValue}
                                onBlur={handleBlur}
                                onKeyDown={handleKeyDown}
                                autoFocus
                                className="w-full p-0 border-none focus:ring-0 focus:outline-none bg-transparent"
                            />
                        ) : (
                            renderCellContent(col, cellValue)
                        )}
                      </td>
                    );
                  })}
                </tr>
              );
            })}
            {/* 提示更多行 */}
            {table.snapshot?.rows && rowsToDisplay.length < table.snapshot.rows.length && (
                <tr>
                    <td colSpan={columns.length + 1} className="px-4 py-2 text-center text-xs text-gray-500 italic">
                        ... 更多 { table.snapshot.rows.length - rowsToDisplay.length } 行数据，双击进入全屏查看
                    </td>
                </tr>
            )}
          </tbody>
        </table>
      </div>
      <div className="flex items-center justify-end space-x-4 mt-2 text-xs text-gray-500">
        <label className="flex items-center space-x-2">
          <span>行数</span>
          <input
            type="range"
            min={5}
            max={Math.max(5, totalRowsAvailable)}
            value={visibleRows}
            onChange={(event) => setVisibleRows(Number(event.target.value))}
            className="h-1.5 w-28 accent-blue-500"
          />
          <span>{visibleRows}</span>
        </label>
        <label className="flex items-center space-x-2">
          <span>列数</span>
          <input
            type="range"
            min={5}
            max={Math.max(5, totalColsAvailable)}
            value={visibleCols}
            onChange={(event) => setVisibleCols(Number(event.target.value))}
            className="h-1.5 w-28 accent-blue-500"
          />
          <span>{visibleCols}</span>
        </label>
      </div>
    </div>
  );
};

export default CompactTablePreview;