Edu/apps/portal-shell/src/shell/LayoutManager.tsx

"use client";

/**
 * LayoutManager - 5 种 Layout 模板渲染器（v2.1 M8 + shadcn 令牌）
 *
 * | layoutId | 布局                              | slots                              |
 * | -------- | --------------------------------- | ---------------------------------- |
 * | classic  | TopBar + SideNav + Main           | top / side / main                  |
 * | focus    | TopBar + 全宽 Main                | top / main                         |
 * | split    | TopBar + 左右等分 Main            | top / main-left / main-right       |
 * | triple   | TopBar + SideNav + Main + RightRail | top / side / main / right        |
 * | canvas   | TopBar + 自由摆放                 | top / canvas-grid                  |
 *
 * 令牌迁移：v2.0 shadcn 标准令牌
 * - bg-paper → bg-background（页面底色）
 * - bg-surface → bg-card（容器表面）
 * - border-rule → border（默认边框色）
 * - p-md/p-lg → p-4/p-6（间距阶梯）
 * - gap-md → gap-4
 *
 * 关联：portal-shell spec §4.1、§4.2、README v2.0 §3.5 shadcn 令牌
 */
import { type ReactNode } from "react";
import { SlotRenderer, type SlotRendererProps } from "./SlotRenderer";

type SlotRendererInput = Omit<SlotRendererProps, "slotName" | "layoutId">;

export interface LayoutManagerProps extends SlotRendererInput {
  layoutId: string;
}

export function LayoutManager(props: LayoutManagerProps): ReactNode {
  const { layoutId, ...slotInput } = props;
  switch (layoutId) {
    case "focus":
      return <FocusLayout slotInput={slotInput} layoutId={layoutId} />;
    case "split":
      return <SplitLayout slotInput={slotInput} layoutId={layoutId} />;
    case "triple":
      return <TripleLayout slotInput={slotInput} layoutId={layoutId} />;
    case "canvas":
      return <CanvasLayout slotInput={slotInput} layoutId={layoutId} />;
    case "classic":
    default:
      return <ClassicLayout slotInput={slotInput} layoutId={layoutId} />;
  }
}

interface LayoutShellProps {
  slotInput: SlotRendererInput;
  layoutId: string;
}

/** classic：TopBar + SideNav + Main */
function ClassicLayout({ slotInput, layoutId }: LayoutShellProps): ReactNode {
  return (
    <div className="flex min-h-screen flex-col bg-background">
      <header className="border-b bg-card">
        <SlotRenderer slotName="top" layoutId={layoutId} {...slotInput} />
      </header>
      <div className="flex flex-1">
        <aside className="w-64 border-r bg-card p-4">
          <SlotRenderer slotName="side" layoutId={layoutId} {...slotInput} />
        </aside>
        <main className="flex-1 p-6">
          <SlotRenderer slotName="main" layoutId={layoutId} {...slotInput} />
        </main>
      </div>
    </div>
  );
}

/** focus：TopBar + 全宽 Main */
function FocusLayout({ slotInput, layoutId }: LayoutShellProps): ReactNode {
  return (
    <div className="flex min-h-screen flex-col bg-background">
      <header className="border-b bg-card">
        <SlotRenderer slotName="top" layoutId={layoutId} {...slotInput} />
      </header>
      <main className="flex-1 p-6">
        <SlotRenderer slotName="main" layoutId={layoutId} {...slotInput} />
      </main>
    </div>
  );
}

/** split：TopBar + 左右等分 Main */
function SplitLayout({ slotInput, layoutId }: LayoutShellProps): ReactNode {
  return (
    <div className="flex min-h-screen flex-col bg-background">
      <header className="border-b bg-card">
        <SlotRenderer slotName="top" layoutId={layoutId} {...slotInput} />
      </header>
      <div className="flex flex-1 gap-4 p-6">
        <section className="flex-1">
          <SlotRenderer
            slotName="main-left"
            layoutId={layoutId}
            {...slotInput}
          />
        </section>
        <section className="flex-1">
          <SlotRenderer
            slotName="main-right"
            layoutId={layoutId}
            {...slotInput}
          />
        </section>
      </div>
    </div>
  );
}

/** triple：TopBar + SideNav + Main + RightRail */
function TripleLayout({ slotInput, layoutId }: LayoutShellProps): ReactNode {
  return (
    <div className="flex min-h-screen flex-col bg-background">
      <header className="border-b bg-card">
        <SlotRenderer slotName="top" layoutId={layoutId} {...slotInput} />
      </header>
      <div className="flex flex-1">
        <aside className="w-64 border-r bg-card p-4">
          <SlotRenderer slotName="side" layoutId={layoutId} {...slotInput} />
        </aside>
        <main className="flex-1 p-6">
          <SlotRenderer slotName="main" layoutId={layoutId} {...slotInput} />
        </main>
        <aside className="w-72 border-l bg-card p-4">
          <SlotRenderer slotName="right" layoutId={layoutId} {...slotInput} />
        </aside>
      </div>
    </div>
  );
}

/** canvas：TopBar + 自由摆放 grid（MVP 按 grid 排列，不实现拖拽） */
function CanvasLayout({ slotInput, layoutId }: LayoutShellProps): ReactNode {
  return (
    <div className="flex min-h-screen flex-col bg-background">
      <header className="border-b bg-card">
        <SlotRenderer slotName="top" layoutId={layoutId} {...slotInput} />
      </header>
      <main className="flex-1 p-6">
        <SlotRenderer
          slotName="canvas-grid"
          layoutId={layoutId}
          {...slotInput}
        />
      </main>
    </div>
  );
}