name: ESLint Check

on:
  pull_request:
    branches: [ '*' ]
    paths:
      - 'frontend/**/*.ts'
      - 'frontend/**/*.tsx'
      - 'frontend/eslint.config.js'
      - 'frontend/tsconfig*.json'
      - 'frontend/package.json'
      - '.github/workflows/eslint-check.yml'

jobs:
  eslint-check:
    name: ESLint TypeScript Check
    runs-on: ubuntu-latest

    permissions:
      pull-requests: write
      contents: read

    defaults:
      run:
        working-directory: frontend

    steps:
    - name: Checkout code
      uses: actions/checkout@v4

    - name: Setup Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '20'
        cache: 'npm'
        cache-dependency-path: frontend/package-lock.json

    - name: Install dependencies
      run: npm install

    - name: Run ESLint
      id: eslint_check
      run: |
        echo "Running ESLint on TypeScript/React files..."
        if npm run lint:eslint > eslint-output.txt 2>&1; then
          echo "ESLINT_PASSED=true" >> $GITHUB_ENV
          echo "✅ No ESLint errors found!"
          echo "ERROR_COUNT=0" >> $GITHUB_ENV
        else
          echo "ESLINT_PASSED=false" >> $GITHUB_ENV
          # Count error lines (lines that contain file paths with problems)
          error_count=$(grep -c "^/" eslint-output.txt || echo "0")
          echo "ERROR_COUNT=$error_count" >> $GITHUB_ENV
          echo "⚠️ ESLint found issues in $error_count files!"
        fi
        cat eslint-output.txt
      continue-on-error: true

    - name: Create ESLint Summary
      id: create_summary
      if: github.event_name == 'pull_request'
      run: |
        {
          echo '## 🔍 ESLint Results'
          echo ''

          if [[ "${{ env.ESLINT_PASSED }}" == "true" ]]; then
            echo '### ✅ **Perfect! No ESLint issues found** 🎉'
            echo ''
            echo 'Your TypeScript and React code follows all the coding standards perfectly!'
            echo ''
            echo '**What was checked:**'
            echo '- TypeScript strict type checking and stylistic rules'
            echo '- React component patterns and hooks usage'
            echo '- Code complexity, naming conventions, and best practices'
            echo '- Accessibility (jsx-a11y) and React Refresh compatibility'
          else
            echo '### ❌ **ESLint found issues in ${{ env.ERROR_COUNT }} files**'
            echo ''
            echo 'Please review and fix the TypeScript/React issues below:'
            echo ''
            echo '<details><summary>📋 View detailed ESLint output</summary>'
            echo ''
            echo '```'
            head -100 eslint-output.txt
            echo '```'
            echo '</details>'
            echo ''
            echo '**How to fix:**'
            echo '1. Run `cd frontend && npm run lint:eslint` locally to see the issues'
            echo '2. Fix the reported TypeScript, React, and code quality problems'
            echo '3. For auto-fixable issues: `cd frontend && npx eslint . --ext .ts,.tsx --fix`'
            echo '4. Push your changes to update this PR'
          fi
          echo ''
          echo '**Commands:**'
          echo '- `cd frontend && npm run lint:eslint` - Run ESLint'
          echo '- `cd frontend && npx eslint . --ext .ts,.tsx --fix` - Auto-fix issues'
          echo '- ESLint config: `frontend/eslint.config.js`'
          echo ''
          echo '<!-- eslint-check-comment-marker -->'
        } > eslint-report.md

    - name: Post PR Comment
      if: github.event_name == 'pull_request'
      uses: peter-evans/create-or-update-comment@v4
      with:
        issue-number: ${{ github.event.pull_request.number }}
        body-path: frontend/eslint-report.md
        edit-mode: replace

    - name: Exit with proper code
      run: |
        if [[ "${{ env.ESLINT_PASSED }}" == "false" ]]; then
          echo "❌ ESLint checks failed. Please fix the issues above."
          exit 1
        else
          echo "✅ All ESLint checks passed!"
          exit 0
        fi