#!/usr/bin/env node
import puppeteer from 'puppeteer';
import { execSync } from 'child_process';
import path from 'path';
import { fileURLToPath } from 'url';
import fs from 'fs';
import { mcpConfigs } from './mcp-configs.js';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

// Only generate for IDs that don't have MP4s yet
const existingMp4s = fs.readdirSync(path.join(__dirname, 'output'))
  .filter(f => f.endsWith('.mp4'))
  .map(f => f.replace('.mp4', ''));

const newConfigs = mcpConfigs.filter(c => !existingMp4s.includes(c.id));
console.log(`Found ${newConfigs.length} new configs to generate (skipping ${existingMp4s.length} existing)`);
console.log('New:', newConfigs.map(c => c.id).join(', '));

function generateHTML(config) {
  const { name, color, question, statLabel, statValue, statLabel2, statValue2, rows, insight } = config;
  
  return `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=1920, height=1080">
  <title>${name} MCP Demo</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #0a0a12;
      --card: #12121c;
      --border: rgba(255,255,255,0.08);
      --text: #ffffff;
      --text-dim: #888;
      --accent: ${color};
      --gradient: linear-gradient(135deg, #667eea, #764ba2);
      --green: #22c55e;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Inter', -apple-system, sans-serif;
      background: var(--bg);
      width: 1920px;
      height: 1080px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .scene {
      width: 1920px;
      height: 1080px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(ellipse at 50% 0%, ${color}15 0%, transparent 60%);
    }
    .chat-window {
      width: 900px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 50px 100px rgba(0,0,0,0.5);
    }
    .chat-header {
      padding: 20px 28px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .chat-header .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
    .chat-header span { font-size: 15px; font-weight: 600; color: var(--text-dim); }
    .messages { padding: 28px; display: flex; flex-direction: column; gap: 20px; }
    .msg {
      padding: 16px 20px;
      border-radius: 16px;
      font-size: 15px;
      line-height: 1.5;
      max-width: 85%;
      opacity: 0;
      transform: translateY(10px);
    }
    .user-msg {
      background: var(--accent);
      color: white;
      align-self: flex-end;
      border-bottom-right-radius: 4px;
      animation: fadeUp 0.5s ease forwards 0.3s;
    }
    .ai-msg {
      background: rgba(255,255,255,0.05);
      color: var(--text);
      align-self: flex-start;
      border-bottom-left-radius: 4px;
      animation: fadeUp 0.5s ease forwards 1s;
    }
    .stat-card {
      display: flex;
      gap: 24px;
      margin: 12px 0;
      opacity: 0;
      animation: fadeUp 0.5s ease forwards 1.5s;
    }
    .stat {
      background: rgba(255,255,255,0.05);
      padding: 14px 20px;
      border-radius: 12px;
      flex: 1;
      border: 1px solid var(--border);
    }
    .stat-label { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
    .stat-value { font-size: 28px; font-weight: 700; color: var(--accent); }
    .data-row {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      font-size: 14px;
      opacity: 0;
    }
    .data-row:nth-child(1) { animation: fadeUp 0.4s ease forwards 2s; }
    .data-row:nth-child(2) { animation: fadeUp 0.4s ease forwards 2.3s; }
    .data-row:nth-child(3) { animation: fadeUp 0.4s ease forwards 2.6s; }
    .data-row .label { color: var(--text); }
    .data-row .value { color: var(--text-dim); }
    .insight {
      margin-top: 16px;
      padding: 14px 18px;
      background: linear-gradient(135deg, ${color}15, ${color}05);
      border-left: 3px solid var(--accent);
      border-radius: 0 12px 12px 0;
      font-size: 13px;
      color: var(--text-dim);
      line-height: 1.5;
      opacity: 0;
      animation: fadeUp 0.5s ease forwards 3s;
    }
    .insight strong { color: var(--green); }
    @keyframes fadeUp {
      to { opacity: 1; transform: translateY(0); }
    }
  </style>
</head>
<body>
  <div class="scene">
    <div class="chat-window">
      <div class="chat-header">
        <div class="dot"></div>
        <span>${name} MCP</span>
      </div>
      <div class="messages">
        <div class="msg user-msg">${question}</div>
        <div class="msg ai-msg">
          <div class="stat-card">
            <div class="stat">
              <div class="stat-label">${statLabel}</div>
              <div class="stat-value">${statValue}</div>
            </div>
            <div class="stat">
              <div class="stat-label">${statLabel2}</div>
              <div class="stat-value">${statValue2}</div>
            </div>
          </div>
          ${rows.map(r => `<div class="data-row"><span class="label">${r.label}</span><span class="value">${r.value}</span></div>`).join('\n          ')}
          <div class="insight">${insight}</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>`;
}

async function main() {
  const browser = await puppeteer.launch({ 
    headless: 'shell',
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });

  for (let i = 0; i < newConfigs.length; i++) {
    const config = newConfigs[i];
    const start = Date.now();
    process.stdout.write(`[${i+1}/${newConfigs.length}] ${config.name}... `);
    
    try {
      const page = await browser.newPage();
      await page.setViewport({ width: 1920, height: 1080 });
      
      const html = generateHTML(config);
      const tmpHtml = path.join(__dirname, `tmp-${config.id}.html`);
      fs.writeFileSync(tmpHtml, html);
      await page.goto('file://' + tmpHtml, { waitUntil: 'networkidle0', timeout: 15000 });
      
      // Wait for animations
      await new Promise(r => setTimeout(r, 4000));
      
      // Capture frames
      const framesDir = path.join(__dirname, `frames-${config.id}`);
      fs.mkdirSync(framesDir, { recursive: true });
      
      for (let f = 0; f < 150; f++) {
        await page.screenshot({ path: path.join(framesDir, `frame-${String(f).padStart(4, '0')}.png`) });
        await new Promise(r => setTimeout(r, 33));
      }
      
      // Encode to MP4
      const outPath = path.join(__dirname, 'output', `${config.id}.mp4`);
      execSync(`ffmpeg -y -framerate 30 -i "${framesDir}/frame-%04d.png" -c:v libx264 -pix_fmt yuv420p -crf 23 "${outPath}" 2>/dev/null`);
      
      // Cleanup
      fs.rmSync(framesDir, { recursive: true });
      fs.unlinkSync(tmpHtml);
      
      // Also copy to landing-pages output
      const landingOutput = path.join(__dirname, '../../mcpengine-repo/landing-pages/output');
      fs.mkdirSync(landingOutput, { recursive: true });
      fs.copyFileSync(outPath, path.join(landingOutput, `${config.id}.mp4`));
      
      await page.close();
      console.log(`✓ ${((Date.now() - start) / 1000).toFixed(1)}s`);
    } catch (err) {
      console.log(`✗ ${err.message}`);
    }
  }
  
  await browser.close();
  console.log('\n🎉 Done!');
}

main().catch(console.error);
