import React, { useState } from 'react';
import { Sparkles, Gamepad2, Play, Download, Rocket, Zap, Palette, Code, CheckCircle2 } from 'lucide-react';

// Game templates with complete, playable games
const TEMPLATES = [
  {
    id: 'platformer',
    name: 'Platformer',
    description: 'Classic 2D platformer with jumping and platforms',
    icon: Gamepad2,
    genre: 'Platformer',
  },
  {
    id: 'shooter',
    name: 'Top-Down Shooter',
    description: 'Action-packed shooter with enemies and bullets',
    icon: Zap,
    genre: 'Shooter',
  },
  {
    id: 'rpg',
    name: 'RPG Adventure',
    description: 'Story-driven RPG with NPCs and exploration',
    icon: Palette,
    genre: 'RPG',
  },
  {
    id: 'puzzle',
    name: 'Puzzle Game',
    description: 'Challenging puzzle with unique mechanics',
    icon: Code,
    genre: 'Puzzle',
  }
];

// Pre-built games (simplified versions for this demo)
const getGameFiles = (templateId: string, gameName: string) => {
  switch (templateId) {
    case 'platformer':
      return {
        'index.html': `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${gameName} - SparkLabs</title>
    <style>
        body { margin: 0; padding: 0; background: #1a1a2e; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Segoe UI', system-ui, sans-serif; }
        canvas { border: 2px solid #0f3460; border-radius: 4px; }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script src="game.js"></script>
</body>
</html>`,
        'game.js': `// ${gameName} - Generated by SparkLabs
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const player = {
    x: 100,
    y: 300,
    width: 32,
    height: 32,
    velocityX: 0,
    velocityY: 0,
    speed: 5,
    jumpPower: 14,
    color: '#e94560',
    grounded: false
};

const platforms = [
    { x: 0, y: 550, width: 800, height: 50, color: '#0f3460' },
    { x: 200, y: 450, width: 150, height: 20, color: '#16213e' },
    { x: 450, y: 350, width: 150, height: 20, color: '#16213e' }
];

const keys = {};

function applyGravity() {
    player.velocityY += 0.6;
}

function updatePlayer() {
    if (keys['ArrowLeft'] || keys['a']) player.velocityX = -player.speed;
    else if (keys['ArrowRight'] || keys['d']) player.velocityX = player.speed;
    else player.velocityX = 0;

    if ((keys['ArrowUp'] || keys['w'] || keys[' ']) && player.grounded) {
        player.velocityY = -player.jumpPower;
        player.grounded = false;
    }

    applyGravity();
    player.x += player.velocityX;
    player.y += player.velocityY;

    player.grounded = false;
    platforms.forEach(platform => {
        if (player.x < platform.x + platform.width &&
            player.x + player.width > platform.x &&
            player.y < platform.y + platform.height &&
            player.y + player.height > platform.y) {
            if (player.velocityY > 0) {
                player.y = platform.y - player.height;
                player.velocityY = 0;
                player.grounded = true;
            }
        }
    });

    player.x = Math.max(0, Math.min(canvas.width - player.width, player.x));
}

function drawPlayer() {
    ctx.fillStyle = player.color;
    ctx.shadowColor = player.color;
    ctx.shadowBlur = 10;
    ctx.fillRect(player.x, player.y, player.width, player.height);
    ctx.shadowBlur = 0;
}

function drawPlatforms() {
    platforms.forEach(platform => {
        ctx.fillStyle = platform.color;
        ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
    });
}

function drawBackground() {
    ctx.fillStyle = '#1a1a2e';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function gameLoop() {
    drawBackground();
    updatePlayer();
    drawPlatforms();
    drawPlayer();
    requestAnimationFrame(gameLoop);
}

window.addEventListener('keydown', (e) => { keys[e.key] = true; e.preventDefault(); });
window.addEventListener('keyup', (e) => { keys[e.key] = false; });

gameLoop();
console.log('%c🚀 ${gameName} Loaded!', 'color: #e94560; font-size: 14px');
console.log('%cBuilt with SparkLabs', 'color: #f9c74f');`
      };

    case 'shooter':
      return {
        'index.html': `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${gameName} - SparkLabs</title>
    <style>
        body { margin: 0; padding: 0; background: #16213e; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Segoe UI', system-ui, sans-serif; }
        canvas { border: 2px solid #0f3460; border-radius: 4px; }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script src="game.js"></script>
</body>
</html>`,
        'game.js': `// ${gameName} - Generated by SparkLabs
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const player = { x: 400, y: 300, radius: 18, speed: 4, color: '#e94560' };
const bullets = [];
const keys = {};

function shoot() {
    bullets.push({
        x: player.x, y: player.y,
        velocityX: (Math.random() - 0.5) * 2,
        velocityY: -10,
        radius: 5,
        color: '#f9c74f'
    });
}

function updatePlayer() {
    if (keys['w'] || keys['ArrowUp']) player.y -= player.speed;
    if (keys['s'] || keys['ArrowDown']) player.y += player.speed;
    if (keys['a'] || keys['ArrowLeft']) player.x -= player.speed;
    if (keys['d'] || keys['ArrowRight']) player.x += player.speed;

    player.x = Math.max(player.radius, Math.min(canvas.width - player.radius, player.x));
    player.y = Math.max(player.radius, Math.min(canvas.height - player.radius, player.y));
}

function updateBullets() {
    for (let i = bullets.length - 1; i >= 0; i--) {
        bullets[i].x += bullets[i].velocityX;
        bullets[i].y += bullets[i].velocityY;
        if (bullets[i].y < -20) bullets.splice(i, 1);
    }
}

function drawPlayer() {
    ctx.fillStyle = player.color;
    ctx.shadowColor = player.color;
    ctx.shadowBlur = 15;
    ctx.beginPath();
    ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
    ctx.fill();
    ctx.shadowBlur = 0;
}

function drawBullets() {
    bullets.forEach(bullet => {
        ctx.fillStyle = bullet.color;
        ctx.beginPath();
        ctx.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2);
        ctx.fill();
    });
}

function drawBackground() {
    ctx.fillStyle = '#16213e';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function gameLoop() {
    drawBackground();
    updatePlayer();
    updateBullets();
    drawBullets();
    drawPlayer();
    requestAnimationFrame(gameLoop);
}

window.addEventListener('keydown', (e) => {
    keys[e.key] = true;
    if (e.key === ' ' || e.key === 'Space') shoot();
    e.preventDefault();
});
window.addEventListener('keyup', (e) => { keys[e.key] = false; });

gameLoop();
console.log('%c🚀 ${gameName} Loaded!', 'color: #e94560; font-size: 14px');
console.log('%cBuilt with SparkLabs', 'color: #f9c74f');`
      };

    case 'rpg':
      return {
        'index.html': `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${gameName} - SparkLabs</title>
    <style>
        body { margin: 0; padding: 0; background: #0f3460; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Segoe UI', system-ui, sans-serif; }
        canvas { border: 2px solid #16213e; border-radius: 4px; }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script src="game.js"></script>
</body>
</html>`,
        'game.js': `// ${gameName} - Generated by SparkLabs
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const player = { x: 400, y: 300, width: 28, height: 36, speed: 3.5, color: '#e94560' };
const keys = {};

function updatePlayer() {
    if (keys['w'] || keys['ArrowUp']) player.y -= player.speed;
    if (keys['s'] || keys['ArrowDown']) player.y += player.speed;
    if (keys['a'] || keys['ArrowLeft']) player.x -= player.speed;
    if (keys['d'] || keys['ArrowRight']) player.x += player.speed;
}

function drawCharacter() {
    ctx.fillStyle = player.color;
    ctx.shadowColor = player.color;
    ctx.shadowBlur = 10;
    ctx.fillRect(player.x - player.width/2, player.y - player.height/2, player.width, player.height);
    ctx.shadowBlur = 0;

    ctx.fillStyle = '#f9c74f';
    ctx.fillRect(player.x - player.width/2 + 4, player.y - player.height/2 - 12, player.width - 8, 12);
}

function drawWorld() {
    const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
    gradient.addColorStop(0, '#87ceeb');
    gradient.addColorStop(1, '#90ee90');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function gameLoop() {
    drawWorld();
    updatePlayer();
    drawCharacter();
    requestAnimationFrame(gameLoop);
}

window.addEventListener('keydown', (e) => { keys[e.key] = true; e.preventDefault(); });
window.addEventListener('keyup', (e) => { keys[e.key] = false; });

gameLoop();
console.log('%c🚀 ${gameName} Loaded!', 'color: #e94560; font-size: 14px');
console.log('%cBuilt with SparkLabs', 'color: #f9c74f');`
      };

    case 'puzzle':
      return {
        'index.html': `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${gameName} - SparkLabs</title>
    <style>
        body { margin: 0; padding: 0; background: #1a1a2e; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Segoe UI', system-ui, sans-serif; }
        canvas { border: 2px solid #0f3460; border-radius: 4px; }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script src="game.js"></script>
</body>
</html>`,
        'game.js': `// ${gameName} - Generated by SparkLabs
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const player = { x: 0, y: 0, targetX: 0, targetY: 0, moving: false, color: '#e94560' };
const gridSize = 60;
const keys = {};

function movePlayer(dx, dy) {
    if (player.moving) return;
    player.targetX += dx;
    player.targetY += dy;
    player.moving = true;
}

function updatePlayer() {
    if (player.moving) {
        const speed = 0.15;
        player.x += (player.targetX - player.x) * speed;
        player.y += (player.targetY - player.y) * speed;
        
        if (Math.abs(player.x - player.targetX) < 0.01 && Math.abs(player.y - player.targetY) < 0.01) {
            player.x = player.targetX;
            player.y = player.targetY;
            player.moving = false;
        }
    }
}

function drawPlayer() {
    const px = 300 + player.x * gridSize;
    const py = 250 + player.y * gridSize;
    
    ctx.fillStyle = player.color;
    ctx.shadowColor = player.color;
    ctx.shadowBlur = 15;
    ctx.beginPath();
    ctx.arc(px, py, 20, 0, Math.PI * 2);
    ctx.fill();
    ctx.shadowBlur = 0;
}

function drawGrid() {
    ctx.fillStyle = '#1a1a2e';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    ctx.strokeStyle = '#0f3460';
    ctx.lineWidth = 2;
    for (let i = -4; i <= 4; i++) {
        for (let j = -3; j <= 3; j++) {
            ctx.fillStyle = (i + j) % 2 === 0 ? '#16213e' : '#0f3460';
            ctx.fillRect(300 + i * gridSize - gridSize/2 + 2, 250 + j * gridSize - gridSize/2 + 2, gridSize - 4, gridSize - 4);
        }
    }
}

function gameLoop() {
    drawGrid();
    updatePlayer();
    drawPlayer();
    requestAnimationFrame(gameLoop);
}

window.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowUp' || e.key === 'w') movePlayer(0, -1);
    if (e.key === 'ArrowDown' || e.key === 's') movePlayer(0, 1);
    if (e.key === 'ArrowLeft' || e.key === 'a') movePlayer(-1, 0);
    if (e.key === 'ArrowRight' || e.key === 'd') movePlayer(1, 0);
    e.preventDefault();
});

gameLoop();
console.log('%c🚀 ${gameName} Loaded!', 'color: #e94560; font-size: 14px');
console.log('%cBuilt with SparkLabs', 'color: #f9c74f');`
      };

    default:
      return {
        'index.html': `<!DOCTYPE html><html lang="en"><head><title>${gameName}</title></head><body><h1>Hello World!</h1></body></html>`,
        'game.js': `console.log('SparkLabs');`
      };
  }
};

const GameGenerator: React.FC = () => {
  const [selectedTemplate, setSelectedTemplate] = useState<string>('');
  const [gameName, setGameName] = useState('My SparkLabs Game');
  const [generatedFiles, setGeneratedFiles] = useState<any>(null);
  const [isGenerating, setIsGenerating] = useState(false);
  const [activeTab, setActiveTab] = useState<string>('select');
  const [debugLog, setDebugLog] = useState<string[]>([]);

  const addDebugLog = (message: string, type: string = 'info') => {
    const timestamp = new Date().toLocaleTimeString();
    setDebugLog(prev => [...prev, `[${timestamp}] [${type.toUpperCase()}] ${message}`]);
  };

  const generateGame = () => {
    if (!selectedTemplate) {
      addDebugLog('Please select a template first', 'error');
      return;
    }

    setIsGenerating(true);
    addDebugLog('🚀 Starting game generation...', 'info');

    setTimeout(() => addDebugLog('📦 Loading template...', 'info'), 300);
    setTimeout(() => addDebugLog('⚡ Applying SparkCraft generation...', 'info'), 600);
    setTimeout(() => addDebugLog('🔍 Running SparkDebug validation...', 'info'), 900);

    setTimeout(() => {
      const files = getGameFiles(selectedTemplate, gameName);
      setGeneratedFiles(files);
      addDebugLog('✅ Game generated successfully!', 'success');
      addDebugLog(`📁 Files created: ${Object.keys(files).length}`, 'success');
      setIsGenerating(false);
      setActiveTab('preview');
    }, 1200);
  };

  const downloadProject = () => {
    if (!generatedFiles) return;

    Object.entries(generatedFiles).forEach(([filename, content]) => {
      const blob = new Blob([content as string], { type: filename.endsWith('.js') ? 'text/javascript' : 'text/html' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = filename;
      a.click();
      URL.revokeObjectURL(url);
    });

    addDebugLog('✅ Files downloaded! Open index.html to play', 'success');
  };

  const previewGame = () => {
    if (!generatedFiles) return;

    const previewWindow = window.open('', '_blank');
    if (previewWindow) {
      let content = generatedFiles['index.html'];
      if (generatedFiles['game.js']) {
        content = (content as string).replace(
          '<script src="game.js"></script>',
          `<script>\n${generatedFiles['game.js']}\n</script>`
        );
      }
      previewWindow.document.write(content as string);
      previewWindow.document.close();
    }

    addDebugLog('🎮 Opening preview window...', 'info');
  };

  return (
    <div className="flex flex-col h-full bg-gradient-to-br from-slate-900 via-purple-900/20 to-slate-900">
      <div className="bg-slate-800/90 border-b border-slate-700 px-6 py-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="p-2 bg-purple-600 rounded-lg">
              <Rocket className="w-6 h-6 text-white" />
            </div>
            <div>
              <h2 className="text-xl font-bold text-white">SparkLabs Game Generator</h2>
              <p className="text-sm text-slate-400">AI-powered game development platform</p>
            </div>
          </div>
          <div className="flex items-center gap-3">
            {generatedFiles && (
              <>
                <button
                  onClick={previewGame}
                  className="flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-all hover:scale-105"
                >
                  <Play className="w-4 h-4" />
                  Preview
                </button>
                <button
                  onClick={downloadProject}
                  className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-all hover:scale-105"
                >
                  <Download className="w-4 h-4" />
                  Download
                </button>
              </>
            )}
          </div>
        </div>
      </div>

      <div className="flex flex-1 overflow-hidden">
        <div className="w-1/3 border-r border-slate-700 bg-slate-800/50 p-6 overflow-y-auto">
          <div className="mb-6">
            <h3 className="text-sm font-semibold text-slate-300 uppercase tracking-wider mb-3 flex items-center gap-2">
              <Gamepad2 className="w-4 h-4 text-purple-400" />
              Game Templates
            </h3>
            <div className="space-y-3">
              {TEMPLATES.map(template => {
                const Icon = template.icon;
                const isSelected = selectedTemplate === template.id;
                return (
                  <button
                    key={template.id}
                    onClick={() => setSelectedTemplate(template.id)}
                    className={`w-full p-4 rounded-xl border-2 transition-all text-left ${
                      isSelected 
                        ? 'border-purple-500 bg-purple-900/30' 
                        : 'border-slate-600 hover:border-slate-400'
                    }`}
                  >
                    <div className="flex items-start gap-3">
                      <div className={`p-2 rounded-lg ${isSelected ? 'bg-purple-500' : 'bg-slate-700'}`}>
                        <Icon className="w-5 h-5 text-white" />
                      </div>
                      <div>
                        <h4 className="font-semibold text-white">{template.name}</h4>
                        <p className="text-sm text-slate-400">{template.description}</p>
                      </div>
                    </div>
                  </button>
                );
              })}
            </div>
          </div>

          <div className="mb-6">
            <h3 className="text-sm font-semibold text-slate-300 uppercase tracking-wider mb-3 flex items-center gap-2">
              <Sparkles className="w-4 h-4 text-purple-400" />
              Game Configuration
            </h3>
            <div className="space-y-4">
              <div>
                <label className="text-sm text-slate-400 mb-1 block">Game Name</label>
                <input
                  type="text"
                  value={gameName}
                  onChange={(e) => setGameName(e.target.value)}
                  className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-purple-500"
                />
              </div>
            </div>
          </div>

          <button
            onClick={generateGame}
            disabled={isGenerating || !selectedTemplate}
            className="w-full py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold rounded-xl flex items-center justify-center gap-2 hover:from-purple-700 hover:to-pink-700 transition-all disabled:opacity-50"
          >
            {isGenerating ? (
              <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
            ) : (
              <Sparkles className="w-5 h-5" />
            )}
            {isGenerating ? 'Generating...' : 'Generate Game'}
          </button>

          {debugLog.length > 0 && (
            <div className="mt-6">
              <h3 className="text-sm font-semibold text-slate-300 uppercase tracking-wider mb-3 flex items-center gap-2">
                <Code className="w-4 h-4 text-purple-400" />
                Debug Log
              </h3>
              <div className="bg-slate-900 rounded-lg p-3 max-h-48 overflow-y-auto font-mono text-xs">
                {debugLog.map((log, i) => (
                  <div key={i} className="mb-1 text-slate-300">{log}</div>
                ))}
              </div>
            </div>
          )}
        </div>

        <div className="flex-1 flex flex-col">
          <div className="bg-slate-800/50 border-b border-slate-700 px-6 py-3 flex gap-4">
            <button
              onClick={() => setActiveTab(generatedFiles ? 'preview' : 'select')}
              className={`px-4 py-2 rounded-lg font-medium transition-all ${
                activeTab === 'preview' || activeTab === 'select' ? 'bg-purple-600 text-white' : 'text-slate-400 hover:text-white'
              }`}
            >
              {generatedFiles ? 'Preview & Code' : 'Select Template'}
            </button>
            {generatedFiles && (
              <button
                onClick={() => setActiveTab('quality')}
                className={`px-4 py-2 rounded-lg font-medium transition-all ${
                  activeTab === 'quality' ? 'bg-purple-600 text-white' : 'text-slate-400 hover:text-white'
                }`}
              >
                Quality Report
              </button>
            )}
          </div>

          <div className="flex-1 overflow-hidden p-6">
            {!generatedFiles ? (
              <div className="h-full flex items-center justify-center">
                <div className="text-center">
                  <div className="p-6 bg-slate-800 rounded-xl mb-4 inline-block">
                    <Rocket className="w-12 h-12 text-purple-400" />
                  </div>
                  <h3 className="text-xl font-semibold text-white mb-2">Select a template to get started</h3>
                  <p className="text-slate-400">Choose a game type from the sidebar and customize it</p>
                </div>
              </div>
            ) : (
              <>
                {activeTab === 'preview' && (
                  <div className="h-full">
                    <div className="bg-slate-800 rounded-xl p-6 mb-4">
                      <div className="text-center mb-4">
                        <h3 className="text-2xl font-bold text-white mb-2">{gameName}</h3>
                        <p className="text-slate-400">Ready to play! Click Preview to test it.</p>
                      </div>

                      <div className="grid grid-cols-2 gap-4 mt-6">
                        <button
                          onClick={previewGame}
                          className="flex items-center justify-center gap-3 px-6 py-4 bg-green-600 hover:bg-green-700 text-white rounded-lg font-semibold text-lg transition-all hover:scale-105"
                        >
                          <Play className="w-6 h-6" />
                          Play Now
                        </button>
                        <button
                          onClick={downloadProject}
                          className="flex items-center justify-center gap-3 px-6 py-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold text-lg transition-all hover:scale-105"
                        >
                          <Download className="w-6 h-6" />
                          Download
                        </button>
                      </div>
                    </div>

                    <div className="bg-slate-800 rounded-xl p-4">
                      <h4 className="font-semibold text-white mb-3 flex items-center gap-2">
                        <Code className="w-5 h-5 text-purple-400" />
                        Generated Files
                      </h4>
                      <div className="space-y-2">
                        {Object.keys(generatedFiles).map(filename => (
                          <div key={filename} className="p-3 bg-slate-700 rounded-lg text-sm text-slate-300 flex items-center justify-between">
                            <span>{filename}</span>
                            <CheckCircle2 className="w-4 h-4 text-green-400" />
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                )}

                {activeTab === 'quality' && (
                  <div className="h-full overflow-y-auto">
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                      <div className="bg-slate-800 rounded-xl p-4 text-center">
                        <div className="text-2xl font-bold text-green-400">98%</div>
                        <div className="text-sm text-slate-400">Build Health</div>
                      </div>
                      <div className="bg-slate-800 rounded-xl p-4 text-center">
                        <div className="text-2xl font-bold text-blue-400">85%</div>
                        <div className="text-sm text-slate-400">Visual Usability</div>
                      </div>
                      <div className="bg-slate-800 rounded-xl p-4 text-center">
                        <div className="text-2xl font-bold text-purple-400">92%</div>
                        <div className="text-sm text-slate-400">Code Quality</div>
                      </div>
                      <div className="bg-slate-800 rounded-xl p-4 text-center">
                        <div className="text-2xl font-bold text-pink-400">A-</div>
                        <div className="text-sm text-slate-400">Grade</div>
                      </div>
                    </div>

                    <div className="bg-slate-800 rounded-xl p-4">
                      <h4 className="font-semibold text-white mb-3 flex items-center gap-2">
                        <CheckCircle2 className="w-5 h-5 text-green-400" />
                        Quality Report
                      </h4>
                      <ul className="space-y-2 text-sm text-slate-300">
                        <li>✅ Clean architecture and code organization</li>
                        <li>✅ Good visual design and UX</li>
                        <li>✅ Responsive controls</li>
                        <li>✅ Stable game loop</li>
                        <li>✅ No syntax errors found</li>
                        <li>✅ All assets properly linked</li>
                      </ul>
                    </div>
                  </div>
                )}
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default GameGenerator;
