// @ts-check
import js from "@eslint/js";
import tseslint from "typescript-eslint";
import reactHooks from "eslint-plugin-react-hooks";
import jsxA11y from "eslint-plugin-jsx-a11y";
import globals from "globals";

export default tseslint.config(
  { ignores: ["dist/", "playwright-report/", "test-results/", "node_modules/"] },
  js.configs.recommended,
  ...tseslint.configs.recommended,
  reactHooks.configs.flat.recommended,
  jsxA11y.flatConfigs.recommended,
  {
    files: ["src/**/*.{ts,tsx}"],
    languageOptions: { globals: { ...globals.browser } },
    rules: {
      // Hook dependency mistakes are real bugs in this codebase's data-loading effects.
      "react-hooks/exhaustive-deps": "error",
      // The React Compiler-oriented rules in react-hooks v7 flag the classic
      // "reset state, then fetch in an effect" data-loading pattern this React 18 app
      // uses deliberately; they are not bugs here.
      "react-hooks/set-state-in-effect": "off",
      "react-hooks/purity": "off",
      "react-hooks/refs": "off",
      // Choice cards wrap the input and put the visible text two spans deep.
      "jsx-a11y/label-has-associated-control": ["error", { depth: 3 }],
      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_", varsIgnorePattern: "^_" }],
    },
  },
  {
    files: ["e2e/**/*.ts", "*.config.ts"],
    languageOptions: { globals: { ...globals.node } },
  },
);