Thumbnail Designer Agent

async generateThumbnail(script) {
  this.logger.info(`Generating thumbnail for: ${script.title}`);
  
  // Generate thumbnail concept
  const concept = await this.generateConcept(script);
  
  // Create thumbnail prompt for AI generation
  const prompt = await this.createPrompt(concept);
  
  // Generate base thumbnail
  const thumbnailPath = await this.createThumbnail(concept);
  
  // Add text overlay
  const finalThumbnail = await this.addTextOverlay(thumbnailPath, concept);
  
  // Optimize for YouTube
  const optimizedThumbnail = await this.optimizeForYouTube(finalThumbnail);
  
  const thumbnailData = {
    path: optimizedThumbnail,
    concept,
    prompt,
    dimensions: { width: 1280, height: 720 },
    fileSize: await this.getFileSize(optimizedThumbnail),
    createdAt: new Date().toISOString()
  };
  
  await this.db.saveThumbnail(thumbnailData);
  return thumbnailData;
}

async generateConcept(script) {
  const concepts = {
    tutorial: {
      style: 'clean',
      elements: ['step numbers', 'arrows', 'progress indicators'],
      colors: ['blue', 'white', 'green'],
      emotion: 'helpful'
    },
    // ... other templates
  };

  const baseConcept = concepts[script.metadata?.strategy?.contentType?.toLowerCase()] 
    || concepts.explainer;
  
  return {
    title: this.formatThumbnailTitle(script.title),
    style: baseConcept.style,
    primaryText: this.extractPrimaryText(script.title),
    secondaryText: this.generateSecondaryText(script),
    elements: baseConcept.elements,
    colors: {
      primary: baseConcept.colors[0],
      secondary: baseConcept.colors[1],
      accent: baseConcept.colors[2]
    },
    emotion: baseConcept.emotion,
    composition: this.selectComposition(),
    effects: this.selectEffects()
  };
}

extractPrimaryText(title) {
  // Extract most impactful words
  const impactWords = ['ultimate', 'complete', 'secret', 'truth', 
                       'how', 'why', 'best', 'top', 'guide', 'master'];
  const titleWords = title.toLowerCase().split(' ');
  
  const foundImpactWords = titleWords.filter(word => impactWords.includes(word));
  
  if (foundImpactWords.length > 0) {
    return foundImpactWords[0].toUpperCase();
  }
  
  // Extract numbers if present
  const numbers = title.match(/\d+/);
  if (numbers) {
    return numbers[0];
  }
  
  // Use first significant word
  return titleWords.find(word => word.length > 4)?.toUpperCase() || 'WATCH';
}

async addTextOverlay(imagePath, concept) {
  const outputPath = path.join(__dirname, '..', 'uploads', 'thumbnails', 
                               `thumbnail_final_${Date.now()}.png`);
  
  // Create text overlay SVG
  const textSvg = `
    <svg width="1280" height="720">
      <style>
        .primary { 
          fill: ${concept.colors.accent === 'white' ? 'white' : 'black'}; 
          font-size: 120px; 
          font-weight: bold; 
          font-family: Arial, sans-serif;
          text-anchor: middle;
        }
        .secondary { 
          fill: ${concept.colors.accent}; 
          font-size: 60px; 
          font-weight: bold; 
          font-family: Arial, sans-serif;
          text-anchor: middle;
        }
        .shadow {
          fill: black;
          opacity: 0.5;
        }
      </style>
      
      <!-- Shadow for readability -->
      <text x="642" y="302" class="primary shadow">${concept.primaryText}</text>
      <text x="642" y="402" class="secondary shadow">${concept.secondaryText}</text>
      
      <!-- Main text -->
      <text x="640" y="300" class="primary">${concept.primaryText}</text>
      <text x="640" y="400" class="secondary">${concept.secondaryText}</text>
    </svg>
  `;
  
  const textOverlay = await sharp(Buffer.from(textSvg)).png().toBuffer();
  
  await sharp(imagePath)
    .composite([{
      input: textOverlay,
      top: 0,
      left: 0
    }])
    .toFile(outputPath);
  
  return outputPath;
}

selectComposition() {
  const compositions = [
    'rule-of-thirds',  // Classic photography technique
    'centered',        // Direct and impactful
    'diagonal',        // Dynamic and energetic
    'golden-ratio',    // Aesthetically pleasing
    'symmetrical'      // Balanced and professional
  ];
  
  return compositions[Math.floor(Math.random() * compositions.length)];
}

selectEffects() {
  return {
    blur: Math.random() > 0.5,      // Background blur for depth
    vignette: Math.random() > 0.7,   // Edge darkening for focus
    glow: Math.random() > 0.6,       // Text glow for pop
    shadow: true,                     // Always include text shadow
    border: Math.random() > 0.8      // Occasional border accent
  };
}

async optimizeForYouTube(imagePath) {
  const outputPath = path.join(__dirname, '..', 'uploads', 'thumbnails', 
                               `thumbnail_optimized_${Date.now()}.jpg`);
  
  // YouTube optimization: JPEG format, proper compression
  await sharp(imagePath)
    .resize(1280, 720, {
      fit: 'cover',
      position: 'centre'
    })
    .jpeg({
      quality: 90,
      progressive: true,
      optimizeScans: true
    })
    .toFile(outputPath);
  
  // Verify file size (YouTube limit is 2MB)
  const stats = await fs.stat(outputPath);
  if (stats.size > 2 * 1024 * 1024) {
    // Re-compress if too large
    await sharp(imagePath)
      .resize(1280, 720)
      .jpeg({ quality: 80 })
      .toFile(outputPath);
  }
  
  return outputPath;
}

async generateABVariants(concept) {
  const variants = [];
  
  // Variant 1: Different color scheme
  const variant1 = { ...concept };
  variant1.colors = {
    primary: concept.colors.secondary,
    secondary: concept.colors.primary,
    accent: concept.colors.accent
  };
  variants.push(await this.createThumbnail(variant1));
  
  // Variant 2: Different text
  const variant2 = { ...concept };
  variant2.primaryText = this.generateAlternativeText(concept.primaryText);
  variants.push(await this.createThumbnail(variant2));
  
  // Variant 3: Different composition
  const variant3 = { ...concept };
  variant3.composition = 'centered';
  variants.push(await this.createThumbnail(variant3));
  
  return variants;
}

# Default thumbnail style (clean|bold|minimal|dramatic)
THUMBNAIL_STYLE=bold

# Enable AI image generation for backgrounds
USE_AI_BACKGROUNDS=true

# Text shadow opacity (0.0 - 1.0)
TEXT_SHADOW_OPACITY=0.5

# JPEG quality (60-100)
THUMBNAIL_QUALITY=90