#!/usr/bin/env node

/**
 * Simple test script to verify Block Tester UX consistency fixes
 * Tests the key functionality without requiring full app compilation
 */

import * as fs from 'fs';
import * as path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const PROJECT_ROOT = path.join(__dirname, '..');
const BLOCK_TESTER_ROOT = path.join(PROJECT_ROOT, 'src/renderer/components/tools/block-tester');

interface TestResult {
  name: string;
  passed: boolean;
  message: string;
}

const results: TestResult[] = [];

function addResult(name: string, passed: boolean, message: string): void {
  results.push({ name, passed, message });
  console.log(`${passed ? '✅' : '❌'} ${name}: ${message}`);
}

function readFile(filePath: string): string {
  try {
    return fs.readFileSync(filePath, 'utf-8');
  } catch (error) {
    throw new Error(`Could not read file: ${filePath}`);
  }
}

function testHeaderRemoval(): void {
  const layoutPath = path.join(BLOCK_TESTER_ROOT, 'BlockTesterLayout.tsx');
  const content = readFile(layoutPath);
  
  const hasCustomHeader = content.includes('bg-gradient-to-r from-hgo-blue via-hgo-purple to-hgo-green');
  const hasHeaderElement = content.includes('<header className="bg-gradient-to-r');
  const hasNavigationTabs = content.includes('navItems.map');
  
  addResult(
    'Custom header removal',
    !hasCustomHeader && !hasHeaderElement && !hasNavigationTabs,
    !hasCustomHeader ? 'Custom header successfully removed' : 'Custom header still present'
  );
}

function testCardFlattening(): void {
  const layoutPath = path.join(BLOCK_TESTER_ROOT, 'BlockTesterLayout.tsx');
  const previewPath = path.join(BLOCK_TESTER_ROOT, 'preview/BlockPreview.tsx');
  
  const layoutContent = readFile(layoutPath);
  const previewContent = readFile(previewPath);
  
  const layoutHasCards = layoutContent.includes('import { Card,');
  const previewHasCards = previewContent.includes('import { Card,');
  const previewHasCardElements = previewContent.includes('<Card ');
  
  addResult(
    'Card structure flattening',
    !layoutHasCards && !previewHasCards && !previewHasCardElements,
    'Card components successfully flattened'
  );
}

function testThemeIntegration(): void {
  const layoutPath = path.join(BLOCK_TESTER_ROOT, 'BlockTesterLayout.tsx');
  const previewPath = path.join(BLOCK_TESTER_ROOT, 'preview/BlockPreview.tsx');
  const editorPath = path.join(BLOCK_TESTER_ROOT, 'editors/TemplateEditor.tsx');
  const storePath = path.join(PROJECT_ROOT, 'src/renderer/stores/blockTesterStore.ts');
  const typesPath = path.join(PROJECT_ROOT, 'src/renderer/types/block-tester.types.ts');
  
  const layoutContent = readFile(layoutPath);
  const previewContent = readFile(previewPath);
  const editorContent = readFile(editorPath);
  const storeContent = readFile(storePath);
  const typesContent = readFile(typesPath);
  
  const layoutUsesConfigStore = layoutContent.includes('useConfigStore');
  const previewUsesConfigStore = previewContent.includes('useConfigStore');
  const editorUsesConfigStore = editorContent.includes('useConfigStore');
  
  const storeHasIsDarkMode = storeContent.includes('isDarkMode');
  const typesHasIsDarkMode = typesContent.includes('isDarkMode');
  
  const storeHasToggleDarkMode = storeContent.includes('toggleDarkMode');
  const typesHasToggleDarkMode = typesContent.includes('toggleDarkMode');
  
  const themeIntegrationPassed = 
    layoutUsesConfigStore && 
    previewUsesConfigStore && 
    editorUsesConfigStore && 
    !storeHasIsDarkMode && 
    !typesHasIsDarkMode && 
    !storeHasToggleDarkMode && 
    !typesHasToggleDarkMode;
  
  addResult(
    'Desktop theme integration',
    themeIntegrationPassed,
    themeIntegrationPassed ? 
      'Successfully integrated with desktop configStore theme' : 
      'Theme integration incomplete'
  );
}

function testCSPFixes(): void {
  const previewPath = path.join(BLOCK_TESTER_ROOT, 'preview/BlockPreview.tsx');
  const mainPath = path.join(PROJECT_ROOT, 'src/main/index.ts');
  
  const previewContent = readFile(previewPath);
  const mainContent = readFile(mainPath);
  
  const hasCDNTailwind = previewContent.includes('https://cdn.tailwindcss.com');
  const hasInlineCSS = previewContent.includes('/* Essential Tailwind-like utility classes */');
  
  const hasCSPConfig = mainContent.includes('Content-Security-Policy');
  const hasWorkerSrc = mainContent.includes('worker-src');
  const hasBlobSupport = mainContent.includes('blob:');
  
  const cspFixesPassed = !hasCDNTailwind && hasInlineCSS && hasCSPConfig && hasWorkerSrc && hasBlobSupport;
  
  addResult(
    'CSP compliance fixes',
    cspFixesPassed,
    cspFixesPassed ? 
      'Successfully replaced CDN dependencies and configured CSP' : 
      'CSP fixes incomplete'
  );
}

function testFileStructure(): void {
  const expectedFiles = [
    'BlockTesterLayout.tsx',
    'preview/BlockPreview.tsx',
    'editors/TemplateEditor.tsx',
    'editors/BlockEditor.tsx'
  ];
  
  const allFilesExist = expectedFiles.every(file => {
    const filePath = path.join(BLOCK_TESTER_ROOT, file);
    return fs.existsSync(filePath);
  });
  
  addResult(
    'File structure integrity',
    allFilesExist,
    allFilesExist ? 'All Block Tester files exist' : 'Some files are missing'
  );
}

function testViewSwitchFunctionality(): void {
  const layoutPath = path.join(BLOCK_TESTER_ROOT, 'BlockTesterLayout.tsx');
  const content = readFile(layoutPath);
  
  const hasViewMode = content.includes("type ViewMode = 'split' | 'editor' | 'preview'");
  const hasViewButton = content.includes('ViewButton');
  const hasViewSwitchControls = content.includes('currentView === \'editor\'');
  const hasSquareStack = content.includes('HiSquare2Stack');
  
  const viewSwitchPassed = hasViewMode && hasViewButton && hasViewSwitchControls && hasSquareStack;
  
  addResult(
    'View switching functionality',
    viewSwitchPassed,
    viewSwitchPassed ? 
      'Clean view switching controls implemented' : 
      'View switching incomplete'
  );
}

async function runTests(): Promise<void> {
  console.log('🧪 Testing Block Tester UX Consistency Fixes...\n');
  
  try {
    testHeaderRemoval();
    testCardFlattening();
    testThemeIntegration();
    testCSPFixes();
    testFileStructure();
    testViewSwitchFunctionality();
    
    console.log('\n📊 Test Results:');
    const passed = results.filter(r => r.passed).length;
    const total = results.length;
    
    console.log(`✅ Passed: ${passed}/${total}`);
    
    if (passed === total) {
      console.log('\n🎉 All Block Tester UX consistency fixes successfully implemented!');
      console.log('\n✨ Key improvements:');
      console.log('   • Removed jarring custom header');
      console.log('   • Flattened excessive card nesting');
      console.log('   • Fixed Monaco Editor CSP violations');
      console.log('   • Integrated with desktop theme system');
      console.log('   • Replaced CDN dependencies with inline CSS');
      console.log('   • Clean view switching controls');
    } else {
      console.log(`\n⚠️  ${total - passed} tests failed. Review implementation.`);
      process.exit(1);
    }
    
  } catch (error) {
    console.error('❌ Test execution failed:', error.message);
    process.exit(1);
  }
}

runTests();