// PracticeStatsCard 组件单测
// 依据：02-architecture-design.md §15 组件设计
// 覆盖：4 项统计网格 / 数值渲染 / 正确率颜色区分（success/warning/danger）

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

function makeStats(overrides: Partial<PracticeStats> = {}): PracticeStats {
  return {
    childId: "student-001",
    totalSessions: 48,
    completedSessions: 42,
    totalQuestionsAnswered: 560,
    overallAccuracy: 0.83,
    ...overrides,
  };
}

describe("PracticeStatsCard 统计网格", () => {
  it("渲染 4 项统计标签", () => {
    render(<PracticeStatsCard stats={makeStats()} />);
    expect(screen.getByText("总会话数")).toBeInTheDocument();
    expect(screen.getByText("已完成会话")).toBeInTheDocument();
    expect(screen.getByText("总答题数")).toBeInTheDocument();
    expect(screen.getByText("正确率")).toBeInTheDocument();
  });

  it("渲染各项数值", () => {
    render(<PracticeStatsCard stats={makeStats()} />);
    expect(screen.getByText("48")).toBeInTheDocument();
    expect(screen.getByText("42")).toBeInTheDocument();
    expect(screen.getByText("560")).toBeInTheDocument();
    // 0.83 → 83.0%
    expect(screen.getByText(/83\.0%/)).toBeInTheDocument();
  });

  it("渲染统计 region（aria-label）", () => {
    render(<PracticeStatsCard stats={makeStats()} />);
    expect(screen.getByLabelText("练习统计")).toBeInTheDocument();
  });
});

describe("PracticeStatsCard 正确率颜色区分", () => {
  it("正确率 >= 0.8 时使用 success 色（border + text）", () => {
    const { container } = render(
      <PracticeStatsCard stats={makeStats({ overallAccuracy: 0.85 })} />,
    );
    const successCards = container.querySelectorAll(".border-success");
    const successTexts = container.querySelectorAll(".text-success");
    expect(successCards.length).toBeGreaterThan(0);
    expect(successTexts.length).toBeGreaterThan(0);
  });

  it("正确率 = 0.8 时使用 success 色（边界）", () => {
    const { container } = render(
      <PracticeStatsCard stats={makeStats({ overallAccuracy: 0.8 })} />,
    );
    const successCards = container.querySelectorAll(".border-success");
    expect(successCards.length).toBeGreaterThan(0);
  });

  it("正确率在 0.6 - 0.8 之间使用 warning 色", () => {
    const { container } = render(
      <PracticeStatsCard stats={makeStats({ overallAccuracy: 0.7 })} />,
    );
    const warningCards = container.querySelectorAll(".border-warning");
    const warningTexts = container.querySelectorAll(".text-warning");
    expect(warningCards.length).toBeGreaterThan(0);
    expect(warningTexts.length).toBeGreaterThan(0);
  });

  it("正确率 = 0.6 时使用 warning 色（边界）", () => {
    const { container } = render(
      <PracticeStatsCard stats={makeStats({ overallAccuracy: 0.6 })} />,
    );
    const warningCards = container.querySelectorAll(".border-warning");
    expect(warningCards.length).toBeGreaterThan(0);
  });

  it("正确率 < 0.6 时使用 danger 色", () => {
    const { container } = render(
      <PracticeStatsCard stats={makeStats({ overallAccuracy: 0.45 })} />,
    );
    const dangerCards = container.querySelectorAll(".border-danger");
    const dangerTexts = container.querySelectorAll(".text-danger");
    expect(dangerCards.length).toBeGreaterThan(0);
    expect(dangerTexts.length).toBeGreaterThan(0);
  });

  it("正确率 = 0 时使用 danger 色", () => {
    const { container } = render(
      <PracticeStatsCard stats={makeStats({ overallAccuracy: 0 })} />,
    );
    const dangerCards = container.querySelectorAll(".border-danger");
    expect(dangerCards.length).toBeGreaterThan(0);
  });

  it("正确率 = 1 时使用 success 色", () => {
    const { container } = render(
      <PracticeStatsCard stats={makeStats({ overallAccuracy: 1 })} />,
    );
    const successCards = container.querySelectorAll(".border-success");
    expect(successCards.length).toBeGreaterThan(0);
  });

  it("非正确率卡片不高亮（默认 border-rule）", () => {
    const { container } = render(
      <PracticeStatsCard stats={makeStats({ overallAccuracy: 0.7 })} />,
    );
    // warning 卡片仅 1 个（正确率），其他 3 个为 default
    const warningCards = container.querySelectorAll(".border-warning");
    expect(warningCards.length).toBe(1);
  });
});
