"use client";

import dynamic from "next/dynamic";
import type { Block } from "@/types/page";
import TextBlockView from "@/components/blocks/TextBlock";
import HeroBlockView from "@/components/blocks/HeroBlock";
import SettingsBlockView from "@/components/blocks/SettingsBlock";

// 客户端大组件按需加载（减少首屏 JS）
const ChartBlockView = dynamic(() => import("@/components/blocks/ChartBlock"), {
    ssr: false, // 图表多数只在浏览器渲染
    loading: () => (
        <div className="w-full h-80 rounded-xl border border-gray-200 dark:border-gray-700 p-6 bg-white dark:bg-gray-800 flex items-center justify-center">
            <div className="text-sm text-gray-500 dark:text-gray-400">图表加载中…</div>
        </div>
    ),
});

export function RenderBlock({ block }: { block: Block }) {
    switch (block.__typename) {
        case "TextBlockType":
            return <TextBlockView {...block} />;

        case "ChartBlockType":
            return <ChartBlockView {...block} />;

        case "SettingsBlockType":
            return <SettingsBlockView {...block} />;

        case "HeroBlockType":
            return <HeroBlockView {...block} />;

        default:
            console.warn(`未知块类型：${(block as any).__typename ?? "Unknown"}`, block);
            return (
                <div className="w-full p-4 text-center text-xs text-gray-500 dark:text-gray-400 border border-dashed border-gray-300 dark:border-gray-600 rounded-lg">
                    未知块类型：{(block as any).__typename ?? "Unknown"}
                </div>
            );
    }
}