const VisualComparisonEngine = require('visual-regression-engine');
const { loadImage } = require('canvas');

const engine = new VisualComparisonEngine({
  threshold: 0.1,              // Pixel difference threshold (0-1)
  maxTotalDiffPixels: 100,     // Maximum allowed different pixels
  minClusterSize: 5,           // Minimum cluster size to be considered significant
  maxSignificantClusters: 3,   // Maximum allowed significant clusters
  maxSide: 800,               // Resize images to max dimension
  backgroundColor: [255, 255, 255, 255] // Background color for standardization
});

async function compareImages() {
  const actualImage = await loadImage('path/to/actual.png');
  const expectedImage = await loadImage('path/to/expected.png');
  
  const result = await engine.compare(actualImage, expectedImage);
  
  if (result.ok) {
    console.log('✅ Images match within tolerance');
  } else {
    console.log('❌ Images differ significantly');
    console.log(`Total different pixels: ${result.diffCount}`);
    console.log(`Significant different pixels: ${result.details.significantDiffPixels}`);
    console.log(`Significant clusters: ${result.details.analysis.significantClusters}`);
  }
}

compareImages();

{
  ok: boolean,                    // Whether images match within tolerance
  diffCount: number,              // Total number of different pixels
  diffImageData: ImageData,       // Visual diff highlighting differences
  details: {
    totalDiffPixels: number,      // Same as diffCount
    significantDiffPixels: number,// Pixels in significant clusters only
    clusters: Array,              // Array of detected clusters
    analysis: {                   // Detailed cluster analysis
      clusters: Array,
      significantClusters: number,
      significantPixels: number,
      totalClusters: number
    }
  }
}

const VisualComparisonEngine = require('visual-regression-engine');
const { loadImage, createCanvas } = require('canvas');
const fs = require('fs').promises;
const path = require('path');

class TestSuite {
  constructor() {
    this.engine = new VisualComparisonEngine({
      threshold: 0.1,
      maxTotalDiffPixels: 50,
      minClusterSize: 4,
    });
  }

  async runTests() {
    const referenceDir = './test/reference';
    const actualDir = './test/actual';
    const diffOutputDir = './test/diff-output';

    await fs.mkdir(diffOutputDir, { recursive: true });

    const files = await fs.readdir(referenceDir);
    const results = [];

    for (const file of files.filter(f => /\.(png|jpg)$/i.test(f))) {
      const refImage = await loadImage(path.join(referenceDir, file));
      const actualImage = await loadImage(path.join(actualDir, file));
      
      const result = await this.engine.compare(refImage, actualImage);
      results.push({ file, ...result });

      if (!result.ok) {
        await this.saveDiffImage(result.diffImageData, 
          path.join(diffOutputDir, `diff-${file}`));
      }
    }

    return results;
  }

  async saveDiffImage(imageData, outputPath) {
    const canvas = createCanvas(imageData.width, imageData.height);
    const ctx = canvas.getContext('2d');
    ctx.putImageData(imageData, 0, 0);
    
    const buffer = canvas.toBuffer('image/png');
    await fs.writeFile(outputPath, buffer);
  }
}

// High precision for critical UI elements
const strictEngine = new VisualComparisonEngine({
  threshold: 0.05,
  maxTotalDiffPixels: 10,
  minClusterSize: 2
});

// Relaxed settings for creative/generative content
const creativeEngine = new VisualComparisonEngine({
  threshold: 0.2,
  maxTotalDiffPixels: 500,
  minClusterSize: 10,
  lineShiftThreshold: 0.9 // More tolerant of line shifts
});