#!/usr/bin/env node
/**
 * MCP Animation Frame Generator - Single Panel Mode
 * Usage: node generate-single.js configs/your-config.json
 */

import fs from 'fs';
import path from 'path';

const configPath = process.argv[2];
if (!configPath) {
  console.error('Usage: node generate-single.js configs/your-config.json');
  process.exit(1);
}

const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
const outputDir = path.join('output', config.name);

fs.mkdirSync(outputDir, { recursive: true });

function generateListItems(items) {
  return items.map(item => `
    <div class="list-item">
      <div class="item-avatar">${item.avatar}</div>
      <div class="item-info">
        <div class="item-name">${item.name}</div>
        <div class="item-meta">${item.meta}</div>
      </div>
      <div class="item-status" style="background: ${item.statusColor};">${item.status}</div>
    </div>
  `).join('');
}

function generatePanel(panel) {
  let content = '';
  
  if (panel.type === 'list') {
    content = `
      <div class="panel-list">
        ${generateListItems(panel.items)}
      </div>
      ${panel.footer ? `
      <div class="panel-footer">
        <span>${panel.footer.left}</span>
        <span>${panel.footer.right}</span>
      </div>
      ` : ''}
    `;
  }
  
  return `
    <div class="embed-panel">
      <div class="panel-header">
        <div class="panel-icon" style="background: ${panel.iconColor};">${panel.icon}</div>
        <div class="panel-titles">
          <div class="panel-title">${panel.title}</div>
          ${panel.subtitle ? `<div class="panel-subtitle">${panel.subtitle}</div>` : ''}
        </div>
      </div>
      <div class="panel-content">
        ${content}
      </div>
    </div>
  `;
}

function generateHTML(config, frameType) {
  const showUserMessage = ['exchange', 'typing-ai', 'loading', 'final'].includes(frameType);
  const showTypingUser = frameType === 'typing-user';
  const showTypingAi = frameType === 'typing-ai';
  const showAiText = ['loading', 'final'].includes(frameType);
  const showPanel = frameType === 'final';
  const showLoading = frameType === 'loading';
  
  return `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=${config.dimensions.width}, height=${config.dimensions.height}">
  <title>${config.title}</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: #0f0f1a;
      width: ${config.dimensions.width}px;
      height: ${config.dimensions.height}px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .window {
      width: 1400px;
      height: 850px;
      background: #1a1a2e;
      border-radius: 16px;
      box-shadow: 0 25px 80px rgba(0,0,0,0.5);
      display: flex;
      flex-direction: column;
      border: 1px solid #2a2a4a;
      overflow: hidden;
    }
    .titlebar {
      height: 52px;
      background: #252540;
      display: flex;
      align-items: center;
      padding: 0 20px;
      border-bottom: 1px solid #2a2a4a;
      flex-shrink: 0;
    }
    .traffic-lights { display: flex; gap: 8px; }
    .light { width: 12px; height: 12px; border-radius: 50%; }
    .light.red { background: #ff5f57; }
    .light.yellow { background: #ffbd2e; }
    .light.green { background: #28ca41; }
    .title { flex: 1; text-align: center; color: #8888aa; font-size: 14px; font-weight: 500; }
    
    .chat-area { 
      flex: 1; 
      padding: 24px 32px; 
      display: flex; 
      flex-direction: column; 
      gap: 16px; 
      overflow: hidden;
    }
    
    .message { display: flex; flex-direction: column; }
    .message.user { align-self: flex-end; max-width: 70%; }
    .message.ai { align-self: flex-start; max-width: 85%; }
    
    .bubble { 
      padding: 16px 20px; 
      border-radius: 20px; 
      font-size: 15px; 
      line-height: 1.5; 
    }
    .message.user .bubble {
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      color: white;
      border-bottom-right-radius: 6px;
    }
    .message.ai .bubble.text {
      background: #2a2a4a;
      color: #e2e2f0;
      border-bottom-left-radius: 6px;
    }
    
    .typing-indicator {
      display: flex;
      gap: 5px;
      padding: 16px 20px;
      background: #2a2a4a;
      border-radius: 20px;
      width: fit-content;
    }
    .typing-dot {
      width: 8px;
      height: 8px;
      background: #6366f1;
      border-radius: 50%;
      animation: bounce 1.4s infinite ease-in-out;
    }
    .typing-dot:nth-child(2) { animation-delay: 0.2s; }
    .typing-dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes bounce {
      0%, 80%, 100% { transform: translateY(0); }
      40% { transform: translateY(-8px); }
    }
    
    .embed-panel {
      margin-top: 12px;
      background: #12121f;
      border-radius: 16px;
      border: 1px solid #2a2a4a;
      overflow: hidden;
      max-width: 600px;
    }
    .panel-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
      background: #1a1a2e;
      border-bottom: 1px solid #2a2a4a;
    }
    .panel-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      color: white;
    }
    .panel-titles { flex: 1; }
    .panel-title { font-size: 15px; font-weight: 600; color: #e2e2f0; }
    .panel-subtitle { font-size: 12px; color: #8888aa; margin-top: 2px; }
    
    .panel-content { padding: 12px; }
    .panel-list { display: flex; flex-direction: column; gap: 8px; }
    
    .list-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: #1a1a2e;
      border-radius: 10px;
    }
    .item-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #3a3a5a;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      color: #8888aa;
      flex-shrink: 0;
    }
    .item-info { flex: 1; min-width: 0; }
    .item-name { 
      color: #e2e2f0; 
      font-weight: 500; 
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .item-meta { color: #6a6a8a; font-size: 12px; margin-top: 2px; }
    .item-status { 
      padding: 5px 10px; 
      border-radius: 6px; 
      font-size: 11px; 
      font-weight: 600; 
      color: white; 
      text-transform: uppercase;
      flex-shrink: 0;
    }
    
    .panel-footer {
      display: flex;
      justify-content: space-between;
      padding: 12px 16px;
      background: #1a1a2e;
      border-top: 1px solid #2a2a4a;
      font-size: 13px;
      color: #8888aa;
    }
    .panel-footer span:last-child { color: #22c55e; font-weight: 600; }
    
    .skeleton {
      background: linear-gradient(90deg, #2a2a4a 25%, #3a3a5a 50%, #2a2a4a 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
      border-radius: 8px;
      height: 60px;
      margin: 8px 0;
    }
    @keyframes shimmer { 
      0% { background-position: 200% 0; } 
      100% { background-position: -200% 0; } 
    }
    
    .input-area { 
      padding: 16px 24px 24px; 
      border-top: 1px solid #2a2a4a; 
      flex-shrink: 0; 
    }
    .input-wrapper {
      display: flex;
      gap: 12px;
      align-items: center;
      background: #12121f;
      border: 1px solid #2a2a4a;
      border-radius: 14px;
      padding: 12px 16px;
    }
    .input-field { flex: 1; color: #5a5a7a; font-size: 14px; }
    .send-btn {
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .send-btn svg { width: 18px; height: 18px; color: white; }
  </style>
</head>
<body>
  <div class="window">
    <div class="titlebar">
      <div class="traffic-lights">
        <div class="light red"></div>
        <div class="light yellow"></div>
        <div class="light green"></div>
      </div>
      <div class="title">${config.title}</div>
      <div style="width: 52px;"></div>
    </div>
    
    <div class="chat-area">
      ${showTypingUser ? `
      <div class="message user">
        <div class="typing-indicator">
          <div class="typing-dot"></div>
          <div class="typing-dot"></div>
          <div class="typing-dot"></div>
        </div>
      </div>
      ` : ''}
      
      ${showUserMessage ? `
      <div class="message user">
        <div class="bubble">${config.userPrompt}</div>
      </div>
      ` : ''}
      
      ${showTypingAi ? `
      <div class="message ai">
        <div class="typing-indicator">
          <div class="typing-dot"></div>
          <div class="typing-dot"></div>
          <div class="typing-dot"></div>
        </div>
      </div>
      ` : ''}
      
      ${showAiText ? `
      <div class="message ai">
        <div class="bubble text">${config.aiResponse}</div>
        ${showLoading ? `
        <div class="embed-panel">
          <div class="panel-header">
            <div class="panel-icon" style="background: ${config.panel.iconColor};">${config.panel.icon}</div>
            <div class="panel-titles">
              <div class="panel-title">${config.panel.title}</div>
            </div>
          </div>
          <div class="panel-content">
            <div class="skeleton"></div>
            <div class="skeleton"></div>
            <div class="skeleton"></div>
          </div>
        </div>
        ` : ''}
        ${showPanel ? generatePanel(config.panel) : ''}
      </div>
      ` : ''}
    </div>
    
    <div class="input-area">
      <div class="input-wrapper">
        <span class="input-field">Type a message...</span>
        <div class="send-btn">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M22 2L11 13M22 2L15 22L11 13L2 9L22 2Z"/>
          </svg>
        </div>
      </div>
    </div>
  </div>
</body>
</html>`;
}

// Generate frames
const frames = [
  { name: 'frame-01-empty', type: 'empty' },
  { name: 'frame-02-typing-user', type: 'typing-user' },
  { name: 'frame-03-exchange', type: 'exchange' },
  { name: 'frame-04-typing-ai', type: 'typing-ai' },
  { name: 'frame-05-loading', type: 'loading' },
  { name: 'frame-06-final', type: 'final' }
];

frames.forEach(frame => {
  const html = generateHTML(config, frame.type);
  const filePath = path.join(outputDir, `${frame.name}.html`);
  fs.writeFileSync(filePath, html);
  console.log(`Generated: ${filePath}`);
});

console.log(`\n✓ Generated ${frames.length} frames in ${outputDir}/`);
console.log(`\nTo preview: open ${outputDir}/frame-06-final.html`);
