// Icon generation script for PWA
// This script creates SVG icons and PNG versions using canvas (Node.js)
// For production PWA support, especially on iOS

const fs = require('fs');
const path = require('path');

// Create SVG icon with proper structure
function createSVGIcon(size, outputPath) {
  const cornerRadius = size * 0.25;
  const checkStartX = size * 0.3;
  const checkStartY = size * 0.5;
  const checkMidX = size * 0.45;
  const checkMidY = size * 0.65;
  const checkEndX = size * 0.7;
  const checkEndY = size * 0.35;
  const strokeWidth = size * 0.08;
  
  const line1X = size * 0.25;
  const line1Y = size * 0.6;
  const line1Width = size * 0.5;
  const line1Height = size * 0.08;
  const lineRadius = size * 0.02;
  
  const line2X = size * 0.25;
  const line2Y = size * 0.72;
  const line2Width = size * 0.4;
  const line2Height = size * 0.08;

  const svg = `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
  <rect width="${size}" height="${size}" rx="${cornerRadius}" fill="#3B82F6"/>
  <path d="M${checkStartX} ${checkStartY}L${checkMidX} ${checkMidY}L${checkEndX} ${checkEndY}" 
        stroke="white" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round"/>
  <rect x="${line1X}" y="${line1Y}" width="${line1Width}" height="${line1Height}" rx="${lineRadius}" fill="white"/>
  <rect x="${line2X}" y="${line2Y}" width="${line2Width}" height="${line2Height}" rx="${lineRadius}" fill="white"/>
</svg>`;

  fs.writeFileSync(outputPath, svg);
  console.log(`✓ Created ${path.basename(outputPath)}`);
  return svg;
}

// Create a simple favicon SVG
function createFaviconSVG(outputPath) {
  const svg = `<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <rect width="32" height="32" rx="8" fill="#3B82F6"/>
  <path d="M9.6 16L14.4 20.8L22.4 11.2" 
        stroke="white" stroke-width="2.56" stroke-linecap="round" stroke-linejoin="round"/>
  <rect x="8" y="19.2" width="16" height="2.56" rx="0.64" fill="white"/>
  <rect x="8" y="23.04" width="12.8" height="2.56" rx="0.64" fill="white"/>
</svg>`;

  fs.writeFileSync(outputPath, svg);
  console.log(`✓ Created ${path.basename(outputPath)}`);
}

// Main execution
const publicDir = path.join(__dirname, '..', 'public');

console.log('Generating PWA icons...\n');

// Create SVG icons
createSVGIcon(192, path.join(publicDir, 'icon-192.svg'));
createSVGIcon(512, path.join(publicDir, 'icon-512.svg'));
createSVGIcon(180, path.join(publicDir, 'apple-touch-icon.svg'));
createFaviconSVG(path.join(publicDir, 'favicon.svg'));

console.log('\n✓ All SVG icons generated successfully!');
console.log('\nFor optimal PWA support (especially iOS), convert SVGs to PNG:');
console.log('  1. Using online tools: https://cloudconvert.com/svg-to-png');
console.log('  2. Using ImageMagick: convert icon-192.svg icon-192.png');
console.log('  3. Using design tools: Figma, Sketch, or Adobe Illustrator');
console.log('\nRequired PNG files:');
console.log('  - icon-192.png (192x192)');
console.log('  - icon-512.png (512x512)');
console.log('  - apple-touch-icon.png (180x180)');
console.log('  - favicon.ico (32x32, multi-size)');
console.log('\nNote: iOS Safari requires PNG format for apple-touch-icon.');