import globals from 'globals';
import tseslint from 'typescript-eslint';
import pluginReact from 'eslint-plugin-react';
import pluginReactHooks from 'eslint-plugin-react-hooks';
import pluginPrettier from 'eslint-plugin-prettier';
import eslintConfigPrettier from 'eslint-config-prettier';
import pluginI18next from 'eslint-plugin-i18next';

export default [
  {
    ignores: ['dist', 'node_modules'],
  },
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    plugins: {
      react: pluginReact,
      'react-hooks': pluginReactHooks,
      prettier: pluginPrettier,
      i18next: pluginI18next,
    },
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.es2021,
      },
      parser: tseslint.parser,
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    rules: {
      ...pluginReact.configs.recommended.rules,
      ...pluginReactHooks.configs.recommended.rules,
      ...eslintConfigPrettier.rules,
      'prettier/prettier': 'error',
      'react/react-in-jsx-scope': 'off',
      'react/prop-types': 'off', // Disable prop-types validation since we use TypeScript interfaces
      // i18n rules
      'i18next/no-literal-string': [
        'error',
        {
          ignore: [
            // Common UI strings that are typically not translated
            'div',
            'span',
            'p',
            'h1',
            'h2',
            'h3',
            'h4',
            'h5',
            'h6',
            'button',
            'input',
            'label',
            'form',
            'section',
            'article',
            'header',
            'footer',
            'nav',
            'main',
            'aside',
            // Common attribute values
            'submit',
            'button',
            'text',
            'email',
            'password',
            'search',
            'checkbox',
            'radio',
            'select',
            'textarea',
            // CSS classes and IDs (allow kebab-case and camelCase)
            /^[a-zA-Z][\w-]*$/,
            // Common symbols and punctuation
            /^[.,!?;:()[\]{}+\-*/=<>|&%@#$^~`'"\\]+$/,
            // Numbers
            /^\d+$/,
            // Empty strings
            '',
            // Common boolean strings
            'true',
            'false',
            // Common size/position strings
            'sm',
            'md',
            'lg',
            'xl',
            'left',
            'right',
            'center',
            'top',
            'bottom',
            'start',
            'end',
            'auto',
            // Common React/prop values
            'children',
            'props',
            'state',
            'params',
          ],
          ignoreAttribute: [
            'className',
            'class',
            'id',
            'name',
            'type',
            'value',
            'placeholder',
            'alt',
            'title',
            'aria-label',
            'aria-describedby',
            'data-testid',
            'data-cy',
            'key',
            'ref',
            'style',
            'role',
            'tabIndex',
          ],
          ignoreCallee: ['t', 'useTranslation', 'i18n.t'],
          ignoreProperty: ['children', 'dangerouslySetInnerHTML'],
        },
      ],
    },
    settings: {
      react: {
        version: 'detect',
      },
      i18next: {
        locales: ['en', 'ru', 'tt'],
        localeFiles: ['./locales/en.ts', './locales/ru.ts', './locales/tt.ts'],
        localePath: './locales',
        nsSeparator: ':',
        keySeparator: '.',
      },
    },
  },
  ...tseslint.configs.recommended,
];