// ============================================================
// CanvasApp — 无限画布根组件
//
// 通过 hash 路由 #/canvas 进入的轻量级入口。
// 不加载 AppProvider / Auth / Storage / Settings，与主应用解耦。
//
// 工作区路径：
//   优先读取设置中的"团队创作存储仓库路径"（localStorage key: ele-heixiu-team-repo-path），
//   未设置时由用户在画布工具栏中手动选择。
// ============================================================

import { useMemo, useEffect } from 'react';
import { logger } from '@/shared/utils/bus';
import { LocalFileDataSource } from '../utils/LocalFileDataSource';
import { createCanvasStoreProvider, useCanvasStore } from '../stores/useCanvasStore';
import { CanvasPage } from './CanvasPage';

/** localStorage 键名 —— 与 SettingsProvider 保持一致 */
const TEAM_REPO_PATH_KEY = 'ele-heixiu-team-repo-path';

/** 从 localStorage 读取已保存的团队创作仓库路径 */
function readStoredTeamRepoPath(): string | null {
    try {
        const stored = localStorage.getItem(TEAM_REPO_PATH_KEY);
        return stored?.trim() || null;
    } catch {
        return null;
    }
}

/**
 * 无限画布根组件。
 *
 * 职责：
 *   1. 创建 LocalFileDataSource（离线模式）数据源实例
 *   2. 通过工厂函数创建 Zustand Store + Provider
 *   3. 自动填充设置中保存的工作区路径
 *   4. 初始化后自动加载项目列表
 *   5. 渲染 CanvasPage（全屏画布 UI）
 *
 * 切换在线模式：
 *   将 `new LocalFileDataSource()` 替换为 `new RemoteDataSource(projectId, wsUrl)`
 *   Provider 和 Page 层零改动。
 */
export default function CanvasApp() {
    const { CanvasStoreProvider } = useMemo(() => {
        const dataSource = new LocalFileDataSource();
        const initialWorkspace = readStoredTeamRepoPath();

        console.log('[CanvasApp] 🎨 初始化无限画布', {
            dataSourceType: dataSource.constructor.name,
            capabilities: dataSource.capabilities,
            initialWorkspace: initialWorkspace || '(未设置 — 需在工具栏手动选择)',
            hash: window.location.hash,
            userAgent: navigator.userAgent.includes('Electron') ? 'Electron' : 'Browser',
        });

        return createCanvasStoreProvider(dataSource, initialWorkspace);
    }, []);

    return (
        <CanvasStoreProvider>
            <WorkspaceInitializer />
            <CanvasPage />
        </CanvasStoreProvider>
    );
}

/**
 * 内部组件：工作区初始化后自动加载项目列表。
 * 放在 Provider 内部以访问 store。
 */
function WorkspaceInitializer() {
    const workspaceRoot = useCanvasStore((s) => s.workspaceRoot);
    const setProjects = useCanvasStore((s) => s.setProjects);
    const getDataSource = useCanvasStore((s) => s.getDataSource);

    useEffect(() => {
        if (!workspaceRoot) return;
        const dataSource = getDataSource();
        console.log('[CanvasApp] 📋 加载项目列表:', workspaceRoot);
        dataSource
            .listSubdirs(workspaceRoot)
            .then((projects) => {
                console.log('[CanvasApp] ✅ 项目列表:', projects);
                setProjects(projects);
            })
            .catch((err) => {
                logger.warn('canvas', '加载项目列表失败', err instanceof Error ? err : new Error(String(err)));
            });
    }, [workspaceRoot, setProjects, getDataSource]);

    return null;
}
