/**
 * FeatureFlag 组件测试
 *
 * 测试特性开关组件：
 * - enabled=true 渲染 children
 * - enabled=false 渲染占位
 */

import { describe, it, expect } from "vitest";
import { render, screen } from "@testing-library/react";
import { FeatureFlag } from "./feature-flag";

describe("FeatureFlag", () => {
  describe("enabled=true", () => {
    it("应渲染 children", () => {
      render(
        <FeatureFlag enabled={true}>
          <div>实际内容</div>
        </FeatureFlag>,
      );
      expect(screen.getByText("实际内容")).toBeInTheDocument();
    });

    it("应渲染多个 children", () => {
      render(
        <FeatureFlag enabled={true}>
          <span>内容A</span>
          <span>内容B</span>
        </FeatureFlag>,
      );
      expect(screen.getByText("内容A")).toBeInTheDocument();
      expect(screen.getByText("内容B")).toBeInTheDocument();
    });

    it("应渲染复杂子树", () => {
      render(
        <FeatureFlag enabled={true}>
          <section>
            <h1>标题</h1>
            <p>段落</p>
          </section>
        </FeatureFlag>,
      );
      expect(screen.getByText("标题")).toBeInTheDocument();
      expect(screen.getByText("段落")).toBeInTheDocument();
    });
  });

  describe("enabled=false（默认占位）", () => {
    it("不应渲染 children", () => {
      render(
        <FeatureFlag enabled={false}>
          <div>实际内容</div>
        </FeatureFlag>,
      );
      expect(screen.queryByText("实际内容")).not.toBeInTheDocument();
    });

    it('应渲染默认"功能开发中"占位', () => {
      render(
        <FeatureFlag enabled={false}>
          <div>实际内容</div>
        </FeatureFlag>,
      );
      expect(screen.getByText("功能开发中")).toBeInTheDocument();
    });

    it("应渲染 status 角色占位", () => {
      render(
        <FeatureFlag enabled={false}>
          <div>实际内容</div>
        </FeatureFlag>,
      );
      const status = screen.getByRole("status");
      expect(status).toBeInTheDocument();
    });

    it("应包含 aria-live=polite", () => {
      render(
        <FeatureFlag enabled={false}>
          <div>实际内容</div>
        </FeatureFlag>,
      );
      const status = screen.getByRole("status");
      expect(status).toHaveAttribute("aria-live", "polite");
    });

    it('应显示"建设中"提示文字', () => {
      render(
        <FeatureFlag enabled={false}>
          <div>实际内容</div>
        </FeatureFlag>,
      );
      expect(screen.getByText(/正在建设中/)).toBeInTheDocument();
    });
  });

  describe("enabled=false + 自定义 fallback", () => {
    it("应渲染自定义 fallback 而非默认占位", () => {
      render(
        <FeatureFlag enabled={false} fallback={<div>自定义占位</div>}>
          <div>实际内容</div>
        </FeatureFlag>,
      );
      expect(screen.getByText("自定义占位")).toBeInTheDocument();
      expect(screen.queryByText("功能开发中")).not.toBeInTheDocument();
    });

    it("fallback 为复杂内容时应正确渲染", () => {
      render(
        <FeatureFlag
          enabled={false}
          fallback={
            <section>
              <h2>即将上线</h2>
              <p>敬请期待</p>
            </section>
          }
        >
          <div>实际内容</div>
        </FeatureFlag>,
      );
      expect(screen.getByText("即将上线")).toBeInTheDocument();
      expect(screen.getByText("敬请期待")).toBeInTheDocument();
    });

    it("fallback 为 null 时不渲染默认占位", () => {
      const { container } = render(
        <FeatureFlag enabled={false} fallback={null}>
          <div>实际内容</div>
        </FeatureFlag>,
      );
      // fallback=null 时不渲染默认占位，也不渲染 children
      expect(screen.queryByText("实际内容")).not.toBeInTheDocument();
      expect(screen.queryByText("功能开发中")).not.toBeInTheDocument();
      // 容器应为空或仅包含空 fragment
      expect(container.textContent?.trim()).toBe("");
    });
  });

  describe("边界情况", () => {
    it("children 为空时 enabled=true 应不报错", () => {
      const { container } = render(<FeatureFlag enabled={true}>{""}</FeatureFlag>);
      expect(container).toBeInTheDocument();
    });

    it("enabled 切换应正确响应", () => {
      const { rerender } = render(
        <FeatureFlag enabled={true}>
          <div>内容</div>
        </FeatureFlag>,
      );
      expect(screen.getByText("内容")).toBeInTheDocument();

      rerender(
        <FeatureFlag enabled={false}>
          <div>内容</div>
        </FeatureFlag>,
      );
      expect(screen.queryByText("内容")).not.toBeInTheDocument();
      expect(screen.getByText("功能开发中")).toBeInTheDocument();

      rerender(
        <FeatureFlag enabled={true}>
          <div>内容</div>
        </FeatureFlag>,
      );
      expect(screen.getByText("内容")).toBeInTheDocument();
      expect(screen.queryByText("功能开发中")).not.toBeInTheDocument();
    });
  });
});
