"use client";

/**
 * FeatureFlag 组件（ai14）
 *
 * 按特性开关渲染子树或占位符。
 * - enabled=true：渲染 children
 * - enabled=false：渲染 fallback（默认为"功能开发中"纸感占位）
 *
 * 用途：P4/P5 页面在特性未启用时优雅降级展示占位。
 */

import type { ReactNode } from "react";

export interface FeatureFlagProps {
  /** 特性是否启用 */
  enabled: boolean;
  /** 未启用时的兜底内容（可选，默认渲染纸感占位） */
  fallback?: ReactNode;
  /** 启用后渲染的子树 */
  children: ReactNode;
}

/** 默认"功能开发中"占位（纸感设计） */
function DefaultPlaceholder(): ReactNode {
  return (
    <section
      className="card-paper p-xl text-center mx-auto max-w-2xl"
      role="status"
      aria-live="polite"
      aria-label="功能开发中"
    >
      <div className="mark-left py-md px-md inline-block text-left">
        <p className="font-serif text-xl text-ink">功能开发中</p>
        <p className="mt-sm text-sm text-ink-muted">
          此功能正在建设中，敬请期待。
        </p>
      </div>
    </section>
  );
}

export function FeatureFlag({
  enabled,
  fallback,
  children,
}: FeatureFlagProps): ReactNode {
  if (!enabled) {
    return fallback !== undefined ? fallback : <DefaultPlaceholder />;
  }
  return <>{children}</>;
}
