/* =====================================================================
   uc-a11y-mobile.spec.ts — 접근성·모바일 레이아웃 유스케이스 감사.

   목적:
     주요 6화면(login, learn 홈, session active, session review, settings,
     teach 홈)을 실제 사용자 관점의 접근성 검사 6종으로 감사한다.
       (1) 가로 오버플로 0 (support.expectNoHorizontalOverflow)
       (2) 보이는 인터랙티브 요소 44×44px 이상 — 위반 목록을 실패 메시지로 리포트
       (3) h1 헤딩 존재 + 헤딩 레벨 논리 순서(단계 건너뜀 없음)
       (4) 폼 컨트롤 라벨 연결(getByLabel 성립)
       (5) Tab 순회 시 :focus-visible 스타일 변화(포커스 표시)
       (6) 주요 CTA 색 대비 4.5:1 스팟체크(getComputedStyle 산술)

   근거:
     - 각 화면의 실제 소스(src/pages/Login.tsx·LearnerHome.tsx·Session.tsx·
       SessionReview.tsx·Settings.tsx·Professor.tsx)의 role/aria-label/한국어 문구.
     - WCAG 2.1 1.4.3(대비), 2.4.6/1.3.1(헤딩·라벨), 2.4.7(포커스 가시성),
       모바일 터치 타깃 44×44(WCAG 2.5.5 / 플랫폼 HIG).
     - fixture 형태는 full-sweep-session.spec.ts / full-sweep-learner-home.spec.ts /
       layout-visual-gate.spec.ts / e2e/session-review-fixture.ts 에서 차용.

   중복 회피:
     breakpoint-sweep.spec.ts(@single-run)는 겹침·잘림·붕괴·화면밖·문서오버플로를
     경계 폭 전수로, layout-visual-gate.spec.ts(@single-run)는 고정 7폭에서
     오버플로·잘림을 검사한다. 이 스펙은 두 게이트가 다루지 않는 접근성 축
     (타깃 크기, 헤딩 구조, 라벨, 포커스 링, 색 대비)을 두 실행 뷰포트
     (chromium-desktop 1440×900 / chromium-mobile Pixel 5)에서 검사하고,
     오버플로는 mocked-auth fixture 상태(두 게이트는 dev-login 실계정)라는
     다른 각도에서만 재확인한다.

   실 API 없이 route fixture 로만 동작하며, 실제 AI 엔진 턴 생성은 없다.
   ===================================================================== */

import { expect, test, type Locator, type Page } from "@playwright/test";
import {
  FILLED_REVIEW_SESSION_ID,
  routeFilledSessionReview,
  routePrepostMeasures,
} from "./session-review-fixture";
import { expectNoHorizontalOverflow } from "./support";

/* ─────────────────────────────────────────────────────────────────────
   공통 fixture — mocked-auth 패턴 (catch-all 먼저, 개별 fixture 나중)
   ───────────────────────────────────────────────────────────────────── */

function jsonRoute(body: unknown, status = 200) {
  return { status, contentType: "application/json", body: JSON.stringify(body) };
}

async function routeUnmockedApi(page: Page) {
  await page.route("**/api/**", (route) =>
    route.fulfill(jsonRoute({ detail: "not part of this focused fixture" }, 404)),
  );
}

/** App.tsx 게이트(approved + consent + onboarding)가 보는 필드를 빠짐없이 채운다. */
function meBody(role: "learner" | "teacher") {
  return {
    user_id: role === "learner" ? "e2e-a11y-learner-1" : "e2e-a11y-teacher-1",
    email: `${role}@hs.ac.kr`,
    role,
    display_name: role === "learner" ? "학습자" : "교수자",
    admin_access: false,
    super_admin: false,
    account_status: "approved",
    approval_required: false,
    cohort_ids: ["e2e-a11y-cohort"],
    // /auth/me 계약(api.gen.ts MeResponse)은 epoch 초(number|null)다 — ISO 문자열을
    // 보내면 Settings 의 formatConsentDate(value * 1000)가 Invalid time value 로 죽는다.
    consent_at: Date.UTC(2026, 7, 1) / 1000,
    onboarding_completed_at: Date.UTC(2026, 7, 1) / 1000,
    nickname: role === "learner" ? "학습자" : "교수자",
    self_introduction: "",
    avatar_url: "",
  };
}

async function routeAuthed(page: Page, role: "learner" | "teacher") {
  await page.route("**/auth/me", (route) => route.fulfill(jsonRoute(meBody(role))));
}

/** 미인증 상태 + 로그인 설정 fixture — 로그인 화면 전용. */
async function routeLoginScreen(page: Page) {
  await routeUnmockedApi(page);
  await page.route("**/auth/me", (route) =>
    route.fulfill(jsonRoute({ detail: "not authenticated" }, 401)),
  );
  await page.route("**/auth/config", (route) =>
    route.fulfill(
      jsonRoute({
        allowed_email_domains: ["hs.ac.kr"],
        dev_login_enabled: false,
        google_oauth_configured: true,
        providers: [
          { provider: "google", configured: true, enabled: true, login_path: "/auth/login" },
        ],
        redirect_uri: "http://localhost:8000/api/auth/callback",
        saml_configured: false,
      }),
    ),
  );
}

/* ── learn 홈 fixture — full-sweep-learner-home.spec.ts 형태 차용 ────── */

const NOW = Date.UTC(2026, 7, 18, 9, 0, 0);
const HOUR = 60 * 60 * 1000;
const iso = (msAgo: number) => new Date(NOW - msAgo).toISOString();

const LEARN_ACT_ID = "uca11yact01";

const LEARN_PERSONAS = [
  {
    code: "P1",
    display_name: "성하늘",
    difficulty: "easy",
    theory_target: ["humanistic"],
    demographics: { age_band: "20대" },
    presenting_summary: "학업 스트레스와 수면 문제를 호소",
    voice_preset: null,
    source: "database",
    degraded: false,
  },
  {
    code: "P2",
    display_name: "김도윤",
    difficulty: "moderate",
    theory_target: ["cbt"],
    demographics: { age_band: "30대" },
    presenting_summary: "직장 내 대인관계 갈등을 호소",
    voice_preset: null,
    source: "database",
    degraded: false,
  },
];

const LEARN_S_ACT = {
  session_id: LEARN_ACT_ID,
  session_no: 2,
  persona_code: "P1",
  persona_name: "성하늘",
  status: "active",
  stage: "탐색",
  started_at: iso(1 * HOUR),
  ended_at: null,
  review_ready: false,
  archived: false,
  archived_at: null,
  turn_count: 6,
  learner_turn_count: 3,
  client_turn_count: 3,
};

const LEARN_S_REV = {
  session_id: "uca11yrev01",
  session_no: 1,
  persona_code: "P2",
  persona_name: "김도윤",
  status: "ended",
  stage: "정리",
  started_at: iso(3 * HOUR),
  ended_at: iso(2.5 * HOUR),
  review_ready: true,
  archived: false,
  archived_at: null,
  turn_count: 10,
  learner_turn_count: 5,
  client_turn_count: 5,
};

const LEARN_DASHBOARD = {
  message: "학습 현황 요약",
  source: "runtime",
  overview: {
    total_sessions: 2,
    active_sessions: 1,
    review_ready_sessions: 1,
    completed_sessions: 1,
    archived_sessions: 0,
    learner_turns: 8,
    client_turns: 8,
    last_practiced_at: iso(1 * HOUR),
  },
  growth: {
    trend: "up",
    avg_rapport: 0.4,
    avg_score: 0.6,
    evaluated_sessions: 1,
    latest_score: 0.6,
    first_score: 0.6,
    score_delta: 0,
    top_techniques: ["감정 반영"],
    points: [
      {
        session_id: LEARN_S_REV.session_id,
        session_no: 1,
        persona_code: "P2",
        stage: "정리",
        started_at: LEARN_S_REV.started_at,
        ended_at: LEARN_S_REV.ended_at,
        score: 0.6,
        rapport: 0.4,
        technique_count: 3,
        watch_count: 1,
      },
    ],
  },
  recent_feedback: [
    {
      session_id: LEARN_S_REV.session_id,
      session_no: 1,
      persona_code: "P2",
      persona_name: "김도윤",
      stage: "정리",
      score: 0.6,
      rapport: 0.4,
      note: "감정 반영은 좋았지만 탐색 질문 전에 요약이 필요합니다.",
      created_at: LEARN_S_REV.ended_at,
      turn_seq: 6,
      techniques: ["감정 반영"],
    },
  ],
  persona_progress: [
    {
      persona_code: "P1",
      persona_name: "성하늘",
      sessions: 1,
      active_sessions: 1,
      completed_sessions: 0,
      review_ready_sessions: 0,
      rapport_percent: 52,
      trend: "insufficient",
      latest_stage: "탐색",
      latest_score: null,
      latest_at: iso(1 * HOUR),
    },
  ],
  achievements: [
    { id: "first-session", label: "첫 회기 완료", detail: "첫 회기를 끝냈습니다.", state: "done" },
  ],
};

const LEARN_DETAIL = {
  case_id: "case-uca11y",
  session_id: LEARN_ACT_ID,
  persona_code: "P1",
  persona_name: "성하늘",
  status: "active",
  stage: "탐색",
  started_at: iso(1 * HOUR),
  ended_at: null,
  review_ready: false,
  theory_mode: "humanistic",
  goal_stages: ["라포", "탐색"],
  effective_openness: 0.4,
  duration_limit_seconds: 1200,
  warning_before_end_seconds: 600,
  progress: null,
  turns: [
    {
      turn_seq: 1,
      speaker: "learner",
      stage: "라포",
      text: "안녕하세요, 오늘은 어떤 이야기를 나누고 싶으세요?",
      created_at: iso(0.9 * HOUR),
    },
    {
      turn_seq: 2,
      speaker: "client",
      stage: "라포",
      text: "요즘은 잠이 잘 안 와요.",
      created_at: iso(0.8 * HOUR),
    },
  ],
};

async function routeLearnerHome(page: Page) {
  await routeUnmockedApi(page);
  await routeAuthed(page, "learner");
  await page.route(/\/api\/personas$/, (route) => route.fulfill(jsonRoute(LEARN_PERSONAS)));
  await page.route(/\/api\/sessions$/, (route) =>
    route.fulfill(jsonRoute({ sessions: [LEARN_S_ACT, LEARN_S_REV], source: "runtime" })),
  );
  await page.route(/\/api\/sessions\/dashboard$/, (route) =>
    route.fulfill(jsonRoute(LEARN_DASHBOARD)),
  );
  await page.route(new RegExp(`/api/sessions/${LEARN_ACT_ID}$`), (route) =>
    route.fulfill(jsonRoute(LEARN_DETAIL)),
  );
}

/* ── session active fixture — full-sweep-session.spec.ts 형태 차용 ──── */

const SESSION_ID = "44444444-4444-4444-8444-4444a11e0001";

async function routeActiveSession(page: Page) {
  await routeUnmockedApi(page);
  await routeAuthed(page, "learner");
  await page.route("**/api/personas", (route) =>
    route.fulfill(
      jsonRoute([
        {
          code: "P1",
          display_name: "민서(청소년 우울)",
          difficulty: "hard",
          theory_target: ["humanistic"],
          demographics: { age_band: "10대" },
          presenting_summary: "자퇴와 무기력감을 둘러싼 상담 연습",
          voice_preset: "soft-young-fem",
          source: "database",
          degraded: false,
        },
      ]),
    ),
  );
  await page.route("**/api/voice/health", (route) =>
    route.fulfill(jsonRoute({ available: true, reason: null })),
  );
  await page.route("**/api/users/me/prepost-measures**", (route) =>
    route.fulfill(
      jsonRoute({
        pilot_id: "phase3-pilot-draft",
        instrument_version: "pilot-prepost-scaffold-2026-06-28",
        measures: [],
        complete_pre_count: 0,
        complete_post_count: 0,
        updated_at: null,
      }),
    ),
  );
  await page.route("**/api/sessions", async (route) => {
    if (route.request().method() !== "POST") {
      await route.fallback();
      return;
    }
    await route.fulfill(
      jsonRoute(
        {
          session_id: SESSION_ID,
          case_id: "uc-a11y-case-001",
          session_no: 1,
          stage: "라포",
          effective_openness: 0.21,
          recall_summary: null,
          degraded: false,
          goal_stages: ["라포", "탐색"],
          duration_limit_seconds: 3600,
          warning_before_end_seconds: 600,
        },
        201,
      ),
    );
  });
  await page.route(`**/api/sessions/${SESSION_ID}`, (route) =>
    route.fulfill(
      jsonRoute({
        session_id: SESSION_ID,
        case_id: "uc-a11y-case-001",
        persona_code: "P1",
        persona_name: "민서",
        session_no: 1,
        status: "active",
        stage: "라포",
        theory_mode: "humanistic",
        effective_openness: 0.21,
        started_at: new Date().toISOString(),
        ended_at: null,
        review_ready: false,
        turns: [],
        goal_stages: ["라포", "탐색"],
        progress: null,
        duration_limit_seconds: 3600,
        warning_before_end_seconds: 600,
      }),
    ),
  );
  // pre 체크포인트가 이미 잠긴 상태로 응답해 알리안스 게이트를 fixture로 통과시킨다.
  await page.route(`**/api/sessions/${SESSION_ID}/alliance-pulses`, (route) =>
    route.fulfill(
      jsonRoute({
        items: [
          {
            pulse_id: "aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa",
            checkpoint: "pre",
            status: "ready",
            learner_locked_at: new Date().toISOString(),
            revealed_at: new Date().toISOString(),
            error_code: null,
            self_scores: { goal: 0.5, task: 0.5, bond: 0.5 },
            measurements: [],
          },
        ],
      }),
    ),
  );
  await page.route(`**/api/sessions/${SESSION_ID}/live-coach`, (route) =>
    route.fulfill(
      jsonRoute({
        source: "database",
        quota: { remaining: 3, max: 3 },
        credit_events: [],
        events: [],
      }),
    ),
  );
}

async function openActiveSession(page: Page) {
  await page.goto("/learn/session/P1");
  const startButton = page.getByRole("button", { name: "회기 시작" });
  await expect(startButton).toBeEnabled({ timeout: 15_000 });
  await startButton.click();
  await expect(page.locator(".sx-page.sx-page--active")).toBeVisible({ timeout: 15_000 });
}

/* ── session review / settings / teach 홈 fixture ────────────────────── */

async function routeLearnerReview(page: Page) {
  await routeUnmockedApi(page);
  await routeAuthed(page, "learner");
  // 나중 등록이 우선 — 리뷰·알리안스·사전사후 fixture 는 catch-all 뒤에 깐다.
  await routeFilledSessionReview(page);
  await routePrepostMeasures(page);
}

async function routeSettings(page: Page) {
  await routeUnmockedApi(page);
  await routeAuthed(page, "learner");
  await page.route("**/api/users/me", (route) =>
    route.fulfill(
      jsonRoute({
        user_id: "e2e-a11y-learner-1",
        email: "learner@hs.ac.kr",
        role: "learner",
        display_name: "학습자",
        legal_name: "학습자",
        nickname: "학습자",
        affiliation: "한신대학교",
        department: "상담심리학과",
        grade_level: "3학년",
        phone: "010-0000-0000",
        contact_address: "경기도 오산시 한신대학교",
        self_introduction: "",
        avatar_url: "",
        cohort_ids: ["e2e-a11y-cohort"],
        onboarding_required: false,
        onboarding_completed_at: 1782820000,
        terms_agreed_at: 1782820000,
        terms_version: "2026-06",
        privacy_agreed_at: 1782820000,
        privacy_version: "2026-06",
      }),
    ),
  );
  await page.route("**/api/users/me/preferences", (route) =>
    route.fulfill(
      jsonRoute({
        theme: "dark",
        voice_preset_id: "soft-young-fem",
        voice_rate: 1,
        notifications: {
          account_approval: true,
          learner_progress: false,
          product_news: false,
          safety_signal: true,
          session_done: true,
        },
      }),
    ),
  );
  await page.route("**/api/users/me/voice-presets", (route) =>
    route.fulfill(
      jsonRoute([
        {
          id: "soft-young-fem",
          name: "차분한 목소리",
          desc: "기본 내담자 음성",
          persona_hint: "P1",
          voice_id: "voice-1",
        },
      ]),
    ),
  );
  await page.route("**/api/users/support-tickets", (route) =>
    route.fulfill(
      jsonRoute({ source: "database", durable: true, generated_at: 1782820000, tickets: [] }),
    ),
  );
}

/** teach 홈 대시보드 — layout-visual-gate.spec.ts teacherAnalysisFixture 축약 차용. */
function teacherDashboardBody() {
  const learnerId = "uc-a11y-analysis-learner";
  const sessions = Array.from({ length: 3 }, (_unused, index) => {
    const sessionNo = index + 1;
    return {
      session_id: `${learnerId}-session-${sessionNo}`,
      learner_id: learnerId,
      learner_label: "감사 검증 학습자",
      persona_code: "P1",
      persona_name: "서연",
      session_no: sessionNo,
      status: "ended",
      stage: sessionNo >= 3 ? "개입" : "탐색",
      turn_count: 8 + sessionNo,
      learner_turn_count: 4 + sessionNo,
      client_turn_count: 4,
      started_at: `2026-08-${String(10 + sessionNo).padStart(2, "0")}T09:00:00Z`,
      ended_at: `2026-08-${String(10 + sessionNo).padStart(2, "0")}T09:30:00Z`,
      review_status: "pending",
      review_note: null,
      reviewed_at: null,
    };
  });
  const points = sessions.map((session) => ({
    session_id: session.session_id,
    session_no: session.session_no,
    persona_code: session.persona_code,
    stage: session.stage,
    started_at: session.started_at,
    ended_at: session.ended_at,
    score: session.session_no >= 3 ? 0.8 : 0.5,
    rapport: Math.min(0.8, session.session_no * 0.2),
    technique_count: session.session_no + 1,
    watch_count: session.session_no < 3 ? 1 : 0,
  }));
  const summary = {
    learner_id: learnerId,
    learner_label: "감사 검증 학습자",
    sessions: sessions.length,
    ended_sessions: sessions.length,
    latest_at: sessions[sessions.length - 1].ended_at ?? "",
    first_score: points[0].score,
    latest_score: points[points.length - 1].score,
    score_delta: points[points.length - 1].score - points[0].score,
    avg_score: 0.6,
    avg_rapport: 0.4,
    trend: "up",
    top_techniques: ["reflection"],
    points,
  };
  return {
    source: "database",
    cohort_label: "a11y cohort",
    total_learners: 1,
    active_sessions: 0,
    ended_sessions: sessions.length,
    learner_growth: [summary],
    safety_alerts: [],
    pending_reviews: [],
    recent_sessions: sessions.slice(-2),
    message: "접근성 감사 fixture.",
  };
}

async function routeTeachHome(page: Page) {
  await routeUnmockedApi(page);
  await routeAuthed(page, "teacher");
  await page.route("**/api/teacher/dashboard", (route) =>
    route.fulfill(jsonRoute(teacherDashboardBody())),
  );
}

/* ─────────────────────────────────────────────────────────────────────
   접근성 검사 헬퍼 (브라우저 컨텍스트 실측)
   ───────────────────────────────────────────────────────────────────── */

interface TapTargetViolation {
  element: string;
  width: number;
  height: number;
}

/** 보이는 인터랙티브 요소 중 44×44px 미만을 수집한다(비활성 컨트롤 제외). */
async function collectSmallTapTargets(page: Page): Promise<TapTargetViolation[]> {
  return page.evaluate(() => {
    const MIN = 44;
    const selector =
      "button, a[href], input:not([type='hidden']), select, textarea, " +
      "[role='button'], [role='tab'], [role='radio'], [role='checkbox']";
    const out: Array<{ element: string; width: number; height: number }> = [];
    const seen = new Set<Element>();
    for (const el of Array.from(document.querySelectorAll<HTMLElement>(selector))) {
      if (seen.has(el)) continue;
      seen.add(el);
      // 체크박스·라디오가 <label> 안에 있으면 실제 활성화 타깃은 라벨 전체다
      // (라벨 클릭이 컨트롤을 토글한다 — WCAG 2.5.5 의 "타깃"은 이 영역).
      // 시각적으로 숨긴 1×1 clip 패턴 입력도 스타일된 라벨이 타깃을 대표한다.
      let target: HTMLElement = el;
      if (
        el instanceof HTMLInputElement &&
        (el.type === "checkbox" || el.type === "radio")
      ) {
        const wrappingLabel = el.closest("label");
        if (wrappingLabel) target = wrappingLabel;
      }
      const style = window.getComputedStyle(target);
      const rect = target.getBoundingClientRect();
      const visible =
        style.display !== "none" &&
        style.visibility !== "hidden" &&
        Number(style.opacity) !== 0 &&
        rect.width > 0 &&
        rect.height > 0 &&
        !el.closest("[hidden]") &&
        !el.closest("[aria-hidden='true']") &&
        !el.closest("[inert]");
      if (!visible) continue;
      if ((el as HTMLButtonElement).disabled) continue;
      if (rect.width + 0.5 >= MIN && rect.height + 0.5 >= MIN) continue;
      const cls = String(el.className || "")
        .trim()
        .split(/\s+/)
        .slice(0, 2)
        .join(".");
      const text = (el.textContent ?? el.getAttribute("aria-label") ?? "")
        .replace(/\s+/g, " ")
        .trim()
        .slice(0, 40);
      out.push({
        element: `${el.tagName.toLowerCase()}${cls ? `.${cls}` : ""}${text ? ` "${text}"` : ""}`,
        width: Math.round(rect.width),
        height: Math.round(rect.height),
      });
    }
    return out;
  });
}

async function expectTapTargets44(
  page: Page,
  screen: string,
  options: { wideCompactAllowlist?: string[] } = {},
) {
  let violations = await collectSmallTapTargets(page);
  // 데스크톱(>720px)은 문서화된 밀도 계약을 가진 컴팩트 컨트롤을 허용한다
  // (예: 리뷰 필터 칩 — session-review.spec.ts 폭 분기 계약이 데스크톱 ≤34px,
  //  모바일 ≥44px 을 소유). 모바일 뷰포트에서는 허용 없이 44px 을 강제한다.
  const viewportWidth = page.viewportSize()?.width ?? 0;
  const allowlist = options.wideCompactAllowlist ?? [];
  if (viewportWidth > 720 && allowlist.length > 0) {
    violations = violations.filter(
      (violation) => !allowlist.some((cls) => violation.element.includes(cls)),
    );
  }
  expect(
    violations,
    `[${screen}] 44×44px 미만 인터랙티브 요소 ${violations.length}건:\n` +
      violations
        .slice(0, 20)
        .map((v) => `  · ${v.element} → ${v.width}×${v.height}px`)
        .join("\n") +
      (violations.length > 20 ? `\n  · … 외 ${violations.length - 20}건` : ""),
  ).toEqual([]);
}

interface HeadingReport {
  h1Count: number;
  sequence: Array<{ level: number; text: string }>;
  skips: Array<{ from: number; to: number; text: string }>;
}

/** 보이는 헤딩(h1~h6)의 레벨 시퀀스와 "한 단계 초과 하강" 위반을 수집한다. */
async function collectHeadingReport(page: Page): Promise<HeadingReport> {
  return page.evaluate(() => {
    const headings = Array.from(
      document.querySelectorAll<HTMLElement>("h1, h2, h3, h4, h5, h6"),
    ).filter((el) => {
      const style = window.getComputedStyle(el);
      const rect = el.getBoundingClientRect();
      return (
        style.display !== "none" &&
        style.visibility !== "hidden" &&
        rect.width > 0 &&
        rect.height > 0 &&
        !el.closest("[hidden]") &&
        !el.closest("[aria-hidden='true']")
      );
    });
    const sequence = headings.map((el) => ({
      level: Number(el.tagName.slice(1)),
      text: (el.textContent ?? "").replace(/\s+/g, " ").trim().slice(0, 50),
    }));
    const skips: Array<{ from: number; to: number; text: string }> = [];
    let previous = 0;
    for (const item of sequence) {
      if (previous > 0 && item.level > previous + 1) {
        skips.push({ from: previous, to: item.level, text: item.text });
      }
      previous = item.level;
    }
    return { h1Count: sequence.filter((item) => item.level === 1).length, sequence, skips };
  });
}

async function expectHeadingStructure(page: Page, screen: string) {
  const report = await collectHeadingReport(page);
  expect(
    report.h1Count,
    `[${screen}] 화면에 h1 이 정확히 1개 있어야 한다. 실제 헤딩 시퀀스: ${JSON.stringify(report.sequence)}`,
  ).toBe(1);
  expect(
    report.sequence[0]?.level,
    `[${screen}] 첫 헤딩은 h1 이어야 한다. 실제: ${JSON.stringify(report.sequence[0])}`,
  ).toBe(1);
  expect(
    report.skips,
    `[${screen}] 헤딩 레벨이 한 단계를 건너뛰었다: ${JSON.stringify(report.skips)}`,
  ).toEqual([]);
}

interface FocusStop {
  element: string;
  focusVisible: boolean;
  styleChanged: boolean;
}

/**
 * Tab 을 눌러 포커스를 순회하며, :focus-visible 상태의 요소가
 * 블러 상태 대비 시각적 스타일(outline/box-shadow/border/background) 변화를
 * 실제로 보이는지 확인한다.
 */
async function collectFocusStops(page: Page, presses: number): Promise<FocusStop[]> {
  const stops: FocusStop[] = [];
  for (let i = 0; i < presses; i += 1) {
    await page.keyboard.press("Tab");
    const stop = await page.evaluate(() => {
      const el = document.activeElement as HTMLElement | null;
      if (!el || el === document.body || el === document.documentElement) return null;
      const snapshot = () => {
        const s = window.getComputedStyle(el);
        return [s.outlineStyle, s.outlineWidth, s.outlineColor, s.boxShadow, s.borderColor, s.backgroundColor].join("|");
      };
      const focusVisible = el.matches(":focus-visible");
      const focusedStyle = snapshot();
      el.blur();
      const blurredStyle = snapshot();
      el.focus();
      const cls = String(el.className || "").trim().split(/\s+/).slice(0, 2).join(".");
      const text = (el.textContent ?? el.getAttribute("aria-label") ?? "")
        .replace(/\s+/g, " ")
        .trim()
        .slice(0, 40);
      return {
        element: `${el.tagName.toLowerCase()}${cls ? `.${cls}` : ""}${text ? ` "${text}"` : ""}`,
        focusVisible,
        styleChanged: focusedStyle !== blurredStyle,
      };
    });
    if (stop) stops.push(stop);
  }
  return stops;
}

async function expectFocusVisibleOnTab(page: Page, screen: string, presses = 6) {
  const stops = await collectFocusStops(page, presses);
  const interactiveStops = stops.filter((stop) => stop.focusVisible);
  expect(
    interactiveStops.length,
    `[${screen}] Tab ${presses}회 순회에서 :focus-visible 포커스 정지점을 찾지 못했다. 정지점: ${JSON.stringify(stops)}`,
  ).toBeGreaterThanOrEqual(2);
  const unmarked = interactiveStops.filter((stop) => !stop.styleChanged);
  expect(
    unmarked,
    `[${screen}] :focus-visible 인데 시각적 포커스 표시(스타일 변화)가 없는 요소: ${JSON.stringify(unmarked)}`,
  ).toEqual([]);
}

/** WCAG 상대 휘도·대비 산술 — 조상 배경을 알파 합성해 유효 배경색을 구한다. */
async function ctaContrastRatio(target: Locator): Promise<{
  ratio: number;
  threshold: number;
  color: string;
  background: string;
}> {
  return target.evaluate((el) => {
    // 색 전이(transition) 중간값이 아니라 안착값을 계약으로 측정한다 —
    // vg-btn 은 background 에 var(--dur-base) 전이가 걸려 있어 상태 변경 직후
    // 스냅샷이 중간 색을 읽는다. transition 을 끊으면 계산값이 목표값으로 즉시 안착한다.
    let node: HTMLElement | null = el as HTMLElement;
    while (node && node !== document.documentElement) {
      node.style.transitionProperty = "none";
      node = node.parentElement;
    }
    void (el as HTMLElement).offsetWidth;
    function parseColor(value: string): [number, number, number, number] {
      const match = value.match(/rgba?\(([^)]+)\)/);
      if (!match) return [0, 0, 0, 1];
      const parts = match[1].split(",").map((part) => Number.parseFloat(part.trim()));
      return [parts[0] ?? 0, parts[1] ?? 0, parts[2] ?? 0, parts[3] ?? 1];
    }
    function composite(
      fg: [number, number, number, number],
      bg: [number, number, number],
    ): [number, number, number] {
      const a = fg[3];
      return [
        fg[0] * a + bg[0] * (1 - a),
        fg[1] * a + bg[1] * (1 - a),
        fg[2] * a + bg[2] * (1 - a),
      ];
    }
    /** 그라디언트 background-image 의 색 정지점들을 추출한다(url 레이어는 무시). */
    function gradientStops(backgroundImage: string): Array<[number, number, number, number]> {
      if (!backgroundImage || backgroundImage === "none" || !backgroundImage.includes("gradient")) {
        return [];
      }
      const stops: Array<[number, number, number, number]> = [];
      for (const match of backgroundImage.matchAll(/rgba?\([^)]+\)/g)) {
        stops.push(parseColor(match[0]));
      }
      return stops;
    }
    /**
     * 유효 배경 후보들 — 조상 배경색을 알파 합성하되, 그라디언트(background-image)가
     * 있으면 각 색 정지점을 별도 후보로 전개한다. 대비는 후보 중 최악값으로 판정한다
     * (vg-btn--primary 처럼 배경이 그라디언트뿐이면 backgroundColor 는 투명이라
     *  조상 배경으로 오판된다 — 실제 계약은 그라디언트 위 텍스트다).
     */
    function effectiveBackgrounds(start: Element): Array<[number, number, number]> {
      const layers: Array<{
        color: [number, number, number, number];
        stops: Array<[number, number, number, number]>;
      }> = [];
      let node: Element | null = start;
      while (node && node !== document.documentElement) {
        const nodeStyle = window.getComputedStyle(node);
        const color = parseColor(nodeStyle.backgroundColor);
        const stops = gradientStops(nodeStyle.backgroundImage);
        if (color[3] > 0 || stops.length > 0) {
          layers.push({ color, stops });
          const opaqueColor = color[3] >= 1;
          const opaqueGradient = stops.length > 0 && stops.every((stop) => stop[3] >= 1);
          if (opaqueColor || opaqueGradient) break;
        }
        node = node.parentElement;
      }
      let candidates: Array<[number, number, number]> = [[255, 255, 255]];
      const rootBg = parseColor(window.getComputedStyle(document.documentElement).backgroundColor);
      if (rootBg[3] > 0) candidates = [[rootBg[0], rootBg[1], rootBg[2]]];
      for (let i = layers.length - 1; i >= 0; i -= 1) {
        const layer = layers[i];
        // background-color 가 먼저 깔리고 그 위에 background-image(그라디언트)가 얹힌다.
        const bases = candidates.map((candidate) =>
          layer.color[3] > 0 ? composite(layer.color, candidate) : candidate,
        );
        candidates =
          layer.stops.length > 0
            ? bases.flatMap((base) => layer.stops.map((stop) => composite(stop, base)))
            : bases;
        if (candidates.length > 16) candidates = candidates.slice(0, 16);
      }
      return candidates;
    }
    function luminance([r, g, b]: [number, number, number]) {
      const channel = (v: number) => {
        const s = v / 255;
        return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
      };
      return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
    }

    const style = window.getComputedStyle(el);
    const fg = parseColor(style.color);
    // 배경 후보(그라디언트 정지점 포함) 중 최악 대비를 판정값으로 쓴다.
    let ratio = Number.POSITIVE_INFINITY;
    let bg: [number, number, number] = [255, 255, 255];
    for (const candidate of effectiveBackgrounds(el)) {
      const text: [number, number, number] = composite(fg, candidate);
      const lighter = Math.max(luminance(text), luminance(candidate));
      const darker = Math.min(luminance(text), luminance(candidate));
      const candidateRatio = (lighter + 0.05) / (darker + 0.05);
      if (candidateRatio < ratio) {
        ratio = candidateRatio;
        bg = candidate;
      }
    }

    const fontSize = Number.parseFloat(style.fontSize) || 16;
    const bold = Number.parseInt(style.fontWeight, 10) >= 700;
    const isLargeText = fontSize >= 24 || (bold && fontSize >= 18.66);
    return {
      ratio: Math.round(ratio * 100) / 100,
      threshold: isLargeText ? 3 : 4.5,
      color: style.color,
      background: `rgb(${bg.map((v) => Math.round(v)).join(", ")})`,
    };
  });
}

async function expectCtaContrast(target: Locator, screen: string, label: string) {
  await expect(target).toBeVisible();
  const report = await ctaContrastRatio(target);
  expect(
    report.ratio,
    `[${screen}] CTA "${label}" 색 대비 ${report.ratio}:1 (${report.color} on ${report.background}) — 기준 ${report.threshold}:1 미달`,
  ).toBeGreaterThanOrEqual(report.threshold);
}

/* ─────────────────────────────────────────────────────────────────────
   화면 진입 헬퍼
   ───────────────────────────────────────────────────────────────────── */

async function openLogin(page: Page) {
  await routeLoginScreen(page);
  await page.goto("/login");
  await expect(page.locator(".lg-root, .lg-enter").first()).toBeVisible({ timeout: 15_000 });
  await expect(page.getByRole("button", { name: /학교 Google 계정으로 계속/ })).toBeVisible();
}

async function openLearnerHome(page: Page) {
  await routeLearnerHome(page);
  await page.goto("/learn");
  await expect(page.locator(".lh-root")).toBeVisible({ timeout: 15_000 });
  await expect(
    page.getByRole("heading", { name: "오늘 이어갈 회기를 먼저 봅니다." }),
  ).toBeVisible({ timeout: 15_000 });
}

async function openLearnerReview(page: Page) {
  await routeLearnerReview(page);
  await page.goto(`/learn/session/${FILLED_REVIEW_SESSION_ID}/review`);
  await expect(page.locator(".sr-overview")).toBeVisible({ timeout: 15_000 });
  await expect(page.getByRole("tablist", { name: "리뷰 영역 선택" })).toBeVisible();
}

async function openSettings(page: Page) {
  await routeSettings(page);
  await page.goto("/settings");
  await expect(page.locator(".vg-set")).toBeVisible({ timeout: 15_000 });
  await expect(page.getByRole("button", { name: "알림 저장" })).toBeVisible({ timeout: 10_000 });
}

async function openTeachHome(page: Page) {
  await routeTeachHome(page);
  await page.goto("/teach");
  await expect(page.locator(".pf-root")).toBeVisible({ timeout: 15_000 });
}

/* ─────────────────────────────────────────────────────────────────────
   테스트 — 화면 × 검사 조합
   ───────────────────────────────────────────────────────────────────── */

test.describe("uc a11y-mobile — 주요 6화면 접근성·모바일 감사", () => {
  // 감사 기준면을 결정적으로 만든다 — 저장값 우선 규칙(theme store)을 그대로 사용.
  test.beforeEach(async ({ page }) => {
    await page.addInitScript(() => {
      try {
        localStorage.setItem("vignette.theme", "dark");
      } catch {
        /* storage 접근 불가 환경에서는 앱 폴백에 맡긴다 */
      }
    });
  });

  /* ── login ─────────────────────────────────────────────────────────── */

  // usecase: 방문자가 로그인 화면을 열어도 화면이 가로로 넘치지 않는다
  test("로그인 화면을 열면 어떤 뷰포트에서도 가로 스크롤 없이 전체가 보인다", async ({ page }) => {
    await openLogin(page);
    await expectNoHorizontalOverflow(page);
  });

  // usecase: 스크린리더 사용자가 로그인 화면의 헤딩 구조로 내용을 훑는다
  test("로그인 화면은 h1 하나로 시작하는 논리적 헤딩 구조를 가진다", async ({ page }) => {
    await openLogin(page);
    await expectHeadingStructure(page, "login");
  });

  // usecase: 키보드 사용자가 Tab 으로 로그인 버튼에 도달하고 포커스 위치를 눈으로 확인한다
  test("로그인 화면에서 Tab 순회 시 포커스 표시가 눈에 보인다", async ({ page }) => {
    await openLogin(page);
    await expectFocusVisibleOnTab(page, "login", 5);
  });

  // usecase: 저시력 사용자가 주 로그인 버튼의 문구를 읽는다
  test("로그인 주 CTA(학교 Google 계정으로 계속)의 색 대비가 4.5:1 이상이다", async ({ page }) => {
    await openLogin(page);
    await expectCtaContrast(
      page.getByRole("button", { name: /학교 Google 계정으로 계속/ }),
      "login",
      "학교 Google 계정으로 계속",
    );
  });

  // usecase: 모바일 방문자가 손가락으로 로그인 버튼을 정확히 누른다
  test("로그인 화면의 인터랙티브 요소가 44×44px 터치 타깃을 지킨다", async ({ page }) => {
    await openLogin(page);
    await expectTapTargets44(page, "login");
  });

  /* ── learn 홈 ──────────────────────────────────────────────────────── */

  // usecase: 학습자가 홈에 들어와 탭을 전환해도 화면이 가로로 넘치지 않는다
  test("학습자 홈은 대시보드 탭을 전환해도 가로 오버플로가 없다", async ({ page }) => {
    await openLearnerHome(page);
    await expectNoHorizontalOverflow(page);
    // 중간 폭 이하 전용 가로 탭 — 보이는 뷰포트(모바일)에서만 전환해 재검사한다.
    const historyTab = page.getByRole("tab", { name: "기록 · 리뷰" });
    if (await historyTab.isVisible().catch(() => false)) {
      await historyTab.click();
      await expectNoHorizontalOverflow(page);
      await page.getByRole("tab", { name: "오늘의 회기" }).click();
      await expectNoHorizontalOverflow(page);
    }
  });

  // usecase: 스크린리더 사용자가 학습자 홈의 헤딩으로 오늘 할 일을 파악한다
  test("학습자 홈은 h1 하나로 시작하는 논리적 헤딩 구조를 가진다", async ({ page }) => {
    await openLearnerHome(page);
    await expectHeadingStructure(page, "learner-home");
  });

  // usecase: 모바일 학습자가 회기 카드·탭 버튼을 손가락으로 누른다
  test("학습자 홈의 인터랙티브 요소가 44×44px 터치 타깃을 지킨다", async ({ page }) => {
    await openLearnerHome(page);
    await expectTapTargets44(page, "learner-home");
  });

  /* ── session active ────────────────────────────────────────────────── */

  // usecase: 학습자가 회기를 시작해 대화 화면을 쓰는 동안 화면이 가로로 넘치지 않는다
  test("진행 중 회기 화면은 가로 오버플로 없이 전부 담긴다", async ({ page }) => {
    await routeActiveSession(page);
    await openActiveSession(page);
    await expectNoHorizontalOverflow(page);
  });

  // usecase: 보조기기 사용자가 발화 입력창을 라벨로 찾아 입력한다
  test("발화 입력창이 라벨(학습자 발화 입력)로 연결되어 입력이 된다", async ({ page }) => {
    await routeActiveSession(page);
    await openActiveSession(page);
    const composer = page.getByLabel("학습자 발화 입력");
    await expect(composer).toBeVisible();
    await expect(composer).toBeEnabled();
    await composer.fill("오늘 이야기를 시작해 볼까요?");
    await expect(composer).toHaveValue("오늘 이야기를 시작해 볼까요?");
    // 입력이 생기면 보내기 CTA 가 활성화된다 — 라벨-입력-CTA 흐름이 성립한다.
    await expect(page.getByRole("button", { name: "보내기" })).toBeEnabled();
  });

  // usecase: 저시력 학습자가 보내기 버튼의 문구를 읽고 발화를 전송한다
  test("회기 화면 보내기 CTA 의 색 대비가 4.5:1 이상이다", async ({ page }) => {
    await routeActiveSession(page);
    await openActiveSession(page);
    await page.getByLabel("학습자 발화 입력").fill("대비 검사용 발화");
    await expectCtaContrast(page.getByRole("button", { name: "보내기" }), "session-active", "보내기");
  });

  // usecase: 모바일 학습자가 회기 화면의 마이크·보내기·모드 버튼을 손가락으로 누른다
  test("진행 중 회기 화면의 인터랙티브 요소가 44×44px 터치 타깃을 지킨다", async ({ page }) => {
    await routeActiveSession(page);
    await openActiveSession(page);
    await expectTapTargets44(page, "session-active");
  });

  /* ── session review ────────────────────────────────────────────────── */

  // usecase: 학습자가 리뷰 화면에서 피드백·축어록 탭을 오가며 읽어도 화면이 넘치지 않는다
  test("회기 리뷰 화면은 리뷰 탭을 전환해도 가로 오버플로가 없다", async ({ page }) => {
    await openLearnerReview(page);
    await expectNoHorizontalOverflow(page);
    await page.getByRole("tab", { name: "피드백" }).click();
    await expectNoHorizontalOverflow(page);
    await page.getByRole("tab", { name: "축어록" }).click();
    await expectNoHorizontalOverflow(page);
  });

  // usecase: 스크린리더 사용자가 리뷰 화면의 헤딩으로 평가 결과를 훑는다
  test("회기 리뷰 화면은 h1 하나로 시작하는 논리적 헤딩 구조를 가진다", async ({ page }) => {
    await openLearnerReview(page);
    await expectHeadingStructure(page, "session-review");
  });

  // usecase: 모바일 학습자가 리뷰 탭과 발화 점프 버튼을 손가락으로 누른다
  test("회기 리뷰 화면의 인터랙티브 요소가 44×44px 터치 타깃을 지킨다", async ({ page }) => {
    await openLearnerReview(page);
    await expectTapTargets44(page, "session-review", {
      wideCompactAllowlist: ["sr-chip-toggle"],
    });
  });

  /* ── settings ──────────────────────────────────────────────────────── */

  // usecase: 사용자가 설정 화면을 열어도 화면이 가로로 넘치지 않는다
  test("설정 화면은 가로 오버플로 없이 전부 담긴다", async ({ page }) => {
    await openSettings(page);
    await expectNoHorizontalOverflow(page);
  });

  // usecase: 보조기기 사용자가 계정 입력 필드를 라벨로 찾아 수정한다
  test("설정 계정 입력들이 라벨(표시 이름·이메일·소속)로 연결된다", async ({ page }) => {
    await openSettings(page);
    const displayName = page.getByLabel("표시 이름");
    await expect(displayName).toBeVisible();
    await displayName.fill("접근성 감사자");
    await expect(displayName).toHaveValue("접근성 감사자");
    await expect(page.getByLabel("이메일")).toHaveValue("learner@hs.ac.kr");
    const affiliation = page.getByLabel("소속");
    await expect(affiliation).toBeVisible();
    await expect(affiliation).toBeEditable();
  });

  // usecase: 스크린리더 사용자가 설정 화면의 헤딩으로 섹션을 파악한다
  test("설정 화면은 h1 하나로 시작하는 논리적 헤딩 구조를 가진다", async ({ page }) => {
    await openSettings(page);
    await expectHeadingStructure(page, "settings");
  });

  // usecase: 저시력 사용자가 알림 저장 버튼의 문구를 읽고 설정을 저장한다
  test("설정 알림 저장 CTA 의 색 대비가 4.5:1 이상이다", async ({ page }) => {
    await openSettings(page);
    await expectCtaContrast(page.getByRole("button", { name: "알림 저장" }), "settings", "알림 저장");
  });

  /* ── teach 홈 ──────────────────────────────────────────────────────── */

  // usecase: 교수자가 대시보드를 열어도 화면이 가로로 넘치지 않는다
  test("교수자 홈은 가로 오버플로 없이 전부 담긴다", async ({ page }) => {
    await openTeachHome(page);
    await expectNoHorizontalOverflow(page);
  });

  // usecase: 스크린리더를 쓰는 교수자가 헤딩으로 검토 대기 현황을 파악한다
  test("교수자 홈은 h1 하나로 시작하는 논리적 헤딩 구조를 가진다", async ({ page }) => {
    await openTeachHome(page);
    await expectHeadingStructure(page, "teach-home");
  });

  // usecase: 키보드를 쓰는 교수자가 Tab 으로 대시보드 액션에 도달하고 포커스를 확인한다
  test("교수자 홈에서 Tab 순회 시 포커스 표시가 눈에 보인다", async ({ page }) => {
    await openTeachHome(page);
    await expectFocusVisibleOnTab(page, "teach-home", 8);
  });
});