"use client";

/**
 * ParentPortalRemote - parent-portal MF Remote 接入组件
 *
 * 职责（ARB-002 §2.3）：
 * - NEXT_PUBLIC_MF_ENABLED=true：通过 Module Federation 动态加载 parent-portal Remote
 * - NEXT_PUBLIC_MF_ENABLED=false：展示"需启用微前端模式"提示
 * - 使用 next/dynamic 懒加载（ssr: false，Remote 仅 CSR）
 * - ErrorBoundary 兜底：Remote 加载/渲染失败时降级展示
 *
 * 维护者：ai13（teacher-portal）
 */

import dynamic from "next/dynamic";
import { ErrorBoundary } from "@edu/ui-components";

const MF_ENABLED = process.env.NEXT_PUBLIC_MF_ENABLED === "true";

/** 动态加载 parent-portal Remote（仅 CSR，加载失败返回降级组件） */
const ParentRemote = dynamic(
  () =>
    import("parent/ParentApp")
      .then((mod) => mod.default)
      .catch(() => FallbackRemote),
  {
    ssr: false,
    loading: () => (
      <p className="text-sm text-ink-muted p-6">正在加载家长端视图…</p>
    ),
  },
);

/** Remote 加载失败时的降级组件 */
function FallbackRemote(): React.ReactNode {
  return (
    <div className="p-8 text-center">
      <p className="text-lg font-serif text-ink">家长端视图加载失败</p>
      <p className="mt-2 text-sm text-ink-muted">
        请确认 parent-portal 服务已启动（端口 4002）并已暴露 ParentApp
      </p>
    </div>
  );
}

/** MF 未启用时的提示 */
function MfDisabledNotice(): React.ReactNode {
  return (
    <div className="p-8 border border-rule rounded-card bg-surface text-center">
      <p className="text-lg font-serif text-ink">
        家长端视图需启用微前端模式
      </p>
      <p className="mt-2 text-sm text-ink-muted">
        设置环境变量 NEXT_PUBLIC_MF_ENABLED=true 后重启服务，
        并确保 parent-portal 已在 next.config.js remotes 中注册。
      </p>
    </div>
  );
}

export default function ParentPortalRemote(): React.ReactNode {
  if (!MF_ENABLED) {
    return <MfDisabledNotice />;
  }

  return (
    <ErrorBoundary
      fallback={(error, reset) => (
        <div
          role="alert"
          className="flex flex-col items-center justify-center gap-4 p-8"
        >
          <h2 className="text-lg font-serif text-ink">
            家长端视图渲染异常
          </h2>
          <p className="text-sm text-ink-muted">{error.message}</p>
          <button
            type="button"
            onClick={reset}
            className="px-4 py-2 text-sm text-ink-on-accent bg-accent rounded-button hover:bg-accent-hover"
          >
            重试
          </button>
        </div>
      )}
    >
      <ParentRemote />
    </ErrorBoundary>
  );
}