// MasterySummaryCard 组件单测
// 依据：02-architecture-design.md §15 组件设计
// 覆盖：总体掌握度 / 知识点统计 / 各学科掌握度 / 进度条 / 弱项高亮

import { describe, it, expect } from "vitest";
import { render, screen } from "@testing-library/react";
import { MasterySummaryCard } from "./MasterySummaryCard";
import type { MasterySummary } from "@/types";

function makeSummary(overrides: Partial<MasterySummary> = {}): MasterySummary {
  return {
    childId: "student-001",
    overallMastery: 0.78,
    subjectMastery: [
      { subject: "语文", mastery: 0.82 },
      { subject: "数学", mastery: 0.75 },
      { subject: "英语", mastery: 0.8 },
      { subject: "物理", mastery: 0.85 },
    ],
    totalKps: 86,
    masteredKps: 67,
    ...overrides,
  };
}

describe("MasterySummaryCard 总体掌握度", () => {
  it("渲染总体掌握度标签", () => {
    render(<MasterySummaryCard summary={makeSummary()} />);
    expect(screen.getByText("总体掌握度")).toBeInTheDocument();
  });

  it("渲染总体掌握度百分比（0.78 → 78.0%）", () => {
    render(<MasterySummaryCard summary={makeSummary()} />);
    expect(screen.getByText(/78\.0%/)).toBeInTheDocument();
  });

  it("渲染总体掌握度 progressbar", () => {
    render(<MasterySummaryCard summary={makeSummary()} />);
    const bar = screen.getByRole("progressbar", { name: "总体掌握度" });
    expect(bar).toHaveAttribute("aria-valuenow", "78");
    expect(bar).toHaveAttribute("aria-valuemin", "0");
    expect(bar).toHaveAttribute("aria-valuemax", "100");
  });

  it("overallMastery=0 时 progressbar 为 0%", () => {
    render(<MasterySummaryCard summary={makeSummary({ overallMastery: 0 })} />);
    const bar = screen.getByRole("progressbar", { name: "总体掌握度" });
    expect(bar).toHaveAttribute("aria-valuenow", "0");
  });

  it("overallMastery=1 时 progressbar 为 100%", () => {
    render(<MasterySummaryCard summary={makeSummary({ overallMastery: 1 })} />);
    const bar = screen.getByRole("progressbar", { name: "总体掌握度" });
    expect(bar).toHaveAttribute("aria-valuenow", "100");
  });
});

describe("MasterySummaryCard 知识点统计", () => {
  it("渲染已掌握知识点标签", () => {
    render(<MasterySummaryCard summary={makeSummary()} />);
    expect(screen.getByText("已掌握知识点")).toBeInTheDocument();
  });

  it("渲染已掌握 / 总数（67 / 86）", () => {
    render(<MasterySummaryCard summary={makeSummary()} />);
    expect(screen.getByText("67 / 86")).toBeInTheDocument();
  });
});

describe("MasterySummaryCard 各学科掌握度", () => {
  it("渲染各学科掌握度标题", () => {
    render(<MasterySummaryCard summary={makeSummary()} />);
    expect(screen.getByText("各学科掌握度")).toBeInTheDocument();
  });

  it("渲染每个学科名称", () => {
    render(<MasterySummaryCard summary={makeSummary()} />);
    expect(screen.getByText("语文")).toBeInTheDocument();
    expect(screen.getByText("数学")).toBeInTheDocument();
    expect(screen.getByText("英语")).toBeInTheDocument();
    expect(screen.getByText("物理")).toBeInTheDocument();
  });

  it("渲染每个学科掌握率百分比", () => {
    render(<MasterySummaryCard summary={makeSummary()} />);
    // 0.82 → 82.0%，0.75 → 75.0%，0.8 → 80.0%，0.85 → 85.0%
    expect(screen.getByText(/82\.0%/)).toBeInTheDocument();
    expect(screen.getByText(/75\.0%/)).toBeInTheDocument();
    expect(screen.getByText(/80\.0%/)).toBeInTheDocument();
    expect(screen.getByText(/85\.0%/)).toBeInTheDocument();
  });

  it("每个学科渲染 progressbar", () => {
    render(<MasterySummaryCard summary={makeSummary()} />);
    expect(screen.getByRole("progressbar", { name: "语文掌握度" })).toBeInTheDocument();
    expect(screen.getByRole("progressbar", { name: "数学掌握度" })).toBeInTheDocument();
    expect(screen.getByRole("progressbar", { name: "英语掌握度" })).toBeInTheDocument();
    expect(screen.getByRole("progressbar", { name: "物理掌握度" })).toBeInTheDocument();
  });

  it("掌握度 < 0.6 时用 danger 色（isWeak）", () => {
    const { container } = render(
      <MasterySummaryCard
        summary={makeSummary({
          subjectMastery: [
            { subject: "数学", mastery: 0.45 },
            { subject: "物理", mastery: 0.85 },
          ],
        })}
      />,
    );
    const dangerBars = container.querySelectorAll(".bg-danger");
    const successBars = container.querySelectorAll(".bg-success");
    expect(dangerBars.length).toBeGreaterThanOrEqual(1);
    expect(successBars.length).toBeGreaterThanOrEqual(1);
  });

  it("掌握度 >= 0.6 时用 success 色", () => {
    const { container } = render(
      <MasterySummaryCard
        summary={makeSummary({
          subjectMastery: [{ subject: "数学", mastery: 0.85 }],
        })}
      />,
    );
    const successBars = container.querySelectorAll(".bg-success");
    expect(successBars.length).toBeGreaterThanOrEqual(1);
  });

  it("渲染 region（aria-label）", () => {
    render(<MasterySummaryCard summary={makeSummary()} />);
    expect(screen.getByLabelText("掌握度摘要")).toBeInTheDocument();
  });
});
