import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

// Custom IGNY8 Design System plugin
// See: docs/30-FRONTEND/COMPONENT-SYSTEM.md for full documentation
import igny8DesignSystem from './eslint/eslint-plugin-igny8-design-system.cjs'

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      'igny8-design-system': igny8DesignSystem,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      // =====================================================
      // IGNY8 DESIGN SYSTEM ENFORCEMENT
      // These rules prevent inconsistent component usage
      // =====================================================
      
      // Prevent direct imports from icon libraries - must use src/icons
      'no-restricted-imports': ['error', {
        patterns: [
          {
            group: ['@heroicons/*', 'lucide-react', '@mui/icons-material', 'react-icons/*'],
            message: 'Import icons from src/icons instead. Add new icons to src/icons/index.ts if needed.'
          }
        ]
      }],
      
      // IGNY8 Design System Rules - Set to 'warn' initially, change to 'error' after fixing existing code
      // These will show warnings for all raw HTML elements that should use components
      'igny8-design-system/no-raw-button': 'warn',
      'igny8-design-system/no-raw-input': 'warn', 
      'igny8-design-system/no-raw-select': 'warn',
      'igny8-design-system/no-raw-textarea': 'warn',
      // Button icon positioning - icons as children cause vertical stacking, use startIcon/endIcon props
      'igny8-design-system/no-icon-children': 'warn',
      // Disallow Tailwind default color utilities (blue/pink/emerald/info, etc.)
      'igny8-design-system/no-tailwind-default-colors': 'warn',
    },
  },
)