import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

class WebVitalsMonitor {
  constructor() {
    this.metrics = {};
    this.thresholds = {
      FCP: 1800,  // First Contentful Paint
      LCP: 2500,  // Largest Contentful Paint
      FID: 100,   // First Input Delay
      CLS: 0.1,   // Cumulative Layout Shift
      TTFB: 800   // Time To First Byte
    };
  }

  // Initialize monitoring
  init() {
    if (typeof window === 'undefined') return;

    // Track all Core Web Vitals
    getCLS(this.handleMetric.bind(this));
    getFID(this.handleMetric.bind(this));
    getFCP(this.handleMetric.bind(this));
    getLCP(this.handleMetric.bind(this));
    getTTFB(this.handleMetric.bind(this));
  }

  handleMetric(metric) {
    this.metrics[metric.name] = metric.value;
    
    // Check against thresholds
    const threshold = this.thresholds[metric.name];
    const isGood = metric.value <= threshold;
    
    // Log to console in development
    if (process.env.NODE_ENV === 'development') {
      console.log(`%c${metric.name}: ${metric.value.toFixed(2)}ms`, 
        `color: ${isGood ? 'green' : 'red'}; font-weight: bold`);
    }

    // Send to analytics in production
    if (process.env.NODE_ENV === 'production') {
      this.sendToAnalytics(metric);
    }

    // Show warning overlay in development if threshold exceeded
    if (!isGood && process.env.NODE_ENV === 'development') {
      this.showPerformanceWarning(metric, threshold);
    }
  }

  sendToAnalytics(metric) {
    // Send to your analytics service
    fetch('/api/analytics/performance', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        metric: metric.name,
        value: metric.value,
        url: window.location.pathname,
        timestamp: Date.now()
      })
    });
  }

  showPerformanceWarning(metric, threshold) {
    // Create visual warning overlay for development
    const warning = document.createElement('div');
    warning.style.cssText = `
      position: fixed;
      top: 10px;
      right: 10px;
      background: #ff4444;
      color: white;
      padding: 10px;
      border-radius: 5px;
      z-index: 9999;
      font-family: monospace;
    `;
    warning.innerHTML = `
      ⚠️ Performance Warning

      ${metric.name}: ${metric.value.toFixed(2)}ms

      Threshold: ${threshold}ms
    `;
    
    document.body.appendChild(warning);
    
    // Remove after 5 seconds
    setTimeout(() => warning.remove(), 5000);
  }
}

export default WebVitalsMonitor;

import WebVitalsMonitor from '../utils/webVitals';
import { useEffect } from 'react';

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const monitor = new WebVitalsMonitor();
    monitor.init();
  }, []);

  return ;
}

{
  "budgets": [
    {
      "type": "all",
      "maximumWarning": "300kb",
      "maximumError": "500kb"
    },
    {
      "type": "bundle",
      "name": "main",
      "maximumWarning": "250kb",
      "maximumError": "350kb"
    },
    {
      "type": "initial",
      "maximumWarning": "200kb",
      "maximumError": "300kb"
    }
  ],
  "metrics": {
    "firstContentfulPaint": {
      "warning": 1500,
      "error": 2000
    },
    "largestContentfulPaint": {
      "warning": 2500,
      "error": 3000
    },
    "totalBlockingTime": {
      "warning": 300,
      "error": 600
    }
  }
}

const performanceBudget = require('./performance-budget.json');

module.exports = {
  // ... other config
  performance: {
    hints: 'error',
    maxAssetSize: 350000, // 350KB
    maxEntrypointSize: 350000,
    assetFilter: function(assetFilename) {
      // Only check JS and CSS files
      return assetFilename.endsWith('.js') || assetFilename.endsWith('.css');
    }
  },
  plugins: [
    // Budget enforcement plugin
    new (class BudgetEnforcementPlugin {
      apply(compiler) {
        compiler.hooks.afterEmit.tap('BudgetEnforcementPlugin', (compilation) => {
          const assets = compilation.getAssets();
          const budgets = performanceBudget.budgets;
          
          budgets.forEach(budget => {
            const relevantAssets = assets.filter(asset => {
              if (budget.type === 'all') return true;
              if (budget.type === 'bundle') return asset.name.includes(budget.name);
              if (budget.type === 'initial') return !asset.name.includes('chunk');
              return false;
            });

            const totalSize = relevantAssets.reduce((sum, asset) => sum + asset.size, 0);
            const budgetSize = this.parseSize(budget.maximumError);

            if (totalSize > budgetSize) {
              throw new Error(
                `Budget exceeded for ${budget.type}: ${totalSize} > ${budgetSize}`
              );
            }
          });
        });
      }

      parseSize(sizeStr) {
        const match = sizeStr.match(/^(\d+)(kb|mb)$/i);
        if (!match) return 0;
        const [, size, unit] = match;
        return parseInt(size) * (unit.toLowerCase() === 'mb' ? 1024 * 1024 : 1024);
      }
    })()
  ]
};

#!/bin/bash
# .husky/pre-commit

echo "🔍 Running performance checks..."

# 1. Bundle size check
echo "📦 Checking bundle size..."
npm run build:analyze > /dev/null 2>&1
if [ $? -ne 0 ]; then
  echo "❌ Bundle size check failed"
  exit 1
fi

# 2. Run performance script
node scripts/performance-check.js
if [ $? -ne 0 ]; then
  echo "❌ Performance check failed"
  exit 1
fi

echo "✅ All performance checks passed!"

const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');

class PerformanceChecker {
  constructor() {
    this.config = require('../performance-budget.json');
    this.errors = [];
    this.warnings = [];
  }

  async runChecks() {
    console.log('🚀 Running performance checks...\n');

    // 1. Bundle size analysis
    await this.checkBundleSize();
    
    // 2. Dependency bloat check
    await this.checkDependencyBloat();
    
    // 3. Anti-pattern scan
    await this.scanAntiPatterns();
    
    // 4. Image audit
    await this.auditImages();

    this.printResults();
    
    if (this.errors.length > 0) {
      process.exit(1);
    }
  }

  async checkBundleSize() {
    try {
      // Build and analyze bundle
      execSync('npm run build', { stdio: 'pipe' });
      
      const statsPath = path.join(__dirname, '../dist/stats.json');
      if (fs.existsSync(statsPath)) {
        const stats = JSON.parse(fs.readFileSync(statsPath, 'utf8'));
        const totalSize = stats.assets.reduce((sum, asset) => sum + asset.size, 0);
        
        if (totalSize > 500000) { // 500KB
          this.errors.push(`Bundle too large: ${(totalSize / 1024).toFixed(2)}KB`);
        } else if (totalSize > 300000) { // 300KB
          this.warnings.push(`Bundle approaching limit: ${(totalSize / 1024).toFixed(2)}KB`);
        }
      }
    } catch (error) {
      this.errors.push('Bundle build failed');
    }
  }

  async checkDependencyBloat() {
    const packageJson = require('../package.json');
    const dependencies = { ...packageJson.dependencies, ...packageJson.devDependencies };
    
    // Check for known heavy dependencies
    const heavyDeps = [
      'moment', 'lodash', 'axios', 'babel-polyfill'
    ];
    
    heavyDeps.forEach(dep => {
      if (dependencies[dep]) {
        this.warnings.push(`Consider lighter alternative to ${dep}`);
      }
    });

    // Check total dependency count
    const totalDeps = Object.keys(dependencies).length;
    if (totalDeps > 100) {
      this.warnings.push(`High dependency count: ${totalDeps}`);
    }
  }

  async scanAntiPatterns() {
    const srcPath = path.join(__dirname, '../src');
    const files = this.getFiles(srcPath, ['.js', '.jsx', '.ts', '.tsx']);
    
    files.forEach(file => {
      const content = fs.readFileSync(file, 'utf8');
      
      // Check for performance anti-patterns
      if (content.includes('import * as')) {
        this.warnings.push(`Barrel import found in ${file}`);
      }
      
      if (content.includes('useEffect(() => {') && content.includes('[]') === false) {
        this.warnings.push(`Missing dependency array in ${file}`);
      }
      
      if (content.match(/\.map\(.*\.map\(/)) {
        this.warnings.push(`Nested map operations in ${file}`);
      }
    });
  }

  async auditImages() {
    const publicPath = path.join(__dirname, '../public');
    if (!fs.existsSync(publicPath)) return;
    
    const images = this.getFiles(publicPath, ['.jpg', '.jpeg', '.png', '.gif']);
    
    images.forEach(image => {
      const stats = fs.statSync(image);
      const sizeMB = stats.size / (1024 * 1024);
      
      if (sizeMB > 1) {
        this.errors.push(`Large image: ${image} (${sizeMB.toFixed(2)}MB)`);
      } else if (sizeMB > 0.5) {
        this.warnings.push(`Consider optimizing: ${image} (${sizeMB.toFixed(2)}MB)`);
      }
    });
  }

  getFiles(dir, extensions) {
    let files = [];
    const items = fs.readdirSync(dir);
    
    for (const item of items) {
      const fullPath = path.join(dir, item);
      const stat = fs.statSync(fullPath);
      
      if (stat.isDirectory()) {
        files = files.concat(this.getFiles(fullPath, extensions));
      } else if (extensions.some(ext => item.endsWith(ext))) {
        files.push(fullPath);
      }
    }
    
    return files;
  }

  printResults() {
    console.log('\n📊 Performance Check Results:\n');
    
    if (this.errors.length === 0 && this.warnings.length === 0) {
      console.log('✅ All checks passed!');
      return;
    }
    
    if (this.errors.length > 0) {
      console.log('❌ Errors:');
      this.errors.forEach(error => console.log(`  • ${error}`));
      console.log('');
    }
    
    if (this.warnings.length > 0) {
      console.log('⚠️  Warnings:');
      this.warnings.forEach(warning => console.log(`  • ${warning}`));
      console.log('');
    }
  }
}

// Run the checker
new PerformanceChecker().runChecks();

name: Performance Audit

on:
  pull_request:
    branches: [main]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Build app
        run: npm run build
        
      - name: Start server
        run: |
          npm run start &
          sleep 10
          
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.12.x
          lhci autorun
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
          
      - name: Upload results
        uses: actions/upload-artifact@v3
        with:
          name: lighthouse-results
          path: .lighthouseci/

module.exports = {
  ci: {
    collect: {
      url: [
        'http://localhost:3000',
        'http://localhost:3000/dashboard',
        'http://localhost:3000/pricing'
      ],
      numberOfRuns: 3,
      settings: {
        chromeFlags: '--no-sandbox --headless'
      }
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 0.95 }],
        'categories:best-practices': ['error', { minScore: 0.95 }],
        'categories:seo': ['warn', { minScore: 0.85 }],
        
        // Core Web Vitals
        'first-contentful-paint': ['error', { maxNumericValue: 1500 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
        'total-blocking-time': ['error', { maxNumericValue: 300 }],
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
        
        // Resource optimization
        'unused-javascript': ['warn', { maxNumericValue: 20000 }],
        'unused-css-rules': ['warn', { maxNumericValue: 20000 }],
        'modern-image-formats': 'error',
        'uses-optimized-images': 'error',
        'uses-text-compression': 'error'
      }
    },
    upload: {
      target: 'temporary-public-storage'
    }
  }
};

{
  "scripts": {
    "analyze": "node scripts/analyze-bundle.js",
    "build:analyze": "npm run build && npm run analyze",
    "performance:check": "node scripts/performance-check.js",
    "performance:monitor": "node scripts/web-vitals-monitor.js"
  }
}